Add project detail page with prev/next navigation (Story 2.3)

- Enhance ProjectController show() with prev/next navigation data
- Create useFetchProject composable with ProjectNavigation type
- Implement [slug].vue with full project details:
  - Hero image, title with featured badge, formatted date
  - Description, external links (site/GitHub)
  - Skills grid with level progression (before → after)
  - Prev/next navigation with project titles
  - 404 state with spider narrator
- Add dynamic SEO meta tags with og:image from project
- Responsive design: stacked mobile, grid desktop

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-06 02:20:27 +01:00
parent 0399f0dc1c
commit 2269ecdb62
7 changed files with 356 additions and 62 deletions

View File

@@ -0,0 +1,33 @@
import type { Project } from '~/types/project'
export interface ProjectNavigation {
prev: { slug: string; title: string } | null
next: { slug: string; title: string } | null
}
interface ProjectResponse {
data: Project
meta: { lang: string }
navigation: ProjectNavigation
}
interface ProjectError {
error: {
code: string
message: string
}
}
export function useFetchProject(slug: string | Ref<string>) {
const config = useRuntimeConfig()
const { locale } = useI18n()
const slugValue = toValue(slug)
return useFetch<ProjectResponse, ProjectError>(`/projects/${slugValue}`, {
baseURL: config.public.apiUrl as string,
headers: {
'X-API-Key': config.public.apiKey as string,
'Accept-Language': locale.value,
},
})
}