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
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]}`} />
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user