theme: Add static page search with pagefind

4 files changed, 77 insertions, 0 deletions

diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index 78635d5..11654ea 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -601,6 +601,71 @@ body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
     }
 }
 
+.search {
+    align-self: center;
+    max-width: calc(100vw - 20px);
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.pagefind-ui__form {
+    max-width: 100%;
+}
+
+.search input {
+    height: 1.5lh;
+    max-width: 100%;
+}
+
+#search, .pagefind-ui, #search form, #search input {
+    width: 100%;
+}
+
+.search button {
+    display: none;
+}
+
+.pagefind-ui__drawer {
+    position: fixed;
+    margin-top: 10px;
+    background: var(--c-bg-highlight);
+    max-width: min(100%, min(100vw, 40em));
+    max-height: 100%;
+    overflow-x: clip;
+    overflow-y: scroll;
+    text-overflow: clip;
+    z-index: 100;
+}
+
+.pagefind-ui__message {
+    font-family: "Nyght Serif";
+    font-weight: 700;
+    font-size: 16pt;
+}
+
+.pagefind-ui__results-area {
+    padding: 10px;
+}
+
+.pagefind-ui__results-area img {
+    max-width: min(50vw, 200px);
+}
+
+.pagefind-ui__results-area a {
+    max-width: min(50vw, 200px);
+    color: var(--c-fg-secondary) !important;
+    text-decoration: none;
+    padding: 10px 10px 10px 0 !important;
+    font-family: "Nyght Serif";
+    font-weight: 700;
+    font-size: 12pt;
+}
+
+.pagefind-ui__results-area figure, .pagefind-ui__results-area div.subfigure, .pagefind-ui__results-area img {
+    display: none;
+}
+
 @media print, (prefers-color-scheme: light) {
     html {
         --c-bg-backdrop:        hsl(220, 10%, 90%);
diff --git a/themes/conspiracy/layouts/_default/baseof.html b/themes/conspiracy/layouts/_default/baseof.html
index eb163b6..9557f19 100644
--- a/themes/conspiracy/layouts/_default/baseof.html
+++ b/themes/conspiracy/layouts/_default/baseof.html
@@ -5,6 +5,7 @@
         {{- partial "header.html" . -}}
         {{- block "main" . }}{{- end }}
         {{- partial "footer.html" . -}}
+        <script src="/pagefind/pagefind-ui.js"></script>
         <script>
             if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser
             contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to
@@ -12,6 +13,10 @@
                 In support of an open web, this website does not function with this DRM. Please install a browser such
             as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports
             ad blockers.`;
+
+            window.addEventListener('DOMContentLoaded', (event) => {
+                new PagefindUI({element: "#search", showSubResults: true});
+            });
         </script>
     </body>
 </html>
diff --git a/themes/conspiracy/layouts/_default/single.html b/themes/conspiracy/layouts/_default/single.html
index 231daf7..c7135f8 100644
--- a/themes/conspiracy/layouts/_default/single.html
+++ b/themes/conspiracy/layouts/_default/single.html
@@ -6,7 +6,11 @@
         {{- if .Params.Date }} <strong>{{ .Date.Format "2006-01-02" }}</strong>{{- end }}
     </header>
     {{- end }}
+    {{- if .Params.noindex }}
     <main>
+    {{- else }}
+    <main data-pagefind-body>
+    {{- end }}
         {{- if .Params.external_links }}
         <div class="links">
             {{- range .Params.external_links }}
diff --git a/themes/conspiracy/layouts/partials/header.html b/themes/conspiracy/layouts/partials/header.html
index e252f1f..0b9ea44 100644
--- a/themes/conspiracy/layouts/partials/header.html
+++ b/themes/conspiracy/layouts/partials/header.html
@@ -12,6 +12,9 @@
         </a>
         {{- end }}
     </div>
+    <div class="search">
+        <div id="search"></div>
+    </div>
     <div class="external">
         {{- range site.Params.profile_links }}
         <a href="{{ .url | absURL }}" title="{{ .name }}">{{ .name }}</a>