feat: integrate Algolia search and improve code block styling in docs

Author: raphaeltm

docusaurus.config.js

@@ -106,7 +106,6 @@ const config = {
       },
     ],
   ],
-
   themeConfig: {
     image: '/img/defang-social-card-2.png',
     navbar: {
@@ -205,6 +204,39 @@ const config = {
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,
     },
+    algolia: {
+      // The application ID provided by Algolia
+      appId: 'O3VFCOSSZ6',
+
+      // Public API key: it is safe to commit it
+      apiKey: '43fd4ebb5bb9875aa8764793ff9a09ff',
+
+      indexName: 'Defang Docs',
+
+      // Optional: see doc section below
+      contextualSearch: true,
+
+      // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
+      externalUrlRegex: 'external\\.com|domain\\.com',
+
+      // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
+      replaceSearchResultPathname: {
+        from: '/docs/', // or as RegExp: /\/docs\//
+        to: '/',
+      },
+
+      // Optional: Algolia search parameters
+      searchParameters: {},
+
+      // Optional: path for search page that enabled by default (`false` to disable it)
+      searchPagePath: 'search',
+
+      // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default)
+      insights: false,
+
+      // Optional: whether you want to use the new Ask AI feature (undefined by default)
+      askAi: 'MUO629LjH0L5',
+    },
   },
   plugins: [
     async function shadcnTailwindPlugin() {
@@ -221,7 +253,6 @@ const config = {
         },
       };
     },
-    require.resolve('docusaurus-lunr-search'),
     [
       '@docusaurus/plugin-client-redirects',
       {

src/css/custom.css

@@ -61,7 +61,6 @@
   --ifm-code-background: var(--prism-background-color);
   --ifm-pre-background: var(--prism-background-color);
   --ifm-footer-background-color: transparent;
-  --ifm-code-border-radius: 1.25rem;
   --ifm-tabs-border-bottom: 1px solid hsla(var(--border) / 0.7);
   --ifm-tabs-border-radius: 0.875rem;
   --ifm-footer-title-color: hsl(var(--foreground));
@@ -392,10 +391,20 @@ img.unstyled {
 /**
  * Page Specific
  */
-[class*="docs-doc-id-intro/intro"] .theme-doc-markdown .card h2 {
+.theme-doc-markdown .card h2 {
     @apply text-2xl;
 }
 
 .navbar__item.navbar__link.navbar__item-get_started {
   @apply hidden sm:block;
-}
+}
+
+/* selector for code tags with no classes */
+code:not([class]),
+code[class=""] {
+  @apply rounded-[0.5rem] bg-muted px-1.5 py-0.5;
+}
+pre code {
+  @apply bg-white dark:bg-card dark:border dark:border-solid dark:border-gray-600;
+}
+  

src/theme/Layout/index.js

@@ -11,17 +11,61 @@ export default function LayoutWrapper(props) {
   }, [location]);
 
   useEffect(() => {
-    const search = window.document.getElementById("search_input_react");
-    search.onchange = (e) => {
-      if (searchTrackingTimeout) {
-        clearTimeout(searchTrackingTimeout);
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+
+    const attachSearchHandler = () => {
+      const search =
+        window.document.getElementById("docsearch-input") ??
+        window.document.getElementById("search_input_react");
+
+      if (!search) {
+        return undefined;
       }
-      searchTrackingTimeout = setTimeout(() => {
-        window?.analytics?.track("docsSearch", {
-          searchQuery: e.target.value,
-        });
-      }, 1000);
+
+      const handleChange = (event) => {
+        if (searchTrackingTimeout) {
+          clearTimeout(searchTrackingTimeout);
+        }
+        searchTrackingTimeout = setTimeout(() => {
+          window?.analytics?.track("docsSearch", {
+            searchQuery: event.target.value,
+          });
+        }, 1000);
+      };
+
+      search.addEventListener("change", handleChange);
+
+      return () => {
+        search.removeEventListener("change", handleChange);
+        if (searchTrackingTimeout) {
+          clearTimeout(searchTrackingTimeout);
+        }
+      };
+    };
+
+    let cleanupHandler = attachSearchHandler();
+
+    if (cleanupHandler) {
+      return cleanupHandler;
     }
+
+    const observer = new MutationObserver(() => {
+      if (!cleanupHandler) {
+        cleanupHandler = attachSearchHandler();
+      }
+      if (cleanupHandler) {
+        observer.disconnect();
+      }
+    });
+
+    observer.observe(window.document.body, { childList: true, subtree: true });
+
+    return () => {
+      observer.disconnect();
+      cleanupHandler?.();
+    };
   }, []);
 
   return (