Refactor content

Author: wutali

package.json

@@ -12,8 +12,10 @@
   "dependencies": {
     "@mapbox/rehype-prism": "^0.5.0",
     "@svgr/webpack": "^5.4.0",
+    "@types/js-yaml": "^3.12.5",
     "date-fns": "^2.11.1",
     "gray-matter": "^4.0.2",
+    "js-yaml": "^3.14.0",
     "next": "9.5.1",
     "next-mdx-enhanced": "^3.1.0",
     "normalize.css": "^8.0.1",

src/components/Date.tsx

@@ -1,7 +1,9 @@
-import { parseISO, formatISO, format } from "date-fns";
+import { format, formatISO } from "date-fns";
 
-export default function Date({ dateString }: { dateString: string }) {
-  const date = parseISO(dateString);
+type Props = {
+  date: Date;
+};
+export default function Date({ date }: Props) {
   return (
     <time dateTime={formatISO(date)}>
       <span>{format(date, "LLLL d, yyyy")}</span>

src/components/PostItem.tsx

@@ -1,6 +1,7 @@
 import { PostContent } from "../lib/posts";
 import Date from "./Date";
 import Link from "next/link";
+import { parseISO } from "date-fns";
 
 type Props = {
   post: PostContent;
@@ -9,7 +10,7 @@ export default function PostItem({ post }: Props) {
   return (
     <Link href={"/posts/" + post.slug}>
       <a>
-        <Date dateString={post.date} />
+        <Date date={parseISO(post.date)} />
         <h2>{post.title}</h2>
         <style jsx>
           {`

src/components/meta/JsonLdMeta.tsx

@@ -7,7 +7,7 @@ type Props = {
   url: string;
   title: string;
   keywords?: string[];
-  dateString: string;
+  date: Date;
   author?: string;
   image?: string;
   description?: string;
@@ -16,12 +16,11 @@ export default function JsonLdMeta({
   url,
   title,
   keywords,
-  dateString,
+  date,
   author,
   image,
   description,
 }: Props) {
-  const date = parseISO(dateString);
   return (
     <script
       {...jsonLdScriptProps<BlogPosting>({

src/layouts/index.tsx

@@ -16,7 +16,7 @@ import { getTag } from "../lib/tags";
 
 type Props = {
   title: string;
-  date: string;
+  date: Date;
   slug: string;
   description: string;
   tags: string[];
@@ -56,7 +56,7 @@ export default function Index({
             url={`/posts/${slug}`}
             title={title}
             keywords={keywords}
-            dateString={date}
+            date={date}
             author={authorName}
             description={description}
           />
@@ -67,7 +67,7 @@ export default function Index({
               <h1>{title}</h1>
               <div className={"metadata"}>
                 <div>
-                  <Date dateString={date} />
+                  <Date date={date} />
                 </div>
                 <div>
                   <Author author={getAuthor(author)} />

src/lib/posts.ts

@@ -1,6 +1,7 @@
 import fs from "fs";
 import matter from "gray-matter";
 import path from "path";
+import yaml from "js-yaml";
 
 const postsDirectory = path.join(process.cwd(), "src/pages/posts");
 
@@ -27,7 +28,11 @@ function fetchPostContent(): PostContent[] {
       const fileContents = fs.readFileSync(fullPath, "utf8");
 
       // Use gray-matter to parse the post metadata section
-      const matterResult = matter(fileContents);
+      const matterResult = matter(fileContents, {
+        engines: {
+          yaml: (s) => yaml.safeLoad(s, { schema: yaml.JSON_SCHEMA }),
+        },
+      });
       const matterData = matterResult.data as {
         date: string;
         title: string;

yarn.lock

@@ -1727,6 +1727,11 @@
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
 
+"@types/js-yaml@^3.12.5":
+  version "3.12.5"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.5.tgz#136d5e6a57a931e1cce6f9d8126aa98a9c92a6bb"
+  integrity sha512-JCcp6J0GV66Y4ZMDAQCXot4xprYB+Zfd3meK9+INSJeVZwJmHAW30BBEEkPzXswMXuiyReUGOP3GxrADc9wPww==
+
 "@types/json-schema@^7.0.4":
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
@@ -5399,7 +5404,7 @@ jest@^26.3.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.11.0, js-yaml@^3.13.1:
+js-yaml@^3.11.0, js-yaml@^3.13.1, js-yaml@^3.14.0:
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
   integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==