feat: add search to the new documentation website (#7878)

elastic · Jul 15, 2024 · d405f1a · d405f1a
1 parent e39a488
commit d405f1a
Show file tree

Hide file tree

Showing 5 changed files with 255 additions and 4 deletions.
diff --git a/packages/docusaurus-theme/src/theme/MDXContent/index.tsx b/packages/docusaurus-theme/src/theme/MDXContent/index.tsx
@@ -26,7 +26,7 @@ const MDXContent = (props: Props): JSX.Element => {
   const styles = useEuiMemoizedStyles(getStyles);
 
   return (
-    <EuiText size="m" css={styles.text}>
+    <EuiText size="m" css={styles.text} data-search-children>
       <OriginalMDXContent {...props} />
     </EuiText>
   );

diff --git a/packages/website/README.md b/packages/website/README.md
@@ -50,8 +50,29 @@ This step is usually unnecessary to run locally unless you're testing production
 yarn build
 ```
 
+You can serve the built static files for local testing by running
+
+```shell
+yarn serve
+```
+
 ### Running type checks
 
 ```shell
 yarn typecheck
 ```
+
+## Documentation search
+
+We use [lunr.js](https://github.com/olivernn/lunr.js) for local search
+on our documentation site. Lunr generates search indexes when the
+site is being built that we later fetch as JSON objects in runtime
+to provide users with accurate search results. This approach allows us
+to have version-specific search experience without the need to run
+a search server.
+
+Because the search index is generated in build time, it means that
+searching is not possible when running the development sever.
+Please refer to the [Building the website](#building-the-website) section
+to learn how to build the documentation site locally
+and serve it to use local search.
diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
@@ -57,6 +57,12 @@ const config: Config = {
     ],
   ],
 
+  plugins: [
+    ['docusaurus-lunr-search', {
+      disableVersioning: true, // We don't use docusaurus docs versioning
+    }]
+  ],
+
   themeConfig: {
     navbar: {
       title: 'Elastic UI',

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -24,6 +24,8 @@
     "@emotion/react": "^11.11.4",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "docusaurus-lunr-search": "^3.4.0",
+    "hast-util-is-element": "1.1.0",
     "moment": "^2.30.1",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",