feat: 文章列表和内容优化。

pages/articles/[id].tsx

@@ -1,11 +1,9 @@
 import { FC } from "react";
 import styles from "./article.module.css";
-import { GetServerSideProps, GetStaticProps } from "next";
+import { GetServerSideProps } from "next";
 import { addApolloState, initializeApollo } from "../../commons/graphql/client";
 import { ARTICLE } from "../../commons/graphql/queries";
 import { Article } from "../../commons/graphql/generated";
-import { useQuery } from '@apollo/client';
-import { useRouter } from 'next/router';
 
 interface Props {
   article: Article;
@@ -22,7 +20,10 @@ const ArticleDetails: FC<Props> = ({ article }) => {
           <h1>{article.title}</h1>
           <time>{article.publishedAt}</time>
         </header>
-        <div dangerouslySetInnerHTML={{__html: article.content}}></div>
+        <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
+        <footer>
+          <div className={styles.articleEnd}>The End</div>
+        </footer>
       </article>
     </main>
   );

pages/articles/article.css

@@ -0,0 +1,2 @@
+.article {
+}

pages/articles/article.module.css

@@ -1,13 +1,13 @@
 .articleDetail {
 }
 .article {
-  @apply bg-gray-50 m-2 overflow-hidden rounded-xl;
+  @apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;
 
   :global(.dark) & {
     @apply bg-gray-800;
   }
   & > header {
-      @apply my-8 mx-4;
+    @apply my-8 mx-4;
     h1 {
       @apply text-2xl font-medium;
 
@@ -24,5 +24,90 @@
   }
   & > div {
     @apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      @apply text-red-400;
+
+      :global(.dark) & {
+        @apply text-white;
+      }
+    }
+
+    h1 {
+      @apply hidden;
+    }
+
+    h2 {
+      @apply text-2xl mt-8 mb-4 font-semibold border-b border-red-500 leading-10;
+
+      :global(.dark) & {
+        @apply border-green-700;
+      }
+    }
+
+    h3 {
+      @apply text-xl mt-6 mb-2 font-light;
+    }
+
+    h4 {
+      @apply mt-4 font-medium;
+    }
+
+    p {
+      @apply my-4;
+    }
+
+    ul {
+      @apply pl-4;
+
+      li {
+        @apply list-disc;
+      }
+    }
+    ol {
+      @apply pl-4;
+
+      li {
+        @apply list-decimal;
+      }
+    }
+
+    code,
+    pre {
+      @apply font-mono rounded;
+    }
+
+    code {
+      @apply p-1 text-red-500 bg-red-100;
+      :global(.dark) & {
+        @apply bg-green-800 bg-opacity-20 text-green-400;
+      }
+    }
+
+    pre {
+      @apply px-2 py-1 bg-yellow-900 bg-opacity-5 overflow-x-auto;
+      :global(.dark) & {
+        @apply bg-green-800 bg-opacity-20;
+      }
+      code {
+        @apply text-current bg-transparent;
+
+        :global(.dark) & {
+          @apply text-current bg-transparent;
+        }
+      }
+    }
+  }
+}
+
+.articleEnd {
+  @apply text-center text-gray-400 text-sm my-6;
+
+  &:before, &:after {
+    content: '※';
+    @apply mx-4 text-xs align-text-top;
   }
 }