feat: add search result highlight

app/search/search-content.tsx

@@ -9,6 +9,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
+import { buildSearchResultUrl } from "@/lib/text-highlight";
 import {
   Search,
   Loader2,
@@ -422,7 +423,8 @@ function SearchInner() {
               <div className="mb-4 flex items-center justify-between flex-wrap gap-3">
                 <p className="text-sm text-muted-foreground">
                   {effectiveData.total.toLocaleString()}{" "}
-                  {effectiveData.total === 1 ? "result " : "results "} for &ldquo;
+                  {effectiveData.total === 1 ? "result " : "results "} for
+                  &ldquo;
                   {effectiveData.query}&rdquo;
                 </p>
                 {effectiveData.total_pages > 1 && (
@@ -551,9 +553,14 @@ function ResultCard({ result }: { result: SearchResult }) {
   };
   const Icon = config.icon;
 
+  // Append `?hl=<matched-text>` so the destination page highlights the snippet
+  // text Typesense matched. Falls back to the original URL if no marks were
+  // present in the snippet.
+  const href = buildSearchResultUrl(result.url, result.snippet);
+
   return (
     <Link
-      href={result.url}
+      href={href}
       className="block group"
       onClick={() => {
         try {