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 /docs/superpowers/specs | |
| 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 'docs/superpowers/specs')
| -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 |
