web: highlight word matches, limit search results

web/src/app/sok/page.tsx

@@ -17,6 +17,8 @@ export default async function Page({
 }) {
   const { q: query } = (await searchParams) ?? {};
   let results: SearchResult[] = [];
+  let totalCount = 0;
+  const RESULT_LIMIT = 500;
 
   if (query) {
     const searchQuery = graphql(`
@@ -64,13 +66,21 @@ export default async function Page({
     `);
 
     const { data } = await getClient().query(searchQuery, { query });
-    results = (data?.results ?? []) as SearchResult[];
+    const all = (data?.results ?? []) as SearchResult[];
+    totalCount = all.length;
+    results = all.slice(0, RESULT_LIMIT);
   }
 
   return (
     <main className="site-main" id="main">
       <SearchShell initialQuery={query ?? ""}>
-        {query ? <SearchResults results={results} /> : null}
+        {query ? (
+          <SearchResults
+            results={results}
+            totalCount={totalCount}
+            query={query}
+          />
+        ) : null}
       </SearchShell>
     </main>
   );