update

aspeddro · aspeddro · commit fa9ff789e937 · 2023-11-08T21:27:55.000-03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     }
   },
   "dependencies": {
-    "@docsearch/react": "^3.3.0",
+    "@docsearch/react": "^3.5.2",
     "@headlessui/react": "^1.2.0",
     "@mdx-js/loader": "^2.3.0",
     "@rescript/react": "^0.10.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
@@ -11,13 +11,13 @@ type contentType = [
 ]
 
 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>,
+  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 = {
diff --git a/src/components/Navigation.res b/src/components/Navigation.res
@@ -372,9 +372,9 @@ 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>
+        //   <DocSearch.Textbox id="docsearch-mobile" />
+        // </li>
         <li className=base>
           <Link href="/try" className={linkOrActiveLink(~target="/try", ~route)}>
             {React.string("Playground")}
diff --git a/src/components/Search.res b/src/components/Search.res
@@ -79,6 +79,7 @@ let make = () => {
             onClose
             initialScrollY={window->scrollY}
             transformItems={items => {
+              // Js.log(items)
               // Transform absolute URL intro relative url
               items->Js.Array2.map(item => {
                 let url = try Util.Url.make(item.url).pathname catch {
@@ -94,13 +95,45 @@ let make = () => {
                 let (content, type_) = switch item.content->Js.Nullable.toOption {
                 | Some(c) => (c->Js.Nullable.return, item.type_)
                 | None =>
-                  let fallback = item.hierarchy["lvl0"]
+                  let fallback = item.hierarchy.lvl0
                   (fallback->Js.Nullable.return, #content)
                 }
 
                 {...item, url, content, type_}
               })
             }}
+            hitComponent={({hit, children}) => {
+              let description = switch hit.url
+              ->Js.String2.split("/")
+              ->Js.Array2.sliceFrom(1)
+              ->Belt.List.fromArray {
+              | list{"blog", ..._} => "BLOG"
+              | list{"docs", "manual", version, ...rest} =>
+                let path = rest->Belt.List.toArray
+
+                let info =
+                  path
+                  ->Js.Array2.slice(~start=0, ~end_=Js.Array2.length(path) - 1)
+                  ->Js.Array2.map(Js.String2.toUpperCase)
+
+                let version = if version == "latest" {
+                  "Latest"
+                } else {
+                  version
+                }
+
+                [version]->Js.Array2.concat(info)->Js.Array2.joinWith(" / ")
+              | _ => ""
+              }
+              // <div className="flex flex-col w-full">
+              <a href={hit.url} className="flex flex-col w-full">
+                <span className="text-gray-60 captions px-4 py-2 block">
+                  {description->React.string}
+                </span>
+                children
+              </a>
+              // </div>
+            }}
           />,
           element,
         )
diff --git a/styles/_docsearch.css b/styles/_docsearch.css
@@ -166,8 +166,8 @@
 }
 
 .DocSearch-Hit {
-  border-radius: 4px;
-  @apply relative flex;
+  /* border-radius: 4px; */
+  @apply relative flex rounded-s border-b border-gray-20;
 }
 
 .DocSearch-Hit a {
@@ -201,10 +201,11 @@
 }
 
 .DocSearch-Hit-Container {
-  @apply flex items-center flex-row p-4 text-gray-40;
+  @apply flex items-center flex-row px-4 pb-4 pt-1 text-gray-40;
 }
 
 .DocSearch-Hit-icon {
+  /* display: none; */
   @apply w-5 h-5 stroke-1 text-gray-40;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`}`
`16`	`16`	`},`
`17`	`17`	`"dependencies": {`
`18`		`- "@docsearch/react": "^3.3.0",`
	`18`	`+ "@docsearch/react": "^3.5.2",`
`19`	`19`	`"@headlessui/react": "^1.2.0",`
`20`	`20`	`"@mdx-js/loader": "^2.3.0",`
`21`	`21`	`"@rescript/react": "^0.10.3",`
Original file line number	Diff line number	Diff line change
`@@ -166,8 +166,8 @@`
`166`	`166`	`}`
`167`	`167`
`168`	`168`	`.DocSearch-Hit {`
`169`		`- border-radius: 4px;`
`170`		`- @apply relative flex;`
	`169`	`+ /* border-radius: 4px; */`
	`170`	`+ @apply relative flex rounded-s border-b border-gray-20;`
`171`	`171`	`}`
`172`	`172`
`173`	`173`	`.DocSearch-Hit a {`
`@@ -201,10 +201,11 @@`
`201`	`201`	`}`
`202`	`202`
`203`	`203`	`.DocSearch-Hit-Container {`
`204`		`- @apply flex items-center flex-row p-4 text-gray-40;`
	`204`	`+ @apply flex items-center flex-row px-4 pb-4 pt-1 text-gray-40;`
`205`	`205`	`}`
`206`	`206`
`207`	`207`	`.DocSearch-Hit-icon {`
	`208`	`+ /* display: none; */`
`208`	`209`	`@apply w-5 h-5 stroke-1 text-gray-40;`
`209`	`210`	`}`
`210`	`211`