✨ 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:
33
frontend/app/composables/useFetchProject.ts
Normal file
33
frontend/app/composables/useFetchProject.ts
Normal 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,
|
||||
},
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user