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
@@ -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>
|
||||
))}
|
||||
|
||||
130
app/(marketing)/releases/[category]/page.tsx
Normal file
130
app/(marketing)/releases/[category]/page.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* Release Detail Page
|
||||
*
|
||||
* Renders individual release note from MDX file
|
||||
*/
|
||||
|
||||
import { notFound } from 'next/navigation'
|
||||
import { MDXRemote } from 'next-mdx-remote/rsc'
|
||||
import { getRelease, getAllReleases } from '@/lib/mdx/releases'
|
||||
import { mdxComponents } from '../components/mdx-components'
|
||||
|
||||
interface ReleasePageProps {
|
||||
params: Promise<{
|
||||
category: string
|
||||
}>
|
||||
}
|
||||
|
||||
// Generate static params for all releases
|
||||
export async function generateStaticParams() {
|
||||
const releases = await getAllReleases()
|
||||
|
||||
return releases.map((release) => ({
|
||||
category: release.slug,
|
||||
}))
|
||||
}
|
||||
|
||||
// Generate metadata for SEO
|
||||
export async function generateMetadata({ params }: ReleasePageProps) {
|
||||
const { category } = await params
|
||||
const release = await getRelease(category)
|
||||
|
||||
if (!release) {
|
||||
return {
|
||||
title: 'Release Not Found',
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${release.frontmatter.title} - Release Notes`,
|
||||
description: release.frontmatter.description,
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ReleasePage({ params }: ReleasePageProps) {
|
||||
const { category } = await params
|
||||
const release = await getRelease(category)
|
||||
|
||||
if (!release) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const { frontmatter, content } = release
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white pt-24 pb-16">
|
||||
<article className="max-w-4xl mx-auto px-4 md:px-8">
|
||||
{/* Header */}
|
||||
<header className="mb-8 pb-8 border-b border-slate-200">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<StatusBadge status={frontmatter.status} />
|
||||
<span className="text-sm text-slate-500">v{frontmatter.version}</span>
|
||||
<span className="text-sm text-slate-500">•</span>
|
||||
<time className="text-sm text-slate-500">
|
||||
{new Date(frontmatter.releaseDate).toLocaleDateString('nl-NL', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||
{frontmatter.title}
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-slate-600">
|
||||
{frontmatter.description}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* MDX Content */}
|
||||
<div className="prose prose-slate max-w-none">
|
||||
<MDXRemote source={content} components={mdxComponents} />
|
||||
</div>
|
||||
|
||||
{/* Footer Navigation */}
|
||||
<footer className="mt-12 pt-8 border-t border-slate-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<a
|
||||
href="/releases"
|
||||
className="text-teal-600 hover:text-teal-700 font-medium flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Terug naar overzicht
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/#timeline"
|
||||
className="text-slate-600 hover:text-slate-700 font-medium"
|
||||
>
|
||||
Bekijk timeline →
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: 'completed' | 'in_progress' | 'planned' }) {
|
||||
const styles = {
|
||||
completed: 'bg-teal-100 text-teal-700 border-teal-200',
|
||||
in_progress: 'bg-amber-100 text-amber-700 border-amber-200',
|
||||
planned: 'bg-slate-100 text-slate-600 border-slate-200',
|
||||
}
|
||||
|
||||
const labels = {
|
||||
completed: 'Voltooid',
|
||||
in_progress: 'Bezig',
|
||||
planned: 'Gepland',
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border ${styles[status]}`}>
|
||||
{labels[status]}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
153
app/(marketing)/releases/components/mdx-components.tsx
Normal file
153
app/(marketing)/releases/components/mdx-components.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
/**
|
||||
* Custom MDX Components
|
||||
*
|
||||
* Styled components for rendering MDX content
|
||||
*/
|
||||
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
type MDXComponents = {
|
||||
[key: string]: React.ComponentType<any>
|
||||
}
|
||||
|
||||
export const mdxComponents: MDXComponents = {
|
||||
// Headings with anchor links
|
||||
h1: ({ children, ...props }) => (
|
||||
<h1 className="text-4xl font-bold text-slate-900 mt-8 mb-4" {...props}>
|
||||
{children}
|
||||
</h1>
|
||||
),
|
||||
h2: ({ children, ...props }) => (
|
||||
<h2 className="text-3xl font-bold text-slate-900 mt-8 mb-4 border-b border-slate-200 pb-2" {...props}>
|
||||
{children}
|
||||
</h2>
|
||||
),
|
||||
h3: ({ children, ...props }) => (
|
||||
<h3 className="text-2xl font-semibold text-slate-900 mt-6 mb-3" {...props}>
|
||||
{children}
|
||||
</h3>
|
||||
),
|
||||
h4: ({ children, ...props }) => (
|
||||
<h4 className="text-xl font-semibold text-slate-900 mt-4 mb-2" {...props}>
|
||||
{children}
|
||||
</h4>
|
||||
),
|
||||
|
||||
// Paragraphs
|
||||
p: ({ children, ...props }) => (
|
||||
<p className="text-slate-700 leading-relaxed mb-4" {...props}>
|
||||
{children}
|
||||
</p>
|
||||
),
|
||||
|
||||
// Lists
|
||||
ul: ({ children, ...props }) => (
|
||||
<ul className="list-disc list-inside space-y-2 mb-4 text-slate-700" {...props}>
|
||||
{children}
|
||||
</ul>
|
||||
),
|
||||
ol: ({ children, ...props }) => (
|
||||
<ol className="list-decimal list-inside space-y-2 mb-4 text-slate-700" {...props}>
|
||||
{children}
|
||||
</ol>
|
||||
),
|
||||
li: ({ children, ...props }) => (
|
||||
<li className="ml-4" {...props}>
|
||||
{children}
|
||||
</li>
|
||||
),
|
||||
|
||||
// Links
|
||||
a: ({ href, children, ...props }) => (
|
||||
<Link
|
||||
href={href || '#'}
|
||||
className="text-teal-600 hover:text-teal-700 underline underline-offset-2"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
),
|
||||
|
||||
// Images
|
||||
img: ({ src, alt, ...props }) => {
|
||||
if (!src) return null
|
||||
|
||||
return (
|
||||
<figure className="my-8">
|
||||
<div className="relative rounded-lg overflow-hidden border border-slate-200 bg-slate-50">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt || ''}
|
||||
width={1200}
|
||||
height={675}
|
||||
className="w-full h-auto"
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
{alt && (
|
||||
<figcaption className="text-sm text-slate-500 italic mt-2 text-center">
|
||||
{alt}
|
||||
</figcaption>
|
||||
)}
|
||||
</figure>
|
||||
)
|
||||
},
|
||||
|
||||
// Code blocks
|
||||
pre: ({ children, ...props }) => (
|
||||
<pre className="bg-slate-900 text-slate-50 rounded-lg p-4 overflow-x-auto mb-4 text-sm" {...props}>
|
||||
{children}
|
||||
</pre>
|
||||
),
|
||||
code: ({ children, ...props }) => (
|
||||
<code className="bg-slate-100 text-slate-800 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
),
|
||||
|
||||
// Blockquote
|
||||
blockquote: ({ children, ...props }) => (
|
||||
<blockquote className="border-l-4 border-teal-500 pl-4 py-2 my-4 bg-teal-50 text-slate-700 italic" {...props}>
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
|
||||
// Horizontal rule
|
||||
hr: (props) => (
|
||||
<hr className="my-8 border-slate-200" {...props} />
|
||||
),
|
||||
|
||||
// Table
|
||||
table: ({ children, ...props }) => (
|
||||
<div className="overflow-x-auto my-6">
|
||||
<table className="min-w-full divide-y divide-slate-200" {...props}>
|
||||
{children}
|
||||
</table>
|
||||
</div>
|
||||
),
|
||||
th: ({ children, ...props }) => (
|
||||
<th className="px-4 py-3 bg-slate-50 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider" {...props}>
|
||||
{children}
|
||||
</th>
|
||||
),
|
||||
td: ({ children, ...props }) => (
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border-t border-slate-200" {...props}>
|
||||
{children}
|
||||
</td>
|
||||
),
|
||||
|
||||
// Strong/Bold
|
||||
strong: ({ children, ...props }) => (
|
||||
<strong className="font-semibold text-slate-900" {...props}>
|
||||
{children}
|
||||
</strong>
|
||||
),
|
||||
|
||||
// Emphasis/Italic
|
||||
em: ({ children, ...props }) => (
|
||||
<em className="italic" {...props}>
|
||||
{children}
|
||||
</em>
|
||||
),
|
||||
}
|
||||
171
app/(marketing)/releases/components/release-sidebar.tsx
Normal file
171
app/(marketing)/releases/components/release-sidebar.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Release Sidebar Navigation
|
||||
*
|
||||
* Fixed sidebar with grouped list of all releases
|
||||
* Auto-generated from MDX files
|
||||
*/
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { ChevronRight, ChevronDown } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import type { ReleaseNote, GroupMetadata, CategoryMetadata } from '@/lib/mdx/releases'
|
||||
|
||||
interface ReleaseSidebarProps {
|
||||
releases: ReleaseNote[]
|
||||
metadata: {
|
||||
groups: GroupMetadata[]
|
||||
categories: CategoryMetadata[]
|
||||
}
|
||||
}
|
||||
|
||||
export function ReleaseSidebar({ releases, metadata }: ReleaseSidebarProps) {
|
||||
const pathname = usePathname()
|
||||
const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({
|
||||
foundation: true,
|
||||
features: true,
|
||||
infrastructure: true,
|
||||
})
|
||||
|
||||
const toggleGroup = (groupId: string) => {
|
||||
setExpandedGroups(prev => ({
|
||||
...prev,
|
||||
[groupId]: !prev[groupId],
|
||||
}))
|
||||
}
|
||||
|
||||
// Group releases by their group
|
||||
const releasesByGroup = releases.reduce((acc, release) => {
|
||||
const group = release.frontmatter.group
|
||||
if (!acc[group]) acc[group] = []
|
||||
acc[group].push(release)
|
||||
return acc
|
||||
}, {} as Record<string, ReleaseNote[]>)
|
||||
|
||||
// Check if we're on a specific release page
|
||||
const isReleaseDetail = pathname.startsWith('/releases/') && pathname !== '/releases'
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile: Horizontal scroll menu */}
|
||||
<div className="lg:hidden bg-white border-b border-slate-200 sticky top-16 z-40">
|
||||
<div className="flex gap-2 p-4 overflow-x-auto">
|
||||
<Link
|
||||
href="/releases"
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === '/releases'
|
||||
? 'bg-teal-100 text-teal-700'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Overzicht
|
||||
</Link>
|
||||
{releases.map((release) => (
|
||||
<Link
|
||||
key={release.slug}
|
||||
href={`/releases/${release.slug}`}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === `/releases/${release.slug}`
|
||||
? 'bg-teal-100 text-teal-700'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
{release.frontmatter.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop: Fixed sidebar */}
|
||||
<aside className="hidden lg:block w-64 fixed top-16 bottom-0 bg-white border-r border-slate-200 overflow-y-auto">
|
||||
<div className="p-6">
|
||||
<h2 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-4">
|
||||
Release Notes
|
||||
</h2>
|
||||
|
||||
<nav className="space-y-1">
|
||||
{/* Overview link */}
|
||||
<Link
|
||||
href="/releases"
|
||||
className={`flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === '/releases' && !isReleaseDetail
|
||||
? 'bg-teal-50 text-teal-700'
|
||||
: 'text-slate-700 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<span>Overzicht</span>
|
||||
</Link>
|
||||
|
||||
{/* Grouped releases */}
|
||||
{metadata.groups
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map((group) => {
|
||||
const groupReleases = releasesByGroup[group.id] || []
|
||||
const isExpanded = expandedGroups[group.id]
|
||||
|
||||
return (
|
||||
<div key={group.id} className="space-y-1">
|
||||
{/* Group header */}
|
||||
<button
|
||||
onClick={() => toggleGroup(group.id)}
|
||||
className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wide hover:text-slate-700 transition-colors"
|
||||
>
|
||||
<span>{group.title}</span>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Group items */}
|
||||
{isExpanded && (
|
||||
<div className="space-y-1 ml-2">
|
||||
{groupReleases.map((release) => {
|
||||
const isActive = pathname === `/releases/${release.slug}`
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={release.slug}
|
||||
href={`/releases/${release.slug}`}
|
||||
className={`flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors group ${
|
||||
isActive
|
||||
? 'bg-teal-50 text-teal-700'
|
||||
: 'text-slate-700 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusDot status={release.frontmatter.status} />
|
||||
<span className="truncate">{release.frontmatter.title}</span>
|
||||
</div>
|
||||
<ChevronRight className={`w-4 h-4 flex-shrink-0 transition-opacity ${
|
||||
isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-50'
|
||||
}`} />
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusDot({ status }: { status: 'completed' | 'in_progress' | 'planned' }) {
|
||||
const colors = {
|
||||
completed: 'bg-teal-500',
|
||||
in_progress: 'bg-amber-500',
|
||||
planned: 'bg-slate-300',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`w-2 h-2 rounded-full flex-shrink-0 ${colors[status]}`} />
|
||||
)
|
||||
}
|
||||
34
app/(marketing)/releases/layout.tsx
Normal file
34
app/(marketing)/releases/layout.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* Releases Layout
|
||||
*
|
||||
* Layout for release notes pages with sidebar navigation
|
||||
*/
|
||||
|
||||
import type { ReactNode } from 'react'
|
||||
import { getAllReleases, getCategoryMetadata } from '@/lib/mdx/releases'
|
||||
import { ReleaseSidebar } from './components/release-sidebar'
|
||||
|
||||
interface ReleasesLayoutProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export default async function ReleasesLayout({ children }: ReleasesLayoutProps) {
|
||||
const releases = await getAllReleases()
|
||||
const metadata = await getCategoryMetadata()
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="flex">
|
||||
{/* Sidebar - hidden on mobile, fixed on desktop */}
|
||||
<ReleaseSidebar releases={releases} metadata={metadata} />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 lg:ml-64">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
155
app/(marketing)/releases/page.tsx
Normal file
155
app/(marketing)/releases/page.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* Releases Overview Page
|
||||
*
|
||||
* Landing page for all release notes grouped by category
|
||||
*/
|
||||
|
||||
import Link from 'next/link'
|
||||
import { getAllReleases } from '@/lib/mdx/releases'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Release Notes - AI Speedrun',
|
||||
description: 'Volledige changelog van het Mini-ECD prototype. Transparant build-in-public overzicht van features, fixes en improvements.',
|
||||
}
|
||||
|
||||
export default async function ReleasesPage() {
|
||||
const releases = await getAllReleases()
|
||||
|
||||
// Group by status for better overview
|
||||
const completed = releases.filter(r => r.frontmatter.status === 'completed')
|
||||
const inProgress = releases.filter(r => r.frontmatter.status === 'in_progress')
|
||||
const planned = releases.filter(r => r.frontmatter.status === 'planned')
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 pt-24 pb-16">
|
||||
<div className="max-w-4xl mx-auto px-4 md:px-8">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||
Release Notes
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 max-w-3xl">
|
||||
Volledige changelog van het Mini-ECD prototype. Build in public met transparantie over features, tijd en kosten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-12">
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-4 text-center">
|
||||
<div className="text-3xl font-bold text-teal-600">{completed.length}</div>
|
||||
<div className="text-sm text-slate-500 mt-1">Voltooid</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-4 text-center">
|
||||
<div className="text-3xl font-bold text-amber-600">{inProgress.length}</div>
|
||||
<div className="text-sm text-slate-500 mt-1">In Progress</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-4 text-center">
|
||||
<div className="text-3xl font-bold text-slate-400">{planned.length}</div>
|
||||
<div className="text-sm text-slate-500 mt-1">Gepland</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Completed Releases */}
|
||||
{completed.length > 0 && (
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">
|
||||
✅ Voltooid
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{completed.map((release) => (
|
||||
<ReleaseCard key={release.slug} release={release} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* In Progress Releases */}
|
||||
{inProgress.length > 0 && (
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">
|
||||
🔄 In Progress
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{inProgress.map((release) => (
|
||||
<ReleaseCard key={release.slug} release={release} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Planned Releases */}
|
||||
{planned.length > 0 && (
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">
|
||||
⏳ Gepland
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{planned.map((release) => (
|
||||
<ReleaseCard key={release.slug} release={release} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReleaseCard({ release }: { release: any }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/releases/${release.slug}`}
|
||||
className="block bg-white rounded-lg border border-slate-200 p-6 hover:border-teal-300 hover:shadow-md transition-all"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-xl font-bold text-slate-900">
|
||||
{release.frontmatter.title}
|
||||
</h3>
|
||||
<StatusBadge status={release.frontmatter.status} />
|
||||
</div>
|
||||
<p className="text-slate-600 mb-3">
|
||||
{release.frontmatter.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-sm text-slate-500">
|
||||
<span className="capitalize">{release.frontmatter.group.replace('-', ' ')}</span>
|
||||
<span>•</span>
|
||||
<span>v{release.frontmatter.version}</span>
|
||||
<span>•</span>
|
||||
<span>{new Date(release.frontmatter.releaseDate).toLocaleDateString('nl-NL', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-slate-400">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: 'completed' | 'in_progress' | 'planned' }) {
|
||||
const styles = {
|
||||
completed: 'bg-teal-100 text-teal-700 border-teal-200',
|
||||
in_progress: 'bg-amber-100 text-amber-700 border-amber-200',
|
||||
planned: 'bg-slate-100 text-slate-600 border-slate-200',
|
||||
}
|
||||
|
||||
const labels = {
|
||||
completed: 'Voltooid',
|
||||
in_progress: 'Bezig',
|
||||
planned: 'Gepland',
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border ${styles[status]}`}>
|
||||
{labels[status]}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user