Merge pull request #111 from JohnsonMao/style/container

🔧 remove experimental -> appDir 💄 update web style
JohnsonMao · Nov 1, 2023 · 4bbad58 · 4bbad58
2 parents b6e79ab + c087bdc
commit 4bbad58
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 19 deletions.
diff --git a/next.config.js b/next.config.js
@@ -2,7 +2,6 @@
 const nextConfig = {
   reactStrictMode: true,
   experimental: {
-    appDir: true,
     typedRoutes: true,
   },
   images: {

diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -23,13 +23,17 @@ async function RootPage({ params: { lang } }: RootParams) {
   const { metadata } = await getDictionary(lang);
 
   return (
-    <Container as="main">
-      <H1 className="py-4 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-12 text-xl dark:text-white">{metadata.description}</p>
-      <List Item={Card} items={posts} />
-    </Container>
+    <>
+      <Container className="py-8">
+        <H1 className="mb-4 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="text-xl dark:text-white">{metadata.description}</p>
+      </Container>
+      <Container as="main" className="py-8">
+        <List Item={Card} items={posts} />
+      </Container>
+    </>
   );
 }
 

diff --git a/src/app/[lang]/posts/[postId]/page.tsx b/src/app/[lang]/posts/[postId]/page.tsx
@@ -39,11 +39,13 @@ async function PostPage({ params: { postId } }: PostParams) {
 
   return (
     <>
-      <Container as="main">
-        <H1 className="py-4 text-3xl font-bold dark:text-white">
+      <Container className="py-8">
+        <H1 className="mb-4 text-3xl font-bold dark:text-white">
           {frontmatter.title}
         </H1>
-        <time className="mt-0">{formattedDate}</time>
+        <time>{formattedDate}</time>
+      </Container>
+      <Container as="main" className="py-8">
         <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
           {content}
         </article>

diff --git a/src/app/[lang]/posts/page.tsx b/src/app/[lang]/posts/page.tsx
@@ -23,13 +23,17 @@ async function RootPage({ params: { lang } }: RootParams) {
   const { metadata } = await getDictionary(lang);
 
   return (
-    <Container as="main">
-      <H1 className="py-4 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-12 text-xl dark:text-white">{metadata.description}</p>
-      <List Item={Card} items={posts} />
-    </Container>
+    <>
+      <Container className="py-8">
+        <H1 className="mb-4 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="text-xl dark:text-white">{metadata.description}</p>
+      </Container>
+      <Container as="main" className="py-8">
+        <List Item={Card} items={posts} />
+      </Container>
+    </>
   );
 }
 

diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -13,7 +13,8 @@ const Container = forwardRef<HTMLDivElement, ContainerProps>(
       <Component
         className={cn(
           'px-7 md:mx-8 lg:mx-16 lg:px-14',
-          as === 'main' && 'border-2 rounded-lg mt-4 border-gray-500 backdrop-blur',
+          as === 'main' &&
+            'mt-4 rounded-lg border-2 border-zinc-500 bg-zinc-100/70 dark:bg-zinc-900/70',
           className
         )}
         ref={ref}