rescript-lang · fhammerschmidt · Apr 8, 2024 · Jun 24, 2022 · Jul 16, 2022 · Dec 8, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     }
   },
   "dependencies": {
+    "@docsearch/react": "^3.5.2",
     "@headlessui/react": "^1.2.0",
     "@mdx-js/loader": "^2.3.0",
     "@rescript/react": "^0.12.0-alpha.3",

diff --git a/pages/_document.js b/pages/_document.js
@@ -6,16 +6,7 @@ const isProduction = process.env.ENV === "production";
 export default function Document() {
   return (
     <Html>
-      <Head>
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
-        />
-        <script
-          type="text/javascript"
-          src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
-        />
-      </Head>
+      <Head />
       <body>
         <Main />
         <NextScript />

diff --git a/src/bindings/DocSearch.res b/src/bindings/DocSearch.res
@@ -0,0 +1,58 @@
+// API: https://github.com/algolia/docsearch/tree/v3.5.2/packages/docsearch-react/src/types
+type contentType =
+  | @as("content") Content
+  | @as("lvl0") Lvl0
+  | @as("lvl1") Lvl1
+  | @as("lvl2") Lvl2
+  | @as("lvl3") Lvl3
+  | @as("lvl4") Lvl4
+  | @as("lvl5") Lvl5
+  | @as("lvl6") Lvl6
+
+type hierarchy = {
+  lvl0: string,
+  lvl1: string,
+  lvl2: Js.Nullable.t<string>,
+  lvl3: Js.Nullable.t<string>,
+  lvl4: Js.Nullable.t<string>,
+  lvl5: Js.Nullable.t<string>,
+  lvl6: Js.Nullable.t<string>,
+}
+
+type docSearchHit = {
+  objectID: string,
+  content: Js.Nullable.t<string>,
+  url: string,
+  url_without_anchor: string,
+  @as("type") type_: contentType,
+  anchor: Js.Nullable.t<string>,
+  hierarchy: hierarchy,
+  // NOTE: docsearch need these two fields to highlight results
+  _highlightResult: {.},
+  _snippetResult: {.},
+}
+type transformItems = array<docSearchHit>
+
+type hitComponent = {
+  hit: docSearchHit,
+  children: React.element,
+}
+
+type item = {itemUrl: string}
+
+type navigator = {navigate: item => unit}
+
+type searchParameters = {facetFilters: array<string>}
+
+@module("@docsearch/react") @react.component
+external make: (
+  ~appId: string,
+  ~indexName: string,
+  ~apiKey: string,
+  ~transformItems: transformItems => transformItems=?,
+  ~hitComponent: hitComponent => React.element=?,
+  ~navigator: navigator=?,
+  ~onClose: unit => unit=?,
+  ~searchParameters: searchParameters=?,
+  ~initialScrollY: int=?,
+) => React.element = "DocSearchModal"
diff --git a/src/bindings/Webapi.res b/src/bindings/Webapi.res
@@ -6,6 +6,7 @@ module Document = {
 module ClassList = {
   type t
   @send external toggle: (t, string) => unit = "toggle"
+  @send external remove: (t, string) => unit = "remove"
 }
 
 module Element = {
@@ -14,6 +15,7 @@ module Element = {
   @set external setClassName: (Dom.element, string) => unit = "className"
   @get external classList: Dom.element => ClassList.t = "classList"
   @send external getBoundingClientRect: Dom.element => {..} = "getBoundingClientRect"
+  @send external addEventListener: (Dom.element, string, unit => unit) => unit = "addEventListener"
 
   module Style = {
     @scope("style") @set external width: (Dom.element, string) => unit = "width"

diff --git a/src/components/DocSearch.res b/src/components/DocSearch.res
diff --git a/src/components/DocSearch.resi b/src/components/DocSearch.resi
diff --git a/src/components/Navigation.res b/src/components/Navigation.res
@@ -372,9 +372,6 @@ module MobileNav = {
     let extLink = "block hover:cursor-pointer hover:text-white text-gray-60"
     <div className="border-gray-80 border-t">
       <ul>
-        <li className=base>
-          <DocSearch.Textbox id="docsearch-mobile" />
-        </li>
         <li className=base>
           <Link href="/try" className={linkOrActiveLink(~target="/try", ~route)}>
             {React.string("Playground")}
@@ -521,7 +518,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
       ref={ReactDOM.Ref.domRef(navRef)}
       id="header"
       style={ReactDOMStyle.make(~minWidth, ())}
-      className={fixedNav ++ " z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14"}>
+      className={fixedNav ++ " items-center z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14"}>
       <div className="flex justify-between items-center h-full w-full max-w-1280">
         <div className="h-8 w-8 lg:h-10 lg:w-32">
           <a
@@ -557,22 +554,22 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
               {React.string("Community")}
             </Link>
           </div>
-          <div className="hidden md:flex items-center">
-            <div className="hidden sm:block mr-6">
-              <DocSearch />
+          <div className="md:flex flex items-center">
+            <Search />
+            <div className="hidden md:flex items-center ml-5">
+              <a href=githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
+                <Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
+              </a>
+              <a
+                href="https://twitter.com/rescriptlang"
+                rel="noopener noreferrer"
+                className={"mr-5 " ++ link}>
+                <Icon.Twitter className="w-6 h-6 opacity-50 hover:opacity-100" />
+              </a>
+              <a href=discourseHref rel="noopener noreferrer" className=link>
+                <Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
+              </a>
             </div>
-            <a href=githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
-              <Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
-            </a>
-            <a
-              href="https://twitter.com/rescriptlang"
-              rel="noopener noreferrer"
-              className={"mr-5 " ++ link}>
-              <Icon.Twitter className="w-6 h-6 opacity-50 hover:opacity-100" />
-            </a>
-            <a href=discourseHref rel="noopener noreferrer" className=link>
-              <Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
-            </a>
           </div>
         </div>
       </div>