fix: lowercase articles slug

wiscaksono · Jun 3, 2024 · dcd42d8 · dcd42d8
1 parent 8410cfc
commit dcd42d8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/app/articles/[slug]/page.tsx b/src/app/articles/[slug]/page.tsx
@@ -12,7 +12,7 @@ interface Props {
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata | undefined> {
-  let project = getContents('articles').find(post => post.slug === params.slug)
+  let project = getContents('articles').find(post => post.slug.toLowerCase() === params.slug.toLowerCase())
   if (!project) return
 
   let { title, summary: description, image } = project.metadata
@@ -25,7 +25,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata | un
       title,
       description,
       type: 'article',
-      url: `${ENV.NEXT_PUBLIC_WEBSITE_URL}/articles/${project.slug}`,
+      url: `${ENV.NEXT_PUBLIC_WEBSITE_URL}/articles/${project.slug.toLowerCase()}`,
       images: [
         {
           url: ogImage
@@ -43,11 +43,11 @@ export async function generateMetadata({ params }: Props): Promise<Metadata | un
 
 export async function generateStaticParams() {
   const projects = getContents('projects')
-  return projects.map(project => ({ slug: project.slug }))
+  return projects.map(project => ({ slug: project.slug.toLowerCase() }))
 }
 
 export default function ArticlePage({ params }: Props) {
-  const project = getContents('articles').find(project => project.slug === params.slug)
+  const project = getContents('articles').find(project => project.slug.toLowerCase() === params.slug.toLowerCase())
   if (!project) notFound()
 
   return <MDXRenderer source={project.content} />

diff --git a/src/app/articles/page.tsx b/src/app/articles/page.tsx
@@ -7,13 +7,13 @@ export default function Articles() {
     <div className='grid gap-2 lg:grid-cols-2'>
       {articles.map(article => (
         <div key={article.slug} className='flex flex-col gap-y-2 border border-[#898989]/20 p-2 md:gap-y-2.5 lg:gap-y-5'>
-          <Link href={`/articles/${article.slug}`} className='text-lg font-semibold text-[#C6C6C6] md:text-xl lg:text-2xl'>
+          <Link href={`/articles/${article.slug.toLowerCase()}`} className='text-lg font-semibold text-[#C6C6C6] md:text-xl lg:text-2xl'>
             {article.metadata.title}
           </Link>
           <p className='line-clamp-4 flex-1 text-sm'>{article.metadata.summary}</p>
           <div className='flex flex-wrap items-center justify-between gap-2 text-sm'>
             <p>Published on {article.metadata.publishedDate}</p>
-            <Link href={`/articles/${article.slug}`} className='flex items-center justify-center gap-2 gap-x-2 bg-[#898989] px-2.5 py-0.5 text-[#131313]'>
+            <Link href={`/articles/${article.slug.toLowerCase()}`} className='flex items-center justify-center gap-2 gap-x-2 bg-[#898989] px-2.5 py-0.5 text-[#131313]'>
               Read more &gt;&gt;
             </Link>
           </div>