Refactor

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;

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

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>
 

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>

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 */

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