Add search

docusaurus.config.ts

@@ -142,7 +142,7 @@ const config: Config = {
           routeBasePath: '',
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: ['./src/css/custom.css', './src/css/local-search.css'],
         },
       } satisfies Preset.Options,
     ],
@@ -173,6 +173,40 @@ const config: Config = {
       color: '#5bbad5',
     },
   ],
+  plugins: [
+    [
+      '@cmfcmf/docusaurus-search-local',
+      {
+        indexDocs: true,
+        indexDocSidebarParentCategories: 0,
+        includeParentCategoriesInPageTitle: false,
+        // whether to index blog pages
+        indexBlog: true,
+
+        // whether to index static pages
+        // /404.html is never indexed
+        indexPages: false,
+
+        // language of your documentation, see next section
+        language: 'en',
+
+        // setting this to "none" will prevent the default CSS to be included. The default CSS
+        // comes from autocomplete-theme-classic, which you can read more about here:
+        // https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/
+        // When you want to overwrite CSS variables defined by the default theme, make sure to suffix your
+        // overwrites with `!important`, because they might otherwise not be applied as expected. See the
+        // following comment for more information: https://github.com/cmfcmf/docusaurus-search-local/issues/107#issuecomment-1119831938.
+        maxSearchResults: 10,
+        lunr: {
+          tokenizerSeparator: /[\s\-]+/,
+          titleBoost: 5,
+          contentBoost: 1,
+          tagsBoost: 3,
+          parentCategoriesBoost: 2, // Only used when indexDocSidebarParentCategories > 0
+        },
+      },
+    ],
+  ],
   markdown: {
     // https://docusaurus.io/docs/migration/v3#using-the-mdx-extension
     mdx1Compat: {

package.json

@@ -13,6 +13,7 @@
     "upgrade": "yarn set version latest && yarn up @docusaurus/core@latest @docusaurus/plugin-client-redirects@latest @docusaurus/preset-classic@latest @docusaurus/theme-mermaid@latest @docusaurus/theme-search-algolia@latest @docusaurus/module-type-aliases@latest @docusaurus/tsconfig@latest @docusaurus/types@latest"
   },
   "dependencies": {
+    "@cmfcmf/docusaurus-search-local": "^2.0.1",
     "@docusaurus/core": "^3.9.2",
     "@docusaurus/plugin-client-redirects": "^3.9.2",
     "@docusaurus/preset-classic": "^3.9.2",

src/css/local-search.css

@@ -0,0 +1,49 @@
+:root {
+  --aa-background-color-alpha: 1 !important;
+}
+
+.aa-Autocomplete {
+  min-width: 170px !important
+}
+
+.aa-DetachedSearchButton {
+  background-color: rgb(219, 219, 219) !important;
+  border-radius: var(--ifm-global-radius) !important;
+}
+
+:root[data-theme='dark'] .aa-DetachedSearchButton {
+  background-color: #828282 !important;
+}
+
+:root[data-theme='dark'] .aa-DetachedSearchButtonPlaceholder {
+  color: var(--color6) !important;
+}
+
+.aa-DetachedFormContainer,
+.aa-Panel {
+  background-color: rgb(235, 235, 235) !important;
+  border-radius: var(--ifm-global-radius) !important;
+}
+
+.aa-Panel {
+  border-top-right-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+}
+
+.aa-DetachedFormContainer {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+svg.aa-SubmitIcon {
+  fill: var(--color2) !important;
+  width: 16px !important;
+}
+
+:root[data-theme='dark'] svg.aa-SubmitIcon {
+  fill: var(--color6) !important;
+}
+
+mark[data-markjs] {
+  background-color: var(--color4) !important;
+}