docs: implement rudimentary full-text search (#1849)

docs/.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /dist
 /.routify
+src/SEARCH_INDEX.json

docs/package.json

@@ -1,10 +1,11 @@
 {
   "private": true,
   "scripts": {
-    "dev": "run-p dev:*",
+    "dev": "yarn build:index-docs && run-p dev:*",
     "dev:routify": "cross-env NODE_ENV=development routify run",
     "dev:svite": "vite dev",
     "build": "run-s build:*",
+    "build:index-docs": "node scripts/index-docs.js",
     "build:routify": "routify run -b",
     "build:svite": "vite build"
   },
@@ -16,6 +17,7 @@
     "clipboard-copy": "^4.0.1",
     "cross-env": "^7.0.3",
     "mdsvex": "^0.10.6",
+    "minisearch": "^6.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",

docs/scripts/index-docs.js

@@ -0,0 +1,43 @@
+// @ts-check
+const fs = require("fs");
+const path = require("path");
+const { slug } = require("github-slugger");
+
+const COMPONENTS_PATH = "./src/pages/components";
+const SEARCH_INDEX_PATH = "./src/SEARCH_INDEX.json";
+const H2_DELMIMITER = "## ";
+
+const files = fs.readdirSync(COMPONENTS_PATH);
+
+/**
+ * @typedef {Object} Document
+ * @property {string} id
+ * @property {string} text
+ * @property {string} description
+ * @property {string} href
+ */
+
+/** @type {Document[]} */
+const documents = [];
+
+for (const file of files) {
+  const [component_name] = file.split(".");
+  const file_path = path.join(COMPONENTS_PATH, file);
+  const file_content = fs.readFileSync(file_path, "utf8");
+
+  file_content.split("\n").forEach((line) => {
+    if (line.startsWith(H2_DELMIMITER)) {
+      const [, h2] = line.split(H2_DELMIMITER);
+      const hash = slug(h2);
+
+      documents.push({
+        id: component_name + hash,
+        text: component_name,
+        description: h2,
+        href: `/components/${component_name}#${hash}`,
+      });
+    }
+  });
+}
+
+fs.writeFileSync(SEARCH_INDEX_PATH, JSON.stringify(documents, null, 2));

docs/src/pages/_layout.svelte

@@ -1,5 +1,11 @@
 <script>
-  import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
+  import {
+    isActive,
+    url,
+    layout,
+    beforeUrlChange,
+    goto,
+  } from "@sveltech/routify";
   import {
     Header,
     HeaderUtilities,
@@ -8,6 +14,7 @@
     HeaderPanelLinks,
     HeaderPanelLink,
     HeaderPanelDivider,
+    HeaderSearch,
     SkipToContent,
     SideNav,
     SideNavItems,
@@ -15,12 +22,30 @@
     Theme,
     Tag,
   } from "carbon-components-svelte";
+  import MiniSearch from "minisearch";
   import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
   import { theme } from "../store";
+  import SEARCH_INDEX from "../SEARCH_INDEX.json";
+
+  const miniSearch = new MiniSearch({
+    fields: ["text", "description"],
+    storeFields: ["text", "description", "href"],
+    searchOptions: {
+      prefix: true,
+      boost: { description: 2 },
+      fuzzy: 0.1,
+    },
+  });
+
+  miniSearch.addAll(SEARCH_INDEX);
 
   const deprecated = [];
   const new_components = [];
 
+  let value = "";
+  let active = false;
+  $: results = miniSearch.search(value).slice(0, 10);
+
   let isOpen = false;
   let isSideNavOpen = true;
   let innerWidth = 2048;
@@ -50,13 +75,21 @@
       <SkipToContent />
     </svelte:fragment>
 
-    <span slot="platform" class="platform-name">
+    <span slot="platform" class="platform-name" class:hidden="{active}">
       Carbon Components Svelte &nbsp;<code class="code-01"
         >v{process.env.VERSION || ""}</code
       >
     </span>
-
     <HeaderUtilities>
+      <HeaderSearch
+        bind:value
+        bind:active
+        placeholder="Search"
+        results="{results}"
+        on:select="{(e) => {
+          $goto(e.detail.selectedResult.href);
+        }}"
+      />
       <HeaderActionLink
         icon="{LogoGithub}"
         href="https://github.com/carbon-design-system/carbon-components-svelte"
@@ -132,6 +165,13 @@
 </Theme>
 
 <style>
+  /** Hide logo to make space for search bar on narrower screens. */
+  @media (max-width: 1056px) {
+    .platform-name.hidden {
+      display: none;
+    }
+  }
+
   .platform-name {
     display: flex;
     align-items: baseline;

docs/yarn.lock

@@ -165,7 +165,7 @@ bufferutil@^4.0.1:
     node-gyp-build "~3.7.0"
 
 carbon-components-svelte@../:
-  version "0.81.1"
+  version "0.82.1"
   dependencies:
     flatpickr "4.6.9"
 
@@ -879,6 +879,11 @@ minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+minisearch@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/minisearch/-/minisearch-6.2.0.tgz#310b50508551f22e10815f5baedeeeded03a6b5d"
+  integrity sha512-BECkorDF1TY2rGKt9XHdSeP9TP29yUbrAaCh/C03wpyf1vx3uYcP/+8XlMcpTkgoU0rBVnHMAOaP83Rc9Tm+TQ==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"