Embedded search

client/package.json

@@ -21,6 +21,7 @@
     "@tailwindcss/typography": "^0.4.1",
     "color": "^4.0.1",
     "eventemitter3": "^4.0.7",
+    "flexsearch": "^0.7.21",
     "gray-matter": "^4.0.3",
     "lottie-web": "^5.7.13",
     "match-sorter": "^6.3.1",
@@ -43,6 +44,7 @@
   },
   "devDependencies": {
     "@types/color": "^3.0.2",
+    "@types/flexsearch": "^0.7.1",
     "@types/markdown-it": "^12.2.3",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",

client/src/docs/index.tsx

@@ -1,14 +1,90 @@
 import * as React from "react";
-import {NavLink, Outlet, Route, Routes, useLocation} from "react-router-dom";
+import {Link, NavLink, Route, Routes, useLocation} from "react-router-dom";
 import "prismjs/themes/prism-tomorrow.css";
 import Menubar from "@thorium/ui/Menubar";
+import {Popover, Transition} from "@headlessui/react";
+import {Index} from "flexsearch";
 import "./docs.css";
 
+const docIndex = new Index();
+
+function Search() {
+  const [results, setResults] = React.useState<{title: string; path: string}[]>(
+    []
+  );
+  return (
+    <div className="search mb-4">
+      <Popover className="relative">
+        <>
+          <input
+            type="text"
+            placeholder="Search"
+            className="input input-lg input-bordered input-ghost w-full !h-8 py-0 focus:!text-white"
+            onFocus={e => {
+              const value = e.target.value;
+              if (value.length > 2) {
+                const results = docIndex
+                  .search(value)
+                  .map(id => (typeof id === "string" ? JSON.parse(id) : id));
+                setResults(results);
+              }
+            }}
+            onChange={e => {
+              const value = e.target.value;
+              if (value.length > 2) {
+                const results = docIndex
+                  .search(value)
+                  .map(id => (typeof id === "string" ? JSON.parse(id) : id));
+                setResults(results);
+              } else {
+                setResults([]);
+              }
+            }}
+          />
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+            show={results.length > 0}
+          >
+            <Popover.Panel
+              static
+              className="absolute z-10 w-64 px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 lg:max-w-3xl"
+            >
+              <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                <div className="relative bg-black/50 p-7">
+                  {results.map(item => (
+                    <Link
+                      onClick={() => {
+                        setResults([]);
+                      }}
+                      key={item.path}
+                      to={item.path}
+                      className="flex items-center px-2 py-1 m-1 transition duration-150 ease-in-out rounded-lg hover:bg-gray-800 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
+                    >
+                      <p className="font-medium text-gray-50">{item.title}</p>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      </Popover>
+    </div>
+  );
+}
+
 const ROUTES = import.meta.globEager("/src/docs/**/*.{tsx,jsx,md,mdx}");
 
 type RouteType = {
   path: string;
   component: React.ComponentType;
+  content: string;
   section: string;
   frontmatter: {
     title: string;
@@ -32,12 +108,19 @@ export const routes = Object.keys(ROUTES)
     return {
       path: path.toLowerCase().replace(/\s/g, "-"),
       component: ROUTES[route].default,
+      content: ROUTES[route].content,
       section: routeParts[0],
       frontmatter: ROUTES[route].frontmatter,
     };
   })
   .filter(isRoute);
 
+routes.forEach(route => {
+  docIndex.add(
+    JSON.stringify({...route.frontmatter, path: route.path}),
+    route.content
+  );
+});
 type Heading = {
   title: string;
   id: string;
@@ -228,6 +311,7 @@ export default function DocLayout() {
           </div>
         </article>
         <aside className="flex-1 overflow-y-auto px-4 py-8 text-white w-full max-w-sm bg-black/60 backdrop-filter backdrop-blur">
+          <Search />
           <TOC
             pathname={location.pathname}
             docRef={docRef}

patches/vite-plugin-mdx+3.5.6.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/vite-plugin-mdx/dist/transform.js b/node_modules/vite-plugin-mdx/dist/transform.js
-index 9ba9617..10cd892 100644
+index 9ba9617..bae1673 100644
 --- a/node_modules/vite-plugin-mdx/dist/transform.js
 +++ b/node_modules/vite-plugin-mdx/dist/transform.js
 @@ -12,6 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
@@ -14,10 +14,10 @@ index 9ba9617..10cd892 100644
      return function transform(code_mdx, mdxOptions) {
          return __awaiter(this, void 0, void 0, function* () {
              const code_jsx = yield mdx(code_mdx, mdxOptions);
-+            const frontmatter = graymatter(code_mdx).data;
++            const {data:frontmatter, content} = graymatter(code_mdx);
              const code_es2019 = yield jsxToES2019(code_jsx);
 -            return imports.concat('', code_es2019).join('\n');
-+            const extraExports = `export const frontmatter = ${JSON.stringify(frontmatter, null, 2)};`
++            const extraExports = `export const frontmatter = ${JSON.stringify(frontmatter, null, 2)};\nexport const content = \`${content.replace(/`/g,'\\`')}\``
 +            return imports.concat('', code_es2019, extraExports).join('\n');
          });
      };