summaryrefslogtreecommitdiffstats
path: root/docs/superpowers/specs
diff options
context:
space:
mode:
Diffstat (limited to 'docs/superpowers/specs')
-rw-r--r--docs/superpowers/specs/2026-04-18-prev-next-navigation-design.md56
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