From 6290cb242dfa28feaf71f659d59bbb47b33c7cf6 Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Fri, 10 Jan 2025 23:14:08 +0100
Subject: [PATCH 1/2] add: badge parameter to docs index + badge component in
 search result

---
 apps/web/src/components/Search.tsx | 7 +++++++
 apps/web/src/mdx/search.mjs        | 6 +++++-
 apps/web/types.d.ts                | 1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/Search.tsx b/apps/web/src/components/Search.tsx
index 8ef416862..858499033 100644
--- a/apps/web/src/components/Search.tsx
+++ b/apps/web/src/components/Search.tsx
@@ -253,6 +253,13 @@ function SearchResult({
           <HighlightQuery text={contextPreview} query={query} />
         </div>
       )}
+      {result.badge === 'Legacy' && (
+        <div className="absolute top-3 right-4">
+          <span className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 px-2 py-1">
+            {result.badge}
+          </span>
+        </div>
+      )}
     </li>
   )
 }
diff --git a/apps/web/src/mdx/search.mjs b/apps/web/src/mdx/search.mjs
index d327b32fd..613239794 100644
--- 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,6 +114,8 @@ export default function (nextConfig = {}) {
                   continue
                 }
 
+                const isLegacy = url.includes('docs/legacy')
+
                 for (let [title, hash, content] of sections) {
                   sectionIndex.add({
                     url: url + (hash ? ('#' + hash) : ''),
@@ -121,6 +123,7 @@ export default function (nextConfig = {}) {
                     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
index c08e065f1..662560c7a 100644
--- 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>

From f93d18e3e5171a5a29a3f6c9b086a2f7e81dc47d Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Fri, 10 Jan 2025 23:32:42 +0100
Subject: [PATCH 2/2] add: sort legacy docs search results at last + improve:
 docs search legacy badge

---
 apps/web/src/components/Search.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/Search.tsx b/apps/web/src/components/Search.tsx
index 858499033..8e1ac9c15 100644
--- 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`}
@@ -255,7 +260,7 @@ function SearchResult({
       )}
       {result.badge === 'Legacy' && (
         <div className="absolute top-3 right-4">
-          <span className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 px-2 py-1">
+          <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>