add search, fix #210

layouts/partials/head.html

@@ -18,6 +18,22 @@
   <link rel="icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
 
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tilt+Warp">
+
+  <link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+  <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+
+  <script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({ element: "#search",
+        translations: {
+          placeholder: "Suchen...",
+          zero_results: "Leider konnten keine Ergebnisse zu [SEARCH_TERM] gefunden werden",
+          clear_search: "Löschen"
+        }
+      });
+    });
+  </script>
+
   
   {{ range .Site.Params.plugins.head_js }}
     <script src="{{ . | absURL }}"></script>
@@ -46,3 +62,21 @@
   {{ partial "twitter" . }}
 
 </head>
+
+<div id="pagefind-search" class="modal" data-pagefind-ignore>
+  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title">Suche</h3>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="content">
+          <div id="search"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>