diff options
Diffstat (limited to 'docs/superpowers/specs/2026-04-18-prev-next-navigation-design.md')
| -rw-r--r-- | docs/superpowers/specs/2026-04-18-prev-next-navigation-design.md | 56 |
1 files changed, 56 insertions, 0 deletions
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 |
