From b5b66d3841cebac5ab34744e63fc60e2a69a7252 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sat, 15 Jul 2023 13:43:54 -0400
Subject: New page; Post system; Fixed more padding

---
 app/layout.js               | 22 +++++++++-------------
 app/not-found.js            |  2 +-
 app/page.js                 | 27 ++++++++++++++++-----------
 app/travel-advisory/page.js | 11 ++++++++---
 app/updates/[slug]/page.js  | 39 +++++++++++++++++++++++++++++++++++++++
 app/updates/page.js         | 22 ++++++++++++++++++++++
 6 files changed, 95 insertions(+), 28 deletions(-)
 create mode 100644 app/updates/[slug]/page.js
 create mode 100644 app/updates/page.js

(limited to 'app')

diff --git a/app/layout.js b/app/layout.js
index 118fad1..97c14ab 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -6,7 +6,10 @@ import Image from "next/image";
 const exo = Exo({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Government of Alure Regions',
+  title: {
+      template: '%s - Government of Alure Regions',
+      default: 'Government of Alure Regions'
+  },
   description: 'The official website of the Government of Alure Regions',
 }
 
@@ -38,29 +41,22 @@ export default function RootLayout({ children }) {
                   <ul className="font-medium text-lg flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-8 md:mt-0">
                       {[
                           ['Home', '/'],
-                          ['Updates', '#'],
+                          ['Updates', '/updates'],
                           ['Services', '#'],
-                          ['Travel Advisory', 'travel-advisory'],
+                          ['Travel Advisory', '/travel-advisory'],
                       ].map(([title, url]) => (
-                          // eslint-disable-next-line react/jsx-key
-                          <li>
-                              <Link href={url} className="transition duration-150 ease-out hover:ease-in block py-2 pl-3 pr-4 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent">
+                          <li key="links">
+                              <Link href={url} className="transition duration-150 ease-out hover:ease-in block py-2 pl-3 pr-4 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent" aria-current="page">
                                   {title}
                               </Link>
                           </li>
                       ))}
-                      { /*<li>
-                          <a href="#"
-                             className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
-                             aria-current="page">Home</a>
-                      </li> */}
-
                   </ul>
               </div>
           </div>
       </nav>
       {children}
-      <footer className="flex flex-col text-center py-3 space-y-2 bg-blue-950 text-light text-sm sm:text-base">
+      <footer className="flex flex-col text-center py-3 space-y-2 bg-blue-950 text-light text-sm sm:text-base px-5 sm:px-0">
           <p>Alure Regions is a fictional country made for the bits & Bytes Minecraft Server</p>
           <p>This website is proudly written using Next.JS and Tailwind CSS</p>
       </footer>
diff --git a/app/not-found.js b/app/not-found.js
index a3a3571..4046e54 100644
--- a/app/not-found.js
+++ b/app/not-found.js
@@ -5,7 +5,7 @@ export default function NotFound() {
         <main className="flex flex-col justify-center context-center text-center p-2">
             <h1 className="text-2xl font-bold">404</h1>
             <h1 className="text-2xl font-bold">The page you are looking for does not exist.</h1>
-            <Link href='/'><p className="text-cyan-600 hover:text-cyan-500">Head back to the home page</p></Link>
+            <Link href='/'><p className="text-cyan-600 hover:text-cyan-500">Head back to the homepage</p></Link>
         </main>
     )
 }
diff --git a/app/page.js b/app/page.js
index dd8513d..188c214 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: 'Home - Government of Alure Regions',
+    description: 'The official website of the Government of Alure Regions',
+}
 export default function Home() {
   return (
     <main className="flex flex-col">
@@ -10,8 +14,8 @@ export default function Home() {
             <ul>
                 <li>
                     <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
-                        <div className="sm:px-40 px-10 py-10 space-y-2">
-                            <h1 className="font-medium text-5xl">Alee Isle</h1>
+                        <div className="sm:px-40 px-10 py-14 space-y-2">
+                            <h1 className="font-medium sm:text-5xl text-3xl">Alee Isle</h1>
                             <span>Est. 2017 - Premier: Alee</span>
                             <h2 className="text-lg">Capital of Alure Regions and the original home of MinePot</h2>
                         </div>
@@ -19,17 +23,17 @@ export default function Home() {
                 </li>
                 <li>
                     <div className="bg-center bg-no-repeat bg-[url('/regions/breadcroust.webp')] bg-gray-600 bg-blend-multiply">
-                        <div className="sm:px-40 px-10 py-10 space-y-2">
-                            <h1 className="font-medium text-5xl">BreadCroust</h1>
+                        <div className="sm:px-40 px-10 py-14 space-y-2">
+                            <h1 className="font-medium sm:text-5xl text-3xl">BreadCroust</h1>
                             <span>Est. 2018 - Premier: Croust</span>
-                            <h2 className="text-lg">Home to MinePot Barton Centre</h2>
+                            <h2 className="text-lg">Home to MinePot Barton Centre and athletics</h2>
                         </div>
                 </div>
                 </li>
                 <li>
                     <div className="bg-center bg-no-repeat bg-[url('/regions/skycity.webp')] bg-gray-600 bg-blend-multiply">
-                        <div className="sm:px-40 px-10 py-10 space-y-2">
-                            <h1 className="font-medium text-5xl">SkyCity</h1>
+                        <div className="sm:px-40 px-10 py-14 space-y-2">
+                            <h1 className="font-medium sm:text-5xl text-3xl">SkyCity</h1>
                             <span>Est. 2018 - Premier: Rahilu</span>
                          <h2 className="text-lg">A city that floats in the sky</h2>
                         </div>
@@ -37,17 +41,18 @@ export default function Home() {
                 </li>
                 <li>
                     <div className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply">
-                        <div className="sm:px-40 px-10 py-10 space-y-2">
-                            <h1 className="font-medium text-5xl">Silicon Valley</h1>
+                        <div className="sm:px-40 px-10 py-14 space-y-2">
+                            <h1 className="font-medium sm:text-5xl text-3xl">Silicon Valley</h1>
                             <span>Est. 2018 - Premier: Inkydink</span>
-                            <h2 className="text-lg">Where all tech-related things goes here</h2>
+                            <h2 className="text-lg">Where all things tech-related lie</h2>
                         </div>
                     </div>
                 </li>
             </ul>
         <div className="sm:px-40 px-10 py-3">
-            <h1 className="text-2xl font-medium">About Alure Regions</h1>
+            <h1 className="text-2xl font-medium" id="about">About Alure Regions</h1>
             <p>Founded in July 2023, the goal of Alure Regions is to have more freedom on our regions.</p>
+            <h1 className="text-2xl font-medium">Latest Updates</h1>
         </div>
     </main>
   )
diff --git a/app/travel-advisory/page.js b/app/travel-advisory/page.js
index 3ce0de0..8dbd639 100644
--- a/app/travel-advisory/page.js
+++ b/app/travel-advisory/page.js
@@ -1,14 +1,19 @@
+export const metadata = {
+    title: 'Travel Advisory',
+    description: 'Information whether its safe to travel to other countries',
+}
+
 export default function TravelAdvisory(){
     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="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">Travel Advisory</h1>
-                    <h2 className="font-light text-lg">Information whether its safe to travel to other countries</h2>
+                    <h1 className="font-medium text-4xl">{metadata.title}</h1>
+                    <h2 className="font-light text-lg">{metadata.description}</h2>
                 </div>
             </div>
             <div>
-                <h1 className="p-5 sm:px-40 px-10 text-3xl">Legend</h1>
+                <h1 className="p-5 sm:px-40 px-10 text-3xl" id="legend">Legend</h1>
                 <ul>
                     <li className="p-6 sm:px-40 px-10 bg-green-950">
                         <p className="font-medium text-lg">Take normal security precautions</p>
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>
+    )
+}
-- 
cgit v1.2.3