feat: add fuse.js to overview page

src/components/ItemList/ItemList.module.css

@@ -18,6 +18,7 @@
 
 .ring {
   flex: 0 0 auto;
+  margin-left: 16px;
   align-self: baseline;
 }
 
@@ -58,11 +59,10 @@
   .link {
     display: flex;
     flex-wrap: wrap;
-    padding: 16px;
   }
 
   .quadrant {
-    margin: 0 16px 0 auto;
+    margin-left: auto;
   }
 
   @media (min-width: 768px) {

src/components/ItemList/ItemList.tsx

@@ -11,6 +11,7 @@ export interface ItemListProps {
   items: Item[];
   activeId?: string;
   size?: "small" | "default" | "large";
+  hideRing?: boolean;
   className?: string;
 }
 
@@ -18,6 +19,7 @@ export function ItemList({
   items,
   activeId,
   size = "default",
+  hideRing = false,
   className,
 }: ItemListProps) {
   return (
@@ -48,11 +50,13 @@ export function ItemList({
                 <span className={styles.quadrant}>
                   {getQuadrant(item.quadrant)?.title}
                 </span>
-                <RingBadge
-                  className={styles.ring}
-                  ring={item.ring}
-                  size="small"
-                />
+                {!hideRing && (
+                  <RingBadge
+                    className={styles.ring}
+                    ring={item.ring}
+                    size="small"
+                  />
+                )}
               </div>
             )}
           </Link>

src/pages/overview.tsx

@@ -1,3 +1,4 @@
+import Fuse from "fuse.js";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useCallback, useMemo } from "react";
@@ -11,7 +12,7 @@ import { CustomPage } from "@/pages/_app";
 const Overview: CustomPage = () => {
   const router = useRouter();
   const ring = router.query.ring as string | undefined;
-  const query = router.query.query as string | undefined;
+  const query = (router.query.query as string) || "";
 
   const onRingChange = useCallback(
     (ring: string) => {
@@ -27,15 +28,38 @@ const Overview: CustomPage = () => {
     [router, ring],
   );
 
-  const items = useMemo(() => {
-    if (!ring && !query) return getItems();
-    return getItems().filter((item) => {
-      if (ring && item.ring !== ring) return false;
-      return !(
-        query && !item.title.toLowerCase().includes(query.toLowerCase())
-      );
+  const { items, index } = useMemo(() => {
+    const items = getItems().filter((item) => !ring || item.ring === ring);
+    const index = new Fuse(items, {
+      threshold: 0.3,
+      includeScore: true,
+      keys: [
+        {
+          name: "title",
+          weight: 1.5,
+        },
+        {
+          name: "tags",
+          weight: 1,
+        },
+        {
+          name: "body",
+          weight: 0.9,
+        },
+        {
+          name: "revision.body",
+          weight: 0.7,
+        },
+      ],
     });
-  }, [query, ring]);
+
+    return { items, index };
+  }, [ring]);
+
+  const results = useMemo(() => {
+    if (!query) return items;
+    return index.search(query).map((result) => result.item);
+  }, [query, index, items]);
 
   return (
     <>
@@ -51,7 +75,7 @@ const Overview: CustomPage = () => {
         onQueryChange={onQueryChange}
       />
 
-      <ItemList items={items} size="large" />
+      <ItemList items={results} size="large" hideRing={!!ring} />
     </>
   );
 };

src/styles/globals.css

@@ -95,7 +95,7 @@ input {
   color: var(--background);
   border: 1px solid transparent;
   padding: 10px 12px;
-  border-radius: 6px;
+  border-radius: 3px;
   width: 100%;
   font-size: 16px;