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

commons/graphql/generated.tsx

@@ -21,6 +21,8 @@ export type Article = {
   content: Scalars['String'];
   publishedAt?: Maybe<Scalars['DateTime']>;
   tags: Array<Scalars['String']>;
+  html: Scalars['String'];
+  description?: Maybe<Scalars['String']>;
 };
 
 export type CreateArticleInput = {

commons/graphql/queries.ts

@@ -5,7 +5,7 @@ export const ARTICLE_FOR_HOME = gql`
     articles {
       id
       title
-      content
+      description
       publishedAt
     }
   }
@@ -16,7 +16,8 @@ export const ARTICLE = gql`
     article(id: $id) {
       id
       title
-      content
+      description
+      html
       publishedAt
     }
   }

graphql.schema.json

@@ -96,6 +96,34 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "html",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "description",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,

pages/_app.tsx

@@ -7,6 +7,7 @@ import { ApolloProvider } from "@apollo/client";
 import { useApollo } from "../commons/graphql/client";
 import { ThemeProvider, useTheme } from '../commons/theme';
 import { SwitchTheme } from '../components/switch-theme';
+import "./articles/article.css";
 
 function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps);

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;
   }
 }

pages/index.tsx

@@ -26,7 +26,7 @@ function Item({ article }: { article: Article }) {
     <Link href={`/articles/${article.id}`}>
       <li className={styles.item}>
         <h2 className={styles.title}>{article.title}</h2>
-        <p className={styles.description}>{article.content}</p>
+        <p className={styles.description}>{article.description}</p>
       </li>
     </Link>
   );