From 05f33a6e1059e84c309c5f674e094ed3b1105134 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Sat, 18 Apr 2026 20:54:50 +0200 Subject: 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 --- .../2026-04-18-prev-next-navigation-design.md | 56 ++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-18-prev-next-navigation-design.md (limited to 'docs') diff --git a/docs/superpowers/specs/2026-04-18-prev-next-navigation-design.md b/docs/superpowers/specs/2026-04-18-prev-next-navigation-design.md new file mode 100644 index 0000000..2fa22a7 --- /dev/null +++ b/docs/superpowers/specs/2026-04-18-prev-next-navigation-design.md @@ -0,0 +1,56 @@ +# Prev/Next Article Navigation — Design Spec + +## Context + +danix.xyz articles currently have no way to navigate between sequential posts. The user wants shell-prompt-style "hacker" navigation at both the top and bottom of each article, consistent with the site's open-source/hacker soul. + +## Visual Design + +### Top nav (above breadcrumb) +``` +[visitor@danix.xyz articles]$ cd +◄ Previous Article Title Next Article Title ► +``` + +### Bottom nav (after tags section) +``` +[visitor@danix.xyz articles]$ ls ../ +◄ Previous Article Title Next Article Title ► +``` + +- Two lines, full width of the content column (`md:col-span-2`) +- Line 1: decorative shell prompt — monospace, accent purple, not a link +- Line 2: prev on left (◄ title), next on right (title ►), both clickable +- Missing side: dimmed placeholder `◄ (beginning)` or `(end) ►` +- Both sides always rendered to keep layout balanced + +## Architecture + +Single reusable partial `article-nav.html` accepting: +- `page` — current Hugo page context +- `variant` — `"top"` or `"bottom"` (controls prompt command: `cd` vs `ls ../`) + +Hugo variables: `.PrevInSection` / `.NextInSection` (nil-safe). + +## Styling + +- Font: JetBrains Mono (`font-mono`) +- Prompt color: `var(--accent)` (#a855f7 purple) +- Link hover: `hover:text-accent transition-colors` +- Placeholder: `text-text-dim opacity-40` +- Container: `border-t border-border pt-6` +- Titles truncated at `max-w-[45%]` with `truncate` to prevent collision + +## Files Affected + +- `layouts/partials/article-nav.html` — new partial (create) +- `layouts/articles/single.html` — insert partial top + bottom +- `layouts/_default/single.html` — insert partial top + bottom +- `assets/css/main.css` — add `.article-nav*` component classes + +## Accessibility + +- `aria-hidden="true"` on prompt line (decorative) +- `rel="prev"` / `rel="next"` on links (SEO + semantics) +- `title` attribute on links for full title on hover (truncation) +- `aria-label` on placeholder spans -- cgit v1.2.3