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

feat: revamp search experience

Browse Source 
chore: hide toc on small screen

chore: make sidebar responsive
This commit is contained in:
Xin
2023-08-06 01:06:32 +01:00
parent 16a656947b
commit 7e37b73779
12 changed files with 390 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/_default/single.html
View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class="mx-auto flex max-w-[90rem]">
<article class="typesetting-article w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<article class="typesetting-article w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<div>
<h1>{{ .Title }}</h1>

1
layouts/partials/head.html
View File

@ -1,5 +1,6 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{{ .Title }}
</title>

10
layouts/partials/scripts.html
View File

@ -18,9 +18,13 @@
<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>
<!-- TODO: use feature flag for search and embed flexsearch -->
{{ $searchJSFile := printf "%s.search.js" .Language.Lang }}
{{ $searchJS := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $searchJSFile . }}
{{ if hugo.IsProduction }}
{{ $searchJS = $searchJS | minify | fingerprint }}
{{ end }}
<script defer 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 }}

4
layouts/partials/search.html
View File

@ -8,9 +8,7 @@
</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))]"
<ul id="search-results" class="hidden 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>

2
layouts/partials/sidebar.html
View File

@ -1,4 +1,4 @@
<aside class="flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:sticky md:self-start max-md:[transform:translate3d(0,-100%,0)]">
<aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:sticky md:self-start max-md:[transform:translate3d(0,-100%,0)]">
<div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-4rem-3.75rem)]">
<ul class="flex flex-col gap-1 max-md:hidden">
{{- $s := .FirstSection -}}

2
layouts/partials/toc.html
View File

@ -1,7 +1,7 @@
{{/* Table of Contents */}}
{{/* TODO: toc should be able to get disabled through page frontmatter */}}
{{/* TODO: toc bottom part should be able to hide */}}
<div class="order-last w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
<div class="order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
<div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
{{ with .Fragments.Headings }}
<p class="mb-4 font-semibold tracking-tight">On This Page</p>

45
layouts/partials/utils/fragments.html Normal file
View File

@ -0,0 +1,45 @@
{{/* Split page raw content into fragments */}}
{{ $page := . }}
{{ $headingKeys := slice }}
{{ $headingTitles := slice }}
{{ range $h1 := $page.Fragments.Headings }}
{{ if eq $h1.Title "" }}
{{ $headingKeys = $headingKeys | append $h1.Title }}
{{ else }}
{{ $headingKeys = $headingKeys | append (printf "%s#%s" $h1.ID $h1.Title) }}
{{ end }}
{{ $headingTitles = $headingTitles | append (printf "# %s" $h1.Title) }}
{{ range $h2 := $h1.Headings }}
{{ $headingKeys = $headingKeys | append (printf "%s#%s" $h2.ID $h2.Title) }}
{{ $headingTitles = $headingTitles | append (printf "## %s" $h2.Title) }}
{{ end }}
{{ end }}
{{ $content := $page.RawContent }}
{{ $len := len $headingKeys }}
{{ $data := dict }}
{{ if eq $len 0 }}
{{ $data = $data | merge (dict "" $page.Plain) }}
{{ else }}
{{ range seq $len }}
{{ $i := sub $len . }}
{{ $headingKey := index $headingKeys $i }}
{{ $headingTitle := index $headingTitles $i }}
{{ if eq $i 0 }}
{{ $data = $data | merge (dict $headingKey ($content | markdownify | plainify)) }}
{{ else }}
{{ $parts := split $content (printf "\n%s\n" $headingTitle) }}
{{ $lastPart := index $parts (sub (len $parts) 1) }}
{{ $data = $data | merge (dict $headingKey ($lastPart | markdownify | plainify)) }}
{{ $content = strings.TrimSuffix $lastPart $content }}
{{ $content = strings.TrimSuffix (printf "\n%s\n" $headingTitle) $content }}
{{ end }}
{{ end }}
{{ end }}
{{ return $data }}