diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-18 20:54:50 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-18 20:54:50 +0200 |
| commit | 05f33a6e1059e84c309c5f674e094ed3b1105134 (patch) | |
| tree | b18378428ead69deecc636c384f561054d3fec45 /themes/danix-xyz-hacker/layouts | |
| parent | 7b645976739619faf514083e5c74bcf187ba93a1 (diff) | |
| download | danixxyz-05f33a6e1059e84c309c5f674e094ed3b1105134.tar.gz danixxyz-05f33a6e1059e84c309c5f674e094ed3b1105134.zip | |
feat: add prev/next article navigation with shell prompt style
Add top and bottom navigation between sequential articles with hacker aesthetic:
- Top nav: [visitor@danix.xyz articles]$ cd
- Bottom nav: [visitor@danix.xyz articles]$ ls ../
- Missing link shows dimmed placeholder (beginning/end)
- Only renders on articles, not static pages
- New partial: article-nav.html
- Styling: monospace prompt in accent color, hover links with transition
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'themes/danix-xyz-hacker/layouts')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/single.html | 10 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/articles/single.html | 6 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/partials/article-nav.html | 46 |
3 files changed, 62 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/layouts/_default/single.html b/themes/danix-xyz-hacker/layouts/_default/single.html index 0d3c6fa..62e4a64 100644 --- a/themes/danix-xyz-hacker/layouts/_default/single.html +++ b/themes/danix-xyz-hacker/layouts/_default/single.html @@ -3,6 +3,11 @@ <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid"> <!-- Article section --> <div class="md:col-span-2"> + <!-- Top article navigation (articles only) --> + {{ if eq .Section "articles" }} + {{ partial "article-nav.html" (dict "page" . "variant" "top") }} + {{ end }} + <!-- Breadcrumb --> {{ partial "breadcrumb.html" . }} @@ -35,6 +40,11 @@ </div> </div> {{ end }} + + <!-- Bottom article navigation (articles only) --> + {{ if eq .Section "articles" }} + {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }} + {{ end }} </div> <!-- Sidebar --> diff --git a/themes/danix-xyz-hacker/layouts/articles/single.html b/themes/danix-xyz-hacker/layouts/articles/single.html index 4e97fb3..e646639 100644 --- a/themes/danix-xyz-hacker/layouts/articles/single.html +++ b/themes/danix-xyz-hacker/layouts/articles/single.html @@ -5,6 +5,9 @@ <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid"> <!-- Article section --> <div class="md:col-span-2"> + <!-- Top article navigation --> + {{ partial "article-nav.html" (dict "page" . "variant" "top") }} + <!-- Breadcrumb --> {{ partial "breadcrumb.html" . }} @@ -35,6 +38,9 @@ </div> </div> {{ end }} + + <!-- Bottom article navigation --> + {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }} </div> <!-- Sidebar --> diff --git a/themes/danix-xyz-hacker/layouts/partials/article-nav.html b/themes/danix-xyz-hacker/layouts/partials/article-nav.html new file mode 100644 index 0000000..d7f8ca3 --- /dev/null +++ b/themes/danix-xyz-hacker/layouts/partials/article-nav.html @@ -0,0 +1,46 @@ +{{ $page := .page }} +{{ $variant := .variant | default "bottom" }} +{{ $prev := $page.PrevInSection }} +{{ $next := $page.NextInSection }} + +{{/* Shell prompt command varies by position */}} +{{ $cmd := "ls ../" }} +{{ if eq $variant "top" }} + {{ $cmd = "cd" }} +{{ end }} + +<nav class="article-nav {{ if eq $variant "bottom" }}mt-8{{ else }}mb-8{{ end }}" + aria-label="Article navigation"> + <p class="article-nav-prompt" aria-hidden="true"> + [visitor@danix.xyz articles]$ {{ $cmd }} + </p> + <div class="article-nav-links"> + {{/* ---- Previous (left side) ---- */}} + {{ if $prev }} + <a href="{{ $prev.Permalink }}" + class="article-nav-link truncate max-w-[45%]" + rel="prev" + title="{{ $prev.Title }}"> + ◄ {{ $prev.Title }} + </a> + {{ else }} + <span class="article-nav-placeholder" aria-label="Beginning of articles"> + ◄ (beginning) + </span> + {{ end }} + + {{/* ---- Next (right side) ---- */}} + {{ if $next }} + <a href="{{ $next.Permalink }}" + class="article-nav-link truncate max-w-[45%] text-right" + rel="next" + title="{{ $next.Title }}"> + {{ $next.Title }} ► + </a> + {{ else }} + <span class="article-nav-placeholder text-right" aria-label="End of articles"> + (end) ► + </span> + {{ end }} + </div> +</nav> |
