npm i

src/pages/blog/[slug].tsx → src/app/blog/[slug]/page.tsx

@@ -15,7 +15,56 @@ type Props = {
   comments: Comment[];
 };
 
-export default function Post({ post, stats }: Props) {
+export async function generateMetadata({ slug }: { slug: string }) {
+  const postData: NonNullablePostOptions = await getPostBySlug(slug, [
+    'title',
+    'excerpt',
+  ]);
+  return {
+    title: postData.title,
+    description: postData.excerpt,
+  }
+}
+
+export async function getStaticPaths() {
+  const slugs = await getPostSlugs();
+  const paths = slugs.map(slug => {
+    return {
+      params: {
+        slug: slug.replace(/\.md$/, ''), // Remove file extension for each post slug
+      },
+    };
+  });
+
+  return {
+    paths,
+    fallback: false,
+  };
+}
+
+async function getPostData(slug: string) {
+  const postData: NonNullablePostOptions = await getPostBySlug(slug, [
+    'title',
+    'date',
+    'slug',
+    'author',
+    'content',
+  ]);
+  const parsedContent = await markdownToHtml(postData.content || '');
+  const stats = readingTime(postData.content || '');
+  return {
+    post: {
+      title: postData.title,
+      date: postData.date,
+      slug: postData.slug,
+      author: postData.author,
+      content: parsedContent,
+    },
+    stats,
+  };
+
+export default function Post({ slug }: { slug: string }) {
+  const post = await getPostData(slug);
 
   const router = useRouter();
   if (!post.slug) throw router.push('/404');
@@ -64,53 +113,4 @@ export default function Post({ post, stats }: Props) {
       </div>
     </>
   );
-}
-
-type Params = {
-  params: {
-    slug: string;
-  };
-};
-
-export const getStaticProps = async ({ params }: Params) => {
-  const postData: NonNullablePostOptions = await getPostBySlug(params.slug, [
-    'title',
-    'date',
-    'slug',
-    'author',
-    'content',
-  ]);
-
-  const parsedContent = await markdownToHtml(postData.content || '');
-  const stats = readingTime(postData.content || '');
-  if (!postData.slug) throw new Error('No slug found for post');
-
-  return {
-    props: {
-      post: {
-        title: postData.title,
-        date: postData.date,
-        slug: postData.slug,
-        author: postData.author,
-        content: parsedContent,
-      },
-      stats,
-    },
-  };
-};
-
-export async function getStaticPaths() {
-  const slugs = await getPostSlugs();
-  const paths = slugs.map(slug => {
-    return {
-      params: {
-        slug: slug.replace(/\.md$/, ''), // Remove file extension for each post slug
-      },
-    };
-  });
-
-  return {
-    paths,
-    fallback: false,
-  };
-}
+}

src/app/blog/page.tsx

@@ -0,0 +1,56 @@
+import { getAllPosts } from 'lib/blogApi';
+import { type PostOptions } from '../../interfaces/post';
+import Link from 'next/link';
+
+type Props = {
+    allPosts: PostOptions[];
+};
+
+export const metadata = {
+    title: 'Blog list',
+    description: 'Blog Posts for Lucas Steinmacher',
+};
+
+export default function Blog({ allPosts }: Props) {
+    return (
+        <>
+            <div className="">
+                <details>
+                    <summary>Blog</summary>
+                    <pre>{JSON.stringify(allPosts, null, 2)}</pre>
+                </details>
+                <h2 className="text-2xl font-bold">Blog Posts</h2>
+                <p className="py-8 text-xl">
+                    Hey! You made it to the blog list! Thanks for checking this
+                    out!
+                </p>
+                <ul>
+                    {allPosts.map(
+                        ({ slug, date }) =>
+                            slug && (
+                                <li key={slug}>
+                                    <span>{date?.split('T')[0]}</span>
+                                    {slug && (
+                                        <Link
+                                            className="pl-3  text-[#d68501] transition-colors hover:text-[#d68401bb] hover:underline"
+                                            href={`/blog/${slug}`}
+                                        >
+                                            {slug}
+                                        </Link>
+                                    )}
+                                </li>
+                            ),
+                    )}
+                </ul>
+            </div>
+        </>
+    );
+}
+
+export const getStaticProps = async () => {
+    const allPosts = await getAllPosts(['date', 'slug']);
+
+    return {
+        props: { allPosts },
+    };
+};