colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e2a4fc68b7ba5616d6f18f6f6301cc1238da287f
triqura-ecd/docs/specs/releasepage/bouwplan-release-notes-v1.0.md
colinislit 2ae7b37e5f feat: add release notes page with MDX content system 
Implemented comprehensive release notes feature with:

- MDX-based content system for easy release note authoring
- Thematic sidebar navigation (Foundation, Features, Infrastructure)
- Auto-generated pages from MDX frontmatter
- Overview page with status filtering (completed/in_progress/planned)
- Detail pages with custom MDX components
- Mobile-responsive navigation (horizontal scroll tabs)
- Integration with timeline (link to detailed release notes)
- Added "Releases" link to header navigation

Technical implementation:
- next-mdx-remote for MDX parsing and rendering
- gray-matter for frontmatter extraction
- Custom MDX components for images, code blocks, typography
- Static site generation (SSG) for performance
- Template system for consistent release note structure

Files added:
- app/(marketing)/releases/ - Route structure and components
- content/nl/releases/ - MDX content files and index
- lib/mdx/releases.ts - MDX utility functions
- docs/specs/releasepage/ - Build plan documentation
- docs/templates/release-note-template.mdx - Content template

First release note: authentication.mdx (login, signup, password reset)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 20:59:54 +01:00

330 lines
11 KiB
Markdown
Raw Blame History

