From 66afbb611a2d7d409132bc627c1ff5b98882f9bc Mon Sep 17 00:00:00 2001
From: Timo Montalto <t.montalto@browserwerk.de>
Date: Thu, 3 Apr 2025 14:26:28 +0200
Subject: [PATCH] Added search

---
 assets/css/dark.css          | 75 ++++++++++++++++++++++++++++++++++++
 assets/css/main.css          | 64 +++++++++++++++++++++++++++++-
 layouts/404.html             |  2 +-
 layouts/_default/baseof.html |  2 +-
 layouts/_default/list.html   |  2 +-
 layouts/_default/term.html   |  4 +-
 layouts/_default/terms.html  |  2 +-
 layouts/index.html           |  4 +-
 layouts/partials/footer.html |  6 +++
 layouts/partials/head.html   | 12 ++++++
 layouts/partials/header.html |  7 +++-
 11 files changed, 170 insertions(+), 10 deletions(-)

diff --git a/assets/css/dark.css b/assets/css/dark.css
index f8a4c03..871304b 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -219,3 +219,78 @@ a:hover {
 }
 
 
+/* Pagefind UI */
+
+#toggle-search {
+  color: #ddd;
+  border-bottom: 3px solid var(--darkMaincolor);
+}
+
+.pagefind-ui__form::before {
+  background-color: #ddd !important;
+}
+
+.pagefind-ui__search-input {
+  background-color: #333 !important;
+  border-color: #333 !important;
+  outline: none !important;
+  outline: 2px solid var(--darkMaincolor) !important;
+  color: #ddd !important;
+}
+
+.pagefind-ui__search-clear {
+  background-color: #333 !important;
+  color: #ddd !important;
+}
+
+
+.pagefind-ui__message {
+  color: #ddd;
+}
+
+.pagefind-ui__result {
+  border-color: rgb(102, 51, 153) !important;
+  border-style: dotted !important;
+  border-width: 6px 0 0 0 !important;
+}
+
+.pagefind-ui__result:last-child {
+  border-bottom-width: 6px !important;
+}
+
+.pagefind-ui__result-title {
+  font-family: "Roboto Mono", monospace;
+
+}
+
+.pagefind-ui__result-excerpt {
+  font-family: Montserrat, sans-serif;
+  color: #ddd;
+}
+
+
+.pagefind-ui__result-title::before {
+    color: var(--darkMaincolor);
+    content: '# ';
+}
+
+.pagefind-ui__result-title .pagefind-ui__result-link {
+  color: #ddd !important;
+  border-bottom: 3px solid var(--darkMaincolor);
+  text-decoration: none;
+}
+
+.pagefind-ui__result-title .pagefind-ui__result-link:hover {
+  text-decoration: none !important;
+  color: black !important;
+}
+
+.pagefind-ui__button {
+  background-color: #333 !important;
+  border-color: #333 !important;
+  color: #ddd !important;
+}
+
+.pagefind-ui__button:hover {
+  border-color: var(--darkMaincolor) !important;
+}
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
index b7be1f6..f44270a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -456,4 +456,66 @@ table td{
 .translations-block a:hover {
   background-color: #000000;
   color: var(--callouctcolor);
-}
\ No newline at end of file
+}
+
+.pagefind-ui__result-title.svelte-j9e30.svelte-j9e30 {
+  display: inline-block;
+  font-weight: 700;
+  font-size: calc(21px * var(--pagefind-ui-scale));
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Pagefind UI */
+
+#toggle-search {
+  background: transparent;
+  border: none;
+  border-bottom: 3px solid var(--maincolor);
+  margin: 0;
+  padding: 0 ;
+}
+
+.pagefind-ui__search-input {
+  outline-color: var(--maincolor);
+}
+
+.pagefind-ui__result {
+  border-color: rgb(102, 51, 153) !important;
+  border-style: dotted !important;
+  border-width: 6px 0 0 0 !important;
+}
+
+.pagefind-ui__result:last-child {
+  border-bottom-width: 6px !important;
+}
+
+.pagefind-ui__result-title {
+  font-family: "Roboto Mono", monospace;
+}
+
+.pagefind-ui__result-excerpt {
+  font-family: Montserrat, sans-serif;
+}
+
+
+.pagefind-ui__result-title::before {
+    color: var(--maincolor);
+    content: '# ';
+}
+
+.pagefind-ui__result-title .pagefind-ui__result-link {
+  color: var(--pagefind-ui-text);
+  border-bottom: 3px solid var(--maincolor);
+  text-decoration: none;
+}
+
+.pagefind-ui__result-title .pagefind-ui__result-link:hover {
+  text-decoration: none !important;
+  color: white !important;
+}
+
+.pagefind-ui__button:hover {
+  border-color: var(--maincolor) !important;
+}
+
diff --git a/layouts/404.html b/layouts/404.html
index c24a4fb..6e71dda 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ .Site.Language.LanguageCode | default "de-de" }}">
 	{{ partial "header.html" . }}
 	<body>
 		<div class="content">
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b941097..618f462 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ .Site.Language.LanguageCode | default "de-de" }}">
     {{- partial "header.html" . -}}
     <body>
         <div class="content">
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 7f31021..b4bd1d3 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -5,7 +5,7 @@
 <h1 class="page-title">All articles</h1>
 {{ end }}
 
