1
- import { Metadata , ResolvingMetadata } from "next"
2
- import Link from "next/link"
3
- import { projects } from "@/data/projects"
1
+ import { Metadata } from "next"
4
2
5
- import { siteConfig } from "@/config/site"
6
- import { ProjectInterface , ProjectStatus } from "@/lib/types"
7
- import { AppContent } from "@/components/ui/app-content"
8
- import { Markdown , createMarkdownElement } from "@/components/ui/markdown"
9
- import { WikiCard } from "@/components/cards/wiki-card"
10
- import { Divider } from "@/components/divider"
11
- import { Icons } from "@/components/icons"
12
- import DiscoverMoreProjects from "@/components/project/discover-more-projects"
13
- import { ProjectTags } from "@/components/project/project-detail-tags"
14
- import ProjectExtraLinks from "@/components/project/project-extra-links"
15
- import { ProjectLinkIconMap } from "@/components/project/project-links"
16
- import { WikiSideNavigation } from "@/components/wiki-side-navigation"
17
- import { useTranslation } from "@/app/i18n"
3
+ import { getProjectById } from "@/lib/projectsUtils"
4
+ import { ProjectInterface } from "@/lib/types"
18
5
import { LocaleTypes } from "@/app/i18n/settings"
19
6
7
+ import { ProjectContent } from "../sections/ProjectContent"
8
+
20
9
type PageProps = {
21
10
params : { id : string ; lang : string }
22
11
searchParams : { [ key : string ] : string | string [ ] | undefined }
@@ -27,21 +16,18 @@ export interface ProjectProps {
27
16
lang : LocaleTypes
28
17
}
29
18
30
- export async function generateMetadata (
31
- { params } : PageProps ,
32
- parent : ResolvingMetadata
33
- ) : Promise < Metadata > {
34
- const currProject = projects . filter (
35
- ( project ) => String ( project . id ) === params . id
36
- ) [ 0 ]
37
-
38
- const imageUrl = currProject . image
39
- ? `/project-banners/${ currProject . image } `
40
- : "/og-image.png"
19
+ export async function generateMetadata ( {
20
+ params,
21
+ } : PageProps ) : Promise < Metadata > {
22
+ const { project, content } = getProjectById ( params . id )
23
+ const imageUrl =
24
+ ( project ?. image ?? "" ) ?. length > 0
25
+ ? `/project-banners/${ project ?. image } `
26
+ : "/og-image.png"
41
27
42
28
return {
43
- title : currProject . name ,
44
- description : currProject . tldr ,
29
+ title : project ? .name ,
30
+ description : content ? .tldr ,
45
31
openGraph : {
46
32
images : [
47
33
{
@@ -55,125 +41,7 @@ export async function generateMetadata(
55
41
}
56
42
57
43
export default async function ProjectDetailPage ( { params } : PageProps ) {
58
- const currProject : ProjectInterface = projects . filter (
59
- ( project ) => String ( project . id ) === params . id
60
- ) [ 0 ]
61
44
const lang = params ?. lang as LocaleTypes
62
- const { t } = await useTranslation ( lang , "common" )
63
- const { t : projectTranslation } = await useTranslation (
64
- lang ,
65
- "projects/" + currProject . id
66
- )
67
-
68
- const hasSocialLinks = Object . keys ( currProject ?. links ?? { } ) . length > 0
69
-
70
- const editPageURL = siteConfig ?. editProjectPage ( currProject . id , lang )
71
-
72
- return (
73
- < section className = "bg-project-page-gradient" >
74
- < Divider . Section className = "flex flex-col items-center" >
75
- < AppContent className = "flex flex-col gap-12 py-16" >
76
- < div className = "grid grid-cols-1 gap-10 lg:grid-cols-[140px_1fr_290px] lg:items-start lg:gap-12" >
77
- < div className = "sticky top-20" >
78
- < WikiSideNavigation
79
- className = "hidden md:block"
80
- content = { projectTranslation ( "description" ) }
81
- />
82
- </ div >
83
-
84
- < div className = "flex flex-col items-center justify-center w-full gap-5 " >
85
- < div className = "w-full " >
86
- < div className = "flex flex-col" >
87
- < div className = "flex flex-col gap-6 text-left" >
88
- < Link
89
- className = "flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950"
90
- href = { `/${ lang } /projects` }
91
- >
92
- < Icons . arrowLeft />
93
- < span className = "font-sans text-base" >
94
- { t ( "projectLibrary" ) }
95
- </ span >
96
- </ Link >
97
- < div className = "flex flex-col gap-2" >
98
- < h1 className = "py-2 text-3xl font-bold leading-[110%] md:text-5xl" >
99
- { currProject . name }
100
- </ h1 >
101
- < p className = "py-2 leading-[150%] text-slate-600" >
102
- { projectTranslation ( "tldr" ) }
103
- </ p >
104
- </ div >
105
- </ div >
106
- { hasSocialLinks && (
107
- < div className = "flex flex-wrap items-center justify-start gap-6 pt-4" >
108
- { Object ?. entries ( currProject . links ?? { } ) ?. map (
109
- ( [ key , value ] ) => {
110
- return (
111
- < Link
112
- key = { key }
113
- href = { value ?? "" }
114
- target = "_blank"
115
- rel = "noreferrer"
116
- className = "group"
117
- >
118
- < div className = "flex items-center gap-2" >
119
- { ProjectLinkIconMap ?. [ key ] }
120
- < p className = "capitalize duration-200 text-slate-600 group-hover:text-orange" >
121
- { key }
122
- </ p >
123
- </ div >
124
- </ Link >
125
- )
126
- }
127
- ) }
128
- </ div >
129
- ) }
130
- < div className = "mt-10 hidden h-[1px] w-full bg-anakiwa-300 md:block" > </ div >
131
- </ div >
132
-
133
- < div className = "flex flex-col w-full gap-6 mt-6 md:mt-10" >
134
- < div className = "flex flex-col w-full gap-4 text-base font-normal leading-relaxed" >
135
- < Markdown
136
- components = { {
137
- p : ( { node, ...props } ) =>
138
- createMarkdownElement ( "p" , {
139
- className :
140
- "text-tuatara-700 font-sans text-lg font-normal" ,
141
- ...props ,
142
- } ) ,
143
- } }
144
- >
145
- { projectTranslation ( "description" ) }
146
- </ Markdown >
147
- < ProjectTags project = { currProject } lang = { lang } />
148
- </ div >
149
- < ProjectExtraLinks project = { currProject } lang = { lang } />
150
- </ div >
151
- </ div >
152
- </ div >
153
- < WikiCard
154
- className = "lg:sticky lg:top-20"
155
- project = { currProject }
156
- lang = { lang }
157
- />
158
- < div className = "lg:col-start-2" >
159
- < Link
160
- href = { editPageURL }
161
- target = "_blank"
162
- rel = "noreferrer"
163
- passHref
164
- className = "inline-flex items-center self-start gap-2 px-4 py-2 duration-200 bg-white border-2 rounded-md group border-tuatara-950 hover:bg-tuatara-950 hover:text-white"
165
- >
166
- < Icons . edit />
167
- < span className = "text-sm duration-200 text-tuatara-950 group-hover:text-white" >
168
- { t ( "editThisPage" ) }
169
- </ span >
170
- </ Link >
171
- </ div >
172
- </ div >
173
- </ AppContent >
174
45
175
- < DiscoverMoreProjects project = { currProject } lang = { lang } />
176
- </ Divider . Section >
177
- </ section >
178
- )
46
+ return < ProjectContent lang = { lang } id = { params ?. id } />
179
47
}
0 commit comments