87 lines
3.0 KiB
Markdown
87 lines
3.0 KiB
Markdown
|
# URL-Driven Section Routing — Design
|
||
|
|
|
||
|
|
**Date:** 2026-05-07
|
||
|
|
**Status:** Approved
|
||
|
|
|
||
|
|
## Goal
|
||
|
|
|
||
|
|
Replace the single-page client-state accordion with multi-page URL-driven routing. Each portfolio section gets its own static URL. The sections list remains visible at all times; clicking a section heading navigates to its page.
|
||
|
|
|
||
|
|
## Route Structure
|
||
|
|
|
||
|
|
Delete `app/page.tsx`. Create `app/[[...slug]]/page.tsx` (optional catchall).
|
||
|
|
|
||
|
|
| URL | Active section |
|
||
|
|
|---|---|
|
||
|
|
| `/` | `sections[0].slug` (first section, URL stays `/`) |
|
||
|
|
| `/intro` | `intro` |
|
||
|
|
| `/bio` | `bio` |
|
||
|
|
| `/skills` | `skills` |
|
||
|
|
| `/experience` | `experience` |
|
||
|
|
| `/projects` | `projects` |
|
||
|
|
|
||
|
|
`generateStaticParams` emits one entry per section plus the root:
|
||
|
|
```ts
|
||
|
|
[{}, { slug: ['intro'] }, { slug: ['bio'] }, ...]
|
||
|
|
```
|
||
|
|
|
||
|
|
## Component Changes
|
||
|
|
|
||
|
|
### `SectionAccordion` (entity)
|
||
|
|
|
||
|
|
- Replace `onClick: () => void` prop with `href: string`
|
||
|
|
- Inactive state: render `<Link href={href}>` instead of `<button onClick>`
|
||
|
|
- No `'use client'` needed (already a server component)
|
||
|
|
|
||
|
|
### `SectionsAccordion` (widget)
|
||
|
|
|
||
|
|
- Remove `'use client'` directive and `useState`
|
||
|
|
- Add `activeSlug: string` prop (passed from page server component)
|
||
|
|
- Pass `href={`/${section.slug}`}` to each `SectionAccordion`
|
||
|
|
- Keep `children` slot pattern for RSC content
|
||
|
|
|
||
|
|
### `SidebarNav` (widget)
|
||
|
|
|
||
|
|
- Remove `IntersectionObserver` and `scrollToSection`
|
||
|
|
- Add `usePathname()` hook for active detection
|
||
|
|
- Active rule: `pathname === `/${item.id}`` or `(pathname === '/' && item is first)`
|
||
|
|
- Items become `<Link href={`/${item.id}`}>` instead of `<button onClick>`
|
||
|
|
- Keep `'use client'` (required for `usePathname`)
|
||
|
|
|
||
|
|
### `MobileNav` (widget)
|
||
|
|
|
||
|
|
- Section items become `<Link>` that also close the menu on navigate
|
||
|
|
- Use `usePathname` in a `useEffect` to close menu on route change (replaces manual close-on-click)
|
||
|
|
|
||
|
|
## Data Flow
|
||
|
|
|
||
|
|
```
|
||
|
|
[[...slug]]/page.tsx (RSC)
|
||
|
|
├─ fetch sections[]
|
||
|
|
├─ activeSlug = params?.slug?.[0] ?? sections[0].slug
|
||
|
|
├─ notFound() if activeSlug not in sections
|
||
|
|
├─ SidebarNav items={navItems} ← usePathname for active state
|
||
|
|
└─ SectionsAccordion sections activeSlug
|
||
|
|
├─ SectionAccordion href="/" isActive=true → SectionFactory content
|
||
|
|
├─ SectionAccordion href="/bio" → Link
|
||
|
|
└─ SectionAccordion href="/skills" → Link
|
||
|
|
```
|
||
|
|
|
||
|
|
No client state in the section list. `SidebarNav` remains client-only for `usePathname`.
|
||
|
|
|
||
|
|
## Error Handling
|
||
|
|
|
||
|
|
- Unknown slug → `notFound()` at page level (404 static page)
|
||
|
|
- Empty sections list → `notFound()` at page level
|
||
|
|
|
||
|
|
## Testing
|
||
|
|
|
||
|
|
- `SectionsAccordion`: drop interaction (click/activate) tests; replace with prop-driven assertions — correct `isActive` and `href` per section given `activeSlug`
|
||
|
|
- `SidebarNav`: drop `IntersectionObserver` mock; mock `usePathname`; assert active link class
|
||
|
|
- `MobileNav`: items become links; assert close-on-navigate via `usePathname` effect
|
||
|
|
- `[[...slug]]/page.tsx`: no unit tests (pure orchestration of tested components)
|
||
|
|
|
||
|
|
## No New Dependencies
|
||
|
|
|
||
|
|
`next/link` and `next/navigation` already present.
|