Feat/displaying mdx

src/app/[postSlug]/page.js

@@ -1,23 +1,22 @@
-import React from 'react';
+import React from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
 
-import BlogHero from '@/components/BlogHero';
+import BlogHero from "@/components/BlogHero";
 
-import styles from './postSlug.module.css';
+import styles from "./postSlug.module.css";
+import { loadBlogPost } from "@/helpers/file-helpers";
+
+async function BlogPost({ params }) {
+  const { frontmatter, content } = await loadBlogPost(params.postSlug);
 
-function BlogPost() {
   return (
     <article className={styles.wrapper}>
       <BlogHero
-        title="Example post!"
-        publishedOn={new Date()}
+        title={frontmatter.title}
+        publishedOn={frontmatter.publishedOn}
       />
       <div className={styles.page}>
-        <p>This is where the blog post will go!</p>
-        <p>
-          You will need to use <em>MDX</em> to render all of
-          the elements created from the blog post in this
-          spot.
-        </p>
+        <MDXRemote source={content} />
       </div>
     </article>
   );

src/app/page.js

@@ -1,23 +1,26 @@
-import React from 'react';
+import React from "react";
 
-import BlogSummaryCard from '@/components/BlogSummaryCard';
+import BlogSummaryCard from "@/components/BlogSummaryCard";
+import { getBlogPostList } from "@/helpers/file-helpers";
 
-import styles from './homepage.module.css';
+import styles from "./homepage.module.css";
+
+async function Home() {
+  const blogPosts = await getBlogPostList();
 
-function Home() {
   return (
     <div className={styles.wrapper}>
-      <h1 className={styles.mainHeading}>
-        Latest Content:
-      </h1>
+      <h1 className={styles.mainHeading}>Latest Content:</h1>
 
-      {/* TODO: Iterate over the data read from the file system! */}
-      <BlogSummaryCard
-        slug="example"
-        title="Hello world!"
-        abstract="This is a placeholder, an example which shows how the “BlogSummaryCard” component should be used. You'll want to swap this out based on the data from the various MDX files!"
-        publishedOn={new Date()}
-      />
+      {blogPosts.map((blog) => (
+        <BlogSummaryCard
+          key={blog.slug}
+          slug={blog.slug}
+          title={blog.title}
+          abstract={blog.abstract}
+          publishedOn={blog.publishedOn}
+        />
+      ))}
     </div>
   );
 }