first draft of blog setup

content/posts/hello-world.md

@@ -2,6 +2,8 @@
 title: 'Mapping Public Toilets'
 author: 'Ollie'
 date: 2024-04-16T19:31:20.591Z
+profilePictureUrl: https://avatars.githubusercontent.com/u/1771189?v=4
+profileSocialUrl: https://olliethinks.co.uk/
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae placerat leo, non posuere justo. Nulla facilisi. Vivamus ac tempus justo, a volutpat eros. Ut felis magna, semper nec felis non, finibus euismod eros. Vestibulum congue tellus ut augue mattis ullamcorper. Sed et libero eget sapien sollicitudin auctor. Maecenas accumsan pretium neque sed euismod. Nam facilisis felis a massa blandit dictum. Maecenas finibus pretium odio id aliquam. Aenean vel odio nec tellus rutrum hendrerit a quis nisi.

contentlayer.config.ts

@@ -7,6 +7,8 @@ export const Post = defineDocumentType(() => ({
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },
     author: { type: 'string', required: true },
+    profileSocialUrl: { type: 'string', required: false },
+    profilePictureUrl: { type: 'string', required: false },
   },
   computedFields: {
     url: {

next.config.js

@@ -3,6 +3,9 @@
  **/
 const moduleExports = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [{ hostname: 'avatars.githubusercontent.com' }],
+  },
   typescript: {
     // !! WARN !!
     // Dangerously allow production builds to successfully complete even if

public/admin/config.yml

@@ -30,4 +30,6 @@ collections:
       - { label: "Title", name: "title", widget: "string"}
       - { label: "Publish Date", name: "date", widget: "datetime" }
       - { label: "Author", name: "author", widget: "string" }
+      - { label: "Social URL", name: "profileSocialUrl", widget: "string" }
+      - { label: "Profile Image URL", name: "profilePictureUrl", widget: "string" }
       - { label: "Body", name: "body", widget: "markdown" }

src/components/Header/MainMenu.tsx

@@ -107,7 +107,7 @@ const MainMenu = ({ children }: IMainMenu) => {
           </Box>
 
           <Box as="li" mt={[3, 0]} mb={['auto', 0]} ml={[0, 4]}>
-            <StyledNavLink href="/posts/hello-world">Blog</StyledNavLink>
+            <StyledNavLink href="/posts">Blog</StyledNavLink>
           </Box>
 
           {user && (

src/pages/posts/[slug]/index.page.tsx

@@ -1,31 +1,41 @@
+import React from 'react';
+
 import { allPosts, Post } from 'contentlayer/generated';
 import { format, parseISO } from 'date-fns';
 
 import Head from 'next/head';
-import React from 'react';
+import Image from 'next/image';
 import Box from '../../../components/Box';
 import Container from '../../../components/Container';
 import Spacer from '../../../components/Spacer';
 import Text from '../../../components/Text';
 
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
+import Link from 'next/link';
 
-// export const generateMetadata = ({ params }: { params: { slug: string } }) => {
-//   const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
-//   if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
-//   return { title: post.title };
-// };
+export const generateMetadata = ({ params }: { params: { slug: string } }) => {
+  const post = allPosts.find(
+    (post) => post._raw.flattenedPath.split('posts/')[1] === params?.slug,
+  );
+  if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
+  return { title: post.title };
+};
 
 export const getStaticPaths = (async () => {
   return {
     paths: allPosts.map((post) => ({
       params: { slug: post._raw.flattenedPath.split('posts/')[1] },
     })),
-    fallback: true, // false or "blocking"
+    fallback: true,
   };
 }) satisfies GetStaticPaths;
 
-export const getStaticProps = (async (context) => {
+type Props = {
+  postData: Post;
+  notFound?: boolean;
+};
+
+export const getStaticProps: GetStaticProps<Props> = (async (context) => {
   const postData = allPosts.find(
     (post) =>
       post._raw.flattenedPath.split('posts/')[1] === context?.params?.slug,
@@ -35,16 +45,13 @@ export const getStaticProps = (async (context) => {
   if (!postData) return { props: { postData: null, notFound: true } };
 
   return { props: { postData } };
-}) satisfies GetStaticProps<{
-  postData: Post;
-  notFound?: boolean;
-}>;
+}) satisfies GetStaticProps<Props>;
 
 export default function PostPage({
   postData,
   notFound,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  if (notFound) return null;
+  if (notFound || postData === null) return null;
   return (
     <Box my={5}>
       <Head>
@@ -54,10 +61,29 @@ export default function PostPage({
         <Text fontSize={6} fontWeight="bold" textAlign="center">
           <h1>{postData.title}</h1>
         </Text>{' '}
-        <Spacer mb={4} />
-        <Text fontSize={3} fontWeight="bold" textAlign={'center'}>
-          <h2>{postData.author}</h2>
-        </Text>
+        {postData?.profilePictureUrl && (
+          <>
+            <Spacer mb={4} />
+            <section
+              id="profile-picture"
+              style={{ display: 'flex', justifyContent: 'center' }}
+            >
+              <Image
+                style={{ borderRadius: '100%' }}
+                width={100}
+                height={100}
+                src={postData?.profilePictureUrl}
+                alt={`A picture of the author: ${postData.author}`}
+              ></Image>
+            </section>
+            <Spacer mb={4} />
+          </>
+        )}
+        <Link href={postData.profileSocialUrl}>
+          <Text fontSize={3} fontWeight="bold" textAlign={'center'}>
+            <h2>{postData.author}</h2>
+          </Text>
+        </Link>
         <Text textAlign={'center'}>
           <time dateTime={postData.date}>
             {format(parseISO(postData.date), 'LLLL d, yyyy')}

src/pages/posts/index.page.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { allPosts, Post } from 'contentlayer/generated';
+import { format, parseISO } from 'date-fns';
+
+import Head from 'next/head';
+import Box from '../../components/Box';
+import Container from '../../components/Container';
+import Spacer from '../../components/Spacer';
+import Text from '../../components/Text';
+
+import { GetStaticProps, InferGetStaticPropsType } from 'next';
+import Link from 'next/link';
+import config from 'src/config';
+
+type Props = {
+  posts: Post[];
+};
+
+export const getStaticProps: GetStaticProps<Props> = (async () => {
+  return { props: { posts: allPosts } };
+}) satisfies GetStaticProps<Props>;
+
+export default function PostPage({
+  posts,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <Box my={5}>
+      <Head>
+        <title>{config.getTitle('Blog')}</title>
+      </Head>
+      <Container maxWidth={845}>
+        <Text fontSize={6} fontWeight="bold" textAlign="center">
+          <h1>Toilet Map Blog</h1>
+        </Text>
+        <Spacer mb={5} />
+        {posts.map((postData) => (
+          <Box key={postData._id} display="flex" flexDirection="column">
+            <Link
+              href={postData._raw.flattenedPath}
+              style={{ display: 'flex', gap: '.2rem' }}
+            >
+              <Text fontSize={4} fontWeight="bold">
+                <h2>{postData.title}</h2>
+              </Text>
+            </Link>
+            <Box style={{ display: 'inline-flex', gap: '.2rem' }}>
+              <Link
+                href={postData.profileSocialUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Text>{postData.author}</Text>
+              </Link>
+              <Text>—</Text>
+              <Text>
+                <time dateTime={postData.date}>
+                  {format(parseISO(postData.date), 'LLLL d, yyyy')}
+                </time>
+              </Text>
+            </Box>
+          </Box>
+        ))}
+      </Container>
+    </Box>
+  );
+}