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>
This commit is contained in:
colinislit
2025-11-19 20:59:54 +01:00
parent 501d8de22b
commit 2ae7b37e5f
14 changed files with 2759 additions and 8 deletions

View File

@@ -226,7 +226,7 @@ export const BuildTimeline = ({ data }: BuildTimelineProps) => {
{/* Achievements */}
{week.achievements.length > 0 && (
<div className="bg-teal-50 border border-teal-100 rounded-lg p-4">
<div className="bg-teal-50 border border-teal-100 rounded-lg p-4 mb-4">
<h4 className="text-sm font-semibold text-teal-700 uppercase tracking-wide mb-2">
Achievements
</h4>
@@ -239,6 +239,17 @@ export const BuildTimeline = ({ data }: BuildTimelineProps) => {
</ul>
</div>
)}
{/* Link to detailed release notes */}
<a
href="/releases"
className="inline-flex items-center gap-2 text-teal-600 hover:text-teal-700 font-medium text-sm transition-colors"
>
<span>Bekijk gedetailleerde release notes</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
))}