Work on #587: revamped templates

web/components/filter.tsx

@@ -186,15 +186,11 @@ export function FilterList({
                     <Icon width={16} height={16} />
                   </span>
                 )}
-                <span className="sb-name" // dangerouslySetInnerHTML={{
-                  //   __html: option?.result?.indexes
-                  //     ? fuzzysort.highlight(option.result, "<b>", "</b>")!
-                  //     : escapeHtml(option.name),
-                  // }}
-                >
+                <span className="sb-name">
                   {option.name}
                 </span>
                 {option.hint && <span className="sb-hint">{option.hint}</span>}
+                <div className="sb-description">{option.description}</div>
               </div>
             ))
             : null}

web/components/fuse_search.ts

@@ -14,7 +14,12 @@ export const fuzzySearchAndSort = (
     return arr.sort((a, b) => (a.orderId || 0) - (b.orderId || 0));
   }
   const enrichedArr: FuseOption[] = arr.map((item) => {
-    return { ...item, baseName: item.name.split("/").pop()! };
+    return {
+      ...item,
+      baseName: item.name.split("/").pop()!,
+      tags: item.tags?.join(" "),
+      aliases: item.aliases?.join(" "),
+    };
   });
   const fuse = new Fuse(enrichedArr, {
     keys: [{
@@ -23,13 +28,21 @@ export const fuzzySearchAndSort = (
     }, {
       name: "baseName",
       weight: 0.7,
+    }, {
+      name: "displayName",
+      weight: 0.3,
+    }, {
+      name: "tags",
+      weight: 0.1,
+    }, {
+      name: "aliases",
+      weight: 0.7,
     }],
     includeScore: true,
     shouldSort: true,
     isCaseSensitive: false,
     threshold: 0.6,
     sortFn: (a, b): number => {
-      //   console.log(a, b);
       if (a.score === b.score) {
         const aOrder = enrichedArr[a.idx].orderId || 0;
         const bOrder = enrichedArr[b.idx].orderId || 0;

web/components/page_navigator.tsx

@@ -36,8 +36,26 @@ export function PageNavigator({
     if (isFederationPath(pageMeta.name)) {
       orderId = Math.round(orderId / 10); // Just 10x lower the timestamp to push them down, should work
     }
+    let description: string | undefined;
+    let aliases: string[] = [];
+    if (pageMeta.displayName) {
+      aliases.push(pageMeta.displayName);
+    }
+    if (Array.isArray(pageMeta.aliases)) {
+      aliases = aliases.concat(pageMeta.aliases);
+    }
+    if (aliases.length > 0) {
+      description = "(a.k.a. " + aliases.join(", ") + ") ";
+    }
+    if (pageMeta.tags.length > 1) {
+      // Every page has the "page" tag, so it only gets interesting beyond that
+      const interestingTags = pageMeta.tags.filter((tag) => tag !== "page");
+      description = (description || "") +
+        interestingTags.map((tag) => `#${tag}`).join(" ");
+    }
     options.push({
       ...pageMeta,
+      description,
       orderId: orderId,
     });
   }