microsoft · orta · Jun 21, 2020 · Jun 22, 2020
diff --git a/packages/typescriptlang-org/package.json b/packages/typescriptlang-org/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.8.4",
+    "@docsearch/react": "1.0.0-alpha.18",
     "@formatjs/intl-relativetimeformat": "^4.5.15",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",

diff --git a/packages/typescriptlang-org/scripts/downloadSearchAssets.js b/packages/typescriptlang-org/scripts/downloadSearchAssets.js
diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.scss b/packages/typescriptlang-org/src/components/layout/TopNav.scss
@@ -344,3 +344,21 @@ form.search {
 .skip-to-main:focus {
   border: 1px dashed black;
 }
+
+:root {
+  --docsearch-primary-color: $ts-main-blue-color;
+  --docsearch-modal-background: white;
+  --docsearch-modal-background: blue;
+  // --docsearch-modal-shadow
+}
+
+div.DocSearch-Modal {
+  background-color: white;
+  z-index: $z-index-for-search;
+}
+
+span.DocSearch-Commands-Key {
+  box-shadow: none;
+  background: white;
+  border: 1px solid #969faf;
+}
diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.tsx b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
@@ -1,5 +1,7 @@
-import React, { useEffect } from "react"
-import { withPrefix } from "gatsby"
+import React, { useEffect, useState, useCallback } from "react"
+import { createPortal } from 'react-dom';
+
+import { Link, navigate } from "gatsby"
 
 import "./TopNav.scss"
 import { setupStickyNavigation } from "./stickyNavigation";
@@ -13,6 +15,10 @@ export type Props = {
 
 import { navCopy } from "../../copy/en/nav"
 import { createInternational } from "../../lib/createInternational"
+import { useDocSearchKeyboardEvents } from '@docsearch/react';
+import Helmet from "react-helmet";
+
+let DocSearchModal: any = null;
 
 
 export const SiteNav = (props: Props) => {
@@ -22,31 +28,6 @@ export const SiteNav = (props: Props) => {
   // This extra bit of mis-direction ensures that non-essential code runs after 
   // the page is loaded
   useEffect(() => {
-    const searchScript = document.createElement('script');
-    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 (typeof docsearch !== 'undefined') {
-        // @ts-ignore - this comes from the script above
-        docsearch({
-          apiKey: '3c2db2aef0c7ff26e8911267474a9b2c',
-          indexName: 'typescriptlang',
-          inputSelector: '.search input',
-          debug: true // Set debug to true if you want to inspect the dropdown
-        });
-
-        searchCSS.rel = 'stylesheet';
-        searchCSS.href = withPrefix('/css/docsearch.css');
-        searchCSS.type = 'text/css';
-        document.body.appendChild(searchCSS);
-      }
-    }
-
-    document.body.appendChild(searchScript);
-
     setupStickyNavigation()
   }, []);
 
@@ -80,20 +61,12 @@ export const SiteNav = (props: Props) => {
           <div className="search-section">
             <ul>
               <li className="nav-item">
-                <form className="search top-nav" role="search">
-                  <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 i={i} indexName="typescriptlang" apiKey="3c2db2aef0c7ff26e8911267474a9b2c" />
               </li>
-              {/* 
-                <li className="nav-item hide-small"><a href="#" title="Popover for app settings"><svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" fill="#fff" r="6" /></svg></a></li>
-                <li className="nav-item hide-small"><a href="/play">en</a></li>
-              */}
             </ul>
           </div>
         </div>
-      </div>
+      </div >
 
       { /** <div className="hide-small" id="beta-notification-menu">{i("nav_beta_notification", { a: (...chunk) => <a href="https://github.com/microsoft/TypeScript-Website/issues">{chunk}</a> })}</div> */}
 
@@ -102,3 +75,127 @@ export const SiteNav = (props: Props) => {
     </header >
   )
 }
+
+
+function Hit({ hit, children }) {
+  return <Link to={hit.url}>{children}</Link>;
+}
+
+function ResultsFooter({ state, onClose }) {
+  // const { generateSearchPageLink } = useSearchQuery();
+
+  return (
+    <Link to={state.query} onClick={onClose}>
+      See all {state.context.nbHits} results
+    </Link>
+  );
+}
+
+
+interface DocSearchProps {
+  i: (string) => string
+  indexName: string
+  apiKey: string
+  appId?: string
+  searchParameters?: any
+}
+
+const DocSearch = (props: DocSearchProps) => {
+  const { i, indexName, appId, apiKey, searchParameters } = props
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const importDocSearchModalIfNeeded = useCallback(() => {
+    if (DocSearchModal) {
+      return Promise.resolve();
+    }
+
+    return Promise.all([
+      import('@docsearch/react/modal'),
+      import('@docsearch/react/style'),
+      // import('./styles.css'),
+    ]).then(([{ DocSearchModal: Modal }]) => {
+      DocSearchModal = Modal;
+    });
+  }, []);
+
+  const onOpen = useCallback(() => {
+    importDocSearchModalIfNeeded().then(() => {
+      setIsOpen(true);
+    });
+  }, [importDocSearchModalIfNeeded, setIsOpen]);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose });
+
+  return (
+    <>
+      <Helmet>
+        {/* This hints the browser that the website will load data from Algolia,
+        and allows it to preconnect to the DocSearch cluster. It makes the first
+        query faster, especially on mobile. */}
+        <link
+          rel="preconnect"
+          href={`https://${appId}-dsn.algolia.net`}
+          crossOrigin="true"
+        />
+      </Helmet>
+
+      <form className="search top-nav" role="search"
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        onSubmit={(e) => { e.preventDefault(); onOpen(); return false; }}
+      >
+        <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")} autoComplete="off" />
+        </span>
+        <input type="submit" style={{ display: "none" }} />
+      </form>
+
+      {
+        isOpen &&
+        createPortal(
+          <DocSearchModal
+            appId={appId}
+            apiKey={apiKey}
+            indexName={indexName}
+            searchParameters={searchParameters}
+            onClose={onClose}
+            initialScrollY={window.scrollY}
+            query={(document.getElementById("search-box-top") as any).value || ""}
+            navigator={{
+              navigate({ suggestionUrl }) {
+                navigate(suggestionUrl)
+              },
+            }}
+            transformItems={(items) => {
+              return items.map((item) => {
+                // We transform the absolute URL into a relative URL.
+                // Alternatively, we can use `new URL(item.url)` but it's not
+                // supported in IE.
+                const a = document.createElement('a');
+                a.href = item.url;
+
+                return {
+                  ...item,
+                  url: `${a.pathname}${a.hash}`,
+                };
+              });
+            }}
+            hitComponent={Hit}
+            resultsFooterComponent={(props) => (
+              <ResultsFooter {...props} onClose={onClose} />
+            )}
+          />,
+          document.body,
+        )
+      }
+    </>
+  );
+}
diff --git a/packages/typescriptlang-org/src/style/globals.scss b/packages/typescriptlang-org/src/style/globals.scss
@@ -43,7 +43,7 @@ $screen-md-min: $screen-md;
 $screen-xs-max: ($screen-sm-min - 1);
 $screen-sm-max: ($screen-md-min - 1);
 
-$z-index-for-search: 100;
+$z-index-for-search: 110;
 $z-index-for-site-nav: 101;
 $z-index-for-handbook-nav: 99;
 $z-index-for-handbook-nav-button: 100;
diff --git a/packages/typescriptlang-org/src/templates/pages/index.scss b/packages/typescriptlang-org/src/templates/pages/index.scss
@@ -440,7 +440,7 @@ $headline-foreground-bg: #104261;
 
       // I don't like this - I don't know why the editor is in front of the button
       // even though the hierarchy implies it shouldn't - maybe the position abosolute?
-      z-index: 1;
+      // z-index: 1;
 
       .message {
         margin: 10px;

diff --git a/packages/typescriptlang-org/static/css/docsearch.css b/packages/typescriptlang-org/static/css/docsearch.css
diff --git a/packages/typescriptlang-org/static/js/docsearch.js b/packages/typescriptlang-org/static/js/docsearch.js