added better urls + changed so long post name

contentlayer.config.js

@@ -38,7 +38,7 @@ export const Post = defineDocumentType(() => ({
   computedFields: {
     url: {
       type: "string",
-      resolve: (post) => `/${post._raw.flattenedPath}`,
+      resolve: (post) => `/post/${post._raw.flattenedPath}`,
     },
     slug: {
       type: "string",

next.config.js

@@ -1,4 +1,4 @@
-const { withContentlayer } = require('next-contentlayer');
+const { withContentlayer } = require("next-contentlayer");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -7,6 +7,20 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
-}
+  redirects() {
+    return [
+      {
+        source: "/42-a-comprehensive-guide-to-pipex",
+        destination: "/post/42-a-comprehensive-guide-to-pipex",
+        permanent: true,
+      },
+      {
+        source: "/42-building-a-game-with-the-mlx",
+        destination: "/post/42-a-comprehensive-guide-to-so_long",
+        permanent: true,
+      },
+    ];
+  },
+};
 
-module.exports = withContentlayer(nextConfig)
+module.exports = withContentlayer(nextConfig);

posts/42-building-a-game-with-the-mlx.mdx → posts/42-a-comprehensive-guide-to-so_long.mdx

@@ -1,5 +1,5 @@
 ---
-title: "42: Building a Game with the MLX"
+title: "42: A Comprehensive Guide to So Long"
 description: "A deep dive into the 42 project so_long, including the MLX library, parsing, and error handling."
 tags: ["42", "so_long", "unix", "linux", "c", "guide", "tutorial", "mlx", "x11"]
 createdAt: 2023-06-01

src/app/[slug]/page.tsx → src/app/post/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { notFound } from "next/navigation";
 import { allPosts } from "contentlayer/generated";
-import Render from "@/components/Render";
+import Render from "@/components/render";
 import Balancer from "react-wrap-balancer";
 import dayjs from "dayjs";
 import { Metadata } from "next";
@@ -12,11 +12,19 @@ export async function generateStaticParams() {
   }));
 }
 
+type PostPageProps = {
+  params?: {
+    slug?: string;
+  };
+};
+
 export async function generateMetadata({
   params,
-}: {
-  params: { slug: string };
-}): Promise<Metadata | undefined> {
+}: PostPageProps): Promise<Metadata | undefined> {
+  if (!params?.slug) {
+    return;
+  }
+
   const post = allPosts.find((post) => post.slug === params.slug);
 
   if (!post) {
@@ -32,7 +40,7 @@ export async function generateMetadata({
       keywords: post.tags.join(", "),
     }),
     openGraph: {
-      title,
+      title: `${title} - Reactive`,
       description,
       type: "article",
       publishedTime: dayjs(createdAt).toISOString(),
@@ -52,12 +60,6 @@ export async function generateMetadata({
   };
 }
 
-type PostPageProps = {
-  params?: {
-    slug?: string;
-  };
-};
-
 export default async function PostPage({ params }: PostPageProps) {
   const post = allPosts.find(({ slug }) => slug === params?.slug);
 

src/app/sitemap.ts

@@ -5,7 +5,7 @@ const BASE_URL = "https://reactive.so";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const posts = allPosts.map((post) => ({
-    url: `${BASE_URL}/${post.slug}`,
+    url: `${BASE_URL}${post.url}`,
     lastModified: new Date(post.updatedAt).toISOString().split("T")[0],
   }));
 

src/components/Render.tsx → src/components/render.tsx

@@ -1,10 +1,11 @@
 "use client";
+
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React from "react";
 
-type RenderProps = React.PropsWithChildren<{
+type RenderProps = {
   code: string;
-}>;
+};
 
 export default function Render({ code }: RenderProps) {
   const MDX = useMDXComponent(code);