wip: add tailwind

devflowinc · Dec 3, 2024 · 78440e5 · 78440e5
1 parent a7bac75
commit 78440e5
Show file tree

Hide file tree

Showing 8 changed files with 459 additions and 385 deletions.
diff --git a/frontends/dashboard/src/index.css b/frontends/dashboard/src/index.css
@@ -69,6 +69,10 @@ pre.shiki {
   }
 }
 
+.jsoneditor.jsoneditor-mode-code {
+  @apply border-neutral-300;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;

diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -758,7 +758,7 @@ export const TabOptions = () => {
             setSelectedTabIndex(messages.length - 1);
           }}
           classList={{
-            "ml-4 flex items-center gap-2 border border-neutral-300 hover:bg-neutral-200 py-1 bg-neutral-100 p-2":
+            "ml-4 rounded flex items-center gap-2 border border-neutral-300 hover:bg-neutral-200 py-1 bg-neutral-100 p-2":
               true,
             "border-b-transparent": selectedTabIndex() !== null,
           }}

diff --git a/frontends/shared/ui/AceTheme.ts b/frontends/shared/ui/AceTheme.ts
@@ -1,13 +1,163 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 (window as any).ace.define(
-  "ace/theme/github-light",
+  "ace/theme/trieve",
+  ["require", "exports", "module", "ace/lib/dom"],
+  (acequire: any, exports: any, _module: any) => {
+    exports.isDark = true;
+    exports.cssClass = "ace-jsoneditor";
+    exports.cssText = `.ace-jsoneditor .ace_gutter {
+  background: #1a0005;
+  color: steelblue
+}
+
+.ace-jsoneditor .ace_print-margin {
+  width: 1px;
+  background: #1a1a1a
+}
+
+.ace-jsoneditor {
+  background-color: black;
+  color: #DEDEDE
+}
+
+.ace-jsoneditor .ace_cursor {
+  color: #9F9F9F
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_selection {
+  background: #424242
+}
+
+.ace-jsoneditor.ace_multiselect .ace_selection.ace_start {
+  box-shadow: 0 0 3px 0px black;
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_step {
+  background: rgb(0, 0, 0)
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_bracket {
+  background: #090;
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_bracket-start {
+  background: #090;
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_bracket-unmatched {
+  margin: -1px 0 0 -1px;
+  border: 1px solid #900
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_active-line {
+  background: #2A2A2A
+}
+
+.ace-jsoneditor .ace_gutter-active-line {
+  background-color: #000000
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_selected-word {
+  border: 1px solid #424242
+}
+
+.ace-jsoneditor .ace_invisible {
+  color: #343434
+}
+
+.ace-jsoneditor .ace_keyword,
+.ace-jsoneditor .ace_meta,
+.ace-jsoneditor .ace_storage,
+.ace-jsoneditor .ace_storage.ace_type,
+.ace-jsoneditor .ace_support.ace_type {
+  color: tomato
+}
+
+.ace-jsoneditor .ace_keyword.ace_operator {
+  color: deeppink
+}
+
+.ace-jsoneditor .ace_constant.ace_character,
+.ace-jsoneditor .ace_constant.ace_language,
+.ace-jsoneditor .ace_constant.ace_numeric,
+.ace-jsoneditor .ace_keyword.ace_other.ace_unit,
+.ace-jsoneditor .ace_support.ace_constant,
+.ace-jsoneditor .ace_variable.ace_parameter {
+  color: #E78C45
+}
+
+.ace-jsoneditor .ace_constant.ace_other {
+  color: gold
+}
+
+.ace-jsoneditor .ace_invalid {
+  color: yellow;
+  background-color: red
+}
+
+.ace-jsoneditor .ace_invalid.ace_deprecated {
+  color: #CED2CF;
+  background-color: #B798BF
+}
+
+.ace-jsoneditor .ace_fold {
+  background-color: #7AA6DA;
+  border-color: #DEDEDE
+}
+
+.ace-jsoneditor .ace_entity.ace_name.ace_function,
+.ace-jsoneditor .ace_support.ace_function,
+.ace-jsoneditor .ace_variable {
+  color: #7AA6DA
+}
+
+.ace-jsoneditor .ace_support.ace_class,
+.ace-jsoneditor .ace_support.ace_type {
+  color: #E7C547
+}
+
+.ace-jsoneditor .ace_heading,
+.ace-jsoneditor .ace_string {
+  color: #B9CA4A
+}
+
+.ace-jsoneditor .ace_entity.ace_name.ace_tag,
+.ace-jsoneditor .ace_entity.ace_other.ace_attribute-name,
+.ace-jsoneditor .ace_meta.ace_tag,
+.ace-jsoneditor .ace_string.ace_regexp,
+.ace-jsoneditor .ace_variable {
+  color: #D54E53
+}
+
+.ace-jsoneditor .ace_comment {
+  color: orangered
+}
+
+.ace-jsoneditor .ace_indent-guide {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYLBWV/8PAAK4AYnhiq+xAAAAAElFTkSuQmCC) right repeat-y;
+}
+
+.ace-jsoneditor .ace_indent-guide-active {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC) right repeat-y;
+}`;
+
+    const dom = acequire("../lib/dom");
+    dom.importCssString(exports.cssText, exports.cssClass);
+  },
+);
+
+(window as any).ace.define(
+  "ace/theme/trieve-light",
   ["require", "exports", "module", "ace/lib/dom"],
   (acequire: any, exports: any, _module: any) => {
     exports.isDark = true;
     exports.cssClass = "ace-jsoneditor";
-    exports.cssText = `
-    .ace-jsoneditor .ace_gutter {
-    background: #ffffff;
-    color: rgba(27, 31, 35, 0.3);
+    exports.cssText = `.ace-jsoneditor .ace_gutter {
+  background: #ffffff;
+  color: #D4D4D4
 }
 
 .ace-jsoneditor .ace_print-margin {
@@ -170,154 +320,7 @@
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAZSURBVHjaYvj///9/hivKyv8BAAAA//8DACLqBhbvk+/eAAAAAElFTkSuQmCC") right repeat-y;
 }`;
 
-    var dom = acequire("../lib/dom");
-    dom.importCssString(exports.cssText, exports.cssClass);
-  }
-);
-
-(window as any).ace.define(
-  "ace/theme/trieve",
-  ["require", "exports", "module", "ace/lib/dom"],
-  (acequire: any, exports: any, _module: any) => {
-    exports.isDark = true;
-    exports.cssClass = "ace-jsoneditor";
-    exports.cssText = `.ace-jsoneditor .ace_gutter {
-  background: #1a0005;
-  color: steelblue
-}
-
-.ace-jsoneditor .ace_print-margin {
-  width: 1px;
-  background: #1a1a1a
-}
-
-.ace-jsoneditor {
-  background-color: black;
-  color: #DEDEDE
-}
-
-.ace-jsoneditor .ace_cursor {
-  color: #9F9F9F
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_selection {
-  background: #424242
-}
-
-.ace-jsoneditor.ace_multiselect .ace_selection.ace_start {
-  box-shadow: 0 0 3px 0px black;
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_step {
-  background: rgb(0, 0, 0)
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_bracket {
-  background: #090;
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_bracket-start {
-  background: #090;
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_bracket-unmatched {
-  margin: -1px 0 0 -1px;
-  border: 1px solid #900
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_active-line {
-  background: #2A2A2A
-}
-
-.ace-jsoneditor .ace_gutter-active-line {
-  background-color: #000000
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_selected-word {
-  border: 1px solid #424242
-}
-
-.ace-jsoneditor .ace_invisible {
-  color: #343434
-}
-
-.ace-jsoneditor .ace_keyword,
-.ace-jsoneditor .ace_meta,
-.ace-jsoneditor .ace_storage,
-.ace-jsoneditor .ace_storage.ace_type,
-.ace-jsoneditor .ace_support.ace_type {
-  color: tomato
-}
-
-.ace-jsoneditor .ace_keyword.ace_operator {
-  color: deeppink
-}
-
-.ace-jsoneditor .ace_constant.ace_character,
-.ace-jsoneditor .ace_constant.ace_language,
-.ace-jsoneditor .ace_constant.ace_numeric,
-.ace-jsoneditor .ace_keyword.ace_other.ace_unit,
-.ace-jsoneditor .ace_support.ace_constant,
-.ace-jsoneditor .ace_variable.ace_parameter {
-  color: #E78C45
-}
-
-.ace-jsoneditor .ace_constant.ace_other {
-  color: gold
-}
-
-.ace-jsoneditor .ace_invalid {
-  color: yellow;
-  background-color: red
-}
-
-.ace-jsoneditor .ace_invalid.ace_deprecated {
-  color: #CED2CF;
-  background-color: #B798BF
-}
-
-.ace-jsoneditor .ace_fold {
-  background-color: #7AA6DA;
-  border-color: #DEDEDE
-}
-
-.ace-jsoneditor .ace_entity.ace_name.ace_function,
-.ace-jsoneditor .ace_support.ace_function,
-.ace-jsoneditor .ace_variable {
-  color: #7AA6DA
-}
-
-.ace-jsoneditor .ace_support.ace_class,
-.ace-jsoneditor .ace_support.ace_type {
-  color: #E7C547
-}
-
-.ace-jsoneditor .ace_heading,
-.ace-jsoneditor .ace_string {
-  color: #B9CA4A
-}
-
-.ace-jsoneditor .ace_entity.ace_name.ace_tag,
-.ace-jsoneditor .ace_entity.ace_other.ace_attribute-name,
-.ace-jsoneditor .ace_meta.ace_tag,
-.ace-jsoneditor .ace_string.ace_regexp,
-.ace-jsoneditor .ace_variable {
-  color: #D54E53
-}
-
-.ace-jsoneditor .ace_comment {
-  color: orangered
-}
-
-.ace-jsoneditor .ace_indent-guide {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYLBWV/8PAAK4AYnhiq+xAAAAAElFTkSuQmCC) right repeat-y;
-}
-
-.ace-jsoneditor .ace_indent-guide-active {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC) right repeat-y;
-}`;
-
     const dom = acequire("../lib/dom");
     dom.importCssString(exports.cssText, exports.cssClass);
-  }
+  },
 );
diff --git a/frontends/shared/ui/JsonInput.tsx b/frontends/shared/ui/JsonInput.tsx
@@ -23,7 +23,7 @@ export const JsonInput = (props: JsonInputProps) => {
       editorRef = new JSONEditor(containerRef, {
         theme:
           props.theme === "light"
-            ? "ace/theme/github-light"
+            ? "ace/theme/trieve-light"
             : "ace/theme/trieve",
         statusBar: false,
         mainMenuBar: false,

diff --git a/server/build.rs b/server/build.rs
@@ -2,9 +2,20 @@ use std::error::Error;
 
 #[cfg(not(feature = "runtime-env"))]
 fn main() -> Result<(), Box<dyn Error>> {
-    use std::env;
+    use std::{env, process::Command};
     dotenvy::dotenv().expect("Failed to read .env file. Did you `cp .env.dist .env` ?");
 
+    let output = Command::new("npx")
+        .arg("tailwindcss")
+        .arg("-i")
+        .arg("./static/in.css")
+        .arg("-o")
+        .arg("./static/output.css")
+        .output()?;
+
+    // Stream output
+    println!("{}", String::from_utf8_lossy(&output.stdout));
+
     for (key, value) in env::vars() {
         println!("cargo:rustc-env={key}={value}");
     }

diff --git a/server/src/lib.rs b/server/src/lib.rs
@@ -1263,7 +1263,8 @@ pub fn main() -> std::io::Result<()> {
                                 web::resource("/ctr")
                                     .route(web::put().to(handlers::analytics_handler::send_ctr_data))
                             )
-                        ),
+                        )
+                        .service(actix_files::Files::new("/static", "./static").prefer_utf8(true)),
                 )
         })
         .bind(("0.0.0.0", 8090))?