fix: search

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

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

src/components/Search/SearchModalContainer.tsx

@@ -25,16 +25,19 @@ 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) =>
         (result.title.toLowerCase().match(deferredQuery.toLowerCase())?.length ?? 0) /
         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,
       })

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

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