-<ul class="posts">
+<ul class="posts" data-pagefind-ignore="all">
 	{{- range .Data.Pages -}}
 		{{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}}
 		<li class="post">
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index c7ae65b..55e10dd 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -1,11 +1,11 @@
 {{ define "main" }}
 {{ if isset .Data "Term" }}
-<h1>{{ i18n "EntriesTagged" }} - "{{ .Data.Term }}"</h1>
+<h1 data-pagefind-ignore="all">{{ i18n "EntriesTagged" }} - "{{ .Data.Term }}"</h1>
 {{ else }}
 <h1 class="page-title">All articles</h1>
 {{ end }}
 
-<ul class="posts">
+<ul class="posts" data-pagefind-ignore="all">
 	{{- range .Data.Pages -}}
 		{{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}}
 		<li class="post">
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index fea9c2f..aea678f 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -8,7 +8,7 @@
 {{ $size := $min }}
 
 {{ $data := .Data }}
-<div class="tag-cloud">
+<div class="tag-cloud" data-pagefind-ignore="all">
 	<ul class="tags">
 		{{ range $key, $value := .Data.Terms.ByCount }}
 		{{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }}
diff --git a/layouts/index.html b/layouts/index.html
index 3d04c93..15434c6 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ .Site.Language.LanguageCode | default "de-de" }}">
 	{{ partial "header.html" . }}
 	<body>
 		<div class="content">
 			{{ partial "head.html" . }}
 			
-			<main class="list">
+			<main class="list" data-pagefind-ignore="all">
 				<div class="site-description">
 					{{- if isset .Site.Params "subtitle" -}}
 					<p>{{ .Site.Params.Subtitle | .Page.RenderString }}</p>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 8bdf558..e7194e5 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -16,3 +16,9 @@
 		  {{ end }}
   </div>
 </footer>
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+      new PagefindUI({ element: "#search", showSubResults: false });
+  });
+</script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 7a4726f..cb6e772 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -30,5 +30,17 @@
 		{{ else -}}
 		| <a href="{{ .Site.BaseURL }}">DE</a>
 		{{ end }}
+		| <button id="toggle-search" onclick="toggleSearch()" aria-label="Toggle Search">
+			{{ template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "search") }}
+		</button>
 	</nav>
 </header>
+
+<div id="search" style="display: none;"></div>
+
+<script>
+	function toggleSearch() {
+		const searchField = document.getElementById('search');
+		searchField.style.display = searchField.style.display === 'none' ? 'block' : 'none';
+	}
+</script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index fb5c246..93248ea 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<head lang="{{ .Site.Language.Lang }}">
+<head>
 	<meta charset="utf-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	{{- $title := ( .Title ) -}}
@@ -33,6 +33,10 @@
 	    {{- end -}}
 	  {{- end -}}
 	{{- end -}}
+
+	<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+	<script src="/pagefind/pagefind-ui.js"></script>
+	
 	{{ if .Site.Params.useCDN | default false -}}
         <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,500&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
@@ -115,4 +119,5 @@
 	<script src="{{ absURL . }}"></script>
 	{{- end }}
 	{{- end }}
+
 </head>