Implement DocSearch v3

packages/typescriptlang-org/gatsby-browser.js

@@ -1,3 +1,6 @@
+require("@docsearch/react/style/variables")
+require("@docsearch/react/style/button")
+
 // This hooks ups client-side app analytics
 // it's based on how the google analytics plugin works for gatsby
 // https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js

packages/typescriptlang-org/package.json

@@ -8,7 +8,6 @@
     "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build",
     "clean": "gatsby clean",
     "bootstrap": "pnpm update-versions",
-    "update-static-assets": "node scripts/downloadSearchAssets.js",
     "update-versions": "node scripts/getTypeScriptNPMVersions.js",
     "setup-playground-cache-bust": "node scripts/cacheBustPlayground.mjs",
     "create-lighthouse-json": "node scripts/createLighthouseJSON.js",
@@ -19,6 +18,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.24.5",
+    "@docsearch/react": "^3.5.1",
     "@formatjs/intl-relativetimeformat": "^4.5.15",
     "@types/react-helmet": "^5.0.15",
     "@typescript/playground": "workspace:*",

packages/typescriptlang-org/src/components/DocSearch.scss

@@ -0,0 +1,93 @@
+@import "../style/globals.scss";
+
+:root {
+  --docsearch-primary-color: #{$ts-main-blue-color};
+}
+
+/* Darkmode */
+html.dark-theme {
+  --docsearch-primary-color: rgb(53, 142, 241);
+  --docsearch-text-color: rgb(245, 246, 247);
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: rgb(38, 38, 38);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
+    0 3px 8px 0 rgb(0, 3, 9);
+  --docsearch-searchbox-background: rgb(38, 38, 38);
+  --docsearch-searchbox-focus-background: rgb(15, 17, 22);
+  --docsearch-hit-color: rgb(190, 195, 201);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: rgb(49, 49, 49);
+  --docsearch-key-gradient: linear-gradient(
+    -26.5deg,
+    rgb(80, 88, 114) 0%,
+    rgb(40, 50, 58) 100%
+  );
+  --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85),
+    inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-footer-background: var(--raised-background-color);
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+  --docsearch-logo-color: rgb(255, 255, 255);
+  --docsearch-muted-color: rgb(127, 132, 151);
+}
+
+// Custom DocSearch button
+.DocSearch-Button {
+  background: rgb(35, 90, 151);
+  color: white;
+  font-weight: 600;
+  height: 48px;
+  line-height: 48px;
+  margin: 0;
+  padding: 0 1rem;
+  border-radius: 0;
+
+  .DocSearch-Button-Key {
+    opacity: 0.3;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: rgb(53, 142, 241);
+    box-shadow: none;
+    color: white;
+    .DocSearch-Button-Key {
+      opacity: 1;
+    }
+  }
+
+  .DocSearch-Search-Icon {
+    color: white;
+  }
+  .DocSearch-Button-Placeholder {
+    margin-right: 3rem;
+  }
+
+  .DocSearch-Button-Key {
+    color: white;
+    background: transparent;
+    box-shadow: none;
+    border: white solid 1px;
+  }
+
+  .DocSearch-Hit-path,
+  .DocSearch-Hit-title {
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 790px) {
+  .DocSearch-Button {
+    width: 100%;
+    padding: 0 16px;
+  }
+
+  .DocSearch-Button-Placeholder {
+    display: block;
+  }
+
+  .DocSearch-Button-Key {
+    display: none;
+  }
+}

packages/typescriptlang-org/src/components/DocSearch.tsx

@@ -0,0 +1,106 @@
+import React, { Fragment, useState, useRef, useCallback } from "react"
+import { createPortal } from "react-dom"
+import { Link, navigate } from "gatsby"
+import {
+  DocSearchButton,
+  useDocSearchKeyboardEvents,
+  DocSearchModalProps,
+} from "@docsearch/react"
+
+import "./DocSearch.scss"
+
+let DocSearchModal: React.ComponentType<DocSearchModalProps> | null = null
+
+function Hit({ hit, children }) {
+  return <Link to={hit.url}>{children}</Link>
+}
+
+export function DocSearch(props) {
+  const searchButtonRef = useRef<HTMLButtonElement | null>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [initialQuery, setInitialQuery] = useState<string | null>(null)
+
+  const importDocSearchModalIfNeeded = useCallback(() => {
+    if (DocSearchModal) {
+      return Promise.resolve()
+    }
+
+    return Promise.all([
+      import("@docsearch/react/modal"),
+      import("@docsearch/react/style/modal"),
+    ]).then(([{ DocSearchModal: Modal }]) => {
+      DocSearchModal = Modal
+    })
+  }, [])
+
+  const onOpen = useCallback(() => {
+    importDocSearchModalIfNeeded().then(() => {
+      setIsOpen(true)
+    })
+  }, [importDocSearchModalIfNeeded, setIsOpen])
+
+  const onClose = useCallback(() => {
+    setIsOpen(false)
+  }, [setIsOpen])
+
+  const onInput = useCallback(
+    (event: KeyboardEvent) => {
+      importDocSearchModalIfNeeded().then(() => {
+        setIsOpen(true)
+        setInitialQuery(event.key)
+      })
+    },
+    [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery]
+  )
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  })
+
+  return (
+    <Fragment>
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+      />
+
+      {DocSearchModal &&
+        isOpen &&
+        createPortal(
+          <DocSearchModal
+            initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
+            onClose={onClose}
+            navigator={{
+              navigate({ suggestionUrl }) {
+                navigate(suggestionUrl)
+              },
+            }}
+            hitComponent={Hit}
+            transformItems={items => {
+              return items.map(item => {
+                // We transform the absolute URL into a relative URL to
+                // leverage Gatsby's preloading.
+                const a = document.createElement("a")
+                a.href = item.url
+
+                return {
+                  ...item,
+                  url: `${a.pathname}${a.hash}`,
+                }
+              })
+            }}
+            {...props}
+          />,
+          document.body
+        )}
+    </Fragment>
+  )
+}

