chore: 🗑️ Remove un-unused deps

package.json

@@ -32,12 +32,10 @@
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
 		"next-themes": "^0.4.4",
-		"postcss": "^8",
 		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss": "4.0.0-beta.8",
 		"tailwindcss-animate": "^1.0.7",
-		"tailwindcss-react-aria-components": "^1.2.0",
 		"typescript": "^5"
 	}
 }

src/app/(routes)/blog/[slug]/page.tsx

@@ -1,12 +1,11 @@
-import { MdxLayout } from "@/components/mdx/mdx-layout";
-import { getBlogPost } from "@/features/blog/blog.utils";
-import { incrementView } from "@/lib/views";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
-type SlugProps = Promise<{
-	slug: string;
-}>;
+import { MdxLayout } from "@/components/mdx/layout";
+import { getBlogPost } from "@/features/blog/blog.utils";
+import { incrementView } from "@/lib/views";
+
+type SlugProps = Promise<{ slug: string }>;
 
 export async function generateMetadata({ params }: { params: SlugProps }): Promise<Metadata> {
 	const { slug } = await params;

src/app/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
-@plugin 'tailwindcss-animate';
-@plugin '@tailwindcss/typography';
+@plugin "tailwindcss-animate";
+@plugin "@tailwindcss/typography";
+
 
 @variant dark (&:is(.dark *));
 

src/components/mdx/layout.tsx

@@ -0,0 +1,25 @@
+import type { MDXComponents } from "mdx/types";
+import { MDXRemote } from "next-mdx-remote/rsc";
+
+import Alert from "@/components/mdx/alert";
+import CustomImage from "@/components/mdx/image";
+import CustomLink from "@/components/mdx/link";
+import LinkPreview from "@/components/mdx/link-preview";
+
+function useMDXComponents(components?: MDXComponents): MDXComponents {
+	return {
+		Alert,
+		LinkPreview,
+		Image: CustomImage,
+		a: CustomLink,
+		...components,
+	};
+}
+
+interface MdxLayoutProps {
+	source: string;
+	components?: MDXComponents;
+}
+export function MdxLayout(props: Readonly<MdxLayoutProps>) {
+	return <MDXRemote {...props} components={useMDXComponents(props.components)} />;
+}

src/features/blog/blog.utils.ts

@@ -23,28 +23,33 @@ async function getBlogFilePath(slug?: string) {
 	};
 }
 
-async function parseBlogFile(filePath: string, slug: string): Promise<BlogPostWithContent> {
-	// Read and parse the MDX file
-	const fileContent = await fs.readFile(filePath, "utf-8");
-	const { data: metadata, content } = matter(fileContent);
+async function parseBlogFile(filePath: string, slug: string): Promise<BlogPostWithContent | null> {
+	try {
+		// Read and parse the MDX file
+		const fileContent = await fs.readFile(filePath, "utf-8");
+		const { data: metadata, content } = matter(fileContent);
 
-	// Get file stats
-	const stats = await fs.stat(filePath);
+		// Get file stats
+		const stats = await fs.stat(filePath);
 
-	// Get view count
-	const { id, views } = await getViewCount(slug);
+		// Get view count
+		const { id, views } = await getViewCount(slug);
 
-	return {
-		id,
-		slug,
-		title: metadata?.title || slug,
-		date: new Date(metadata?.date || "").toISOString(),
-		summary: metadata?.summary || "",
-		tags: metadata?.tags || [],
-		views,
-		lastModified: stats.mtime.toISOString(),
-		content,
-	};
+		return {
+			id,
+			slug,
+			title: metadata?.title || slug,
+			date: new Date(metadata?.date || "").toISOString(),
+			summary: metadata?.summary || "",
+			tags: metadata?.tags || [],
+			views,
+			lastModified: stats.mtime.toISOString(),
+			content,
+		};
+	} catch (error) {
+		console.error(`Failed to parse blog file for slug: ${slug}`, error);
+		return null;
+	}
 }
 
 export async function getBlogPosts(): Promise<BlogPost[]> {
@@ -58,13 +63,18 @@ export async function getBlogPosts(): Promise<BlogPost[]> {
 		files.map(async (filename) => {
 			const slug = filename.replace(".mdx", "");
 			const post = await parseBlogFile(path.join(dir, filename), slug);
+
+			if (!post) return null;
+
 			// Omit content when returning list of posts
 			const { content, ...postWithoutContent } = post;
 			return postWithoutContent;
 		}),
 	);
 
-	return blogPosts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+	return blogPosts
+		.filter((post): post is BlogPost => post !== null)
+		.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 }
 
 export async function getBlogPost(slug: string): Promise<BlogPostWithContent | null> {