diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/layout.js | 22 | ||||
| -rw-r--r-- | app/not-found.js | 2 | ||||
| -rw-r--r-- | app/page.js | 27 | ||||
| -rw-r--r-- | app/travel-advisory/page.js | 11 | ||||
| -rw-r--r-- | app/updates/[slug]/page.js | 39 | ||||
| -rw-r--r-- | app/updates/page.js | 22 |
6 files changed, 95 insertions, 28 deletions
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> + ) +} |