packages/typescriptlang-org/src/components/layout/TopNav.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from "react"
-import { withPrefix } from "gatsby"
 
 import "./TopNav.scss"
 import { setupStickyNavigation } from "./stickyNavigation";
 import { useIntl } from "react-intl";
 import { createIntlLink } from "../IntlLink";
+import { DocSearch } from '../DocSearch';
 
 export type Props = {
   lang: string
@@ -42,37 +42,8 @@ export const SiteNav = (props: Props) => {
   // the page is loaded
   useEffect(() => {
     setupStickyNavigation()
-
-    // @ts-ignore - this comes from the script above
-    if (window.docsearch) {
-      loadDocSearch();
-    }
-    if (document.getElementById("algolia-search")) return
-
-    const searchScript = document.createElement('script');
-    searchScript.id = "algolia-search"
-    const searchCSS = document.createElement('link');
-
-    searchScript.src = withPrefix("/js/docsearch.js");
-    searchScript.async = true;
-    searchScript.onload = () => {
-      // @ts-ignore - this comes from the script above
-      if (window.docsearch) {
-        loadDocSearch();
-
-        searchCSS.rel = 'stylesheet';
-        searchCSS.href = withPrefix('/css/docsearch.css');
-        searchCSS.type = 'text/css';
-        document.body.appendChild(searchCSS);
-
-        document.getElementById("search-form")?.classList.add("search-enabled")
-      }
-    }
-
-    document.body.appendChild(searchScript);
   }, []);
 
-
   return (
     <header dir="ltr">
       <a className="skip-to-main" href={props.skipToAnchor || '#site-content'} tabIndex={0}>{i("skip_to_content")}</a>
@@ -103,11 +74,11 @@ export const SiteNav = (props: Props) => {
           <div className="search-section">
             <OpenInMyLangQuickJump />
             <div className="nav-item">
-              <form id="search-form" className="search top-nav" role="search" aria-live="assertive">
-                <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m10.5 0c.5052 0 .9922.0651042 1.4609.195312.4688.130209.9063.315105 1.3125.554688.4063.239583.7761.52865 1.1094.86719.3386.33333.6276.70312.8672 1.10937s.4245.84375.5547 1.3125.1953.95573.1953 1.46094-.0651.99219-.1953 1.46094-.3151.90625-.5547 1.3125-.5286.77864-.8672 1.11718c-.3333.33334-.7031.61978-1.1094.85938-.4062.2396-.8437.4245-1.3125.5547-.4687.1302-.9557.1953-1.4609.1953-.65104 0-1.27604-.1094-1.875-.3281-.59375-.2188-1.14062-.5339-1.64062-.94534l-6.132818 6.12504c-.098958.0989-.216145.1484-.351562.1484s-.252604-.0495-.351562-.1484c-.0989588-.099-.148438-.2162-.148438-.3516s.0494792-.2526.148438-.3516l6.125002-6.13278c-.41146-.5-.72656-1.04687-.94532-1.64062-.21874-.59896-.32812-1.22396-.32812-1.875 0-.50521.0651-.99219.19531-1.46094s.31511-.90625.55469-1.3125.52604-.77604.85938-1.10937c.33854-.33854.71093-.627607 1.11718-.86719s.84375-.424479 1.3125-.554688c.46875-.1302078.95573-.195312 1.46094-.195312zm0 10c.6198 0 1.2031-.11719 1.75-.35156.5469-.23959 1.0234-.5625 1.4297-.96875.4062-.40625.7265-.88281.9609-1.42969.2396-.54688.3594-1.13021.3594-1.75s-.1198-1.20312-.3594-1.75c-.2344-.54688-.5547-1.02344-.9609-1.42969-.4063-.40625-.8828-.72656-1.4297-.96093-.5469-.23959-1.1302-.35938-1.75-.35938-.61979 0-1.20312.11979-1.75.35938-.54688.23437-1.02344.55468-1.42969.96093s-.72916.88281-.96875 1.42969c-.23437.54688-.35156 1.13021-.35156 1.75s.11719 1.20312.35156 1.75c.23959.54688.5625 1.02344.96875 1.42969s.88281.72916 1.42969.96875c.54688.23437 1.13021.35156 1.75.35156z" fill="#fff" /></svg>
-                <span><input id='search-box-top' type="search" placeholder={i("nav_search_placeholder")} aria-label={i("nav_search_aria")} /></span>
-                <input type="submit" style={{ display: "none" }} />
-              </form>
+              <DocSearch
+                  apiKey="3c2db2aef0c7ff26e8911267474a9b2c"
+                  indexName="typescriptlang"
+                  appId="BH4D9OD16A"
+                />
             </div>
           </div>
         </div>