mirror of
https://github.com/imfing/hextra.git
synced 2025-06-20 04:41:50 -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
21
layouts/blog/list.html
Normal file
21
layouts/blog/list.html
Normal file
@ -0,0 +1,21 @@
|
||||
{{ define "main" }}
|
||||
<div class="mx-auto flex max-w-[90rem]">
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
|
||||
<article class="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)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
<h1 class="text-4xl tracking-tighter text-center font-extrabold md:text-5xl mt-8 pb-6">{{ .Title }}</h1>
|
||||
{{ range .Pages.ByDate }}
|
||||
<div class="mb-10">
|
||||
<h3><a style="color: inherit; text-decoration: none;" class="block font-semibold mt-8 text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p class="opacity-80 mt-6 leading-7">
|
||||
{{- partial "utils/page-description" . }}
|
||||
<span class="inline-block"> <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">Read more →</a> </span>
|
||||
</p>
|
||||
<p class="opacity-50 text-sm mt-6 leading-7">{{ partial "utils/format-date" .Date }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</main>
|
||||
</article>
|
||||
<div class="max-xl:hidden h-0 w-64 shrink-0"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
33
layouts/blog/single.html
Normal file
33
layouts/blog/single.html
Normal file
@ -0,0 +1,33 @@
|
||||
{{ define "main" }}
|
||||
<div class="mx-auto flex max-w-[90rem]">
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="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)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
<h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
|
||||
{{ with $date := .Date }}
|
||||
<div class="mt-4 mb-16 text-gray-500 text-sm">
|
||||
{{ partial "utils/format-date" $date }}
|
||||
{{- if $.Params.authors }} by {{ end -}}
|
||||
{{- with $.Params.authors }}
|
||||
{{- range $i, $author := . -}}
|
||||
{{- if $i }},{{ end -}}
|
||||
{{- if $author.link }}
|
||||
<a href="{{ $author.link }}" target="_blank" class="mx-1 text-current underline [text-underline-position:from-font] decoration-from-font">{{ $author.name }}</a>
|
||||
{{ else }}
|
||||
<span>{{ $author.name }}</span>
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<div class="mt-16"></div>
|
||||
{{ partial "pager.html" . }}
|
||||
</main>
|
||||
</article>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,6 +1,6 @@
|
||||
{{ define "main" }}
|
||||
<div class="mx-auto flex max-w-[90rem]">
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ partial "sidebar.html" (dict "context" .) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="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)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{{ define "main" }}
|
||||
<div class="mx-auto flex max-w-[90rem]">
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ partial "sidebar.html" (dict "context" .) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="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)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
|
||||
@ -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