From fe98e26e08d74b36f226ec1ac9c95b469623ba52 Mon Sep 17 00:00:00 2001
From: dogukanVaris <varisdogukan@outlook.com>
Date: Fri, 18 Oct 2024 19:51:55 +0300
Subject: [PATCH 1/2] blog posts listed

---
 src/app/page.js | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/app/page.js b/src/app/page.js
index c0eb9457..f752cd72 100644
--- a/src/app/page.js
+++ b/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>
   );
 }

From 966e0b96d4c679fb957aaec5a4a5cbae544db958 Mon Sep 17 00:00:00 2001
From: dogukanVaris <varisdogukan@outlook.com>
Date: Sun, 20 Oct 2024 12:15:41 +0300
Subject: [PATCH 2/2] Displaying mdx

---
 src/app/[postSlug]/page.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/app/[postSlug]/page.js b/src/app/[postSlug]/page.js
index 19df3630..6b620991 100644
--- a/src/app/[postSlug]/page.js
+++ b/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>
   );