✨ add posts page

i18n/locales/en/common.ts

@@ -1,4 +1,5 @@
 const common = {
+  home: 'Home',
   posts: 'Posts',
   about: 'About',
   tags: 'Tags',

i18n/locales/zh-TW/common.ts

@@ -1,4 +1,5 @@
 const common = {
+  home: '首頁',
   posts: '文章',
   about: '關於',
   tags: '標籤',

src/app/[lang]/layout.tsx

@@ -44,9 +44,13 @@ async function I18nLayout({
   };
   const menu: HeaderProps['menu'] = [
     {
-      text: common.posts,
+      text: common.home,
       href: '/',
     },
+    {
+      text: common.posts,
+      href: '/posts',
+    },
   ];
 
   return (

src/app/[lang]/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
 
 import { getDictionary } from '~/i18n';
 import Card from '@/components/Card';
@@ -11,8 +10,6 @@ import type { RootParams } from './layout';
 export async function generateMetadata({
   params: { lang },
 }: RootParams): Promise<Metadata> {
-  if (!lang) notFound();
-
   const { common } = await getDictionary(lang);
 
   return {
@@ -21,8 +18,6 @@ export async function generateMetadata({
 }
 
 async function RootPage({ params: { lang } }: RootParams) {
-  if (!lang) notFound();
-
   const posts = await getAllDataFrontmatter('posts');
   const { metadata } = await getDictionary(lang);
 

src/app/[lang]/posts/page.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+
+import { getDictionary } from '~/i18n';
+import Card from '@/components/Card';
+import Container from '@/components/Container';
+import List from '@/components/List';
+import { getAllDataFrontmatter } from '@/utils/mdx';
+import type { RootParams } from '../layout';
+
+export async function generateMetadata({
+  params: { lang },
+}: RootParams): Promise<Metadata> {
+  const { common } = await getDictionary(lang);
+
+  return {
+    title: common.posts,
+  };
+}
+
+async function RootPage({ params: { lang } }: RootParams) {
+  const posts = await getAllDataFrontmatter('posts');
+  const { metadata } = await getDictionary(lang);
+
+  return (
+    <Container as="main">
+      <p className="my-12 text-center text-3xl dark:text-white">
+        {metadata.title}
+      </p>
+      <List Item={Card} items={posts} />
+    </Container>
+  );
+}
+
+export default RootPage;