feat(blog): new dynamic page to display a single blog post

corp-0 · corp-0 · commit bc7bd407d51a · 2023-01-31T21:33:55.000-03:00
diff --git a/components/blog/post.tsx b/components/blog/post.tsx
@@ -16,9 +16,9 @@ const Post = (props: BlogPost) => {
                                 <h1 className="mb-4 text-4xl text-center font-extrabold leading-tight lg:mb-6 text-white">
                                     {title}
                                 </h1>
-                                <a href="#" rel="author" className="text-xl font-bold text-white">by {author}</a>
+                                <p className="text-xl font-bold text-white">by {author}</p>
                                 <p className="text-base font-light text-gray-500 dark:text-gray-400">
-                                    <time dateTime={date_created.toString()} title={date_created.toString()}>
+                                    <time dateTime={date_created?.toString()} title={date_created?.toString()}>
                                         {toAgoTime(date_created)}
                                     </time>
                                 </p>
@@ -27,7 +27,7 @@ const Post = (props: BlogPost) => {
                     </address>
                 </header>
                 <div className={'flex flex-col'}>
-                    {sections.map((section, index) => {
+                    {!!sections && sections.map((section, index) => {
                         return (
                             <Section
                                 key={index}
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -0,0 +1,60 @@
+import {NextPage} from "next";
+import Post from "../../components/blog/post";
+import React, {useEffect, useState} from "react";
+import {BlogPost} from "../../types/blogPost";
+import {useRouter} from 'next/router';
+import Head from "next/head";
+
+const PostPage: NextPage = () => {
+    const router = useRouter();
+    const {slug} = router.query;
+    const [post, setPost] = useState({} as BlogPost);
+
+    useEffect(() => {
+        if (!router.isReady) return;
+        fetch(`https://changelog.unitystation.org/posts/${slug}`)
+            .then(response => response.json())
+            .then(json => setPost(json))
+    }, [router.isReady]);
+
+    return (
+        <>
+            <Head>
+                <title key={'title'}>Unitystation - {post?.title}</title>
+                <meta
+                    key='description'
+                    name='description'
+                    content='Read more about this interesting article on our blog!'
+                />
+                <meta
+                    key='og:title'
+                    property='og:title'
+                    content='Unitystation - A blog post'
+                />
+                <meta
+                    key='og:description'
+                    property='og:description'
+                    content='Read more about this interesting article on our blog!'
+                />
+            </Head>
+
+            <main className={'pt-8 pb-16 lg:pt-16 lg:pb-24'}>
+                <div className={'flex px-4 mx-auto max-w-screen-xl '}>
+                    {<Post
+                        key={post.slug}
+                        title={post.title}
+                        date_created={post.date_created}
+                        slug={post.slug}
+                        sections={post.sections}
+                        author={post.author}
+                        state={post.state}
+                        type={post.type}
+                    />}
+                </div>
+            </main>
+        </>
+
+    )
+}
+
+export default PostPage;
