hugo: use fuse.js search instead of algolia

assets/css/styles.css

@@ -3,7 +3,6 @@
 @import "tailwindcss/base";
 @import "/assets/css/global";
 @import "/assets/css/typography";
-@import "/assets/css/search";
 @import "/assets/css/hack";
 
 @import "tailwindcss/components";

assets/js/src/alpine.js

@@ -1,12 +1,13 @@
 import Alpine from 'alpinejs'
 import collapse from '@alpinejs/collapse'
 import persist from '@alpinejs/persist'
+import focus from '@alpinejs/focus'
 
 window.Alpine = Alpine
 
 Alpine.plugin(collapse)
-Alpine.store("showSidebar", false)
-
 Alpine.plugin(persist)
+Alpine.plugin(focus)
+Alpine.store("showSidebar", false)
 
 Alpine.start()

assets/js/src/search.js

@@ -1,17 +1,54 @@
-import docsearch from "@docsearch/js";
-import * as params from "@params"; // hugo dict
-
-const { appid, apikey, indexname } = params;
-
-docsearch({
-  container: "#docsearch",
-  appId: appid,
-  apiKey: apikey,
-  indexName: indexname,
-  transformItems(items) {
-    return items.map((item) => ({
-      ...item,
-      url: item.url.replace("https://docs.docker.com", ""),
-    }));
-  },
-});
+import Fuse from "fuse.js";
+
+let indexed = false;
+let handler = null;
+
+const modalSearchInput = document.querySelector("#modal-search-input");
+const modalSearchResults = document.querySelector("#modal-search-results");
+
+async function initializeIndex() {
+  const index = await fetch("/metadata.json").then((response) =>
+    response.json(),
+  );
+
+  const options = {
+    keys: [
+      { name: "title", weight: 2 },
+      { name: "description", weight: 1 },
+      { name: "keywords", weight: 1 },
+      { name: "tags", weight: 1 },
+    ],
+    minMatchCharLength: 2,
+    threshold: 0.2,
+  };
+
+  handler = new Fuse(index, options);
+  indexed = true;
+}
+
+async function executeSearch(query) {
+  !indexed && (await initializeIndex());
+  const results = handler.search(query).map(({ item }) => item);
+  return results
+}
+
+async function modalSearch(e) {
+  const query = e.target.value;
+  results = await executeSearch(query)
+
+  let resultsHTML = `<div>${results.length} results</div>`;
+  resultsHTML += results
+    .map((item) => {
+      return `<div class="bg-gray-light-100 dark:bg-gray-dark-200 rounded p-4">
+      <div class="flex flex-col">
+        <a class="link" href="${item.url}">${item.title}</a>
+        <p>${item.description}</p>
+      </div>
+      </div>`;
+    })
+    .join("");
+
+  modalSearchResults.innerHTML = resultsHTML;
+}
+
+modalSearchInput.addEventListener("input", modalSearch);

hugo_stats.json

@@ -112,13 +112,15 @@
       "Without-packages",
       "Without-systemd",
       "absolute",
+      "appearance-none",
       "aspect-video",
       "bake-action",
       "basis-1/3",
       "basis-2/3",
       "bg-accent-light",
       "bg-amber-light",
       "bg-amber-light-200",
+      "bg-background-dark/70",
       "bg-background-light",
       "bg-black/70",
       "bg-blue-light",
@@ -135,6 +137,7 @@
       "bg-pattern-purple",
       "bg-pattern-verde",
       "bg-red-light",
+      "bg-transparent",
       "bg-violet-light",
       "bg-white",
       "block",
@@ -160,6 +163,7 @@
       "dark:bg-blue-dark",
       "dark:bg-blue-dark-400",
       "dark:bg-gray-dark-100",
+      "dark:bg-gray-dark-100/70",
       "dark:bg-gray-dark-200",
       "dark:bg-gray-dark-300",
       "dark:bg-gray-dark-300/50",
@@ -174,6 +178,7 @@
       "dark:border-gray-dark-400",
       "dark:decoration-blue-dark",
       "dark:fill-blue-dark",
+      "dark:focus:outline-blue-dark",
       "dark:from-accent-dark",
       "dark:from-background-dark",
       "dark:from-blue-dark-400",
