5 files changed, 53 insertions, 5 deletions
diff --git a/app/updates/DateFormatter.js b/app/updates/DateFormatter.js
new file mode 100644
index 0000000..9e236d0
--- /dev/null
+++ b/app/updates/DateFormatter.js
@@ -0,0 +1,9 @@
+
+import { parseISO, format } from 'date-fns'
+
+const DateFormatter = (dateString) => {
+  const date = parseISO(dateString)
+  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+}
+
+export default DateFormatter
diff --git a/app/updates/PostPreview.js b/app/updates/PostPreview.js
new file mode 100644
index 0000000..23e2176
--- /dev/null
+++ b/app/updates/PostPreview.js
@@ -0,0 +1,15 @@
+import Link from "next/link";
+import DateFormatter from '@/app/updates/DateFormatter'
+
+export default function PostPreview(props) {
+ return (
+     <div key="post" className="bg-zinc-800 py-3 px-5 border border-gray-600 rounded-lg space-y-3">
+         <Link href={`/updates/${props.slug}`}>
+             <h2 className="font-medium text-2xl hover:underline">{props.title}</h2>
+         </Link>
+         <span className="text-sm">{props.author}</span>
+         <p>{props.description}</p>
+         <p className="font-medium text-sm">Posted on {DateFormatter(props.date)}</p>
+     </div>
+ )
+}
diff --git a/app/updates/[slug]/page.js b/app/updates/[slug]/page.js
index d91440e..102a98a 100644
--- a/app/updates/[slug]/page.js
+++ b/app/updates/[slug]/page.js
@@ -1,8 +1,8 @@
 import {readFileSync} from "fs";
 import Markdown from "markdown-to-jsx"
 import matter from "gray-matter";
-import getPostMetadata from "@/components/updates/getPostMetadata";
-import DateFormatter from "@/components/updates/DateFormatter";
+import getPostMetadata from "@/app/updates/getPostMetadata";
+import DateFormatter from "@/app/updates/DateFormatter";
 
 const getPostContent = (slug) => {
     const folder = "posts/";
diff --git a/app/updates/getPostMetadata.js b/app/updates/getPostMetadata.js
new file mode 100644
index 0000000..515cc79
--- /dev/null
+++ b/app/updates/getPostMetadata.js
@@ -0,0 +1,24 @@
+import {readdirSync, readFileSync} from "fs";
+import matter from "gray-matter";
+
+export default function getPostMetadata() {
+    const folder = "posts/";
+    const files = readdirSync(folder);
+    const markdownPosts = files.filter((file) => file.endsWith(".md"));
+
+    const posts = markdownPosts.map((fileName) => {
+        const fileContent = readFileSync(`posts/${fileName}`, "utf-8");
+        const matterResult = matter(fileContent);
+        return {
+            title: matterResult.data.title,
+            author: matterResult.data.author,
+            date: matterResult.data.date,
+            description: matterResult.data.description,
+            slug: fileName.replace(".md", "")
+        }
+    })
+
+    // Sort the posts by date in descending order
+    posts.sort((a, b) => new Date(b.date) - new Date(a.date));
+    return posts
+}
diff --git a/app/updates/page.js b/app/updates/page.js
index 04215c9..148c135 100644
--- a/app/updates/page.js
+++ b/app/updates/page.js
@@ -1,6 +1,6 @@
-import getPostMetadata from "@/components/updates/getPostMetadata";
-import PostPreview from "@/components/updates/PostPreview";
-import Header from "@/components/Header";
+import getPostMetadata from "@/app/updates/getPostMetadata";
+import PostPreview from "@/app/updates/PostPreview";
+import Header from "@/app/Header";
 
 export const metadata = {
     title: 'Updates',