diff options
| -rw-r--r-- | .idea/misc.xml | 3 | ||||
| -rw-r--r-- | app/page.js | 16 | ||||
| -rw-r--r-- | app/services/page.js | 38 | ||||
| -rw-r--r-- | app/updates/[slug]/page.js | 14 | ||||
| -rw-r--r-- | components/travel-advisory/HistoryModal.js | 2 | ||||
| -rw-r--r-- | components/updates/DateFormatter.js | 2 | ||||
| -rw-r--r-- | components/updates/getPostMetadata.js | 6 | ||||
| -rw-r--r-- | posts/welcome.md | 2 |
8 files changed, 73 insertions, 10 deletions
diff --git a/.idea/misc.xml b/.idea/misc.xml index 30bab2a..1b13713 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -4,4 +4,7 @@ <option name="show" value="ASK" /> <option name="description" value="" /> </component> + <component name="JavaScriptSettings"> + <option name="languageLevel" value="FLOW" /> + </component> </project>
\ No newline at end of file diff --git a/app/page.js b/app/page.js index ec05d34..60f5965 100644 --- a/app/page.js +++ b/app/page.js @@ -1,8 +1,16 @@ +import getPostMetadata from "@/components/updates/getPostMetadata"; +import PostPreview from "@/components/updates/PostPreview"; +import Link from "next/link"; + export const metadata = { title: 'Home - Government of Alure Regions', description: 'The official website of the Government of Alure Regions', } export default function Home() { + const postMetadata = getPostMetadata(); + const postPreviews = postMetadata.slice(0,3).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-500 bg-blend-multiply"> @@ -51,10 +59,12 @@ export default function Home() { </ul> <div className="sm:px-40 px-10 py-3 space-y-3"> <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> - <p>Originally Alee Isle Regions then formed to become Southeastern Islands and then split from it.</p> - <p>We strife on trying to become stronger and better, as small regions.</p> + <p>Alure Regions was founded in July 2023 with the goal of achieving greater autonomy in our regions.</p> + <p>Originally known as Alee Isle Regions, we later became Southeastern Islands before branching out on our own.</p> + <p>We are committed to continuous improvement and growth as small regions.</p> <h1 className="text-2xl font-medium">Latest Updates</h1> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4">{postPreviews}</div> + <Link href="/updates"><p className="text-blue-500 hover:text-blue-300 pt-2">View more</p></Link> </div> </main> ) diff --git a/app/services/page.js b/app/services/page.js index 3e0044d..c91b92e 100644 --- a/app/services/page.js +++ b/app/services/page.js @@ -2,13 +2,49 @@ import Header from "@/components/Header"; export const metadata = { title: 'Services', - description: 'Information whether its safe to travel to other countries', + description: 'Local services that we have here in Alure Regions', } export default function Services() { return ( <main className="flex flex-col"> <Header title={metadata.title} description={metadata.description} /> + <div> + <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-14 space-y-2"> + <h1 className="font-medium sm:text-4xl text-3xl">Alure Post</h1> + <h2 className="text-xl">Local and international postal service</h2> + </div> + </div> + </li> + <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-14 space-y-2"> + <h1 className="font-medium sm:text-4xl text-3xl">ExploreAlure</h1> + <h2 className="text-xl">Tourism service</h2> + </div> + </div> + </li> + <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-14 space-y-2"> + <h1 className="font-medium sm:text-4xl text-3xl">MinePot</h1> + <h2 className="text-xl">International restaurant</h2> + </div> + </div> + </li> + <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-14 space-y-2"> + <h1 className="font-medium sm:text-4xl text-3xl">Intel Computer Shop</h1> + <h2 className="text-xl">International computer shop</h2> + </div> + </div> + </li> + </ul> + </div> </main> ) } diff --git a/app/updates/[slug]/page.js b/app/updates/[slug]/page.js index aa0ef9b..d91440e 100644 --- a/app/updates/[slug]/page.js +++ b/app/updates/[slug]/page.js @@ -11,6 +11,16 @@ const getPostContent = (slug) => { return matter(content); } +export function generateMetadata(props) { + const slug = props.params.slug; + const post = getPostContent(slug); + + return { + title: post.data.title, + description: post.data.description + } +} + export const generateStaticParams = async () => { const posts = getPostMetadata(); return posts.map((post) => ({ @@ -26,12 +36,12 @@ export default function PostPage(props) { <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} | {DateFormatter(post.data.date)}</h2> + <span className="text-sm">{post.data.author} | {DateFormatter(post.data.date)}</span> <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"> + <article className="prose lg-prose-xl prose-invert prose-headings:font-medium"> <Markdown>{post.content}</Markdown> </article> </div> diff --git a/components/travel-advisory/HistoryModal.js b/components/travel-advisory/HistoryModal.js index ad9c039..9ff835a 100644 --- a/components/travel-advisory/HistoryModal.js +++ b/components/travel-advisory/HistoryModal.js @@ -17,7 +17,7 @@ const HistoryModal = ({ isVisible, onClose, countries, dangerLevel, history }) = return ( <div id="wrapper" className="fixed inset-0 bg bg-opacity-25 backdrop-blur-sm flex justify-center items-center" onClick={handleClose}> - <div className="w-[600px]"> + <div className="w-[700px]"> <div className="flex flex-col"> <div className="bg-zinc-800 p-5 rounded-lg border border-gray-700"> <div className="divide-y space-y-3"> diff --git a/components/updates/DateFormatter.js b/components/updates/DateFormatter.js index 11f3bf3..9e236d0 100644 --- a/components/updates/DateFormatter.js +++ b/components/updates/DateFormatter.js @@ -6,4 +6,4 @@ const DateFormatter = (dateString) => { return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time> } -export default DateFormatter
\ No newline at end of file +export default DateFormatter diff --git a/components/updates/getPostMetadata.js b/components/updates/getPostMetadata.js index 88e4566..515cc79 100644 --- a/components/updates/getPostMetadata.js +++ b/components/updates/getPostMetadata.js @@ -6,7 +6,7 @@ export default function getPostMetadata() { const files = readdirSync(folder); const markdownPosts = files.filter((file) => file.endsWith(".md")); - return markdownPosts.map((fileName) => { + const posts = markdownPosts.map((fileName) => { const fileContent = readFileSync(`posts/${fileName}`, "utf-8"); const matterResult = matter(fileContent); return { @@ -17,4 +17,8 @@ export default function getPostMetadata() { 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/posts/welcome.md b/posts/welcome.md index 8074672..2f94d8b 100644 --- a/posts/welcome.md +++ b/posts/welcome.md @@ -1,6 +1,6 @@ --- title: Website Launched -description: Our new website is now available +description: Our new website is now available! author: The President of the Alure Regions date: '2023-07-15' tags: ['announcement'] |