From e54b07dfd28fcf74f5a690c5d57ea5234f17afed Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Sun, 20 Apr 2025 03:17:05 +0200
Subject: [PATCH] feat: Add solid-highlight-words package and use in Search

---
 app/bun.lock              |  3 +++
 app/components/Search.tsx | 20 +++++++++-----------
 app/package.json          |  1 +
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/bun.lock b/app/bun.lock
index bb1a376..b2d7108 100644
--- a/app/bun.lock
+++ b/app/bun.lock
@@ -20,6 +20,7 @@
         "remark-frontmatter": "^5.0.0",
         "remark-heading-id": "^1.0.1",
         "solid-heroicons": "^3.2.4",
+        "solid-highlight-words": "^1.0.4",
         "solid-js": "^1.9.5",
         "solid-jsx": "^1.1.4",
         "solid-mdx": "^0.0.7",
@@ -990,6 +991,8 @@
 
     "solid-heroicons": ["solid-heroicons@3.2.4", "", { "dependencies": { "solid-js": "^1.7.6" } }, "sha512-u6BMdFLvkJnvUGYzdFcWp1wvJ4hb9Y1zd3AbZ9D3bUmmiy9jBzNZX+RcqBCI2EKRvdQwAb1UB9bkESfqfhayDg=="],
 
+    "solid-highlight-words": ["solid-highlight-words@1.0.4", "", { "peerDependencies": { "solid-js": "^1.8.0" } }, "sha512-Qxnc9W69HsGUl16wrpNwW3j3IvJaFVQjJM+BFfwU3WReSpPCzHSk7vUHzb9V1V3vh0azq1T73+OqtICmnSQ8CQ=="],
+
     "solid-js": ["solid-js@1.9.5", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "^1.1.0", "seroval-plugins": "^1.1.0" } }, "sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw=="],
 
     "solid-jsx": ["solid-jsx@1.1.4", "", { "peerDependencies": { "solid-js": ">=1.4.0" } }, "sha512-A4E9cB+wZpHZrXzv3+OWr6zaGS0FjD/UAKqbI38R1JwogjlBXdSGC2PgaIMisnGYKL3oJ55FPLv4QRkENmdbWQ=="],
diff --git a/app/components/Search.tsx b/app/components/Search.tsx
index cf3b559..cb35b0e 100644
--- a/app/components/Search.tsx
+++ b/app/components/Search.tsx
@@ -19,7 +19,7 @@ import {
 } from "solid-js";
 import { Dialog, DialogPanel } from "terracotta";
 import { useDebounce } from "@/hooks/useDebounce";
-// import Highlighter from "react-highlight-words";
+import { Highlighter } from "solid-highlight-words";
 // import { navigation } from "@/lib/navigation";
 import { navigate } from "vike/client/router";
 import { onSearch } from "./Search.telefunc";
@@ -123,16 +123,14 @@ function SearchInput() {
 }
 
 function HighlightQuery({ text, query }: { text: string; query: string }) {
-	return <span>{text}</span>;
-
-	// return (
-	// 	<Highlighter
-	// 		highlightclass="group-aria-selected:underline bg-transparent text-violet-600 dark:text-violet-400"
-	// 		searchWords={[query]}
-	// 		autoEscape={true}
-	// 		textToHighlight={text}
-	// 	/>
-	// );
+	return (
+		<Highlighter
+			highlightClass="group-aria-selected:underline bg-transparent text-violet-600"
+			searchWords={[query]}
+			autoEscape={true}
+			textToHighlight={text}
+		/>
+	);
 }
 
 function SearchResultItem(props: { result: SearchResult; query: string }) {
diff --git a/app/package.json b/app/package.json
index 3fc58c7..73c657d 100755
--- a/app/package.json
+++ b/app/package.json
@@ -25,6 +25,7 @@
 		"remark-frontmatter": "^5.0.0",
 		"remark-heading-id": "^1.0.1",
 		"solid-heroicons": "^3.2.4",
+		"solid-highlight-words": "^1.0.4",
 		"solid-js": "^1.9.5",
 		"solid-jsx": "^1.1.4",
 		"solid-mdx": "^0.0.7",