Add search to site

Closes GH-1776.

Author: wooorm

docs/_asset/index.css

@@ -43,6 +43,30 @@
   --hl: var(--blue-5);
   --fg: var(--black);
   --bg: var(--white);
+
+  /* We manually add a blur on `::before` of the container, so no background needed. */
+  --docsearch-container-background: transparent !important;
+  --docsearch-footer-background: var(--white) !important;
+  --docsearch-footer-shadow: 0 -1px 0 0 var(--gray-2) !important;
+  --docsearch-highlight-color: var(--hl) !important;
+  --docsearch-hit-color: var(--gray-7) !important;
+  --docsearch-hit-shadow: inset 0 0 0 1px var(--gray-2) !important;
+  /* This is actually used in a `background` field so does not have to be a gradient. */
+  --docsearch-key-gradient: var(--gray-0) !important;
+  --docsearch-key-pressed-shadow: none !important;
+  --docsearch-key-shadow: inset 0 -1px 0 var(--gray-4) !important;
+  --docsearch-modal-background: var(--white) !important;
+  /* Card shadow: <https://github.com/unifiedjs/unifiedjs.github.io/blob/4de0391/asset/index.css#L399> */
+  --docsearch-modal-shadow: 0 0 0 0.2em rgb(3 102 214 / 0%),
+    0 13px 27px -5px rgb(50 50 93 / 25%), 0 8px 16px -8px rgb(0 0 0 / 30%),
+    0 -6px 16px -6px rgb(0 0 0 / 2.5%) !important;
+  /* Use the regular color: */
+  --docsearch-muted-color: var(--black) !important;
+  --docsearch-primary-color: var(--hl) !important;
+  --docsearch-searchbox-background: var(--white) !important;
+  --docsearch-searchbox-focus-background: var(--gray-0) !important;
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--hl) !important;
+  --docsearch-text-color: var(--black) !important;
 }
 
 * {
@@ -526,7 +550,8 @@ button.success {
   padding-top: calc(2 * (1em + 1ex));
 }
 
-.navigation::before {
+.navigation::before,
+.DocSearch-Container::before {
   content: '';
   inset: 0;
   position: absolute;
@@ -538,6 +563,10 @@ button.success {
   );
 }
 
+.DocSearch li {
+  margin: 0;
+}
+
 #banner {
   padding: calc(0.25 * (1em + 1ex));
   background-color: var(--mdx-yellow);
@@ -564,7 +593,8 @@ button.success {
 
 /* Note that the `backdrop-filter` itself is applied in light mode. */
 @supports (backdrop-filter: blur(1ex)) {
-  .navigation::before {
+  .navigation::before,
+  .DocSearch-Container::before {
     backdrop-filter: saturate(200%) blur(1ex);
     background-image: radial-gradient(
       ellipse at 50% 0%,
@@ -574,8 +604,10 @@ button.success {
   }
 }
 
+.DocSearch-Modal,
 .navigation-primary,
 .navigation-secondary,
+.navigation-search,
 .navigation-tertiary {
   z-index: 3;
 }
@@ -597,13 +629,22 @@ button.success {
 
 .navigation-primary,
 .navigation-secondary,
+.navigation-search,
 .navigation-tertiary {
   margin: 0;
   padding: calc(0.5 * (1em + 1ex));
   display: flex;
   list-style-type: none;
 }
 
+.navigation-search {
+  padding: calc(0.25em + 0.25ex);
+}
+
+.DocSearch-Button {
+  margin: 0 !important;
+}
+
 .navigation-primary h1,
 .navigation-secondary li,
 .navigation-tertiary li {
@@ -1009,6 +1050,8 @@ details[open] {
     --hl: var(--mdx-yellow);
     --fg: var(--white);
     --bg: var(--black);
+
+    --docsearch-key-gradient: #eaeef2 !important;
   }
 
   .navigation-secondary a {
@@ -1201,6 +1244,10 @@ details[open] {
     font-size: 1.125em;
   }
 
+  .navigation-search {
+    padding: calc(0.3em + 0.3ex);
+  }
+
   #markdown-for-thecomponent-era {
     font-size: 3rem;
     line-height: calc(1em + (1 / 3 * 1ex));

docs/_asset/index.js

@@ -1,17 +1,20 @@
 /* eslint-disable unicorn/prefer-query-selector */
 /// <reference lib="dom" />
 
+import docsearch_ from '@docsearch/js'
 import {computePosition, shift} from '@floating-ui/dom'
 import copyToClipboard from 'copy-to-clipboard'
 import {ok as assert} from 'devlop'
 
+// Squircles.
 if ('paintWorklet' in CSS) {
   // @ts-expect-error: TS doesn’t understand Houdini.
   CSS.paintWorklet.addModule(
     'https://www.unpkg.com/[email protected]/squircle.min.js'
   )
 }
 
+// Copy buttons.
 const copies = Array.from(document.querySelectorAll('button.copy-button'))
 const copyTemplate = document.createElement('template')
 const copiedTemplate = document.createElement('template')
@@ -142,3 +145,16 @@ function popoverShow(popoverTarget) {
     }
   )
 }
+
+// Docsearch.
+// Note: types are wrong.
+const docsearch = /** @type {import('@docsearch/js')['default']} */ (
+  /** @type {unknown} */ (docsearch_)
+)
+
+docsearch({
+  appId: 'B0O9AAZ9L2',
+  apiKey: '71f38eae605e3e6d500368617e32c19f',
+  container: '#docsearch',
+  indexName: 'mdxjs'
+})

docs/_component/nav-site.jsx

@@ -58,6 +58,9 @@ export function NavigationSite(properties) {
           </h1>
         </a>
       </div>
+      <div className="navigation-search">
+        <div id="docsearch" />
+      </div>
       <NavigationGroup
         className="navigation-secondary"
         items={navigationTree.children}