create posts index page

public-convenience-ltd · Sep 23, 2024 · 52bb08a · 52bb08a
1 parent e2d9a58
commit 52bb08a
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 36 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -32,6 +32,10 @@ module.exports = {
         alias: {
           ...config.resolve.alias,
           src: path.resolve(__dirname, '../src'),
+          'contentlayer/generated': path.resolve(
+            __dirname,
+            '../.contentlayer/generated',
+          ),
         },
         fallback: {
           ...(config.resolve || {}).fallback,

diff --git a/content/pages/about.mdx b/content/pages/about.mdx
@@ -136,4 +136,3 @@ details or comments, please contact{' '}
     help to provide a overview of public toilet coverage across the country.
   </p>}
 </Container>
-import {nb} from "date-fns/locale"
diff --git a/src/pages/404.page.tsx b/src/pages/404.page.tsx
@@ -5,7 +5,7 @@ import Box from '../components/Box';
 import Spacer from '../components/Spacer';
 import Text from '../components/Text';
 
-const NotFound = ({ children }) => (
+const NotFound: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
   <>
     {children}
     <Box my={5}>

diff --git a/src/pages/About.stories.tsx b/src/pages/About.stories.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import AboutPage from '../pages/about.page';
 import Main from '../components/Main';
+import { allPages } from 'contentlayer/generated';
 
 export default {
   component: AboutPage,
@@ -12,5 +13,15 @@ export default {
  * About page
  */
 export const About = (props) => {
-  return <Main Component={AboutPage} pageProps={props} />;
+  return (
+    <Main
+      Component={AboutPage}
+      pageProps={{
+        ...props,
+        pageData: allPages.find(
+          (post) => post._raw.flattenedPath.split('pages/')[1] === 'about',
+        ),
+      }}
+    />
+  );
 };
diff --git a/src/pages/Index.stories.tsx b/src/pages/Index.stories.tsx
@@ -15,6 +15,17 @@ export default {
  * Index
  */
 export const Index = (props) => {
-  return <Main Component={IndexPageNext} pageProps={props} map={<LooMap />} />;
+  return (
+    <Main
+      Component={IndexPageNext}
+      pageProps={{
+        ...props,
+        pageData: allPages.find(
+          (post) => post._raw.flattenedPath.split('pages/')[1] === 'home',
+        ),
+      }}
+      map={<LooMap />}
+    />
+  );
 };
 Index.storyName = 'Home Page';
diff --git a/src/pages/posts/[slug]/index.page.tsx b/src/pages/posts/[slug]/index.page.tsx
@@ -12,14 +12,16 @@ import Text from '../../../components/Text';
 
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import Link from 'next/link';
+import NotFound from 'src/pages/404.page';
+import config from 'src/config';
 
-// 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 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: config.getTitle(post.title) };
+};
 
 export const getStaticPaths = (async () => {
   return {
@@ -51,11 +53,11 @@ export default function PostPage({
   postData,
   notFound,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  if (notFound || !postData) return null;
+  if (notFound || !postData) return <NotFound />;
   return (
     <Box my={5}>
       <Head>
-        <title>{postData.title}</title>
+        <title>{config.getTitle(postData.title)}</title>
       </Head>
       <Container maxWidth={845}>
         <Text fontSize={6} fontWeight="bold" textAlign="center">

diff --git a/src/pages/posts/index.page.tsx b/src/pages/posts/index.page.tsx
@@ -12,15 +12,26 @@ import Text from '../../components/Text';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import Link from 'next/link';
 import config from 'src/config';
+import styled from '@emotion/styled';
 
 type Props = {
   posts: Post[];
 };
 
 export const getStaticProps: GetStaticProps<Props> = (async () => {
+  for (let i = 0; i < 10; i++) {
+    allPosts.push(allPosts[0]);
+  }
   return { props: { posts: allPosts } };
 }) satisfies GetStaticProps<Props>;
 
+const PostWrapper = styled(Box)`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+`;
+
 export default function PostPage({
   posts,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
@@ -34,33 +45,40 @@ export default function PostPage({
           <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' }}
+        <PostWrapper>
+          {posts.map((postData, i) => (
+            <Box
+              key={postData._id + i}
+              display="flex"
+              flexDirection="column"
+              flex="50%"
             >
-              <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"
+                href={postData._raw.flattenedPath}
+                style={{ display: 'flex', gap: '.2rem' }}
               >
-                <Text>{postData.author}</Text>
+                <Text fontSize={4} fontWeight="bold">
+                  <h2>{postData.title}</h2>
+                </Text>
               </Link>
-              <Text>—</Text>
-              <Text>
-                <time dateTime={postData.date}>
-                  {format(parseISO(postData.date), 'LLLL d, yyyy')}
-                </time>
-              </Text>
+              <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>
-          </Box>
-        ))}
+          ))}
+        </PostWrapper>
       </Container>
     </Box>
   );

diff --git a/src/theme.ts b/src/theme.ts
@@ -14,7 +14,12 @@ const theme = {
     grey: '#807f7f',
     aqua: '#93f9db',
   },
-  mediaQueries: breakpoints.map((n) => `@media screen and (min-width: ${n})`),
+  mediaQueries: {
+    sm: 0,
+    md: `@media screen and (min-width: ${breakpoints[0]})`,
+    lg: `@media screen and (min-width: ${breakpoints[1]})`,
+    xl: `@media screen and (min-width: ${breakpoints[2]})`,
+  },
 };
 
 import '@emotion/react';