Merge pull request #6 from StephenHoover/master

Added search functionality 
Thanks @StephenHoover

config.toml

@@ -11,6 +11,22 @@ taxonomies = [
     { name = "tags", feed = true }
 ]
 
+[search]
+# Whether to include the title of the page/section in the index
+include_title = true
+# Whether to include the description of the page/section in the index
+include_description = false
+# Whether to include the path of the page/section in the index
+include_path = false
+# Whether to include the rendered content of the page/section in the index
+include_content = true
+# At which character to truncate the content to. Useful if you have a lot of pages and the index would
+# become too big to load on the site. Defaults to not being set.
+# truncate_content_length = 100
+# Wether to produce the search index as a javascript file or as a JSON file
+# Accepted value "elasticlunr_javascript" or "elasticlunr_json"
+index_format = "elasticlunr_json"
+
 [markdown]
 # Whether to do syntax highlighting
 # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
@@ -39,7 +55,8 @@ date_format = "%Y-%m-%d"
 navigation = [
     { url = "$BASE_URL/archive", title = "Archive" },
     { url = "$BASE_URL/tags", title = "Tags" },
-    { url = "https://getzola.com/", title = "Zola", is_external = true }
+    { url = "$BASE_URL/search", title = "Search" },
+    { url = "https://getzola.org/", title = "Zola", is_external = true }
 ]
 
 home_title = "PaperMod"

content/search.md

@@ -0,0 +1,6 @@
++++
+title = "Search"
+date = "2024-02-27"
+template = "search.html"
+extra = { is_search_page = true }
++++

static/js/search.js

@@ -0,0 +1,96 @@
+
+// Zola Paper Mod javascript search code by Stephen Hoover
+// Used:
+// - https://github.com/getzola/zola/blob/master/docs/static/search.js
+// - https://github.com/reorx/hugo-PaperModX/blob/master/assets/js/fastsearch.js
+
+// Debounce function definition
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+      var context = this, args = arguments;
+      var later = function() {
+          timeout = null;
+          if (!immediate) func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+  };
+}
+
+function formatSearchResultItem(item, terms) {
+  // Adjust this to match your desired result item structure
+  return `<li class="post-entry">
+            <header class="entry-header">${item.doc.title}&nbsp;»</header>` +
+            `<a href="${item.ref}" aria-label="${item.doc.title}"></a>
+          </li>`;
+}
+
+function initSearch() {
+  var $searchInput = document.getElementById("searchInput"); // Make sure ID matches HTML
+  var $searchResults = document.getElementById("searchResults"); // Ensure this matches your HTML
+  var MAX_ITEMS = 10;
+
+  var options = {
+    bool: "AND",
+    fields: {
+      title: {boost: 2},
+      body: {boost: 1},
+    }
+  };
+  var currentTerm = "";
+  var index;
+
+  var initIndex = async function () {
+    if (index === undefined) {
+      index = fetch("/search_index.en.json") // Make sure the path to your search index is correct
+        .then(
+          async function(response) {
+            return await elasticlunr.Index.load(await response.json());
+        }
+      );
+    }
+    let res = await index;
+    return res;
+  }
+
+  $searchInput.addEventListener("keyup", debounce(async function() {
+    var term = $searchInput.value.trim();
+    if (term === currentTerm) {
+      return;
+    }
+    $searchResults.style.display = term === "" ? "none" : "block";
+    $searchResults.innerHTML = ""; // Clear previous results
+    currentTerm = term;
+    if (term === "") {
+      return;
+    }
+
+    var results = (await initIndex()).search(term, options);
+    if (results.length === 0) {
+      $searchResults.style.display = "none";
+      return;
+    }
+
+    // Directly inserting formatted search result items without additional <li> creation
+    for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
+      $searchResults.innerHTML += formatSearchResultItem(results[i], term.split(" "));
+    }
+}, 150));
+  window.addEventListener('click', function(e) {
+    if ($searchResults.style.display == "block" && !$searchResults.contains(e.target)) {
+      $searchResults.style.display = "none";
+    }
+  });
+}
+
+
+if (document.readyState === "complete" ||
+    (document.readyState !== "loading" && !document.documentElement.doScroll)
+) {
+  initSearch();
+} else {
+  document.addEventListener("DOMContentLoaded", initSearch);
+}

templates/partials/footer.html

@@ -133,3 +133,8 @@
     });
 </script>
 {% endif %}
+
+{% if page.extra.is_search_page %}
+<script src="{{ get_url(path='elasticlunr.min.js') | safe }}"></script>
+<script src="{{ get_url(path='js/search.js') | safe }}"></script>
+{% endif %}

templates/partials/search.html

@@ -0,0 +1,33 @@
+<header class="page-header">
+    {% if page.title %}
+    <h1>{{ page.title | safe }}
+        <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            width="28" 
+            height="28" 
+            viewBox="0 0 24 24" 
+            fill="none"
+            stroke="currentColor" 
+            stroke-width="2" 
+            stroke-linecap="round" 
+            stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+    </h1>
+    {% endif %}
+    {% if page.description %}
+    <div class="post-description">
+        {{ page.description | safe }}
+    </div>
+    {% endif %}
+    <div id="searchbox">
+        <input id="searchInput" 
+               autofocus="" 
+               placeholder="Search locally ↵" 
+               aria-label="search" 
+               type="search" 
+               autocomplete="off">
+        <ul id="searchResults" aria-label="search results"></ul>
+    </div>
+</header>

templates/search.html

@@ -0,0 +1,23 @@
+{% import "macros/social_icon.svg.html" as macro_social -%}
+<!DOCTYPE html>
+<html lang="{{ lang }}" dir="{{ config.extra.papermod.language_direction }}">
+<head>
+    {% block head %}
+    {% include "partials/head.html" %}
+    {% endblock %}
+</head>
+<body class="{% if section or term or taxonomy %}list {% endif %}{% if config.extra.papermod.theme == 'dark' %} dark{% endif %}" id="top">
+    {% block header %}
+    {% include "partials/header.html" %}
+    {% endblock %}
+    <main class="main">
+        {% block main %}
+        {% include "partials/search.html" %}
+        {% endblock %}
+    </main>
+    {% block footer %}
+    {% include "partials/footer.html" %}
+    {% endblock %}
+</body>
+</html>
+