Dynamic route and APIs

components/date.js

@@ -0,0 +1,10 @@
+import { parseISO, format } from "date-fns";
+
+export default function Date({ dateString }) {
+    console.info(dateString)
+
+    const date = parseISO(dateString);
+    return <time dateTime={dateString}>
+        {format(date, 'LLLL d, yyyy')}
+    </time>
+}

lib/posts.js

@@ -1,6 +1,8 @@
 import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
+import remark from "remark";
+import html from "remark-html";
 
 const postsDirectory = path.join(process.cwd(), 'posts');
 
@@ -34,4 +36,27 @@ export function getSortedPostsData() {
             return 0
         }
     })
+}
+
+export function getAllPostIds() {
+    return fs.readdirSync(postsDirectory).map(fileName => {
+        return {
+            params: {
+                id: fileName.replace(/\.md$/, '')
+            }
+        }
+    })
+}
+
+export async function getPostData(id) {
+    const fullPath = path.join(postsDirectory, `${id}.md`);
+    const fileContents = fs.readFileSync(fullPath, 'utf8')
+    const matterResults = matter(fileContents)
+
+    const processedContents = await remark().use(html).process(matterResults.content)
+    const contentHtml = processedContents.toString()
+
+    return {
+        id, ...matterResults.data, contentHtml
+    }
 }