refactor: rename /releases route to /documentatie
Complete route rename from /releases to /documentatie to better reflect the continuous build-in-public nature of the project (not formal releases). Changes: - Renamed app/(marketing)/releases/ → app/(marketing)/documentatie/ - Renamed content/nl/releases/ → content/nl/documentatie/ - Updated all internal links from /releases to /documentatie - Updated middleware publicRoutes (/releases → /documentatie) - Updated navigation.json link - Updated build-timeline.tsx documentation link - Updated all component href attributes - Updated lib/mdx/releases.ts content directory path - Updated sidebar component paths and checks - Updated MDX documentation files with new routes Files changed: - app/(marketing)/documentatie/[category]/page.tsx (footer link) - app/(marketing)/documentatie/page.tsx (card links) - app/(marketing)/documentatie/components/release-sidebar.tsx (all links) - app/(marketing)/components/build-timeline.tsx (documentation link) - content/nl/navigation.json (header link) - content/nl/documentatie/*.mdx (internal references) - middleware.ts (publicRoutes) - lib/mdx/releases.ts (RELEASES_DIR path) This prevents future confusion between "releases" (versioned software releases) and "documentatie" (continuous build documentation). Old URL: /releases/[category] New URL: /documentatie/[category] The old /releases route now returns 404 as expected.
This commit is contained in:
colinislit
172
app/(marketing)/documentatie/components/release-sidebar.tsx
Normal file
172
app/(marketing)/documentatie/components/release-sidebar.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
'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/documentatie'
|
||||
|
||||
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,
|
||||
bugs: 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('/documentatie/') && pathname !== '/documentatie'
|
||||
|
||||
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="/documentatie"
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === '/documentatie'
|
||||
? '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={`/documentatie/${release.slug}`}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === `/documentatie/${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">
|
||||
Documentatie
|
||||
</h2>
|
||||
|
||||
<nav className="space-y-1">
|
||||
{/* Overview link */}
|
||||
<Link
|
||||
href="/documentatie"
|
||||
className={`flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === '/documentatie' && !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 === `/documentatie/${release.slug}`
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={release.slug}
|
||||
href={`/documentatie/${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