fix search

components/ContentArea.js

@@ -2,6 +2,8 @@ import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/router";
 import { TableOfContents } from "@urbit/foundation-design-system";
 
+import { DocSearch } from '@docsearch/react';
+
 export default function ContentArea(props) {
   const [shortcut, setShortcut] = useState("");
 
@@ -50,15 +52,11 @@ export default function ContentArea(props) {
             {props.breadcrumbs}
           </div>
           <div className="hidden md:block">
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                props.search.toggleSearch();
-              }}
-              className="bg-wall-100 text-wall-500 flex px-3 py-2 rounded-lg font-semibold text-lg"
-            >
-              Search<div className="ml-4 text-wall-400">{shortcut}</div>
-            </button>
+            <DocSearch
+              appId="3EVOAL3MOI"
+              apiKey="00ccef825c17a672ef1c1a9bea3a9903"
+              indexName="developers-urbit"
+            />
           </div>
         </div>
         <div className="flex justify-between">

components/Header.js

@@ -1,9 +1,11 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import classnames from "classnames";
 import { IntraNav, capitalize, MenuTray } from "@urbit/foundation-design-system";
 
+import '@docsearch/css';
+
 function ActiveLink({ children, href, className, currentPath }) {
   const firstCrumb = currentPath.split("/")[1];
 

components/Meta.js

@@ -27,7 +27,8 @@ export default function Meta(post, disableImage, large = false) {
         href="/images/favicon-16x16.png"
       />
       <link rel="manifest" href="/images/site.webmanifest" />
-      
+      <link rel="preconnect" href="https://3EVOAL3MOI-dsn.algolia.net" crossorigin />
+
       <meta
         name="twitter:card"
         content="summary_large_image"

package.json

@@ -19,11 +19,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@docsearch/react": "^3.5.2",
     "@iarna/toml": "^2.2.5",
     "@socialgouv/matomo-next": "^1.4.0",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tlon/sigil-js": "^1.4.5",
-    "@urbit/foundation-design-system": "0.7.5",
+    "@urbit/foundation-design-system": "urbit/foundation-design-system#74572cd4a5cd7e29c99419672fdc8f709617f063",
     "@urbit/markdoc": "^0.1.6",
     "axios": "^0.26.1",
     "buffer": "^6.0.3",

pages/_app.js

@@ -51,9 +51,9 @@ function MyApp({ Component, pageProps }) {
   };
 
   const handlers = {
-    closeSearch: (event) => closeSearch(event),
-    openSearch: (event) => openSearch(event),
-    toggleSearch: (event) => toggleSearch(event),
+    // closeSearch: (event) => closeSearch(event),
+    // openSearch: (event) => openSearch(event),
+    // toggleSearch: (event) => toggleSearch(event),
   };
 
   configure({

pages/_document.js

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document';
 import Script from 'next/script';
 
 export default function Document() {
@@ -28,6 +28,13 @@ export default function Document() {
               startup: {
                 typeset: false,
                 ready: () => {
+                  // setting data-theme so that @docsearch/react understands
+                  // whether it should be in dark mode or not
+                  if (window.matchMedia) {
+                    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                      document.querySelector("html").setAttribute("data-theme", "dark");
+                    }
+                  }
                   MathJax.startup.defaultReady();
                   window.__MathJax_State__.isReady = true;
                   resolve();
@@ -41,4 +48,4 @@ export default function Document() {
       </body>
     </Html>
   )
-}
+}