drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 10:01:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: basic flexsearch implementation

Browse Source
This commit is contained in:
Xin
2023-08-04 01:11:31 +01:00
parent b90c2e7737
commit 16a656947b
7 changed files with 139 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
layouts/partials/navbar.html
View File

@ -3,17 +3,19 @@
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 max-w-[90rem]">
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ .Site.BaseURL }}">
{{ partial "utils/icon.html" (dict "context" . "name" "hugo" "attributes" "height=20") }}
{{ partial "utils/icon.html" (dict "name" "hugo" "attributes" "height=20") }}
<span class="mx-2 font-extrabold hidden md:inline select-none" title="{{ .Site.Title }}">
{{ .Site.Title }}
</span>
</a>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ if .Params.icon }}
{{- $currentPage := . -}}
{{- range .Site.Menus.main -}}
{{- if eq .Name "Search" -}}
{{ partial "search.html" (dict "params" .Params) }}
{{- else if .Params.icon -}}
<a class="p-2 text-current" target="_blank" rel="noreferer" href="{{ .URL }}">
{{ partial "utils/icon.html" (dict "context" $currentPage "name" .Params.icon "attributes" "height=24") }}
{{ partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") }}
<span class="sr-only">{{ .Name }}</span>
</a>
{{ else }}

5
layouts/partials/scripts.html
View File

@ -18,6 +18,11 @@
<script src="{{ $tabsJS.RelPermalink }}"></script>
{{ end }}
{{- $searchJSFile := printf "%s.search.js" .Language.Lang }}
{{- $searchJS := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $searchJSFile . | resources.Minify | resources.Fingerprint -}}
<script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.min.js"></script>
<script defer src="{{ $searchJS.RelPermalink }}"></script>
{{ if .Page.Params.math }}
<!-- TODO: embed katex in the theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous" />

17
layouts/partials/search.html Normal file
View File

@ -0,0 +1,17 @@
{{- $placeholder := .params.placeholder | default "Search..." -}}
<div id="search-wrapper" class="search-wrapper relative md:w-64 hidden md:inline-block mx-min-w-[200px]">
<div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
<input id="search-input" placeholder="{{ $placeholder }}" class="block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current" type="search" value="" spellcheck="false" />
<kbd class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"> <span class="text-xs">⌘</span>K </kbd>
</div>
<div>
<ul
id="search-results"
class="border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
style="transition: max-height 0.2s ease 0s;"
></ul>
</div>
</div>