@@ -11,24 +11,22 @@ import 'highlight.js/styles/github-dark.css';
11
11
import CodeSnippet from "@/components/blog/code-snippet" ;
12
12
import { generateDefaultMetadata } from '@/lib/metadata' ;
13
13
14
- interface BlogPostPageProps {
15
- params : {
16
- locale : Locale ;
17
- slug : string ;
18
- } ;
19
- }
14
+ type Params = Promise < {
15
+ locale : Locale ;
16
+ slug : string ;
17
+ } > ;
20
18
21
- export async function generateMetadata ( { params } : BlogPostPageProps ) : Promise < Metadata > {
22
- const locale = params . locale as Locale ;
23
- const allPosts = await getContentAsBlogPosts ( params . locale ) ;
24
- const post = allPosts . find ( post => post . slug === params . slug ) ;
19
+ export async function generateMetadata ( { params } : { params : Params } ) : Promise < Metadata > {
20
+ const { locale, slug } = await params ;
21
+ const allPosts = await getContentAsBlogPosts ( locale ) ;
22
+ const post = allPosts . find ( post => post . slug === slug ) ;
25
23
26
24
if ( ! post ) {
27
25
return generateDefaultMetadata ( {
28
26
title : 'Post Not Found' ,
29
27
description : 'The blog post you are looking for does not exist.' ,
30
28
locale,
31
- url : `/blog/${ params . slug } ` ,
29
+ url : `/blog/${ slug } ` ,
32
30
noIndex : true ,
33
31
} ) ;
34
32
}
@@ -37,7 +35,7 @@ export async function generateMetadata({ params }: BlogPostPageProps): Promise<M
37
35
title : post . title ,
38
36
description : post . description || `${ post . title } - Tech Notes Hub` ,
39
37
locale,
40
- url : `/blog/${ params . slug } ` ,
38
+ url : `/blog/${ slug } ` ,
41
39
ogImage : post . coverImage || '/og-image.jpg' ,
42
40
} ) ;
43
41
}
@@ -59,24 +57,21 @@ export async function generateStaticParams() {
59
57
return params ;
60
58
}
61
59
62
- export default async function BlogPostPage ( {
63
- params
64
- } : {
65
- params : { locale : Locale ; slug : string }
66
- } ) {
67
- const allPosts = await getContentAsBlogPosts ( params . locale ) ;
68
- const post = allPosts . find ( post => post . slug === params . slug ) ;
60
+ export default async function BlogPostPage ( { params } : { params : Params } ) {
61
+ const { locale, slug } = await params ;
62
+ const allPosts = await getContentAsBlogPosts ( locale ) ;
63
+ const post = allPosts . find ( post => post . slug === slug ) ;
69
64
70
65
// Get translations
71
- const translations = await getTranslationsFromNamespaces ( params . locale , [ 'common' ] ) ;
66
+ const translations = await getTranslationsFromNamespaces ( locale , [ 'common' ] ) ;
72
67
const t = translations . common ;
73
68
74
69
if ( ! post ) {
75
70
notFound ( ) ;
76
71
}
77
72
78
73
// Find available translations for this post
79
- const availableTranslations = await findAvailableTranslations ( params . slug ) ;
74
+ const availableTranslations = await findAvailableTranslations ( slug ) ;
80
75
81
76
// Get translated category name if available
82
77
const categoryKey = post . category . toLowerCase ( ) . replace ( / \s + / g, '-' ) as keyof typeof t . categories ;
@@ -89,7 +84,7 @@ export default async function BlogPostPage({
89
84
: post . sourceType ;
90
85
91
86
// Format dates according to locale
92
- const dateFormatter = new Intl . DateTimeFormat ( params . locale === 'vi' ? 'vi-VN' : 'en-US' , {
87
+ const dateFormatter = new Intl . DateTimeFormat ( locale === 'vi' ? 'vi-VN' : 'en-US' , {
93
88
year : 'numeric' ,
94
89
month : 'long' ,
95
90
day : 'numeric'
@@ -102,8 +97,8 @@ export default async function BlogPostPage({
102
97
const debugInfo = process . env . NODE_ENV === 'development' && (
103
98
< div className = "mt-4 p-4 border border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 rounded-md text-sm" >
104
99
< h4 className = "font-bold mb-2" > Debug Info:</ h4 >
105
- < div > < strong > Current Slug:</ strong > { params . slug } </ div >
106
- < div > < strong > Current Locale:</ strong > { params . locale } </ div >
100
+ < div > < strong > Current Slug:</ strong > { slug } </ div >
101
+ < div > < strong > Current Locale:</ strong > { locale } </ div >
107
102
< div > < strong > Source Type:</ strong > { post . sourceType } </ div >
108
103
< div > < strong > Source Path:</ strong > { post . sourcePath } </ div >
109
104
< div > < strong > Relative Path:</ strong > { post . relativePath } </ div >
@@ -129,7 +124,7 @@ export default async function BlogPostPage({
129
124
return (
130
125
< div className = "container mx-auto px-4 py-8 max-w-3xl" >
131
126
< div className = "flex justify-between items-center mb-8" >
132
- < Link href = { `/${ params . locale } /blog` } className = "cursor-pointer" >
127
+ < Link href = { `/${ locale } /blog` } className = "cursor-pointer" >
133
128
< Button variant = "outline" size = "sm" >
134
129
{ t . blog . backToBlog }
135
130
</ Button >
@@ -145,7 +140,7 @@ export default async function BlogPostPage({
145
140
key = { translation . locale }
146
141
href = { `/${ translation . locale } /blog/${ translation . slug } ` }
147
142
className = { `text-sm px-2 py-1 rounded cursor-pointer ${
148
- translation . locale === params . locale
143
+ translation . locale === locale
149
144
? 'bg-primary text-primary-foreground'
150
145
: 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
151
146
} `}
0 commit comments