From a8c6dfd2bd300bd92fbdff43c73e7e2873e94c15 Mon Sep 17 00:00:00 2001
From: suzukalight <mail@mkubara.com>
Date: Sun, 26 Apr 2020 00:11:53 +0900
Subject: [PATCH] Refactor

---
 src/components/date.tsx        | 16 +++++++++---
 src/lib/posts.ts               | 47 ++++++++++------------------------
 src/pages/index.tsx            | 11 +++-----
 src/pages/posts/[id].tsx       | 25 +++++++++---------
 src/pages/posts/first-post.tsx | 21 ---------------
 src/styles/index.css           | 13 +++++-----
 src/types/markdown.d.ts        |  7 +++--
 7 files changed, 52 insertions(+), 88 deletions(-)
 delete mode 100644 src/pages/posts/first-post.tsx

diff --git a/src/components/date.tsx b/src/components/date.tsx
index 23295ac..37bb8b7 100644
--- a/src/components/date.tsx
+++ b/src/components/date.tsx
@@ -1,6 +1,14 @@
+import React, { FC } from "react";
 import { parseISO, format } from "date-fns";
 
-export default function Date({ dateString }: { dateString: string }) {
-  const date = parseISO(dateString);
-  return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time>;
-}
+type DateProps = {
+  dateString: string;
+};
+
+const Date: FC<DateProps> = ({ dateString }) => (
+  <time dateTime={dateString}>
+    {format(parseISO(dateString), "LLLL d, yyyy")}
+  </time>
+);
+
+export default Date;
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index 21720ea..614916d 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -6,10 +6,10 @@ import html from "remark-html";
 
 const postsDirectory = path.join(process.cwd(), "posts");
 
