Feat: Add frontmatter

example/pages/blog/[slug].jsx

@@ -11,8 +11,8 @@ async function convertPostToHtml(fileContents) {
     renderEmbeds: true,
   };
 
-  const { contentHtml, toc, readingTime } = await processMarkdown(fileContents, options);
-  return { contentHtml, toc, readingTime };
+  const { contentHtml, toc, readingTime, frontMatter } = await processMarkdown(fileContents, options);
+  return { contentHtml, toc, readingTime, frontMatter };
 }
 
 export async function getStaticPaths() {
@@ -24,16 +24,16 @@ export async function getStaticProps({ params }) {
   const allPosts = getAllPosts();
   const { fileContents } = allPosts.find(post => post.id === params.slug);
   const postData = await convertPostToHtml(fileContents);
-  return { props: { postData, slug: params.slug } };
+  return { props: { postData } };
 }
 
-export default function Post({ postData, slug }) {
+export default function Post({ postData }) {
   return (
-    <article>
-      <h1 className="text-5xl">{slug}</h1>
-      <p>Reading time: {postData.readingTime} min</p>
+    <article className="max-w-3xl mx-auto py-12">
+      <h1 className="text-5xl font-semibold">{postData.frontMatter.title}</h1>
+      <p className="my-2">Reading time: {postData.readingTime} min</p>
       <div>
-        <h3 className="text-2xl">Table of Contents</h3>
+        <h3 className="text-xl">Table of Contents</h3>
         <div dangerouslySetInnerHTML={{ __html: postData.toc }} />
       </div>
       <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />

example/posts/example.md

@@ -1,6 +1,12 @@
-# Welcome to the Example Post
+---
+title: "Welcome to the Example Post"
+date: "2023-12-15"
+author: "Your Name"
+summary: "This post demonstrates various Markdown features supported by our processor."
+tags: ["Markdown", "Formatting", "Guide"]
+---
 
-This post demonstrates various Markdown features supported by our processor.
+Welcome! This post demonstrates various Markdown features supported by our processor.
 
 ## Styling Text
 

package.json

@@ -29,9 +29,11 @@
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-html": "^16.0.1",
-    "remark-rehype": "^11.0.0"
+    "remark-rehype": "^11.0.0",
+    "yaml": "^2.3.4"
   },
   "devDependencies": {
     "@babel/core": "^7.23.6",

src/processMarkdown.js

@@ -1,6 +1,8 @@
 import { remark } from 'remark';
 import html from 'remark-html';
 import gfm from 'remark-gfm';
+import frontmatter from 'remark-frontmatter';
+import yaml from 'yaml';
 import remarkRehype from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
 import rehypeRaw from 'rehype-raw';
@@ -9,7 +11,7 @@ import addHeadingIds from './plugins/addHeadingIds.js';
 import addTableOfContents from './plugins/addTableOfContents.js';
 import calculateReadingTime from './plugins/calculateReadingTime.js';
 import embed from './plugins/embed.js';
-import wrapWithDiv from './helpers/wrapWithDiv.js'
+import wrapWithDiv from './helpers/wrapWithDiv.js';
 
 export default async function processMarkdown(markdownContent, options = {}) {
   const defaultWrapConfig = {
@@ -18,11 +20,19 @@ export default async function processMarkdown(markdownContent, options = {}) {
   };
 
   const wrapConfig = { ...defaultWrapConfig, ...(options.wrapConfig || {}) };
-
+  let frontMatterData = null;
   let tableOfContents = null;
   let readingTime = null;
 
-  const processor = remark().use(html).use(gfm).use(remarkRehype, { allowDangerousHtml: true }).use(wrapElements, wrapConfig);
+  const processor = remark()
+    .use(frontmatter, ['yaml'])
+    .use(() => tree => {
+      frontMatterData = extractFrontMatter(tree);
+    })
+    .use(html)
+    .use(gfm)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(wrapElements, wrapConfig);
 
   if (options.addHeadingIds) {
     processor.use(addHeadingIds);
@@ -53,8 +63,14 @@ export default async function processMarkdown(markdownContent, options = {}) {
   const wrappedContentHtml = wrapWithDiv(processedContent.toString(), 'markdown');
 
   return {
+    frontMatter: frontMatterData,
     contentHtml: wrappedContentHtml,
     toc: tableOfContents,
     readingTime: readingTime,
   };
 }
+
+function extractFrontMatter(tree) {
+  const frontMatterNode = tree.children.find(node => node.type === 'yaml');
+  return frontMatterNode ? yaml.parse(frontMatterNode.value) : {};
+}