docs(scripts): include page in search results (#2392)

Add base component page entries to the search index before H2
sections to improve discoverability and ranking in search results.

Author: metonym

docs/scripts/index-docs.js

@@ -17,6 +17,7 @@ const files = fs.readdirSync(COMPONENTS_PATH);
  * @property {string} text
  * @property {string} description
  * @property {string} href
+ * @property {boolean} isComponent
  */
 
 /** @type {Document[]} */
@@ -26,8 +27,20 @@ for (const file of files) {
   const [componentName] = file.split(".");
   const filePath = path.join(COMPONENTS_PATH, file);
   const fileContent = fs.readFileSync(filePath, "utf8");
-
-  for (const line of fileContent.split("\n")) {
+  const lines = fileContent.split("\n");
+
+  // Add base component page entry first (for higher ranking)
+  // Use component name in description to boost ranking for MiniSearch.
+  documents.push({
+    id: `${componentName}-page`,
+    text: componentName,
+    description: componentName,
+    href: `/components/${componentName}`,
+    isComponent: true,
+  });
+
+  // Add H2 sections
+  for (const line of lines) {
     if (line.startsWith(H2_DELMIMITER)) {
       const [, h2] = line.split(H2_DELMIMITER);
       const hash = slug(h2);
@@ -37,6 +50,7 @@ for (const file of files) {
         text: componentName,
         description: h2,
         href: `/components/${componentName}#${hash}`,
+        isComponent: false,
       });
     }
   }

docs/src/pages/_layout.svelte

@@ -19,6 +19,7 @@
     SideNavItems,
     SideNavMenuItem,
     SkipToContent,
+    Stack,
     Tag,
     Theme,
   } from "carbon-components-svelte";
@@ -29,7 +30,7 @@
 
   const miniSearch = new MiniSearch({
     fields: ["text", "description"],
-    storeFields: ["text", "description", "href"],
+    storeFields: ["text", "description", "href", "isComponent"],
     searchOptions: {
       prefix: true,
       boost: { description: 2 },
@@ -155,10 +156,27 @@
         placeholder="Search"
         spellcheck="false"
         {results}
+        let:result
         on:select={(e) => {
           $goto(e.detail.selectedResult.href);
         }}
-      />
+      >
+        <Stack
+          gap={3}
+          orientation="horizontal"
+          style="display: flex; align-items: center;"
+        >
+          {result.text}
+          {#if result.description && !result.isComponent}
+            <span class="bx--header-search-menu-description">
+              {result.description}
+            </span>
+          {/if}
+          {#if result.isComponent}
+            <Tag size="sm" type="blue" style="margin: 0">Component</Tag>
+          {/if}
+        </Stack>
+      </HeaderSearch>
       <HeaderActionLink
         icon={LogoGithub}
         href="https://github.com/carbon-design-system/carbon-components-svelte"