From 57b0515c4c5682d5c114657388a0cbd4e56975e1 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 12 Aug 2024 12:29:03 +0200
Subject: [PATCH] fix: search

---
 src/app/[...slug]/DocsContext.tsx             |  2 +-
 src/app/globals.css                           |  8 +++---
 .../Search/SearchModalContainer.tsx           | 11 +++++---
 src/utils/docs.tsx                            | 25 ++++++++++---------
 src/utils/rehype.ts                           |  2 +-
 5 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/app/[...slug]/DocsContext.tsx b/src/app/[...slug]/DocsContext.tsx
index c3a4b93a..40c2e6e4 100644
--- a/src/app/[...slug]/DocsContext.tsx
+++ b/src/app/[...slug]/DocsContext.tsx
@@ -8,7 +8,7 @@ export type DocToC = {
   level: number
   title: string
   description: string
-  content: string
+  // content: string
   url: string
   parent: DocToC | null
   label: string
diff --git a/src/app/globals.css b/src/app/globals.css
index e3a39914..5908db82 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,7 +4,7 @@
 
 :root {
   scroll-behavior: smooth;
-  --header-height: 65px; /* TODO: make this value dynamic */
+  --header-height: 4rem; /* TODO: make this value dynamic */
   scroll-margin-top: var(--header-height);
 }
 
@@ -213,17 +213,15 @@ ul.grid-list > li:before {
   margin-bottom: 0;
 }
 
-::-webkit-scrollbar {
+/*::-webkit-scrollbar {
   width: 14px;
 }
-
 ::-webkit-scrollbar-thumb {
   @apply border-4 border-black border-opacity-0 bg-gray-300 rounded-full dark:bg-gray-700;
 }
-
 ::-webkit-scrollbar-track {
   @apply dark:bg-gray-800;
-}
+}*/
 
 /**
  * Pmndrs theme for JavaScript, CSS and HTML
diff --git a/src/components/Search/SearchModalContainer.tsx b/src/components/Search/SearchModalContainer.tsx
index 01a05f87..13d24956 100644
--- a/src/components/Search/SearchModalContainer.tsx
+++ b/src/components/Search/SearchModalContainer.tsx
@@ -25,6 +25,7 @@ export const SearchModalContainer = ({ onClose }: SearchModalContainerProps) =>
   React.useEffect(() => {
     React.startTransition(() => {
       if (!deferredQuery) return setResults([])
+      // console.log('deferredQuery', deferredQuery)
 
       // Get length of matched text in result
       const relevanceOf = (result: SearchResult) =>
@@ -32,9 +33,11 @@ export const SearchModalContainer = ({ onClose }: SearchModalContainerProps) =>
         result.title.length
 
       // Search
-      const entries = (
-        docs.flatMap(({ tableOfContents }) => tableOfContents) as SearchResult[]
-      ).filter((entry) => entry.description.length > 0)
+      let candidateResults = docs.flatMap(
+        ({ tableOfContents }) => tableOfContents
+      ) satisfies SearchResult[]
+      // console.log('candidateResults', candidateResults)
+      candidateResults = candidateResults.filter((entry) => entry.description.length > 0)
       // .concat(
       //   Object.entries(boxes).flatMap(([id, data]) => ({
       //     ...data,
@@ -46,7 +49,7 @@ export const SearchModalContainer = ({ onClose }: SearchModalContainerProps) =>
       //   }))
       // )
 
-      const results = matchSorter(entries, deferredQuery, {
+      const results = matchSorter(candidateResults, deferredQuery, {
         keys: ['title', 'description', 'content'],
         threshold: matchSorter.rankings.CONTAINS,
       })
diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
index 02de750d..9d2ca696 100644
--- a/src/utils/docs.tsx
+++ b/src/utils/docs.tsx
@@ -95,21 +95,22 @@ async function _getDocs(
       const description = compiled.data.description ?? ''
       const nav = compiled.data.nav ?? Infinity
 
-      if (JSON.stringify(slug) !== JSON.stringify(slugOfInterest)) {
-        return {
-          slug,
-          url,
-          // editURL,
-          title,
-          description,
-          nav,
-        } as Doc
-      }
-
       //
-      // With MDX content (only for `slugOfInterest` doc we are interested in -- better perfs)
+      // MDX content
       //
 
+      // Skip docs other than `slugOfInterest` -- better perfs)
+      // if (JSON.stringify(slug) !== JSON.stringify(slugOfInterest)) {
+      //   return {
+      //     slug,
+      //     url,
+      //     // editURL,
+      //     title,
+      //     description,
+      //     nav,
+      //   } as Doc
+      // }
+
       // Sanitize markdown
       let content = compiled.content
         // Remove <!-- --> comments from frontMatter
diff --git a/src/utils/rehype.ts b/src/utils/rehype.ts
index 22de2a22..0a3a611d 100644
--- a/src/utils/rehype.ts
+++ b/src/utils/rehype.ts
@@ -49,7 +49,7 @@ export const toc = (target: DocToC[] = [], url: string, page: string, content: s
           url: `${url}#${id}`,
           title,
           description,
-          content,
+          // content, // potentially too big to be in the ToC (perfs issue)
           parent: previous[level - 2] ?? null,
         }
         previous[level - 1] = item