@@ -182,6 +187,7 @@
       "dark:hover:bg-blue-dark-500",
       "dark:hover:bg-gray-dark-500",
       "dark:hover:text-white",
+      "dark:outline-gray-dark",
       "dark:prose-invert",
       "dark:syntax-dark",
       "dark:text-blue-dark",
@@ -207,9 +213,11 @@
       "fixed",
       "flex",
       "flex-1",
+      "flex-auto",
       "flex-col",
       "flex-col-reverse",
       "flex-wrap",
+      "focus:outline-blue-light",
       "font-medium",
       "footnote-backref",
       "footnote-ref",
@@ -230,6 +238,7 @@
       "grid-cols-2",
       "group",
       "group-hover:block'",
+      "h-12",
       "h-16",
       "h-2",
       "h-32",
@@ -279,11 +288,17 @@
       "lg:pb-2",
       "lg:scale-100",
       "lg:text-base",
+      "lg:w-75ch",
       "lg:w-[1200px]",
+      "lg:w-[600px]",
+      "lg:w-[840px]",
       "link",
       "lntable",
       "lntd",
+      "m-2",
       "m-auto",
+      "max-h-[77vh]",
+      "max-h-[80vh]",
       "max-h-full",
       "max-w-56",
       "max-w-[1400px]",
@@ -304,13 +319,17 @@
       "md:hidden",
       "md:max-w-[66%]",
       "md:scale-100",
+      "md:w-full",
+      "min-h-0",
       "min-h-screen",
       "min-w-0",
       "ml-3",
       "ml-auto",
       "mt-1",
       "mt-20",
       "mt-auto",
+      "mx-1",
+      "mx-8",
       "mx-auto",
       "my-0",
       "my-2",
@@ -321,9 +340,14 @@
       "object-cover",
       "openSUSE-and-SLES",
       "origin-bottom-right",
+      "outline",
+      "outline-2",
+      "outline-gray-light",
+      "overflow-auto",
       "overflow-clip",
       "overflow-hidden",
       "overflow-x-hidden",
+      "overflow-y-auto",
       "overflow-y-scroll",
       "p-1",
       "p-2",
@@ -350,6 +374,7 @@
       "px-3",
       "px-4",
       "py-1",
+      "py-12",
       "py-2",
       "py-20",
       "py-4",
@@ -366,6 +391,7 @@
       "rounded-[6px]",
       "rounded-b-lg",
       "rounded-full",
+      "rounded-lg",
       "rounded-sm",
       "scale-50",
       "scale-75",
@@ -415,13 +441,16 @@
       "w-8",
       "w-[1200px]",
       "w-[32px]",
+      "w-[840px]",
       "w-full",
       "w-lvw",
       "warning",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
       "xl:grid-cols-main-xl",
+      "xl:w-100ch",
       "xl:w-[1200px]",
+      "xl:w-[800px]",
       "youtube-video",
       "z-10",
       "z-20",

layouts/_default/cli.html

@@ -12,7 +12,7 @@
   {{ .Scratch.Set "headings" slice }}
   {{ .Scratch.Set "subheadings" slice }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
     <table>
       <tbody>

layouts/_default/glossary.html

@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}

layouts/_default/list.html

@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}

layouts/_default/single.html

@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}

layouts/index.metadata.json

@@ -3,6 +3,10 @@
   {{- $title := partialCached "utils/title.html" . . -}}
   {{- $desc := partialCached "utils/description.html" . . -}}
   {{- $kwd := partialCached "utils/keywords.html" . . -}}
-  {{- jsonify (dict "url" .Permalink "title" $title "description" $desc "keywords" $kwd) -}},
+  {{- $tags := slice -}}
+  {{- range (.GetTerms "tags") -}}
+    {{ $tags = $tags | append .LinkTitle }}
+  {{- end -}}
+  {{- jsonify (dict "url" .Permalink "title" $title "description" $desc "keywords" $kwd "tags" $tags) -}},
 {{- end -}}
 {}]

layouts/partials/head.html

