Skip to content

Commit dbd5426

Browse files
DIYgodDIYgod
authored
feat: add RSSNext static homepage (#1)
1 parent 5ba9a56 commit dbd5426

7 files changed

Lines changed: 1858 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.superpowers/

‎assets/logo.png‎

62.3 KB
Loading

‎docs/superpowers/plans/2026-04-02-rssnext-static-site.md‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
# RSSNext Static Site Implementation Plan
2+
3+
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
4+
5+
**Goal:** Build a lightweight static homepage for RSSNext that presents its vision, Folo, and RSSHub through an editorial single-page experience.
6+
7+
**Architecture:** Use a framework-free static site with semantic HTML, one shared stylesheet, and a small progressive-enhancement script for reveal and parallax effects. Keep the layout content-led, avoid product-card patterns, and differentiate Folo and RSSHub through distinct abstract visual systems.
8+
9+
**Tech Stack:** HTML, CSS, vanilla JavaScript
10+
11+
---
12+
13+
## File Map
14+
15+
- Create: `index.html` — single-page structure and English copy
16+
- Create: `styles.css` — layout, typography, abstract visuals, motion, responsive rules
17+
- Create: `script.js` — scroll state, reveal animation, subtle hero motion, active nav sync
18+
- Modify: `README.md` — optional only if verification notes are needed; otherwise leave untouched
19+
- Create: `docs/superpowers/plans/2026-04-02-rssnext-static-site.md` — this implementation plan
20+
21+
### Task 1: Build semantic page structure
22+
23+
**Files:**
24+
- Create: `index.html`
25+
26+
- [ ] **Step 1: Add the document shell and global metadata**
27+
28+
```html
29+
<!DOCTYPE html>
30+
<html lang="en">
31+
<head>
32+
<meta charset="UTF-8" />
33+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
34+
<title>RSSNext</title>
35+
<meta
36+
name="description"
37+
content="RSSNext builds products and infrastructure for a more readable open web."
38+
/>
39+
<link rel="stylesheet" href="./styles.css" />
40+
</head>
41+
<body>
42+
<script src="./script.js" defer></script>
43+
</body>
44+
</html>
45+
```
46+
47+
- [ ] **Step 2: Add the single-page section structure**
48+
49+
```html
50+
<header class="site-header">...</header>
51+
<main>
52+
<section id="hero">...</section>
53+
<section id="vision">...</section>
54+
<section id="folo">...</section>
55+
<section id="rsshub">...</section>
56+
<section id="ecosystem">...</section>
57+
</main>
58+
<footer class="site-footer">...</footer>
59+
```
60+
61+
- [ ] **Step 3: Fill each section with concise English copy from the approved spec**
62+
63+
```html
64+
<h1>An open web, readable again.</h1>
65+
<p>RSSNext builds products and infrastructure for people who still believe open information should stay open.</p>
66+
<a href="#vision">Read the vision</a>
67+
```
68+
69+
- [ ] **Step 4: Add clear outbound links for Folo, RSSHub, docs, and GitHub**
70+
71+
```html
72+
<a href="https://folo.is/" target="_blank" rel="noreferrer">Visit Folo</a>
73+
<a href="https://github.com/RSSNext/Folo" target="_blank" rel="noreferrer">View Folo on GitHub</a>
74+
```
75+
76+
- [ ] **Step 5: Verify section anchors are complete**
77+
78+
Run: `rg -n "id=|href=\"#" index.html`
79+
Expected: hero, vision, folo, rsshub, ecosystem anchors all match the navigation links
80+
81+
### Task 2: Implement editorial layout and visual systems
82+
83+
**Files:**
84+
- Create: `styles.css`
85+
86+
- [ ] **Step 1: Add design tokens and base typography**
87+
88+
```css
89+
:root {
90+
--bg: #f4f0e8;
91+
--surface: rgba(255, 255, 255, 0.58);
92+
--text: #131110;
93+
--muted: #625a52;
94+
--line: rgba(19, 17, 16, 0.12);
95+
--folo: #5f6d96;
96+
--rsshub: #a45f2a;
97+
--max-width: 1240px;
98+
}
99+
```
100+
101+
- [ ] **Step 2: Style a full-bleed hero without boxed cards**
102+
103+
```css
104+
.hero {
105+
min-height: 100svh;
106+
display: grid;
107+
align-items: end;
108+
}
109+
```
110+
111+
- [ ] **Step 3: Build a typographic vision section with three short statements**
112+
113+
```css
114+
.vision-grid {
115+
display: grid;
116+
grid-template-columns: repeat(3, minmax(0, 1fr));
117+
gap: 1.5rem;
118+
}
119+
```
120+
121+
- [ ] **Step 4: Create separate abstract visual grammars for Folo and RSSHub**
122+
123+
```css
124+
.chapter--folo .chapter-art { /* stacked rails and flowing layers */ }
125+
.chapter--rsshub .chapter-art { /* nodes, routes, expanding paths */ }
126+
```
127+
128+
- [ ] **Step 5: Add responsive rules so the editorial rhythm survives on mobile**
129+
130+
Run: `rg -n "@media" styles.css`
131+
Expected: breakpoints cover header, hero, vision grid, chapter layouts, and footer
132+
133+
### Task 3: Add restrained motion and progressive enhancement
134+
135+
**Files:**
136+
- Create: `script.js`
137+
138+
- [ ] **Step 1: Add reveal-on-scroll logic for marked sections**
139+
140+
```js
141+
const observer = new IntersectionObserver((entries) => {
142+
entries.forEach((entry) => {
143+
if (entry.isIntersecting) entry.target.classList.add('is-visible');
144+
});
145+
}, { threshold: 0.2 });
146+
```
147+
148+
- [ ] **Step 2: Add subtle hero motion driven by pointer or scroll position**
149+
150+
```js
151+
window.addEventListener('pointermove', (event) => {
152+
document.documentElement.style.setProperty('--pointer-x', `${event.clientX}`);
153+
});
154+
```
155+
156+
- [ ] **Step 3: Sync active nav state with the visible section**
157+
158+
```js
159+
const sections = document.querySelectorAll('main section[id]');
160+
```
161+
162+
- [ ] **Step 4: Respect reduced-motion preferences**
163+
164+
```js
165+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
166+
if (prefersReducedMotion) {
167+
document.documentElement.classList.add('reduced-motion');
168+
}
169+
```
170+
171+
- [ ] **Step 5: Run a syntax check**
172+
173+
Run: `node --check script.js`
174+
Expected: no output
175+
176+
### Task 4: Verify the static site manually in a browser
177+
178+
**Files:**
179+
- Verify: `index.html`
180+
- Verify: `styles.css`
181+
- Verify: `script.js`
182+
183+
- [ ] **Step 1: Start a local static server**
184+
185+
Run: `python3 -m http.server 4173`
186+
Expected: serving the repository root at `http://localhost:4173`
187+
188+
- [ ] **Step 2: Open the page and inspect desktop layout**
189+
190+
Check: hero presence, spacing, section transitions, external links, and chapter distinction
191+
192+
- [ ] **Step 3: Inspect mobile width**
193+
194+
Check: no collapsed card-grid feeling, copy remains readable, nav remains usable
195+
196+
- [ ] **Step 4: Capture any visual issues and fix them in place**
197+
198+
Check: alignment, overflow, awkward animation, weak hierarchy, low-contrast text
199+
200+
### Task 5: Audit and finalize
201+
202+
**Files:**
203+
- Review: `index.html`
204+
- Review: `styles.css`
205+
- Review: `script.js`
206+
207+
- [ ] **Step 1: Review the page against the approved design spec**
208+
209+
Run: `rg -n "Hero|Vision|Folo|RSSHub|ecosystem" docs/superpowers/specs/2026-04-02-rssnext-static-site-design.md`
210+
Expected: every required section appears in the implementation
211+
212+
- [ ] **Step 2: Review UI code against web interface guidelines**
213+
214+
Run: fetch the latest guidelines and inspect `index.html`, `styles.css`, and `script.js`
215+
Expected: either no issues or a short fix list applied immediately
216+
217+
- [ ] **Step 3: Sanity-check the final file set**
218+
219+
Run: `ls -1`
220+
Expected: `index.html`, `styles.css`, `script.js`, `README.md`, `docs/`
221+
222+
## Self-Review
223+
224+
- Spec coverage: the tasks above cover structure, copy, visual language, motion, responsiveness, and lightweight delivery.
225+
- Placeholder scan: no `TODO`, `TBD`, or vague “implement later” language remains.
226+
- Consistency: section IDs, chapter names, and file responsibilities stay consistent across all tasks.

0 commit comments

Comments
 (0)