mirror of
https://github.com/imfing/hextra.git
synced 2025-06-20 04:31:25 -04:00
feat: multi-level sidebar
chore: support multiple search elements chore: sidebar display toc on mobile view chore: add hamburger menu to navbar on mobile chore: add markdown link hook for opening external link in new window chore: add sidebar footer - put search under params.type - make navbar link aware of external link
This commit is contained in:
Xin
1
layouts/_default/_markup/render-link.html
Normal file
1
layouts/_default/_markup/render-link.html
Normal file
@ -0,0 +1 @@
|
||||
<a href="{{ .Destination | safeURL }}" {{ with .Title }}title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
|
||||
@ -11,18 +11,30 @@
|
||||
|
||||
{{- $currentPage := . -}}
|
||||
{{- range .Site.Menus.main -}}
|
||||
{{- if eq .Name "Search" -}}
|
||||
{{- if eq .Params.type "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 "name" .Params.icon "attributes" "height=24") }}
|
||||
<span class="sr-only">{{ .Name }}</span>
|
||||
</a>
|
||||
{{ else }}
|
||||
<a class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" href="{{ .URL }}">
|
||||
<span class="text-center">{{ .Name }}</span>
|
||||
</a>
|
||||
{{- else -}}
|
||||
{{ $external := strings.HasPrefix .URL "http" }}
|
||||
{{- if .Params.icon -}}
|
||||
<a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ .URL | safeURL }}">
|
||||
{{ partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") }}
|
||||
<span class="sr-only">{{ .Name }}</span>
|
||||
</a>
|
||||
{{- else -}}
|
||||
<a
|
||||
href="{{ .URL | safeURL }}"
|
||||
{{ if $external }}target="_blank" rel="noreferer"{{ end }}
|
||||
class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
<span class="text-center">{{ .Name }}</span>
|
||||
</a>
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
|
||||
{{ partial "utils/icon.html" (dict "name" "menu" "attributes" "height=24") }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -4,6 +4,9 @@
|
||||
{{ $codeCopyJS := resources.Get "js/code-copy.js" }}
|
||||
<script src="{{ $codeCopyJS.RelPermalink }}"></script>
|
||||
|
||||
{{ $menuJS := resources.Get "js/menu.js" }}
|
||||
<script src="{{ $menuJS.RelPermalink }}"></script>
|
||||
|
||||
{{ if .Page.Store.Get "hasMermaid" }}
|
||||
<script type="module">
|
||||
// TODO: embed mermaid.min.js in the theme
|
||||
@ -18,6 +21,7 @@
|
||||
<script src="{{ $tabsJS.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- 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 . }}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{{- $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="search-wrapper relative md:w-64">
|
||||
<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" />
|
||||
<input placeholder="{{ $placeholder }}" class="search-input 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="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))]"
|
||||
<ul class="search-results 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>
|
||||
|
||||
@ -1,55 +1,142 @@
|
||||
<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)]">
|
||||
<!-- Search bar on small screen -->
|
||||
<div class="px-4 pt-4 md:hidden">
|
||||
{{ partial "search.html" }}
|
||||
</div>
|
||||
<div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
|
||||
<ul class="flex flex-col gap-1 md:hidden">
|
||||
<!-- Navbar -->
|
||||
{{- range .Site.Menus.main -}}
|
||||
{{- if and .URL (ne .Params.type "search") -}}
|
||||
<li>{{ template "sidebar-item-link" dict "active" false "title" .Name "link" .URL }}</li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
|
||||
|
||||
{{- $s := .FirstSection -}}
|
||||
{{- $topLevelItems := union $s.RegularPages $s.Sections -}}
|
||||
{{- $pageURL := .RelPermalink -}}
|
||||
|
||||
{{- range $topLevelItems.ByWeight -}}
|
||||
{{ template "sidebar-item" (dict "item" . "pageURL" $pageURL) }}
|
||||
{{ template "sidebar-tree" (dict "context" . "level" 1 "pageURL" $pageURL "toc" true) }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Sidebar footer -->
|
||||
<div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
|
||||
{{ template "sidebar-footer" }}
|
||||
</ul>
|
||||
|
||||
<!-- Sidebar on large screen -->
|
||||
<ul class="flex flex-col gap-1 max-md:hidden">
|
||||
{{- $s := .FirstSection -}}
|
||||
{{- $topLevelItems := union $s.RegularPages $s.Sections -}}
|
||||
{{- $currentUrl := .RelPermalink -}}
|
||||
{{- $pageURL := .RelPermalink -}}
|
||||
|
||||
{{- range $topLevelItems.ByWeight -}}
|
||||
{{- $isCurrent := eq $currentUrl .RelPermalink -}}
|
||||
{{- $title := .LinkTitle | default .File.BaseFileName -}}
|
||||
<li class="open">
|
||||
{{- if $isCurrent -}}
|
||||
<a
|
||||
class="flex cursor-pointer items-center justify-between gap-2 rounded bg-primary-100 px-2 py-1.5 text-sm font-semibold text-primary-800 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500"
|
||||
href="{{ .RelPermalink }}"
|
||||
>
|
||||
{{- $title -}}
|
||||
</a>
|
||||
{{ else }}
|
||||
<a
|
||||
class="flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-sm text-gray-500 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50"
|
||||
href="{{ .RelPermalink }}"
|
||||
>{{- $title -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
</li>
|
||||
{{ $secondLevelItems := union .RegularPages .Sections }}
|
||||
{{ with $secondLevelItems }}
|
||||
<div class="pt-1 ltr:pr-0">
|
||||
<ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
|
||||
{{ range $secondLevelItems.ByWeight }}
|
||||
{{ $isCurrent := eq $currentUrl .RelPermalink }}
|
||||
<li class="flex flex-col gap-1">
|
||||
<a
|
||||
class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
|
||||
{{ if eq $currentUrl .RelPermalink }}
|
||||
bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
|
||||
{{ else }}
|
||||
text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
|
||||
{{ end }}"
|
||||
href="{{ .RelPermalink }}"
|
||||
>
|
||||
{{ .LinkTitle | default .File.BaseFileName }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<!-- First level items and nested tree under -->
|
||||
{{ template "sidebar-item" (dict "item" . "pageURL" $pageURL) }}
|
||||
{{ template "sidebar-tree" (dict "context" . "level" 1 "pageURL" $pageURL) }}
|
||||
{{ end }}
|
||||
<!-- Sidebar footer -->
|
||||
{{ template "sidebar-footer" }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ template "theme-switch" }}
|
||||
</aside>
|
||||
|
||||
{{- define "sidebar-footer" -}}
|
||||
{{- range site.Menus.sidebar -}}
|
||||
{{ if eq .Params.type "separator" }}
|
||||
<li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
|
||||
<span class="cursor-default">{{ .Name }}</span>
|
||||
</li>
|
||||
{{ else }}
|
||||
<li>{{ template "sidebar-item-link" dict "active" false "title" .Name "link" .URL }}</li>
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "sidebar-tree" -}}
|
||||
{{ $pageURL := .pageURL }}
|
||||
{{ $level := .level }}
|
||||
{{ $toc := .toc | default false }}
|
||||
|
||||
{{ if ge $level 4 }}
|
||||
{{ return }}
|
||||
{{ end }}
|
||||
|
||||
{{ $items := union .context.RegularPages .context.Sections }}
|
||||
{{ with $items }}
|
||||
<div class="pt-1 ltr:pr-0">
|
||||
<ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
|
||||
{{ range $items.ByWeight }}
|
||||
{{ $active := eq $pageURL .RelPermalink }}
|
||||
{{ $title := .LinkTitle | default .File.BaseFileName }}
|
||||
<li class="flex flex-col gap-1">
|
||||
{{ template "sidebar-item-link" dict "active" $active "title" $title "link" .RelPermalink }}
|
||||
{{ if and $toc $active }}
|
||||
{{ template "sidebar-toc" dict "page" . }}
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ template "sidebar-tree" dict "context" . "pageURL" $pageURL "level" (add $level 1) }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "sidebar-toc" -}}
|
||||
{{ $page := .page }}
|
||||
{{ with $page.Fragments.Headings }}
|
||||
<ul class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'>
|
||||
{{ range . }}
|
||||
{{ with .Headings }}
|
||||
{{ range . }}
|
||||
<li>
|
||||
<a
|
||||
href="#{{ anchorize .ID }}"
|
||||
class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border flex gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
|
||||
>
|
||||
{{- .Title -}}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "sidebar-item" }}
|
||||
{{- $active := eq .pageURL .item.RelPermalink -}}
|
||||
{{- $title := .item.LinkTitle | default .item.File.BaseFileName -}}
|
||||
{{- $link := .item.RelPermalink -}}
|
||||
|
||||
|
||||
<li class="open">
|
||||
{{ template "sidebar-item-link" dict "active" $active "title" $title "link" $link }}
|
||||
</li>
|
||||
{{- end -}}
|
||||
|
||||
{{- define "sidebar-item-link" -}}
|
||||
{{ $external := strings.HasPrefix .link "http" }}
|
||||
<a
|
||||
class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
|
||||
{{- if .active }}
|
||||
bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
|
||||
{{- else }}
|
||||
text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
|
||||
{{- end -}}"
|
||||
href="{{ .link }}"
|
||||
{{ if $external }}target="_blank" rel="noreferer"{{ end }}
|
||||
>
|
||||
{{- .title -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
|
||||
{{- define "theme-switch" -}}
|
||||
<!-- theme switch button -->
|
||||
<div class="sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
|
||||
<div class="grow flex flex-col">
|
||||
@ -65,4 +152,4 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{{- end -}}
|
||||
|
||||
Reference in New Issue
Block a user