Skip to content

Commit

Permalink
hugo: use fuse.js search instead of algolia
Browse files Browse the repository at this point in the history
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
  • Loading branch information
dvdksn committed Apr 26, 2024
1 parent 6366f16 commit 6ccbfa3
Show file tree
Hide file tree
Showing 18 changed files with 181 additions and 919 deletions.
635 changes: 0 additions & 635 deletions assets/css/search.css

This file was deleted.

1 change: 0 additions & 1 deletion assets/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
5 changes: 3 additions & 2 deletions assets/js/src/alpine.js
Original file line number Diff line number Diff line change
@@ -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()
71 changes: 54 additions & 17 deletions assets/js/src/search.js
Original file line number Diff line number Diff line change
@@ -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);
29 changes: 29 additions & 0 deletions hugo_stats.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -135,6 +137,7 @@
"bg-pattern-purple",
"bg-pattern-verde",
"bg-red-light",
"bg-transparent",
"bg-violet-light",
"bg-white",
"block",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -230,6 +238,7 @@
"grid-cols-2",
"group",
"group-hover:block'",
"h-12",
"h-16",
"h-2",
"h-32",
Expand Down Expand Up @@ -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]",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -350,6 +374,7 @@
"px-3",
"px-4",
"py-1",
"py-12",
"py-2",
"py-20",
"py-4",
Expand All @@ -366,6 +391,7 @@
"rounded-[6px]",
"rounded-b-lg",
"rounded-full",
"rounded-lg",
"rounded-sm",
"scale-50",
"scale-75",
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/cli.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/glossary.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
6 changes: 5 additions & 1 deletion layouts/index.metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
{}]
10 changes: 1 addition & 9 deletions layouts/partials/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" "-" }}
5 changes: 3 additions & 2 deletions layouts/partials/header.html
Original file line number Diff line number Diff line change
@@ -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 }}
Expand All @@ -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);
Expand Down
45 changes: 45 additions & 0 deletions layouts/partials/search.html
Original file line number Diff line number Diff line change
@@ -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>
1 change: 0 additions & 1 deletion layouts/partials/utils/description.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
{{ if .Description }}
{{ $desc = .Description }}
{{ else }}
{{ $desc = .Summary }}
{{ with .File }}
{{ with (index (site.Data.frontmatter) .Path) }}
{{ with .description }}
Expand Down
2 changes: 1 addition & 1 deletion layouts/samples/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
Loading

0 comments on commit 6ccbfa3

Please sign in to comment.