# 🚀 Bouwplan: Release Notes Feature
**Projectnaam:** Release Notes Pagina
**Versie:** v1.0
**Datum:** 19-11-2024
**Auteur:** Colin + AI
---
## 1. Doel en Context
Toevoegen van een dedicated release notes pagina aan de AI Speedrun website om transparantie te bieden over ontwikkelvoortgang. De pagina past in de "build in public" filosofie en biedt:
- **Overzichtspagina** met lijst van alle releases
- **Detail paginas** per week met uitgebreide release notes
- **Sidebar navigatie** (standard software docs stijl)
- **Links vanuit timeline** naar release details
---
## 2. Uitgangspunten
### 2.1 Technische Stack
- **Frontend:** Next.js 15 (bestaand) + TailwindCSS
- **Content:** MDX bestanden in `/content/nl/releases/` met frontmatter
- **Content Parser:** `next-mdx-remote` of `@next/mdx` voor MDX rendering
- **Routing:** `/releases` (overview) + `/releases/[category]` (detail per functionaliteit)
- **Components:** ReleaseSidebar, MDXContent wrapper
- **Layout:** Marketing layout met sidebar
- **Navigatie:** Thematisch op functionaliteit (niet chronologisch op weken)
- **Images:** `/public/releases/[category]/` voor screenshots en visuals
### 2.2 Projectkaders
- **Tijd:** 2-3 uur implementatie
- **Budget:** €0 (bestaande stack)
- **Scope:** MVP - basis release notes zonder fancy features
- **Design:** Standard docs-stijl (links sidebar + content)
### 2.3 Programmeer Uitgangspunten
- **DRY:** Hergebruik bestaande timeline data waar mogelijk
- **KISS:** Simpele layout, geen onnodige animaties
- **SOC:** Content schemas apart, components herbruikbaar
- **Mobile-first:** Horizontal scroll nav op mobile, sidebar op desktop
---
## 3. Epics & Stories Overzicht
| Epic ID | Titel | Doel | Status | Stories | Geschatte tijd |
|---------|-------|------|--------|---------|----------------|
| E1 | Content Schema | Release data structuur | ⏳ | 2 | 30 min |
| E2 | Route Structure | Pages en layouts | ⏳ | 3 | 45 min |
| E3 | Components | Sidebar + content | ⏳ | 2 | 45 min |
| E4 | Integration | Timeline links + nav | ⏳ | 2 | 30 min |
**Totaal geschat:** 2.5 uur
---
## 4. Epics & Stories (Uitwerking)
### Epic 1 — Content Schema
| Story | Beschrijving | Acceptatie | Status |
|-------|--------------|------------|--------|
| E1.S1 | MDX template maken | Release note template met frontmatter + content secties | ⏳ |
| E1.S2 | Content categories definiëren | Logische indeling functionaliteiten (Auth, Dashboard, AI, etc.) | ⏳ |
| E1.S3 | MDX parser setup | next-mdx-remote configureren voor content rendering | ⏳ |
**MDX Template:**
```mdx
---
title: "Authentication & User Management"
category: "authentication"
group: "foundation"
version: "0.1.0"
releaseDate: "2024-11-15"
status: "completed"
description: "Login, signup en password reset functionaliteit"
---
## Overview
Korte beschrijving van wat er is gebouwd in deze release...
## Features
### Login Flow
![Login screenshot](/releases/authentication/login-screen.png)
Beschrijving van de login functionaliteit:
- Email/password login
- Demo account optie
- Error handling
Code voorbeeld (optioneel):
```tsx
const handleLogin = async (email, password) => {
// implementation
}
```
### Signup Flow
[Details over signup...]
## Technical Notes
- Supabase Auth integratie
- RLS policies voor security
- Client-side validation
## Related Links
- [Timeline Week 1](/timeline#week-1)
- [Database Schema](/docs/schema)
```
**Voorbeeld categorieën:**
- `authentication` - Login, signup, password reset
- `client-management` - CRUD operations voor cliënten
- `dashboard` - EPD dashboard en navigatie
- `ai-features` - AI integraties (samenvatting, classificatie, plannen)
- `infrastructure` - Database, hosting, performance
- `design-system` - UI components en styling
---
### Epic 2 — Route Structure
| Story | Beschrijving | Acceptatie | Status |
|-------|--------------|------------|--------|
| E2.S1 | Layout maken | `app/(marketing)/releases/layout.tsx` met sidebar | ⏳ |
| E2.S2 | Overview page | `app/(marketing)/releases/page.tsx` met lijst (read MDX frontmatter) | ⏳ |
| E2.S3 | Detail pages | `app/(marketing)/releases/[category]/page.tsx` met MDX rendering | ⏳ |
**Structuur:**
```
# Code structuur
app/(marketing)/releases/
├── layout.tsx # Sidebar wrapper
├── page.tsx # Overview (lijst van alle MDX files)
├── [category]/
│ └── page.tsx # MDX content renderer
└── components/
├── release-sidebar.tsx
└── mdx-components.tsx # Custom components voor MDX
# Content structuur
content/nl/releases/
├── authentication.mdx
├── client-management.mdx
├── dashboard.mdx
├── ai-features.mdx
├── infrastructure.mdx
└── design-system.mdx
# Assets structuur
public/releases/
├── authentication/
│ ├── login-screen.png
│ └── signup-flow.png
├── ai-features/
│ ├── summary-demo.gif
│ └── classification.png
└── ...
```
**URL voorbeelden:**
- `/releases` - Overview alle functionaliteiten (parsed MDX frontmatter)
- `/releases/authentication` - Renders `authentication.mdx`
- `/releases/ai-features` - Renders `ai-features.mdx`
- `/releases/dashboard` - Renders `dashboard.mdx`
---
### Epic 3 — Components
| Story | Beschrijving | Acceptatie | Status |
|-------|--------------|------------|--------|
| E3.S1 | ReleaseSidebar | Fixed sidebar desktop, horizontal scroll mobile, reads MDX files | ⏳ |
| E3.S2 | MDX Components | Custom components voor images, code blocks, callouts | ⏳ |
| E3.S3 | Typography styling | Prose styling voor MDX content (tailwindcss/typography) | ⏳ |
**Features:**
- Sidebar auto-generated from MDX files in `/content/nl/releases/`
- Active state in sidebar
- Mobile-responsive
- Status indicators (completed/in progress/planned) from frontmatter
- Custom MDX components:
- Images met caption
- Code blocks met syntax highlighting
- Callout boxes (info, warning, success)
- YouTube/video embeds (optional)
---
### Epic 4 — Integration
| Story | Beschrijving | Acceptatie | Status |
|-------|--------------|------------|--------|
| E4.S1 | Timeline links | "Release notes →" link per week in timeline | ⏳ |
| E4.S2 | Nav menu | "Releases" link in header nav | ⏳ |
**Changes:**
- `timeline.tsx`: Add link per week
- `navigation.json`: Add releases link
- Test navigation flow
---
## 5. Design Specs (Compact)
**Layout:**
```
┌────────────────────────────────────────┐
│ Header (existing) │
├──────────────┬─────────────────────────┤
│ Sidebar │ Main Content │
│ │ │
│ Overview │ # Release Notes │
│ ────── │ │
│ Foundation │ [Category cards...] │
│ ├─ Auth │ │
│ ├─ Database │ │
│ Features │ │
│ ├─ Dashboard │ │
│ ├─ Clients │ │
│ ├─ AI │ │
│ Infrastructure │
│ ├─ Hosting │ │
│ ├─ Design │ │
└──────────────┴─────────────────────────┘
```
**Sidebar structuur (thematisch):**
- **Foundation** (basis setup)
- Authentication
- Database & Schema
- Environment Setup
- **Core Features** (EPD functionaliteit)
- Dashboard & Navigation
- Client Management
- AI Integrations
- **Infrastructure** (ondersteunend)
- Hosting & Deployment
- Design System
- Performance
**Mobile:** Horizontal scroll tabs boven content
**Content styling:**
- `@tailwindcss/typography` plugin voor prose content
- Custom MDX components styled met Tailwind
- Images responsive met captions
- Code blocks met syntax highlighting (shiki/prism)
- Heading anchors voor deep linking
**Colors:**
- Teal accents (consistent met brand)
- Slate backgrounds for code blocks
- White background for main content
- Prose styles voor text readability
---
## 6. Acceptatiecriteria
### Must Have:
- [ ] `/releases` toont overzicht gegroepeerd per categorie
- [ ] `/releases/[category]` toont detail van specifieke functionaliteit
- [ ] Sidebar heeft thematische grouping (Foundation, Features, Infrastructure)
- [ ] Sidebar werkt op desktop (fixed) met collapsible sections
- [ ] Mobile heeft horizontal scroll nav met categorieën
- [ ] Timeline linkt naar relevante release categories
- [ ] "Releases" link in header nav
- [ ] Active states in navigatie
### Nice to Have (later):
- RSS feed
- Search functie
- Filters (features/fixes/improvements)
- Changelog syntax highlighting
---
## 7. Risico's & Mitigatie
| Risico | Kans | Impact | Mitigatie |
|--------|------|--------|-----------|
| Content duplicatie met timeline | Middel | Laag | Hergebruik timeline data, extend met extra fields |
| Mobile nav niet intuïtief | Middel | Middel | Test met gebruiker, voeg tooltips toe indien nodig |
| SEO voor individuele releases | Laag | Laag | Metadata per release page toevoegen |
---
## 8. Implementatie Volgorde
1. **E1.S1:** MDX template maken + voorbeeld content
2. **E1.S2:** Categorieën definiëren (authentication, dashboard, ai-features, etc.)
3. **E1.S3:** MDX parser setup (next-mdx-remote of @next/mdx)
4. **E2.S1:** Layout component met sidebar (thematische grouping)
5. **E3.S1:** ReleaseSidebar component (auto-generated from MDX files)
6. **E3.S2:** Custom MDX components (images, code, callouts)
7. **E3.S3:** Typography styling (@tailwindcss/typography)
8. **E2.S2:** Overview page (list van MDX frontmatter)
9. **E2.S3:** Detail page (MDX renderer)
10. **E4.S1:** Timeline integration (link naar relevante categories)
11. **E4.S2:** Navigation update (releases link)
---
## 9. Referenties
**Bestaande Componenten:**
- `app/(marketing)/components/build-timeline.tsx` - Timeline component
- `content/nl/timeline.json` - Timeline data
- `app/(marketing)/layout.tsx` - Marketing layout
**Design Inspiratie:**
- Next.js docs (https://nextjs.org/docs)
- Vercel changelog (https://vercel.com/changelog)
- Linear releases (https://linear.app/releases)
---
## 10. Versiehistorie
| Versie | Datum | Auteur | Wijziging |
|--------|-------|--------|-----------|
| v1.0 | 19-11-2024 | Colin + AI | Initiële versie - compact bouwplan |
| v1.1 | 19-11-2024 | Colin + AI | Update: thematische indeling ipv chronologisch |
| v1.2 | 19-11-2024 | Colin + AI | Update: MDX/Markdown content ipv JSON/cards |
Reference in New Issue View Git Blame Copy Permalink