Show badge for legacy documentation search results (#533)

e2b-dev · Jan 10, 2025 · fb7f0e3 · fb7f0e3
2 parents 52a004b + f93d18e
commit fb7f0e3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/apps/web/src/components/Search.tsx b/apps/web/src/components/Search.tsx
@@ -83,7 +83,12 @@ function useAutocomplete({ close }: { close: () => void }) {
             {
               sourceId: 'documentation',
               getItems() {
-                return search(query, { limit: 5 })
+                const results = search(query, { limit: 5 })
+                return results.sort((a, b) => {
+                  if (a.badge === 'Legacy' && b.badge !== 'Legacy') return 1
+                  if (a.badge !== 'Legacy' && b.badge === 'Legacy') return -1
+                  return 0
+                })
               },
               getItemUrl({ item }) {
                 return item.url
@@ -210,7 +215,7 @@ function SearchResult({
   return (
     <li
       className={clsx(
-        'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
+        'group block relative cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
         resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800'
       )}
       aria-labelledby={`${id}-hierarchy ${id}-title`}
@@ -253,6 +258,13 @@ function SearchResult({
           <HighlightQuery text={contextPreview} query={query} />
         </div>
       )}
+      {result.badge === 'Legacy' && (
+        <div className="absolute top-3 right-4">
+          <span className="rounded-full text-xs bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-400/10 dark:text-brand-400 dark:ring-1 dark:ring-inset dark:ring-brand-400/20 dark:hover:bg-brand-400/10 dark:hover:text-brand-300 dark:hover:ring-brand-300">
+            {result.badge}
+          </span>
+        </div>
+      )}
     </li>
   )
 }

diff --git a/apps/web/src/mdx/search.mjs b/apps/web/src/mdx/search.mjs
@@ -96,7 +96,7 @@ export default function (nextConfig = {}) {
                 document: {
                   id: 'url',
                   index: 'content',
-                  store: ['title', 'pageTitle', 'preview'],
+                  store: ['title', 'pageTitle', 'preview', 'badge'],
                 },
                 context: {
                   resolution: 9,
@@ -114,13 +114,16 @@ export default function (nextConfig = {}) {
                   continue
                 }
 
+                const isLegacy = url.includes('docs/legacy')
+
                 for (let [title, hash, content] of sections) {
                   sectionIndex.add({
                     url: url + (hash ? ('#' + hash) : ''),
                     title,
                     content: [title, ...content].join('\\n'),
                     pageTitle: hash ? sections[0][0] : undefined,
                     preview: content.join('\\n'),
+                    badge: isLegacy ? 'Legacy' : undefined,
                   })
                 }
               }
@@ -138,6 +141,7 @@ export default function (nextConfig = {}) {
                   title: item.doc.title,
                   pageTitle: item.doc.pageTitle,
                   preview: item.doc.preview,
+                  badge: item.doc.badge,
                 }))
               }
             `

diff --git a/apps/web/types.d.ts b/apps/web/types.d.ts
@@ -6,6 +6,7 @@ declare module '@/mdx/search.mjs' {
     title: string
     pageTitle?: string
     preview?: string
+    badge?: 'Legacy'
   }
 
   export function search(query: string, options?: SearchOptions): Array<Result>