blob: 2fa22a77ed145ff529b84cf12cc2611cedc626fc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
|
