feat: new orama search box

_components/Header.tsx

@@ -87,7 +87,7 @@ export default function Header({
           />
           <div class="min-w-[150px] md:w-32 xl:w-64">
             <orama-search-button />
-            <orama-searchbox />
+            <orama-search-box />
           </div>
         </div>
       </nav>
@@ -176,12 +176,3 @@ function HeaderItem({
     </a>
   );
 }
-
-declare module "npm:preact" {
-  namespace JSX {
-    interface IntrinsicElements {
-      "orama-searchbox": unknown;
-      "orama-search-button": unknown;
-    }
-  }
-}

_config.ts

@@ -33,47 +33,48 @@ import {
 } from "./orama.ts";
 import { apiDocumentContentTypeMiddleware } from "./middleware.ts";
 
-const site = lume({
-  location: new URL("https://docs.deno.com"),
-  caseSensitiveUrls: true,
-  server: {
-    middlewares: [
-      apiDocumentContentTypeMiddleware,
-    ],
+const site = lume(
+  {
+    location: new URL("https://docs.deno.com"),
+    caseSensitiveUrls: true,
+    server: {
+      middlewares: [apiDocumentContentTypeMiddleware],
+    },
   },
-}, {
-  markdown: {
-    plugins: [
-      replacerPlugin,
-      emoji,
-      admonitionPlugin,
-      codeblockCopyPlugin,
-      codeblockTitlePlugin,
-      [
-        anchor,
-        {
-          permalink: anchor.permalink.linkInsideHeader({
-            symbol:
-              `<span class="sr-only">Jump to heading</span><span aria-hidden="true" class="anchor-end">#</span>`,
-            placement: "after",
-          }),
-          getTokensText(tokens) {
-            return tokens
-              .filter((t) => ["text", "code_inline"].includes(t.type))
-              .map((t) => t.content.replaceAll(/ \([0-9/]+?\)/g, ""))
-              .join("")
-              .trim();
+  {
+    markdown: {
+      plugins: [
+        replacerPlugin,
+        emoji,
+        admonitionPlugin,
+        codeblockCopyPlugin,
+        codeblockTitlePlugin,
+        [
+          anchor,
+          {
+            permalink: anchor.permalink.linkInsideHeader({
+              symbol:
+                `<span class="sr-only">Jump to heading</span><span aria-hidden="true" class="anchor-end">#</span>`,
+              placement: "after",
+            }),
+            getTokensText(tokens) {
+              return tokens
+                .filter((t) => ["text", "code_inline"].includes(t.type))
+                .map((t) => t.content.replaceAll(/ \([0-9/]+?\)/g, ""))
+                .join("")
+                .trim();
+            },
           },
-        },
+        ],
+        relativeLinksPlugin,
       ],
-      relativeLinksPlugin,
-    ],
-    options: {
-      linkify: true,
-      langPrefix: "highlight notranslate language-",
+      options: {
+        linkify: true,
+        langPrefix: "highlight notranslate language-",
+      },
     },
   },
-});
+);
 
 site.copy("static", ".");
 site.copy("subhosting/api/images");
@@ -94,22 +95,29 @@ site.copy("server.ts");
 site.copy("middleware.ts");
 site.copy("examples");
 
-site.use(redirects({
-  output: "json",
-}));
+site.use(
+  redirects({
+    output: "json",
+  }),
+);
 site.use(search());
 site.use(jsx());
 
 // Custom plugin that for tailwind + postcss combined
-site.use(tailwindcss({
-  options: tailwindConfig,
-}));
-site.use(esbuild({
-  extensions: [".client.ts"],
-  options: {
-    minify: false,
-  },
-}));
+site.use(
+  tailwindcss({
+    options: tailwindConfig,
+  }),
+);
+site.use(
+  esbuild({
+    extensions: [".client.ts"],
+    options: {
+      minify: false,
+      splitting: true,
+    },
+  }),
+);
 
 // This is a work-around due to deno-dom's dependency of nwsapi not supporting
 // :has selectors, nor having intention of supporting them, so using `body:not(:has(.ddoc))`
@@ -123,9 +131,11 @@ site.process([".html"], (pages) => {
     }
   }
 });
-site.use(prism({
-  cssSelector: "body.apply-prism pre code",
-}));
+site.use(
+  prism({
+    cssSelector: "body.apply-prism pre code",
+  }),
+);
 
 site.use(toc({ anchor: false }));
 site.use(title());
@@ -146,7 +156,6 @@ site.copy("reference_gen/gen/web/script.js", "/api/web/script.js");
 site.copy("reference_gen/gen/node/page.css", "/api/node/page.css");
 site.copy("reference_gen/gen/node/styles.css", "/api/node/styles.css");
 site.copy("reference_gen/gen/node/script.js", "/api/node/script.js");
-site.copy("orama-searchbox-1.0.0-rc47.js");
 
 site.process([".html"], (pages) => {
   for (const page of pages) {
@@ -233,11 +242,11 @@ site.ignore(
   // "subhosting",
 );
 
-site.remoteFile(
-  "orama-searchbox-1.0.0-rc47.js",
-  "https://unpkg.com/@orama/[email protected]/dist/bundle.js",
-);
-
 site.scopedUpdates((path) => path == "/overrides.css");
 
+site.remoteFile(
+  "orama.css",
+  "https://unpkg.com/@orama/[email protected]/dist/orama-ui/orama-ui.css",
+);
+site.copy("orama.css");
 export default site;

_includes/layout.tsx

@@ -26,7 +26,7 @@ export default function Layout(props: Lume.Data) {
         <link rel="stylesheet" href="/gfm.css" />
         <link rel="stylesheet" href="/styles.css" />
         <link rel="stylesheet" href="/overrides.css" />
-        <script src="/orama-searchbox-1.0.0-rc47.js" defer></script>
+        <link rel="stylesheet" href="/orama.css" />
         <script type="module" src="/sidebar.client.js"></script>
         <script type="module" src="/copy.client.js"></script>
         <script type="module" src="/search.client.js"></script>

deno.json

@@ -5,7 +5,8 @@
     "ga4": "https://raw.githubusercontent.com/denoland/ga4/04a1ce209116f158b5ef1658b957bdb109db68ed/mod.ts",
     "lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@864fb83b508b4164afa8cedef100db672b883152/",
     "postcss": "npm:postcss@^8.4.41",
-    "tailwindcss": "npm:tailwindcss@^3.4.9"
+    "tailwindcss": "npm:tailwindcss@^3.4.9",
+    "@orama/wc-components/": "https://unpkg.com/@orama/[email protected]/"
   },
   "tasks": {
     "build": "deno run -A lume.ts",

search.client.ts

@@ -1,42 +1,76 @@
-import { OramaClient } from "npm:@oramacloud/client@1";
-
-const client = new OramaClient({
-  endpoint: "https://cloud.orama.run/v1/indexes/deno-docs-pp7js4",
-  api_key: "BhHQBNY6gwBukMREm9FOproywA50UDQs",
-});
+import { defineCustomElements } from "@orama/wc-components/loader/index.js";
+import { JSX as OramaJSX } from "@orama/wc-components/dist/types/index.d.ts";
 
 document.addEventListener("DOMContentLoaded", () => {
-  oramaSearchbox.RegisterSearchBox({
-    oramaInstance: client,
-    colorScheme: "light",
-    resultsMap: {
+  defineCustomElements();
+  const oramaSearchBox: OramaJSX.OramaSearchBox | null = document.querySelector(
+    "orama-search-box",
+  );
+
+  if (oramaSearchBox) {
+    oramaSearchBox.colorScheme = "light";
+    oramaSearchBox.themeConfig = {
+      colors: {
+        light: {
+          "--button-text-color-primary": "#0B0D11",
+          "--button-background-color-primary": "#32f59a",
+          "--button-background-color-secondary-hover": "#d6ffe1",
+          "--background-color-tertiary": "#f0fff1",
+          "--border-color-accent": "#09dc8b",
+          "--chat-button-background-color-gradientOne": "#31F69A",
+          "--chat-button-background-color-gradientTwo": "#d6ffe1",
+          "--text-color-accent": "#01b780",
+
+          "--chat-button-border-color-gradientOne": "#d6ffe1",
+          "--chat-button-border-color-gradientTwo": "#d6ffe1",
+          "--chat-button-border-color-gradientThree": "#09dc8b",
+          "--chat-button-border-color-gradientFour": "#09dc8b",
+          "--chat-button-border-color-gradientFive": "#d6ffe1",
+          "--chat-button-border-color-gradientSix": "#d6ffe1",
+        },
+      },
+    };
+    oramaSearchBox.index = {
+      api_key: "BhHQBNY6gwBukMREm9FOproywA50UDQs",
+      endpoint: "https://cloud.orama.run/v1/indexes/deno-docs-pp7js4",
+    };
+    oramaSearchBox.resultMap = {
       description: "content",
-    },
-    facetProperty: "category",
-  });
-  oramaSearchbox.RegisterSearchButton({
-    colorScheme: "light",
-    themeConfig: {
-      light: {
-        "--search-btn-background-color": "#fff",
-        "--search-btn-border-color": "rgb(229 231 235)",
+      section: "section",
+    };
+    oramaSearchBox.facetProperty = "category";
+    oramaSearchBox.highlight = { HTMLTag: "b" };
+    oramaSearchBox.sourceBaseUrl = "https://docs.deno.com";
+    oramaSearchBox.suggestions = [
+      "How to get started?",
+      "How to configure?",
+      "How to deploy?",
+    ];
+  }
+
+  const oramaSearchButton: OramaJSX.OramaSearchButton | null = document
+    .querySelector("orama-search-button");
+
+  if (oramaSearchButton) {
+    oramaSearchButton.colorScheme = "light";
+    oramaSearchButton.themeConfig = {
+      colors: {
+        light: {
+          "--button-background-color-secondary-hover": "#f6f7f9",
+          "--background-color-tertiary": "#f0fff1",
+        },
       },
-    },
-  });
+    };
+    oramaSearchButton.innerText = "Search";
+    oramaSearchButton.size = "small";
+  }
 });
 
-declare global {
-  const oramaSearchbox: {
-    RegisterSearchBox: (options: {
-      oramaInstance: OramaClient;
-      colorScheme: "light" | "dark";
-      resultsMap: Record<string, string>;
-    }) => void;
-    RegisterSearchButton: (
-      options: {
-        colorScheme: "light" | "dark";
-        themeConfig: { light: Record<string, string> };
-      },
-    ) => void;
-  };
+declare module "npm:preact" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "orama-search-box": OramaJSX.OramaSearchBox;
+      "orama-search-button": OramaJSX.OramaSearchButton;
+    }
+  }
 }