✨ Add site search powered by Fuse.js

layouts/_default/baseof.html

@@ -17,14 +17,17 @@
     <div class="absolute flex self-center">
       <a
         class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutral-600 focus:translate-y-0"
-        href="#maincontent"
+        href="#main-content"
         ><span class="font-bold ltr:pr-2 rtl:pl-2 text-primary-600 dark:text-primary-400"
           >&darr;</span
         >{{ i18n "header.skip_to_main" }}</a
       >
     </div>
     {{- partial "header.html" . -}}
-    <main id="maincontent" class="grow">{{- block "main" . }}{{- end }}</main>
+    <main id="main-content" class="grow">{{- block "main" . }}{{- end }}</main>
+    {{ if .Site.Params.enableSearch | default false }}
+      {{- partial "search.html" . -}}
+    {{ end }}
     {{- partial "footer.html" . -}}
   </body>
 </html>

layouts/_default/index.json

@@ -0,0 +1,6 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+  {{ $section := .Site.GetPage "section" .Section }}
+  {{- $.Scratch.Add "index" (dict "date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long")) "title" .Title "section" $section.Title "summary" .Summary "content" (.Plain | safeJS) "permalink" .Permalink) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}

layouts/partials/header.html

@@ -42,6 +42,19 @@
             >
           </li>
         {{ end }}
+        {{ if .Site.Params.enableSearch | default false }}
+          <li
+            class="ltr:text-right rtl:text-left ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
+          >
+            <button
+              id="search-button"
+              class="text-base hover:text-neutral-600 dark:hover:text-neutral-300"
+              title="{{ i18n "search.open_button_title" }}"
+            >
+              {{ partial "icon.html" "search" }}
+            </button>
+          </li>
+        {{ end }}
       </ul>
     </nav>
   {{ end }}

layouts/partials/search.html

@@ -0,0 +1,52 @@
+{{ $fuseLib := resources.Get "lib/fuse/fuse.min.js" }}
+{{ $fuseConfig := resources.Get "js/search.js" }}
+{{ $fuseConfig := $fuseConfig | resources.Minify }}
+{{ $fuseJS := slice $fuseLib $fuseConfig | resources.Concat "js/fuse.bundle.js" | resources.Fingerprint "sha512" -}}
+
+<script defer type="text/javascript" src="{{ $fuseJS.RelPermalink }}" integrity="{{ $fuseJS.Data.Integrity }}" data-id="fusejs" data-url="{{ .Site.BaseURL }}"></script>
+<div
+  id="search-wrapper"
+  class="fixed inset-0 z-50 flex flex-col p-4 sm:p-6 md:p-[10vh] lg:p-[12vh] w-screen h-screen cursor-default bg-neutral-500/50 backdrop-blur-sm dark:bg-neutral-900/50 invisible"
+>
+  <div
+    id="search-modal"
+    class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg border-neutral-200 top-20 bg-neutral dark:bg-neutral-800 dark:border-neutral-700"
+  >
+    <header class="relative z-10 flex items-center justify-between flex-none px-2">
+      <form class="flex items-center flex-auto min-w-0">
+        <div class="flex items-center justify-center w-8 h-8 text-neutral-400">
+          {{ partial "icon.html" "search" }}
+        </div>
+        <input
+          type="search"
+          id="search-query"
+          class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-transparent focus:outline-2"
+          placeholder="{{ i18n "search.input_placeholder" }}"
+          tabindex="0"
+        />
+      </form>
+      <button
+        id="close-search-button"
+        class="flex items-center justify-center w-8 h-8 text-neutral-600"
+        title="{{ i18n "search.close_button_title" }}"
+      >
+        {{ partial "icon.html" "times" }}
+      </button>
+    </header>
+    <section class="flex-auto px-2 overflow-auto">
+      <ul id="search-results">
+        <!-- <li class="mb-2">
+          <a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
+            <div class="grow">
+              <div class="-mb-1 text-lg font-bold">${value.item.title}</div>
+              <div class="text-sm text-neutral-500 dark:text-neutral-400">${value.item.section}<span class="px-2 text-primary-500">&middot;</span>${value.item.date}</span></div>
+              <div class="text-sm italic">${value.item.summary}</div>
+            </div>
+            <div class="ml-2 ltr:block rtl:hidden text-neutral-500">&rarr;</div>
+            <div class="mr-2 ltr:hidden rtl:block text-neutral-500">&larr;</div>
+          </a>
+        </li> -->
+      </ul>
+    </section>
+  </div>
+</div>