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 Mar 12, 2024
1 parent 3e77c91 commit 47a2b69
Show file tree
Hide file tree
Showing 11 changed files with 138 additions and 902 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
2 changes: 2 additions & 0 deletions assets/js/src/alpine.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
import focus from '@alpinejs/focus'

window.Alpine = Alpine

Alpine.plugin(collapse)
Alpine.plugin(focus)
Alpine.store("showSidebar", false)

Alpine.start()
53 changes: 38 additions & 15 deletions assets/js/src/search.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,40 @@
import docsearch from "@docsearch/js";
import * as params from "@params"; // hugo dict
import Fuse from "fuse.js";

const { appid, apikey, indexname } = params;
const searchInput = document.querySelector("#search-input");
const searchResults = document.querySelector("#search-results");

docsearch({
container: "#docsearch",
appId: appid,
apiKey: apikey,
indexName: indexname,
transformItems(items) {
return items.map((item) => ({
...item,
url: item.url.replace("https://docs.docker.com", ""),
}));
},
});
async function handleSearch(e) {
const searchQuery = e.target.value;
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 },
],
minMatchCharLength: 2,
threshold: 0.2,
};
const fuse = new Fuse(index, options);

const results = fuse.search(searchQuery).map(({item}) => item);

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("");

searchResults.innerHTML = resultsHTML;
}

searchInput.addEventListener("input", handleSearch);
25 changes: 23 additions & 2 deletions hugo_stats.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@
"Before",
"Buildkite",
"CLI",
"CLI-Mac-/-Linux",
"CLI-Windows",
"CentOS-7-and-RHEL-7",
"CentOS-8-RHEL-8-and-Fedora",
"Circle-CI",
"Clone-with-git",
"Command-Prompt",
"Command-Prompt-CLI",
"Compliant",
"Debian",
"Debian-GNU/Linux",
Expand All @@ -40,6 +40,8 @@
"For-Mac-with-Apple-silicon",
"For-Mac-with-Intel-chip",
"For-all-platforms",
"Git-Bash",
"Git-Bash-CLI",
"GitHub-Actions",
"GitLab",
"Go",
Expand All @@ -58,13 +60,17 @@
"Linux",
"Mac",
"Mac-/-Linux",
"Mac-/-Linux-/-Git-Bash",
"Mac-/-Linux-/-PowerShell",
"Mac-/-Linux-/-Windows-Git-Bash",
"Mac-/-Linux-CLI",
"Mac-and-Linux",
"Mac-with-Apple-silicon",
"Mac-with-Intel-chip",
"Node",
"Non-compliant",
"PowerShell",
"PowerShell-CLI",
"Python",
"Raw",
"React",
Expand Down Expand Up @@ -97,6 +103,7 @@
"Without-packages",
"Without-systemd",
"absolute",
"appearance-none",
"aspect-video",
"auto-rows-fr",
"bake-action",
Expand All @@ -105,6 +112,7 @@
"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 @@ -119,6 +127,7 @@
"bg-pattern-purple",
"bg-pattern-verde",
"bg-red-light",
"bg-transparent",
"bg-violet-light",
"bg-white",
"block",
Expand All @@ -142,6 +151,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/50",
"dark:bg-gray-dark-400",
Expand Down Expand Up @@ -169,6 +179,7 @@
"dark:text-gray-dark-500",
"dark:text-gray-dark-600",
"dark:text-gray-dark-700",
"dark:text-gray-dark-800",
"dark:text-violet-dark",
"dark:text-white",
"dark:to-blue-dark-100",
Expand All @@ -183,9 +194,11 @@
"fixed",
"flex",
"flex-1",
"flex-auto",
"flex-col",
"flex-initial",
"flex-row-reverse",
"focus:outline-transparent",
"font-medium",
"footnote-backref",
"footnote-ref",
Expand All @@ -207,6 +220,7 @@
"group",
"group-hover:block'",
"grow",
"h-12",
"h-16",
"h-2",
"h-8",
Expand Down Expand Up @@ -264,6 +278,7 @@
"md:grid-cols-1",
"md:h-screen",
"md:hidden",
"md:m-4",
"md:ml-[21px]",
"md:scale-50",
"md:w-full",
Expand All @@ -276,15 +291,19 @@
"ml-auto",
"mt-1",
"mt-20",
"mx-1",
"mx-2",
"mx-auto",
"my-0",
"my-12",
"my-4",
"no-underline",
"no-wrap",
"not-prose",
"object-cover",
"openSUSE-and-SLES",
"origin-bottom-right",
"overflow-auto",
"overflow-clip",
"overflow-hidden",
"overflow-x-hidden",
Expand Down Expand Up @@ -322,6 +341,7 @@
"rounded",
"rounded-[6px]",
"rounded-full",
"rounded-lg",
"rounded-sm",
"scroll-mt-20",
"scroll-mt-36",
Expand Down Expand Up @@ -381,6 +401,7 @@
"w-[32px]",
"w-[840px]",
"w-full",
"w-lvw",
"warning",
"xl:grid-cols-1",
"xl:grid-cols-2",
Expand Down
11 changes: 1 addition & 10 deletions layouts/partials/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,7 @@
<script>{{ $theme.Content | safeJS }}</script>
{{ $js := resources.Match "js/src/**.js"
| resources.Concat "scripts.js"
| js.Build (dict
"minify" true
"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" "-" }}
44 changes: 42 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 gap-8 md:gap-2">
{{ if not .IsHome }}
Expand All @@ -25,7 +26,46 @@
{{ partial "top-nav.html" . }}
</div>
<div class="flex items-center gap-6">
<div id="docsearch"></div>
<div
x-data="{ open: false }"
@keyup.escape.window="open = false"
@keydown.window="(e) => {
switch(e.key) {
case 'k':
if (e.metaKey || e.ctrlKey) {
open = !open;
}
}
}">
<!-- search button -->
<button @click="open = true">
<span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span>
</button>
<!-- search modal -->
<div
class="flex justify-center w-lvw z-10 fixed left-0 top-0 my-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="w-[840px] md:w-full bg-white dark:bg-background-dark p-2 rounded-lg md:m-4" @click.away="open = false">
<div class="text-2xl mx-2">Search</div>
<header class="flex items-center">
<input type="search" id="search-input"
class="flex flex-auto h-12 mx-1 p-4 appearance-none bg-transparent focus:outline-transparent"
placeholder="Search..." tabindex="0">
<div class="icon-svg px-2">
{{ partialCached "icon" "search" "search" }}
</div>
</header>
<section class="flex-auto px-2 overflow-auto">
<div class="flex flex-col gap-2" id="search-results">
<!-- results -->
</div>
</section>
</div>
</div>
<!-- search modal backdrop -->
<div class="w-full h-full bg-background-dark/70 dark:bg-gray-dark-100/70 top-0 left-0 fixed" x-show="open" x-cloak></div>
<!-- register pagefind handler on modal -->
</div>
<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
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
Loading

0 comments on commit 47a2b69

Please sign in to comment.