feat: rewrite blog to Next.js v13 app directory

Improvement: Support light theme in code block

components/BlogPostComments.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import Giscus from '@giscus/react'
+
+import { useTheme } from '@/theme/theme.client'
+import type { CookiesStore } from '@/utils/constants'
+
+interface BlogPostCommentsProps {
+  cookiesStore: CookiesStore
+}
+
+export const BlogPostComments = (props: BlogPostCommentsProps): JSX.Element => {
+  const { cookiesStore } = props
+
+  const theme = useTheme(cookiesStore)
+
+  return (
+    <Giscus
+      id='comments'
+      repo='theoludwig/theoludwig'
+      repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
+      category='General'
+      categoryId='DIC_kwDOFWUewM4CQ_WK'
+      mapping='pathname'
+      reactionsEnabled='1'
+      emitMetadata='0'
+      inputPosition='top'
+      theme={theme}
+      lang='en'
+      loading='lazy'
+    />
+  )
+}

components/BlogPosts.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import date from 'date-and-time'
+
+import { ShadowContainer } from '@/components/design/ShadowContainer'
+import { getPosts } from '@/utils/blog'
+
+export const BlogPosts = async (): Promise<JSX.Element> => {
+  const posts = await getPosts()
+
+  return (
+    <div className='flex w-full items-center justify-center p-8'>
+      <div className='w-[1600px]' data-cy='blog-posts'>
+        {posts.map((post, index) => {
+          const postPublishedOn = date.format(
+            new Date(post.frontmatter.publishedOn),
+            'DD/MM/YYYY'
+          )
+          return (
+            <Link
+              href={`/blog/${post.slug}`}
+              key={index}
+              locale='en'
+              data-cy={post.slug}
+            >
+              <ShadowContainer className='cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2'>
+                <h2 data-cy='blog-post-title' className='text-xl font-semibold'>
+                  {post.frontmatter.title}
+                </h2>
+                <p data-cy='blog-post-date' className='mt-2'>
+                  {postPublishedOn}
+                </p>
+                <p data-cy='blog-post-description' className='mt-3'>
+                  {post.frontmatter.description}
+                </p>
+              </ShadowContainer>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

components/Header/Locales/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePathname } from 'next/navigation'
 import { useCallback, useEffect, useState, useRef } from 'react'
 import classNames from 'clsx'
 
@@ -16,6 +17,7 @@ export interface LocalesProps {
 
 export const Locales = (props: LocalesProps): JSX.Element => {
   const { currentLocale, cookiesStore } = props
+  const pathname = usePathname()
 
   const [hiddenMenu, setHiddenMenu] = useState(true)
   const languageClickRef = useRef<HTMLDivElement | null>(null)
@@ -48,6 +50,10 @@ export const Locales = (props: LocalesProps): JSX.Element => {
     setLocale(locale)
   }
 
+  if (pathname.startsWith('/blog')) {
+    return <></>
+  }
+
   return (
     <div className='flex cursor-pointer flex-col items-center justify-center'>
       <div

components/Header/index.tsx

@@ -7,13 +7,7 @@ import { getI18n } from '@/i18n/i18n.server'
 import { Locales } from './Locales'
 import { SwitchTheme } from './SwitchTheme'
 
-export interface HeaderProps {
-  showLocale?: boolean
-}
-
-export const Header: React.FC<HeaderProps> = (props) => {
-  const { showLocale = false } = props
-
+export const Header = (): JSX.Element => {
   const cookiesStore = cookies()
   const i18n = getI18n()
 
@@ -44,12 +38,10 @@ export const Header: React.FC<HeaderProps> = (props) => {
             Blog
           </Link>
         </div>
-        {showLocale ? (
-          <Locales
-            currentLocale={i18n.locale}
-            cookiesStore={cookiesStore.toString()}
-          />
-        ) : null}
+        <Locales
+          currentLocale={i18n.locale}
+          cookiesStore={cookiesStore.toString()}
+        />
         <SwitchTheme cookiesStore={cookiesStore.toString()} />
       </div>
     </header>