feat: Homepage displays a stats scorecard showing live article and crea…
- "frontend/src/api/public-client.ts" - "frontend/src/pages/Home.tsx" - "frontend/src/App.css" GSD-Task: S03/T02
This commit is contained in:
jlightner
parent
1f783c4216
commit
3c5985f012
6 changed files with 171 additions and 1 deletions
|
|
@ -35,7 +35,7 @@
|
|||
- Estimate: 20m
|
||||
- Files: backend/routers/stats.py, backend/main.py
|
||||
- Verify: curl -s http://ub01:8096/api/v1/stats | python3 -c "import sys,json; d=json.load(sys.stdin); assert d['technique_count']>0 and d['creator_count']>0"
|
||||
- [ ] **T02: Add homepage stats scorecard section with live counts from /api/v1/stats** — Wire up the frontend to fetch stats from the new endpoint and render a scorecard section on the homepage matching the dark/cyan design.
|
||||
- [x] **T02: Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design** — Wire up the frontend to fetch stats from the new endpoint and render a scorecard section on the homepage matching the dark/cyan design.
|
||||
|
||||
## Steps
|
||||
|
||||
|
|
|
|||
9
.gsd/milestones/M015/slices/S03/tasks/T01-VERIFY.json
Normal file
9
.gsd/milestones/M015/slices/S03/tasks/T01-VERIFY.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"schemaVersion": 1,
|
||||
"taskId": "T01",
|
||||
"unitId": "M015/S03/T01",
|
||||
"timestamp": 1775190358375,
|
||||
"passed": true,
|
||||
"discoverySource": "none",
|
||||
"checks": []
|
||||
}
|
||||
81
.gsd/milestones/M015/slices/S03/tasks/T02-SUMMARY.md
Normal file
81
.gsd/milestones/M015/slices/S03/tasks/T02-SUMMARY.md
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
id: T02
|
||||
parent: S03
|
||||
milestone: M015
|
||||
provides: []
|
||||
requires: []
|
||||
affects: []
|
||||
key_files: ["frontend/src/api/public-client.ts", "frontend/src/pages/Home.tsx", "frontend/src/App.css"]
|
||||
key_decisions: ["Used existing --color-* CSS custom properties to match real codebase conventions"]
|
||||
patterns_established: []
|
||||
drill_down_paths: []
|
||||
observability_surfaces: []
|
||||
duration: ""
|
||||
verification_result: "npm run build exits 0. API returns 200 with technique_count:21 and creator_count:7. Browser assertion confirms scorecard visible with correct text and selector (.home-stats). All slice-level curl checks pass."
|
||||
completed_at: 2026-04-03T04:29:08.090Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design
|
||||
|
||||
> Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design
|
||||
|
||||
## What Happened
|
||||
---
|
||||
id: T02
|
||||
parent: S03
|
||||
milestone: M015
|
||||
key_files:
|
||||
- frontend/src/api/public-client.ts
|
||||
- frontend/src/pages/Home.tsx
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Used existing --color-* CSS custom properties to match real codebase conventions
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-04-03T04:29:08.090Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design
|
||||
|
||||
**Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design**
|
||||
|
||||
## What Happened
|
||||
|
||||
Added StatsResponse interface and fetchStats() to public-client.ts, wired up Home.tsx with state/effect/render for a scorecard section between nav-cards and random button, and added CSS using existing design tokens (--color-accent, --color-bg-surface, --color-border, --color-text-muted). Build passes, container rebuilt on ub01, and browser verification confirms "21 ARTICLES" and "7 CREATORS" rendering correctly.
|
||||
|
||||
## Verification
|
||||
|
||||
npm run build exits 0. API returns 200 with technique_count:21 and creator_count:7. Browser assertion confirms scorecard visible with correct text and selector (.home-stats). All slice-level curl checks pass.
|
||||
|
||||
## Verification Evidence
|
||||
|
||||
| # | Command | Exit Code | Verdict | Duration |
|
||||
|---|---------|-----------|---------|----------|
|
||||
| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 3200ms |
|
||||
| 2 | `curl -s http://ub01:8096/api/v1/stats | python3 assert counts > 0` | 0 | ✅ pass | 200ms |
|
||||
| 3 | `curl -s -o /dev/null -w '%{http_code}' http://ub01:8096/api/v1/stats` | 0 | ✅ pass | 100ms |
|
||||
| 4 | `browser_assert: 5 checks (text_visible + selector_visible)` | 0 | ✅ pass | 500ms |
|
||||
|
||||
|
||||
## Deviations
|
||||
|
||||
Used real CSS custom property names (--color-accent not --accent). Used correct compose service name (chrysopedia-web not chrysopedia-web-8096).
|
||||
|
||||
## Known Issues
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/api/public-client.ts`
|
||||
- `frontend/src/pages/Home.tsx`
|
||||
- `frontend/src/App.css`
|
||||
|
||||
|
||||
## Deviations
|
||||
Used real CSS custom property names (--color-accent not --accent). Used correct compose service name (chrysopedia-web not chrysopedia-web-8096).
|
||||
|
||||
## Known Issues
|
||||
None.
|
||||
|
|
@ -1451,6 +1451,42 @@ a.app-footer__repo:hover {
|
|||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── Stats scorecard ──────────────────────────────────────────────────── */
|
||||
|
||||
.home-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2.5rem;
|
||||
max-width: 36rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.home-stats__metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.home-stats__number {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-stats__label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ── Recently Added section ───────────────────────────────────────────────── */
|
||||
|
||||
/* ── Featured technique spotlight ──────────────────────────────────────── */
|
||||
|
|
|
|||
|
|
@ -306,6 +306,17 @@ export async function fetchTechniqueVersion(
|
|||
);
|
||||
}
|
||||
|
||||
// ── Stats ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface StatsResponse {
|
||||
technique_count: number;
|
||||
creator_count: number;
|
||||
}
|
||||
|
||||
export async function fetchStats(): Promise<StatsResponse> {
|
||||
return request<StatsResponse>(`${BASE}/stats`);
|
||||
}
|
||||
|
||||
// ── Topics ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function fetchTopics(): Promise<TopicCategory[]> {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@ import {
|
|||
fetchTechniques,
|
||||
fetchTopics,
|
||||
fetchRandomTechnique,
|
||||
fetchStats,
|
||||
type TechniqueListItem,
|
||||
type StatsResponse,
|
||||
} from "../api/public-client";
|
||||
|
||||
export default function Home() {
|
||||
|
|
@ -26,6 +28,7 @@ export default function Home() {
|
|||
const [popularTopics, setPopularTopics] = useState<{name: string; count: number}[]>([]);
|
||||
const [randomLoading, setRandomLoading] = useState(false);
|
||||
const [randomError, setRandomError] = useState(false);
|
||||
const [stats, setStats] = useState<StatsResponse | null>(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleRandomTechnique = async () => {
|
||||
|
|
@ -96,6 +99,22 @@ export default function Home() {
|
|||
};
|
||||
}, []);
|
||||
|
||||
// Load stats
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
try {
|
||||
const data = await fetchStats();
|
||||
if (!cancelled) setStats(data);
|
||||
} catch {
|
||||
// optional section — silently ignore
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="home">
|
||||
{/* Hero search */}
|
||||
|
|
@ -176,6 +195,20 @@ export default function Home() {
|
|||
</Link>
|
||||
</section>
|
||||
|
||||
{/* Stats scorecard */}
|
||||
{stats && (
|
||||
<section className="home-stats card-stagger" style={{ '--stagger-index': 2 } as React.CSSProperties}>
|
||||
<div className="home-stats__metric">
|
||||
<span className="home-stats__number">{stats.technique_count}</span>
|
||||
<span className="home-stats__label">Articles</span>
|
||||
</div>
|
||||
<div className="home-stats__metric">
|
||||
<span className="home-stats__number">{stats.creator_count}</span>
|
||||
<span className="home-stats__label">Creators</span>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Random technique discovery */}
|
||||
<div className="home-random">
|
||||
<button
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue