Merge pull request #24 from tiktok/octogonz/website-search

Website: Enable search box
tiktok · Feb 27, 2024 · b90259c · b90259c
2 parents 82c90cf + a28f44e
commit b90259c
Show file tree

Hide file tree

Showing 5 changed files with 573 additions and 137 deletions.
diff --git a/apps/website/README.md b/apps/website/README.md
@@ -20,6 +20,15 @@ This is the [Docusaurus](https://docusaurus.io/) project for the Sparo website.
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
+### Site search
+
+Because this site is relatively small, searching is performed client-side using the [docusaurus-lunr-search](https://www.npmjs.com/package/docusaurus-lunr-search) plugin based on [Lunr.js](https://lunrjs.com/).
+
+Notes:
+- Site search is broken when using the localhost debug server (`rushx start`), but it works correctly for real deployments (`rushx deploy`)
+- `@algolia/client-search` is included in **package.json** dependencies only because `@docusaurus/preset-classic` includes it as a peer dependency.
+
+
 ## Deployment
 
 1. If you will manually copy the files to a server, you can build the **apps/sparo/build** folder like this:

diff --git a/apps/website/docusaurus.config.js b/apps/website/docusaurus.config.js
@@ -34,6 +34,16 @@ const config = {
     locales: ['en']
   },
 
+  plugins: [
+    [
+      require.resolve('docusaurus-lunr-search'),
+      {
+        // language codes
+        languages: ['en']
+      }
+    ]
+  ],
+
   presets: [
     [
       'classic',

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -17,17 +17,24 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@algolia/client-search": "^4.22.1",
     "@docusaurus/core": "3.1.1",
     "@docusaurus/preset-classic": "3.1.1",
-    "@mdx-js/react": "^3.0.0",
-    "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@mdx-js/react": "^3.0.1",
+    "clsx": "^2.1.0",
+    "prism-react-renderer": "^2.3.1",
+    "docusaurus-lunr-search": "^3.3.2",
+    "lunr": "^2.3.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "search-insights": "^2.13.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.1.1",
-    "@docusaurus/types": "3.1.1"
+    "@docusaurus/types": "3.1.1",
+    "@types/react": "~18.2.59",
+    "@types/react-dom": "~18.2.19",
+    "typescript": "~5.3.3"
   },
   "browserslist": {
     "production": [

diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json
@@ -41,7 +41,7 @@
    * Possible values are: `highest`, `time-based`, and `lowest-direct`.
    * The default is `highest`.
    */
-  // "resolutionMode": "time-based",
+  "resolutionMode": "time-based",
 
   /**
    * This setting determines whether PNPM will automatically install (non-optional)
@@ -74,7 +74,7 @@
    * The default value is false to avoid legacy compatibility issues.
    * It is strongly recommended to set `strictPeerDependencies=true`.
    */
-  // "strictPeerDependencies": true,
+  "strictPeerDependencies": true,
 
   /**
    * Environment variables that will be provided to PNPM.
@@ -214,15 +214,14 @@
     // "request": "*"
   },
 
-
   /**
    * (THIS FIELD IS MACHINE GENERATED)  The "globalPatchedDependencies" field is updated automatically
    * by the `rush-pnpm patch-commit` command.  It is a dictionary, where the key is an NPM package name
    * and exact version, and the value is a relative path to the associated patch file.
    *
    * PNPM documentation: https://pnpm.io/package_json#pnpmpatcheddependencies
    */
-  "globalPatchedDependencies": { },
+  "globalPatchedDependencies": {},
 
   /**
    * (USE AT YOUR OWN RISK)  This is a free-form property bag that will be copied into