@@ -68,15 +68,7 @@
 <script>{{ $theme.Content | safeJS }}</script>
 {{ $js := resources.Match "js/src/**.js"
   | resources.Concat "scripts.js"
-  | js.Build (dict
-    "params" (dict
-      "apikey" site.Params.algolia.apikey
-      "appid" site.Params.algolia.appid
-      "indexname" site.Params.algolia.indexname
-    )
-    "targetPath" "scripts.js"
-  )
+  | js.Build (dict "minify" true "targetPath" "scripts.js")
 }}
 <script defer src="{{ $js.Permalink }}"></script>
-<link rel="preconnect" href="https://{{ site.Params.algolia.appid }}-dsn.algolia.net" crossorigin />
 {{ partialCached "utils/resources.html" "-" }}

layouts/partials/header.html

@@ -1,4 +1,5 @@
-<header class="sticky top-0 z-20 h-16 px-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark dark:to-blue-dark-100">
+<header
+  class="sticky top-0 z-20 h-16 px-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark dark:to-blue-dark-100">
   <div class="mx-auto flex h-full max-w-[1400px] items-center justify-between">
     <div class="flex h-full items-center md:gap-8 gap-2">
       {{ if not .IsHome }}
@@ -18,7 +19,7 @@
       {{ partial "top-nav.html" . }}
     </div>
     <div class="flex items-center gap-6">
-      <div id="docsearch"></div>
+      {{ partialCached "search.html" "-" }}
       <button aria-label="Theme switch" id="theme-switch" class="svg-icon"
         x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
         localStorage.setItem('theme-preference', value);

layouts/partials/search.html

@@ -0,0 +1,45 @@
+<div x-data="{ open: false }"
+  @keyup.escape.window="open = false; if (!open) { document.body.classList.remove('overflow-hidden'); }"
+  @keydown.window="(e) => {
+switch(e.key) {
+case 'k':
+  if (e.metaKey || e.ctrlKey) {
+     e.preventDefault()
+     open = !open;
+     if (open) {
+       document.body.classList.add('overflow-hidden');
+     } else {
+       document.body.classList.remove('overflow-hidden');
+     }
+  }
+}
+}">
+  <!-- search button -->
+  <button @click="open = true; document.body.classList.add('overflow-hidden');">
+    <span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span>
+  </button>
+  <!-- search modal -->
+  <div class="fixed left-0 top-0 z-20 flex w-lvw justify-center py-12 text-gray-light-800 dark:text-gray-dark-800"
+    role="dialog" tabindex="-1" x-show="open" x-trap="open" x-cloak x-transition>
+    <div class="max-h-[80vh] overflow-hidden lg:w-[600px] xl:w-[800px] rounded-lg bg-white p-2 mx-8 dark:bg-background-dark w-full flex flex-col"
+      @click.away="open = false; document.body.classList.remove('overflow-hidden');">
+      <div class="m-2 text-xl">Search Docker documentation</div>
+      <header class="flex items-center py-2">
+        <input type="search" id="modal-search-input"
+          class="mx-1 flex h-12 flex-auto appearance-none rounded bg-transparent p-4 outline outline-2 outline-gray-light focus:outline-blue-light dark:outline-gray-dark dark:focus:outline-blue-dark"
+          placeholder="Search..." tabindex="0" />
+        <div class="icon-svg px-2">
+          {{ partialCached "icon" "search" "search" }}
+        </div>
+      </header>
+      <section class="overflow-y-auto px-2">
+        <div class="flex min-h-0 flex-col gap-2" id="modal-search-results">
+          <!-- results -->
+        </div>
+      </section>
+    </div>
+  </div>
+  <!-- search modal backdrop -->
+  <div class="fixed left-0 top-0 h-full w-full bg-background-dark/70 dark:bg-gray-dark-100/70" x-show="open" x-cloak>
+  </div>
+</div>

layouts/partials/utils/description.html

@@ -2,7 +2,6 @@
 {{ if .Description }}
   {{ $desc = .Description }}
 {{ else }}
-  {{ $desc = .Summary }}
   {{ with .File }}
     {{ with (index (site.Data.frontmatter) .Path) }}
       {{ with .description }}

layouts/samples/single.html

@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}