feat(devx): re-enable navbar search (#1623)

* feat(devx): re-enable navbar search
feat(devx): add typesense config

* fix(devx): dead link

* fix(devx): syntax

* fix(devx): change IP to new static server

* feat(devx): update config to use the new typesense server.

* feat(devx): update pnpm-lock.yaml with TypeSense

* feat(devx): update config

* feat(devx): remove unnecessary blank lines

* feat(devx): fix port

* fix(devx): remove unwanted button

docs/site/docusaurus.config.js

@@ -138,38 +138,28 @@ const config = {
       type: "text/css",
     },
   ],
-  themes: ["@docusaurus/theme-mermaid"],
+  themes: ["@docusaurus/theme-mermaid", 'docusaurus-theme-search-typesense'],
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      algolia: {
-        // The application ID provided by Algolia
-        appId: "ZF283DJAYX",
-
-        // Public API key: it is safe to commit it
-        apiKey: "7f24db6c4ec06d6905592deb228f4460",
-
-        indexName: "iota",
-
-        // Optional: see doc section below
-        contextualSearch: false,
-
-        // 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",
-
-        //... other Algolia params
+      typesense: {
+        // Replace this with the name of your index/collection.
+        // It should match the "index_name" entry in the scraper's "config.json" file.
+        typesenseCollectionName: 'IOTADocs_1724878003',
+        typesenseServerConfig: {
+          nodes: [
+            {
+              host: 'docs-search.iota.org',
+              port: '',
+              protocol: 'https',
+            },
+          ],
+          apiKey: 'C!jA3iCujG*PjK!eUVWFBxnU',
+        },
+        // Optional: Typesense search parameters: https://typesense.org/docs/0.24.0/api/search.html#search-parameters
+        typesenseSearchParameters: {},
+        // Optional
+        contextualSearch: true,
       },
       image: "img/iota-doc-og.png",
       docs: {
@@ -213,10 +203,6 @@ const config = {
           },
         ],
       },
-      colorMode: {
-        defaultMode: "dark",
-        disableSwitch: false,
-      },
       footer: {
         logo: {
           alt: "IOTA Wiki Logo",

docs/site/package.json

@@ -39,6 +39,7 @@
     "axios": "^1.7.4",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
+    "docusaurus-theme-search-typesense": "0.20.0-0",
     "dotenv": "^16.4.5",
     "graphql": "^16.8.1",
     "graphql-config": "^5.0.3",

docs/site/src/theme/Navbar/Content/index.js

@@ -2,15 +2,18 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 import React from "react";
+import Link from "@docusaurus/Link";
 import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
 } from "@docusaurus/theme-common/internal";
 import NavbarItem from "@theme/NavbarItem";
 import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
+import SearchBar from "@theme/SearchBar";
 import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
 import NavbarLogo from "@theme/Navbar/Logo";
+import NavbarSearch from "@theme/Navbar/Search";
 import styles from "./styles.module.css";
 import { useLocation } from "@docusaurus/router";
 
@@ -72,7 +75,11 @@ export default function NavbarContent() {
           <NavbarItems items={rightItems} />
           {!isHomePage && (
             <NavbarColorModeToggle className={styles.colorModeToggle} />
-          )}
+          )} {!searchBarItem && (
+            <NavbarSearch>
+                <SearchBar />
+            </NavbarSearch>
+        )}
         </>
       }
     />

docs/site/src/theme/Navbar/Search/index.js

@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+export default function NavbarSearch({ children, className }) {
+  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
+}

docs/site/src/theme/Navbar/Search/styles.module.css

@@ -0,0 +1,30 @@
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/9385
+*/
+/*
+TODO temporary @supports check, remove before 2025
+only needed for Firefox < 121
+see https://github.com/facebook/docusaurus/issues/9527#issuecomment-1805272379
+ */
+@supports selector(:has(*)) {
+  .navbarSearchContainer:not(:has(> *)) {
+    display: none;
+  }
+}
+
+@media (max-width: 996px) {
+  .searchBox {
+    position: absolute;
+    right: var(--ifm-navbar-padding-horizontal);
+  }
+}
+
+@media (min-width: 997px) {
+  .searchBox {
+    padding: var(--ifm-navbar-item-padding-vertical)
+      var(--ifm-navbar-item-padding-horizontal);
+    display: flex;
+    column-gap: 1rem;
+  }
+}