mirror of
https://github.com/imfing/hextra.git
synced 2025-06-20 10:21:18 -04:00
feat: add blog list layout
chore: add toc to mobile dropdown menu single items chore: refactor sidebar chore: add single layout for blog chore: add vscode settings chore: add blog section chore: add devcontainer.json chore: exclude icon from mobile nav chore: support multiple theme switches - simplify theme switch implementation using data attributes - hide theme switch when sidebar is disabled chore: add theme switch to footer - enable when sidebar is disabled chore: add format-date partial
This commit is contained in:
Xin
@ -1,4 +1,8 @@
|
||||
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
|
||||
|
||||
|
||||
<footer class="bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
|
||||
{{- if $enableFooterSwitches }}{{ template "footer-switches" }}{{ end -}}
|
||||
<hr class="dark:border-neutral-800" />
|
||||
<div class="mx-auto flex max-w-[90rem] justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start">
|
||||
<div class="flex w-full flex-col items-center sm:items-start">
|
||||
@ -12,3 +16,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{- define "footer-switches" -}}
|
||||
<div class="mx-auto flex max-w-[90rem] gap-2 py-2 px-4">
|
||||
{{ partial "theme-toggle.html" }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
{{ $context := .context }}
|
||||
{{ $disableSidebar := .disableSidebar | default false }}
|
||||
|
||||
{{ $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection }}
|
||||
{{ $navPages := union $navRoot.RegularPages $navRoot.Sections }}
|
||||
{{ $pageURL := $context.RelPermalink }}
|
||||
|
||||
|
||||
<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)]">
|
||||
<!-- Search bar on small screen -->
|
||||
<div class="px-4 pt-4 md:hidden">
|
||||
@ -5,47 +13,51 @@
|
||||
</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") -}}
|
||||
<!-- Nav -->
|
||||
{{- range site.Menus.main -}}
|
||||
{{- if and .URL (and (ne .Params.type "search") (not .Params.icon)) -}}
|
||||
<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 }}
|
||||
{{ template "sidebar-separator" }}
|
||||
{{ template "sidebar-main" (dict "pages" $navPages "pageURL" $pageURL "toc" true) }}
|
||||
|
||||
|
||||
<!-- 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" }}
|
||||
{{ with site.Params.sidebar.footer -}}
|
||||
{{ template "sidebar-separator" }}
|
||||
{{ template "sidebar-footer" }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
<!-- Sidebar on large screen -->
|
||||
<ul class="flex flex-col gap-1 max-md:hidden">
|
||||
{{- $s := .FirstSection -}}
|
||||
{{- $topLevelItems := union $s.RegularPages $s.Sections -}}
|
||||
{{- $pageURL := .RelPermalink -}}
|
||||
|
||||
{{- range $topLevelItems.ByWeight -}}
|
||||
<!-- 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>
|
||||
{{ if $disableSidebar -}}
|
||||
<div class="max-xl:hidden h-0 w-64 shrink-0"></div>
|
||||
{{ .context.Scratch.Set "enableFooterSwitches" true }}
|
||||
{{ else }}
|
||||
<ul class="flex flex-col gap-1 max-md:hidden">
|
||||
{{ template "sidebar-main" (dict "pages" $navPages "pageURL" $pageURL) }}
|
||||
{{ template "sidebar-footer" }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ template "theme-switch" }}
|
||||
{{/* Hide theme switch when sidebar is disabled */}}
|
||||
{{ template "theme-switch" (dict "class" (cond $disableSidebar "md:hidden" "")) }}
|
||||
</aside>
|
||||
|
||||
{{- define "sidebar-main" -}}
|
||||
{{ $pages := .pages }}
|
||||
{{ $toc := .toc | default false }}
|
||||
{{ $pageURL := .pageURL }}
|
||||
|
||||
{{- with $pages -}}
|
||||
{{- range .ByWeight -}}
|
||||
{{ template "sidebar-item" (dict "item" . "pageURL" $pageURL "toc" $toc) }}
|
||||
{{ template "sidebar-tree" (dict "context" . "level" 1 "pageURL" $pageURL "toc" $toc) }}
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "sidebar-footer" -}}
|
||||
{{- range site.Menus.sidebar -}}
|
||||
{{ if eq .Params.type "separator" }}
|
||||
@ -113,10 +125,14 @@
|
||||
{{- $active := eq .pageURL .item.RelPermalink -}}
|
||||
{{- $title := .item.LinkTitle | default .item.File.BaseFileName -}}
|
||||
{{- $link := .item.RelPermalink -}}
|
||||
{{- $toc := .toc | default false -}}
|
||||
|
||||
|
||||
<li class="open">
|
||||
{{ template "sidebar-item-link" dict "active" $active "title" $title "link" $link }}
|
||||
{{ if and $toc $active }}
|
||||
{{ template "sidebar-toc" dict "page" .item }}
|
||||
{{ end }}
|
||||
</li>
|
||||
{{- end -}}
|
||||
|
||||
@ -136,20 +152,15 @@
|
||||
</a>
|
||||
{{- end -}}
|
||||
|
||||
{{- define "sidebar-separator" -}}
|
||||
<div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
|
||||
{{- 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">
|
||||
{{- $class := .class -}}
|
||||
<div class="{{ $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">
|
||||
<button title="Change theme" class="h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" id="theme-toggle" type="button" aria-label="Toggle Dark Mode">
|
||||
<div id="theme-toggle-light-icon" class="hidden flex items-center gap-2 capitalize">
|
||||
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12") -}}
|
||||
<span>Light</span>
|
||||
</div>
|
||||
<div id="theme-toggle-dark-icon" class="hidden flex items-center gap-2 capitalize">
|
||||
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12") -}}
|
||||
<span>Dark</span>
|
||||
</div>
|
||||
</button>
|
||||
{{ partial "theme-toggle" }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
8
layouts/partials/theme-toggle.html
Normal file
8
layouts/partials/theme-toggle.html
Normal file
@ -0,0 +1,8 @@
|
||||
<button title="Change theme" data-theme="light" class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" type="button" aria-label="Toggle Dark Mode">
|
||||
<div class="flex items-center gap-2 capitalize">
|
||||
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
|
||||
<span class="group-data-[theme=light]:hidden">Light</span>
|
||||
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hidden\"") -}}
|
||||
<span class="group-data-[theme=dark]:hidden">Dark</span>
|
||||
</div>
|
||||
</button>
|
||||
3
layouts/partials/utils/format-date.html
Normal file
3
layouts/partials/utils/format-date.html
Normal file
@ -0,0 +1,3 @@
|
||||
{{- with . -}}
|
||||
{{- . | time.Format (site.Params.dateFormat | default ":date_long") -}}
|
||||
{{- end -}}
|
||||
11
layouts/partials/utils/page-description.html
Normal file
11
layouts/partials/utils/page-description.html
Normal file
@ -0,0 +1,11 @@
|
||||
{{ with .Description | plainify -}}
|
||||
{{ . -}}
|
||||
{{ else -}}
|
||||
{{ if .IsPage -}}
|
||||
{{ .Summary | plainify | chomp -}}
|
||||
{{ else -}}
|
||||
{{ with .Site.Params.description | plainify -}}
|
||||
{{ . -}}
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
Reference in New Issue
Block a user