New page; Post system; Fixed more padding

2 files changed, 61 insertions, 0 deletions

diff --git a/app/updates/[slug]/page.js b/app/updates/[slug]/page.js
new file mode 100644
index 0000000..44c1f07
--- /dev/null
+++ b/app/updates/[slug]/page.js
@@ -0,0 +1,39 @@
+import {readFileSync} from "fs";
+import Markdown from "markdown-to-jsx"
+import matter from "gray-matter";
+import getPostMetadata from "@/components/getPostMetadata";
+
+const getPostContent = (slug) => {
+    const folder = "posts/";
+    const file = `${folder}${slug}.md`;
+    const content = readFileSync(file, "utf-8");
+    return matter(content);
+}
+
+export const generateStaticParams = async () => {
+    const posts = getPostMetadata();
+    return posts.map((post) => ({
+        slug: post.slug,
+    }))
+}
+
+export default function PostPage(props) {
+    const slug = props.params.slug;
+    const post = getPostContent(slug);
+    return (
+        <main>
+            <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
+                <div className="sm:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
+                    <h1 className="font-medium text-4xl">{post.data.title}</h1>
+                    <h2 className="text-sm">{post.data.author} | {post.data.date}</h2>
+                    <h2 className="font-light text-lg">{post.data.description}</h2>
+                </div>
+            </div>
+            <div className="md:px-80 px-20 mx-auto p-6 bg-zinc-800">
+                <article className="prose lg-prose-xl prose-invert">
+                    <Markdown>{post.content}</Markdown>
+                </article>
+            </div>
+        </main>
+    )
+}
diff --git a/app/updates/page.js b/app/updates/page.js
new file mode 100644
index 0000000..3f20871
--- /dev/null
+++ b/app/updates/page.js
@@ -0,0 +1,22 @@
+import getPostMetadata from "@/components/getPostMetadata";
+import PostPreview from "@/components/PostPreview";
+
+export default function Updates() {
+    const postMetadata = getPostMetadata();
+    const postPreviews = postMetadata.map((post) => (
+        <PostPreview key={post.slug} {...post} />
+    ));
+    return (
+        <main className="flex flex-col">
+            <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
+                <div className="md:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
+                    <h1 className="font-medium text-4xl">Updates</h1>
+                    <h2 className="font-light text-lg">Follow the latest updates from the Government of Alure Regions</h2>
+                </div>
+            </div>
+            <div className="md:px-60 px-2 py-3">
+                <div className="px-10 grid grid-cols-1 md:grid-cols-2 gap-4">{postPreviews}</div>
+            </div>
+        </main>
+    )
+}