feat: 文章详情 添加日期

pages/articles/[id].tsx

@@ -4,7 +4,8 @@ import { GetServerSideProps } from "next";
 import { addApolloState, initializeApollo } from "../../commons/graphql/client";
 import { ARTICLE } from "../../commons/graphql/queries";
 import { Article } from "../../commons/graphql/generated";
-
+import { format, formatRelative } from "date-fns";
+import { zhCN } from "date-fns/locale";
 interface Props {
   article: Article;
 }
@@ -13,12 +14,20 @@ const ArticleDetails: FC<Props> = ({ article }) => {
   // const { data } = useQuery<{ article: Article }>(ARTICLE, {
   //   variables: router.query,
   // });
+
   return (
     <main className={styles.articleDetails}>
       <article className={styles.article}>
         <header>
           <h1>{article.title}</h1>
-          <time>{article.publishedAt}</time>
+          <div className={styles.headerInfo}>
+            <address>作者 Ivan Li，发布于 </address>
+            <time>
+              {formatRelative(article.publishedAt, new Date(), {
+                locale: zhCN,
+              })}
+            </time>
+          </div>
         </header>
         <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
         <footer>

pages/articles/article.module.css

@@ -9,18 +9,12 @@
   & > header {
     @apply my-8 mx-4;
     h1 {
-      @apply text-4xl font-medium;
+      @apply text-4xl font-medium mb-4;
 
       :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;
@@ -364,7 +358,16 @@
     }
   }
 }
-
+.headerInfo {
+  @apply text-sm text-gray-500 pl-2;
+  :global(.dark) & {
+    @apply text-gray-400;
+  }
+  
+  address, time {
+    @apply inline not-italic;
+  }
+}
 .articleEnd {
   @apply text-center text-gray-400 text-sm my-6;