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