Highlight headings and use background-color

cozydev-pink · Feb 22, 2025 · c09e445 · c09e445
1 parent 3abbdd3
commit c09e445
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/jsinterop/src/main/scala/pink/cozydev/protosearch/JsInterop.scala b/jsinterop/src/main/scala/pink/cozydev/protosearch/JsInterop.scala
@@ -16,6 +16,7 @@
 
 package pink.cozydev.protosearch
 
+import pink.cozydev.protosearch.highlight.{FirstMatchHighlighter, FragmentFormatter}
 import scala.scalajs.js.annotation._
 import scala.scalajs.js
 import org.scalajs.dom.Blob
@@ -32,8 +33,10 @@ class JsHit(
 @JSExportTopLevel("Querier")
 class Querier(val mIndex: MultiIndex) {
   import js.JSConverters._
-  val searcher = SearchInterpreter.default(mIndex)
-  val highlightFields = List("body")
+  val highlighter =
+    FirstMatchHighlighter(FragmentFormatter(150, "<mark>", "</mark>"))
+  val searcher = SearchInterpreter(mIndex, highlighter)
+  val highlightFields = List("title", "body")
   val resultFields = List("body", "path", "title")
 
   @JSExport

diff --git a/laikaIO/src/main/resources/pink/cozydev/protosearch/sbt/search.css b/laikaIO/src/main/resources/pink/cozydev/protosearch/sbt/search.css
@@ -65,6 +65,15 @@
   color: var(--secondary-color);
 }
 
+.search-modal-content .title mark {
+  color: var(--secondary-color);
+  background-color: var(--syntax-wheel3);
+}
+
+.search-modal-content mark {
+  background-color: var(--syntax-wheel3);
+}
+
 /* The Close Button */
 .search-close {
   float: right;

diff --git a/laikaIO/src/main/resources/pink/cozydev/protosearch/sbt/search.js b/laikaIO/src/main/resources/pink/cozydev/protosearch/sbt/search.js
@@ -1,7 +1,7 @@
 function renderDoc(hit) {
   const path = hit.fields.path
   const link = "../" + hit.fields.path.replace(".txt", ".html")
-  const title = hit.fields.title
+  const title = hit.highlights["title"] || hit.fields["title"]
   const preview = hit.highlights["body"]
   return (
 `

diff --git a/laikaIO/src/main/resources/pink/cozydev/protosearch/sbt/searchBar.js b/laikaIO/src/main/resources/pink/cozydev/protosearch/sbt/searchBar.js
@@ -2,7 +2,7 @@ function render(hit) {
   const path = hit.fields.path
   const htmlPath = hit.fields.path.replace(".txt", ".html")
   const link = new URL("../" + htmlPath, baseUrl)
-  const title = hit.fields.title
+  const title = hit.highlights["title"] || hit.fields["title"]
   const preview = hit.highlights["body"]
   return (
 `