Part 28: Enhancing Your Blog with Front Matter in Markdown

Enhancing Your Blog with Front Matter in Markdown

In our previous post, we configured the Tailwind Typography plugin to style our review articles. Now, let's take it a step further by organizing all the data for each review in a single Markdown file. This will not only include the article text but also additional metadata such as the title, image path, and publication date.

What is Front Matter?

Front matter is a way to include metadata at the top of your Markdown files. This metadata is written in YAML format and is enclosed between triple dashes (---). By using front matter, we can keep all the relevant data for each review in one place, making our components cleaner and more reusable.

Adding Front Matter to Your Markdown File

Let's start by adding front matter to our Markdown file. Open your Markdown file (content/reviews/stardew-valley.md) and add the following at the top:

---
title: "Stardew Valley"
date: "2023-05-04"
image: "/images/stardew-valley.jpg"
---

__Stardew Valley__ is a simulation role-playing video game developed by Eric "ConcernedApe" Barone. Players take the role of a character who inherits their deceased grandfather's dilapidated farm in a place known as Stardew Valley. The game was released for Windows in February 2016 before being ported to other platforms.

Stardew Valley is open-ended, allowing players to grow crops, raise livestock, fish, cook, mine, forage, and socialize with the townspeople, including the ability to marry and have children. It allows up to four players to play online together.

This front matter section includes the title, publication date, and image path for the review.

Parsing Front Matter with gray-matter

To extract the front matter from our Markdown file, we can use a package called gray-matter. This package parses the front matter and returns an object containing both the metadata and the Markdown content.

Installing gray-matter

First, let's install gray-matter. Open your terminal and run:

npm install gray-matter

Using gray-matter in Your Component

Now, let's update our component to use gray-matter to parse the front matter. Update your component as follows:

import { readFile } from 'node:fs/promises';
import matter from 'gray-matter';
import { marked } from 'marked';
import Heading from '@/components/Heading';

export default async function StardewValleyPage() {
  const text = await readFile('./content/reviews/stardew-valley.md', 'utf8');
  const { content, data: { title, date, image } } = matter(text);
  const html = marked(content);

  return (
    <>
      <Heading>{title}</Heading>
      <p className="italic pb-2">{date}</p>
      <img src={image} alt={title} width="640" height="360" className="mb-2 rounded" />
      <article dangerouslySetInnerHTML={{ __html: html }} className="prose prose-slate max-w-screen-sm" />
    </>
  );
}

Explanation of the Code

• Importing Libraries: We import the necessary libraries including gray-matter and marked.

• Reading the Markdown File: We read the Markdown file using readFile.

• Parsing Front Matter: We use matter(text) to parse the front matter, extracting the content and data.

• Converting Markdown: We convert the Markdown content to HTML using marked.

• Rendering the Component: We use the extracted title, date, and image in our JSX, ensuring all data is dynamically sourced from the Markdown file.

Benefits of Using Front Matter

By using front matter, we achieve several benefits:

1. Separation of Concerns: All metadata and content for a review are kept in one file, making it easier to manage.

2. Reusability: The component becomes more reusable, as it can display different reviews by simply changing the Markdown file.

3. Cleaner Code: The JSX in our component no longer contains hard-coded values, making it cleaner and easier to understand.

Conclusion

In this post, we learned how to enhance our blog by using front matter in Markdown files. This approach helps us keep all relevant data in one place and makes our components more reusable and easier to maintain. By leveraging the gray-matter package, we can easily parse front matter and use it in our React components.

In the next posts, we'll explore how to make our review component fully reusable and capable of displaying data for any review, further enhancing the flexibility of our blog.

Happy coding!