add search by title

assets/css/search.css

@@ -0,0 +1,8 @@
+#search {
+  height: 50px;
+  width: 100%;
+  padding: 8px;
+  border: 2px solid;
+  line-height: 1.6;
+  font-size: 1.25rem;
+}

assets/js/search.js

@@ -0,0 +1,21 @@
+(function () {
+  function onEvent() {
+    var filter = search.value.toUpperCase();
+    var list = document.getElementById("list");
+    var listItems = list.getElementsByTagName("li");
+    for (i = 0; i < listItems.length; i++) {
+      var item = listItems[i];
+      var text = item.innerText.toUpperCase();
+      if (text.indexOf(filter) > -1) {
+        item.style.display = "";
+      } else {
+        item.style.display = "none";
+      }
+    }
+  }
+
+  var search = document.getElementById("search");
+  if (search) {
+    search.addEventListener("keyup", onEvent);
+  }
+})();

exampleSite/config.yaml

@@ -26,6 +26,7 @@ params:
   katex: true
   darkThemeAsDefault: false
   hideHeaderLinks: false
+  search: true
   # A list of custom css files can be provided, which must be placed inside
   # 'static/'.
   # This is useful to override just specific css classes, instead of copying

layouts/_default/list.html

@@ -1,19 +1,32 @@
 {{ define "main" }}
-  <main id="main">
-    <h1>{{ .Title }}</h1>
-    <ul class="patterns-list">
+<main id="main">
+  <h1>{{ .Title }}</h1>
+  {{ if site.Params.search }}
+  <input
+    id="search"
+    type="text"
+    placeholder="Search by title..."
+    aria-label="Search by title"
+  />
+  {{ end }}
+  <ul class="patterns-list" id="list">
     {{ range .Pages.ByPublishDate.Reverse }}
-      <li>
-        <h2>
-          <a href="{{ .Permalink }}">
-            <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
-              <use xlink:href="#bookmark"></use>
-            </svg>
-            {{ .Title }}
-          </a>
-        </h2>
-      </li>        
+    <li>
+      <h2>
+        <a href="{{ .Permalink }}">
+          <svg
+            class="bookmark"
+            aria-hidden="true"
+            viewBox="0 0 40 50"
+            focusable="false"
+          >
+            <use xlink:href="#bookmark"></use>
+          </svg>
+          {{ .Title }}
+        </a>
+      </h2>
+    </li>
     {{ end }}
-    </ul>
-  </main>
+  </ul>
+</main>
 {{ end }}

layouts/partials/script.html

@@ -3,3 +3,10 @@
 {{ $templateDomScripts := resources.Get "js/template-dom-scripts.js" }}
 {{ $domScripts := $templateDomScripts | resources.ExecuteAsTemplate "js/dom-scripts.js" . }}
 <script src="{{ $domScripts.Permalink }}"></script>
+
+{{ if site.Params.search }}
+{{ $searchJs := resources.Get "js/search.js" | fingerprint }}
+<script src="{{ $searchJs.RelPermalink }}"></script>
+{{ $searchCss := resources.Get "css/search.css" | fingerprint }}
+<link rel="stylesheet" href="{{ $searchCss.RelPermalink }}"></link>
+{{ end }}