feat: search filtering and better weighting

src/components/navigation/Search.astro

@@ -11,7 +11,7 @@ import magnifierIcon from "@icons/magnifier.svg?raw";
     aria-keyshortcuts="Control+K"
     class="search-button"
   >
-    <Fragment set :html={magnifierIcon} />
+    <Fragment set:html={magnifierIcon} />
     <span class="search-label" aria-hidden="true">Search</span>
     <kbd class="search-kbd"> <kbd>Ctrl</kbd><kbd>K</kbd> </kbd>
   </button>
@@ -129,28 +129,35 @@ import magnifierIcon from "@icons/magnifier.svg?raw";
         const onIdle = window.requestIdleCallback || (cb => setTimeout(cb, 1));
         onIdle(async () => {
           const { PagefindUI } = await import(
-            //@ts-expect-error — Missing types for @pagefind/default-ui package.
+            //Missing types for @pagefind/default-ui package.
+            //@ts-expect-error
             "@pagefind/default-ui"
           );
           new PagefindUI({
             element: "#qs_search",
+            // resetStyles: false,
+            sort: { version: "desc" },
             baseUrl: import.meta.env.BASE_URL,
             bundlePath:
               import.meta.env.BASE_URL.replace(/\/$/, "") + "/pagefind/",
             showImages: false,
             showSubResults: true,
-            processResult: (result: {
+            highlightParam: "highlight",
+            openFilters: ["Tags"],
+            processResult: function (result: {
               url: string;
               excerpt: string;
               meta: {
                 source: string;
+                title: string;
+                version: string;
               };
               extra_class: string;
               sub_results: Array<{
                 url: string;
                 excerpt: string;
               }>;
-            }) => {
+            }) {
               if (result.meta.source === "Qt Framework") {
                 result.extra_class = "qt-result-badge";
               }

src/config/io/search.ts

@@ -0,0 +1,13 @@
+function getSearchWeight(version: string) {
+  const versionArr = version.split(".");
+  versionArr[0] = versionArr[0].substring(1);
+  const searchWeightArr = versionArr.map(w => parseInt(w));
+  const weight = searchWeightArr.reduce((p, c, i, _) => {
+    const mult = i - 1 === 0 || i === 0 ? 10 : 1;
+    const acc = p * mult + c * mult;
+    return acc;
+  });
+  return weight;
+}
+
+export { getSearchWeight };

src/pages/docs/[version]/types/[module]/[type].astro

@@ -1,5 +1,6 @@
 ---
 import { getQMLTypeLink } from "@config/io/helpers";
+import { getSearchWeight } from "@config/io/search";
 import { processMarkdown } from "@config/io/markdown";
 import { getVersionsData } from "@config/io/generateTypeData";
 import DocsLayout from "@layouts/DocsLayout.astro";
@@ -41,6 +42,9 @@ const superLink = type.super ? getQMLTypeLink(version.name, type.super) : null;
 const details = type.details
   ? await processMarkdown(version.name, type.details)
   : null;
+
+const searchWeight =
+  version.name != "master" ? getSearchWeight(version.name) : 999.0;
 ---
 
 <DocsLayout
@@ -48,12 +52,12 @@ const details = type.details
   description={type.description ?? ""}
   type={type}
 >
-  <div class="docs">
+  <div class="docs" data-pagefind-weight=`${searchWeight}` data-pagefind-meta=`version:${version.name}` data-pagefind-filter=`version:${version.name}`>
     <div class="docs-content typedocs-content">
       <hr>
       <section class="typedocs-title">
-        <h2 class="typedocs-title-text" data-pagefind-weight="10">
-          {type.name}:
+        <h2 class="typedocs-title-text" data-pagefind-weight=`${searchWeight}` data-pagefind-meta="title" >
+          {type.name}<span data-pagefind-ignore>:</span>
           {type.super?.name ? (
             <a
               href={superLink!}

src/styles/docs/nav/search.css

@@ -40,6 +40,10 @@
   width: calc(100% - var(--search-cancel-space));
 }
 
+#qs_search .pagefind-ui__filter-panel {
+  min-width: max-content;
+}
+
 #qs_search input:focus {
   --pagefind-ui-border: hsl(var(--accent-500));
 }
@@ -70,8 +74,14 @@
   height: 100%;
 }
 
-#qs_search .pagefind-ui__results > * + * {
+#qs_search .pagefind-ui__results-area {
+  margin-bottom: calc(20px * var(--pagefind-ui-scale));
+}
+
+#qs_search .pagefind-ui__results {
+  & > * + * {
     margin-top: var(--search-result-spacing);
+  }
 }
 
 #qs_search .pagefind-ui__result {
@@ -79,6 +89,20 @@
   padding: 0;
 }
 
+#qs_search .pagefind-ui__result-tag {
+  display: flex;
+  gap: var(--sm);
+  & #text:nth-child(1),
+  #text:nth-child(2) {
+    display: none;
+  }
+  background-color: transparent;
+  color: hsl(var(--accent-600));
+  border-radius: var(--radius-md);
+  outline: 1px solid hsl(var(--accent-600));
+  width: fit-content;
+}
+
 #qs_search .pagefind-ui__result-nested {
   position: relative;
   padding: var(--search-result-nested-pad-block)