mirror of
https://github.com/imfing/hextra.git
synced 2025-06-20 04:21:36 -04:00
feat: implement common components
feat: implement sidebar feat: implement footer feat: implement breadcrumb chore: add typography styles chore: add heading anchor link chore: add postcss-nested
This commit is contained in:
Xin
7
layouts/_default/_markup/render-heading.html
Normal file
7
layouts/_default/_markup/render-heading.html
Normal file
@ -0,0 +1,7 @@
|
||||
<h{{ .Level }}>
|
||||
{{ .Text | safeHTML }}
|
||||
{{ if gt .Level 1 }}
|
||||
<span class="absolute -mt-20" id="{{ .Anchor | safeURL }}"></span>
|
||||
<a href="#{{ .Anchor | safeURL }}" class="subheading-anchor" aria-label="Permalink for this section"></a>
|
||||
{{ end }}
|
||||
</h{{ .Level }}>
|
||||
13
layouts/partials/breadcrumb.html
Normal file
13
layouts/partials/breadcrumb.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div class="mt-1.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 dark:text-gray-400 contrast-more:text-current">
|
||||
{{ range .Ancestors.Reverse }}
|
||||
{{ if not .IsHome }}
|
||||
<div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis">
|
||||
<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
|
||||
</div>
|
||||
{{ partial "utils/icon.html" (dict "context" . "name" "breadcrumb-delimiter" "attributes" "class=\"w-3.5 shrink-0\"") }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
|
||||
{{ .LinkTitle }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<footer class="bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
|
||||
<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">
|
||||
<div>
|
||||
<a class="flex items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hugo homepage" href="https://gohugo.io/">
|
||||
<span>Powered by</span>
|
||||
{{ partial "utils/icon.html" (dict "context" . "name" "hugo-full" "attributes" "height=20") }}
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-6 text-xs">© 2023 Hextra Project.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
49
layouts/partials/sidebar.html
Normal file
49
layouts/partials/sidebar.html
Normal file
@ -0,0 +1,49 @@
|
||||
<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)]">
|
||||
<div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-4rem)]">
|
||||
<ul class="flex flex-col gap-1 max-md:hidden">
|
||||
{{ $s := .FirstSection }}
|
||||
{{ $topLevelItems := union $s.RegularPages $s.Sections }}
|
||||
{{ $currentUrl := .RelPermalink }}
|
||||
|
||||
{{ range $topLevelItems.ByWeight }}
|
||||
{{ $isCurrent := eq $currentUrl .RelPermalink }}
|
||||
<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 }}"
|
||||
>{{ .LinkTitle }}</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 }}"
|
||||
>{{ .LinkTitle }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</li>
|
||||
<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'>
|
||||
{{ $secondLevelItems := union .RegularPages .Sections }}
|
||||
{{ 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 }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
Reference in New Issue
Block a user