From b03179727170c31fc87510166e838a44ed1f3679 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli@live.cn>
Date: Sun, 2 May 2021 20:25:25 +0800
Subject: [PATCH] feat: article details page.

---
 pages/_app.module.css             |  2 +-
 pages/articles/[id].tsx           |  8 +++++++-
 pages/articles/article.module.css | 28 ++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/pages/_app.module.css b/pages/_app.module.css
index 49cc11d..989a4a8 100644
--- a/pages/_app.module.css
+++ b/pages/_app.module.css
@@ -11,7 +11,7 @@
     @apply bg-gray-700 text-gray-300;
   }
   .wrapper {
-    @apply mx-auto max-w-screen-xl;
+    @apply mx-auto max-w-screen-lg;
   }
 }
 .pageHeader {
diff --git a/pages/articles/[id].tsx b/pages/articles/[id].tsx
index 3e53994..e59d41d 100644
--- a/pages/articles/[id].tsx
+++ b/pages/articles/[id].tsx
@@ -17,7 +17,13 @@ const ArticleDetails: FC<Props> = ({ article }) => {
   // });
   return (
     <main className={styles.articleDetails}>
-      <h1>{article.title}</h1>
+      <article className={styles.article}>
+        <header>
+          <h1>{article.title}</h1>
+          <time>{article.publishedAt}</time>
+        </header>
+        <div dangerouslySetInnerHTML={{__html: article.content}}></div>
+      </article>
     </main>
   );
 };
diff --git a/pages/articles/article.module.css b/pages/articles/article.module.css
index e69de29..5d31b75 100644
--- a/pages/articles/article.module.css
+++ b/pages/articles/article.module.css
@@ -0,0 +1,28 @@
+.articleDetail {
+}
+.article {
+  @apply bg-gray-50 m-2 overflow-hidden rounded-xl;
+
+  :global(.dark) & {
+    @apply bg-gray-800;
+  }
+  & > header {
+      @apply my-8 mx-4;
+    h1 {
+      @apply text-2xl font-medium;
+
+      :global(.dark) & {
+        @apply text-gray-200;
+      }
+    }
+    time {
+      @apply text-sm text-gray-500;
+      :global(.dark) & {
+        @apply text-gray-400;
+      }
+    }
+  }
+  & > div {
+    @apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;
+  }
+}
\ No newline at end of file