site wide search with fusejs

config.yaml

@@ -100,3 +100,15 @@ related:
       weight: 100
       threshold: 80
       toLower: false
+
+outputFormats:
+  JSON:
+    mediaType: "application/json"
+    baseName: "search-index" # This ensures the output file is named search-index.json
+    isPlainText: true
+
+outputs:
+  home:
+    - HTML
+    - JSON
+

content/english/search/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Search the Site"
+description: "Find what you're looking for quickly and easily."
+---

content/svenska/search/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Sök på webbplatsen"
+description: "Hitta snabbt och enkelt det du letar efter."
+---

layouts/_default/index.json

@@ -0,0 +1,14 @@
+[
+    {{- $pages := .Site.RegularPages -}}
+    {{- range $index, $page := $pages -}}
+      {{- if $index }},{{ end }}
+      {
+        "title": {{ $page.Title | jsonify }},
+        "url": {{ $page.RelPermalink | jsonify }},
+        "tags": {{ $page.Params.tags | jsonify }},
+        "keywords": {{ $page.Params.keywords | jsonify }},
+        "language": {{ $page.Lang | jsonify }}
+      }
+    {{- end -}}
+    ]
+

layouts/partials/head.html

@@ -32,6 +32,9 @@
   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
 
+  <!-- Fuse js for search -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/7.0.0/fuse.min.js"></script>
+  <script src="/js/fuse-search.js"></script>
   {{ if or (eq .Section "data_types") (eq .Section "research_projects") (eq .Section "funding") (eq .Section "publications") (eq .Section "dashboards") (.Params.datatables) (eq .Section "datasets") }}
   <!-- Data tables CSS -->
   <link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">

layouts/partials/navbar.html

@@ -62,6 +62,11 @@
               </li>
             </ul>
           </li>
+          <li class="nav-item">
+            <a href="{{ relLangURL "/search" }}" class="nav-link" aria-label="Search">
+              <i class="bi bi-search"></i>
+            </a>
+          </li>          
         </ul>
       </div>
 
@@ -97,6 +102,11 @@
         <li class="nav-item"><a class="nav-link {{ .Post }}" href="{{ .Page.RelPermalink }}">{{ .Pre }}{{ .Name }}</a>
         </li>
         {{ end }}
+        <li class="nav-item">
+          <a href="{{ relLangURL "/search" }}" class="nav-link" aria-label="Search">
+            <i class="bi bi-search"></i>
+          </a>
+        </li> 
       </ul>
       <hr class="d-lg-none">
 

layouts/search/list.html

@@ -0,0 +1,29 @@
+{{ define "main" }}
+<div class="container my-5">
+   <!-- Page Header -->
+   <div class="mb-4 text-center">
+    <h1 class="fw-bold search-page-title" style="color: rgb(41, 89, 134);">{{ .Title }}</h1>
+    <p class="text-muted search-page-description">{{ .Params.description }}</p>
+  </div>
+
+  <!-- Search Input -->
+  <div class="input-group mb-4 shadow-sm" style="border-radius: 5px; overflow: hidden;">
+    <span class="input-group-text bg-white " style="color: rgb(71, 112, 177);">
+        <i class="bi bi-search" aria-hidden="true"></i>
+      </span>
+    <input type="text" id="search-input" class="form-control form-control-lg "
+      placeholder="Type to search..." aria-label="Search" autofocus />
+  </div>
+
+  <!-- Search Results -->
+  <div id="search-results-container">
+    <p id="search-results-message" class="text-muted p-3" style="text-align: center; font-size: 14px;">
+      Start typing to see results...
+    </p>
+    <ul id="search-results" class="list-group"></ul>
+  </div>
+</div>
+{{ end }}
+
+
+

static/css/styles.css

@@ -786,3 +786,55 @@ iframe#matoOpOut {
     height: 250px;
   }
 }
+/* Search Input */
+#search-input {
+  padding: 10px;
+  font-size: 16px;
+  color: rgb(85, 88, 90); /* Dark Gray */
+  border-radius: 0;
+  outline: none;
+}
+
+#search-input:focus {
+  border-color: rgb(41, 89, 134); /* Dark Blue */
+  box-shadow: 0 0 5px rgba(41, 89, 134, 0.4);
+}
+
+/* Search Results Container */
+#search-results-container {
+  background-color: rgb(216, 216, 216); /* Accent Gray */
+  border-radius: 5px;
+  border: 1px solid rgb(216, 216, 216);
+  min-height: 200px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+/* Search Results List */
+#search-results {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#search-results .list-group-item {
+  border-bottom: 1px solid rgb(216, 216, 216); /* Accent Gray */
+  color: rgb(85, 88, 90); /* Dark Gray */
+  padding: 10px;
+}
+
+#search-results .list-group-item:hover {
+  background-color: rgb(41, 89, 134); /* Dark Blue */
+  color: white;
+  cursor: pointer;
+}
+
+#search-results .list-group-item a {
+  text-decoration: none;
+  color: inherit;
+}
+
+#search-results .list-group-item a:hover {
+  color: white;
+}
+

static/js/fuse-search.js

@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const lang = document.documentElement.lang || "en"; // Detect active language
+    const searchFile = lang === "sv" ? "/sv/search-index.json" : "/search-index.json";
+
+    fetch(searchFile)
+        .then((response) => response.json())
+        .then((data) => {
+            const options = {
+                keys: ["title", "tags", "keywords"], // Fields to search
+                threshold: 0.4, // Fuzzy matching sensitivity
+            };
+            const fuse = new Fuse(data, options);
+
+            const searchInput = document.getElementById("search-input");
+            const searchResultsContainer = document.getElementById("search-results-container");
+            const searchResultsList = document.getElementById("search-results");
+            const searchResultsMessage = document.getElementById("search-results-message");
+
+            if (searchInput && searchResultsList && searchResultsMessage) {
+                searchInput.addEventListener("input", function () {
+                    const query = searchInput.value.trim();
+                    const results = fuse.search(query);
+
+                    if (results.length > 0) {
+                        searchResultsMessage.style.display = "none";
+                        searchResultsList.innerHTML = results
+                            .map(
+                                (result) => `
+                                    <li class="list-group-item">
+                                        <a href="${result.item.url}" class="text-decoration-none">
+                                            ${result.item.title}
+                                        </a>
+                                    </li>
+                                `
+                            )
+                            .join("");
+                    } else {
+                        searchResultsMessage.style.display = "block";
+                        searchResultsList.innerHTML = "";
+                    }
+                });
+            }
+        })
+        .catch((err) => console.error("Error loading search index:", err));
+});