docs: add algolia docsearch

codediodeio · codediodeio · commit 64a3cd2cec64 · 2023-08-13T21:02:10.000-07:00
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@astrojs/tailwind": "^4.0.0",
+    "@docsearch/js": "^3.5.1",
     "@tailwindcss/typography": "^0.5.9",
     "astro": "^2.10.7",
     "tailwindcss": "^3.3.3"
diff --git a/docs/src/components/Search.astro b/docs/src/components/Search.astro
@@ -0,0 +1,18 @@
+<button
+  id="docsearch"
+  class="p-2 mr-2 hidden md:flex justify-between items-center bg-gray3 bg-opacity-10 hover:bg-opacity-20 border border-gray4 hover:border-orange-500 transition-all"
+>
+</button>
+
+<script>
+  import docsearch from "@docsearch/js";
+  import "@docsearch/css";
+  console.log("docsearch");
+
+  docsearch({
+    container: "#docsearch",
+    appId: "FPK5SXN3GJ",
+    indexName: "sveltefire-fireship",
+    apiKey: "15bb134d41bb45724983679a6126b5f8",
+  });
+</script>
diff --git a/docs/src/components/TopNav.astro b/docs/src/components/TopNav.astro
@@ -1,3 +1,8 @@
+---
+import Search from './Search.astro'
+---
+
+
 <nav
   transition:persist
   class="flex justify-between mx-auto h-20 px-6 w-full bg-gray1 dark:bg-gray7 z-50 relative"
@@ -31,38 +36,7 @@
     </li>
 
     <li class="mx-4">
-      <button
-        class="p-2 mr-2 hidden md:flex justify-between items-center bg-gray3 bg-opacity-10 hover:bg-opacity-20 border border-gray4 hover:border-orange-500 transition-all"
-      >
-        <span class="text-gray4 dark:text-gray2 w-4 mx-2">
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fad"
-            data-icon="search"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            class="svg-inline--fa fk-search fk-w-16 fk-9x"
-          >
-            <g class="fk-group"
-              ><path
-                fill="currentColor"
-                d="M208 80a128 128 0 1 1-90.51 37.49A127.15 127.15 0 0 1 208 80m0-80C93.12 0 0 93.12 0 208s93.12 208 208 208 208-93.12 208-208S322.88 0 208 0z"
-                class="fk-secondary"></path><path
-                fill="currentColor"
-                d="M504.9 476.7L476.6 505a23.9 23.9 0 0 1-33.9 0L343 405.3a24 24 0 0 1-7-17V372l36-36h16.3a24 24 0 0 1 17 7l99.7 99.7a24.11 24.11 0 0 1-.1 34z"
-                class="fk-primary"
-              >
-              </path></g
-            ></svg
-          >
-        </span>
-        <span class="mr-12 font-code">search</span>
-        <span class="mx-2 text-xs border border-gray4 rounded-md p-1 px-2"
-          >/</span
-        >
-      </button>
+      <Search />
       <button class="flex md:hidden">
         <span class="text-gray2 w-6 mx-2"></span>
       </button>
@@ -112,5 +86,3 @@
     sidebar.classList.toggle("hidden");
   };
 </script>
-
-<style></style>
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
@@ -18,6 +18,7 @@ import Footer from "../components/Footer.astro";
 
     <title>SvelteFire Documentation</title>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <link rel="preconnect" href="https://FPK5SXN3GJ-dsn.algolia.net" crossorigin />
     <ViewTransitions />
   </head>
   <body class="dark:bg-gray6 dark:text-white transition-colors duration-500">
@@ -53,3 +54,25 @@ import Footer from "../components/Footer.astro";
     </script>
   </body>
 </html>
+
+
+<style is:global>
+
+  .DocSearch-Button {
+      @apply flex items-center justify-center px-0;
+  }
+
+  .DocSearch-Button:hover, .DocSearch-Button:focus {
+      @apply shadow-none bg-transparent text-gray4;
+  }
+
+
+  .DocSearch-Search-Icon path {
+      @apply stroke-gray4;
+  }
+
+  .DocSearch-Button-Placeholder {
+      @apply font-code lowercase ml-2;
+  }
+
+</style>