-export function getSortedPostsData() {
+export const getSortedPostsData = () => {
   // Get file names under /posts
   const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData: MatterData[] = fileNames.map((fileName) => {
+  const allPostsData: PostData[] = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
     const id = fileName.replace(/\.md$/, "");
 
@@ -28,41 +28,20 @@ export function getSortedPostsData() {
   });
 
   // Sort posts by date
-  return allPostsData.sort((a, b) => {
-    if (a.date < b.date) {
-      return 1;
-    } else {
-      return -1;
-    }
-  });
-}
+  return allPostsData.sort((a, b) => (a.date < b.date ? 1 : -1));
+};
 
-export function getAllPostIds() {
+export const getAllPostIds = () => {
   const fileNames = fs.readdirSync(postsDirectory);
 
-  // Returns an array that looks like this:
-  // [
-  //   {
-  //     params: {
-  //       id: 'ssg-ssr'
-  //     }
-  //   },
-  //   {
-  //     params: {
-  //       id: 'pre-rendering'
-  //     }
-  //   }
-  // ]
-  return fileNames.map((fileName) => {
-    return {
-      params: {
-        id: fileName.replace(/\.md$/, ""),
-      },
-    };
-  });
-}
+  return fileNames.map((fileName) => ({
+    params: {
+      id: fileName.replace(/\.md$/, ""),
+    },
+  }));
+};
 
-export async function getPostData(id: string) {
+export const getPostData = async (id: string) => {
   const fullPath = path.join(postsDirectory, `${id}.md`);
   const fileContents = fs.readFileSync(fullPath, "utf8");
 
@@ -81,4 +60,4 @@ export async function getPostData(id: string) {
     contentHtml,
     ...matterResult.data,
   };
-}
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 92b3967..a492991 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,8 +3,8 @@ import Head from "next/head";
 import Link from "next/link";
 import { GetStaticProps } from "next";
 
-import Layout, { siteTitle } from "../components/layout";
-import Date from "../components/date";
+import Layout, { siteTitle } from "../components/Layout";
+import Date from "../components/Date";
 
 import { getSortedPostsData } from "../lib/posts";
 
@@ -15,11 +15,7 @@ export const getStaticProps: GetStaticProps = async () => ({
 });
 
 type HomeProps = {
-  allPostsData: {
-    date: string;
-    title: string;
-    id: string;
-  }[];
+  allPostsData: PostData[];
 };
 
 const Home: FC<HomeProps> = ({ allPostsData }) => (
@@ -28,7 +24,6 @@ const Home: FC<HomeProps> = ({ allPostsData }) => (
       <title>{siteTitle}</title>
     </Head>
 
-    <section className="text-xl">…</section>
     <section className="text-xl pt-1">
       <h2 className="text-2xl font-bold my-4">Blog</h2>
 
diff --git a/src/pages/posts/[id].tsx b/src/pages/posts/[id].tsx
index 253d19e..8d3ae5e 100644
--- a/src/pages/posts/[id].tsx
+++ b/src/pages/posts/[id].tsx
@@ -2,8 +2,8 @@ import React, { FC } from "react";
 import { GetStaticProps, GetStaticPaths } from "next";
 import Head from "next/head";
 
-import Layout from "../../components/layout";
-import Date from "../../components/date";
+import Layout from "../../components/Layout";
+import Date from "../../components/Date";
 
 import { getAllPostIds, getPostData } from "../../lib/posts";
 
@@ -12,17 +12,14 @@ export const getStaticPaths: GetStaticPaths = async () => ({
   fallback: false,
 });
 
-export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const postData = await getPostData(params.id as string);
-  return {
-    props: {
-      postData,
-    },
-  };
-};
+export const getStaticProps: GetStaticProps = async ({ params }) => ({
+  props: {
+    postData: await getPostData(params.id as string),
+  },
+});
 
 type PostProps = {
-  postData: MatterData;
+  postData: PostData;
 };
 
 const Post: FC<PostProps> = ({ postData }) => (
@@ -32,10 +29,14 @@ const Post: FC<PostProps> = ({ postData }) => (
     </Head>
 
     <article>
-      <h1 className="text-3xl leading-tight font-extrabold my-4">{postData.title}</h1>
+      <h1 className="text-3xl leading-tight font-extrabold my-4">
+        {postData.title}
+      </h1>
+
       <div className="text-gray-600">
         <Date dateString={postData.date} />
       </div>
+
       <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
     </article>
   </Layout>
diff --git a/src/pages/posts/first-post.tsx b/src/pages/posts/first-post.tsx
deleted file mode 100644
index 6a52369..0000000
--- a/src/pages/posts/first-post.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { FC } from "react";
-import Link from "next/link";
-import Head from "next/head";
-
-import Layout from "../../components/layout";
-
-const FirstPost: FC = () => (
-  <Layout>
-    <Head>
-      <title>First Post</title>
-    </Head>
-    <h1>First Post</h1>
-    <h2>
-      <Link href="/">
-        <a>Back to home</a>
-      </Link>
-    </h2>
-  </Layout>
-);
-
-export default FirstPost;
diff --git a/src/styles/index.css b/src/styles/index.css
index 4ee5cab..d4f8650 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,4 +1,3 @@
-
 /* purgecss start ignore */
 @tailwind base;
 @tailwind components;
@@ -26,12 +25,6 @@ img {
   display: block;
 }
 
-/* purgecss start ignore */
-article p {
-  margin: 1em 0;
-}
-/* purgecss end ignore */
-
 article ul {
   display: block;
   list-style-type: disc;
@@ -43,3 +36,9 @@ article li {
   display: list-item;
   text-align: match-parent;
 }
+
+/* purgecss start ignore */
+article p {
+  margin: 1em 0;
+}
+/* purgecss end ignore */
diff --git a/src/types/markdown.d.ts b/src/types/markdown.d.ts
index 44ff33c..56b19d0 100644
--- a/src/types/markdown.d.ts
+++ b/src/types/markdown.d.ts
@@ -1,3 +1,6 @@
-type MatterData = matter.GrayMatterFile<string> & {
-  id: string;
+type PostData = matter.GrayMatterFile<string> & {
+  date: string;
+  title: string;
+  id?: string;
+  contentHtml?: string;
 };