update

Author: observerw

.astro/data-store.json

@@ -1,10 +1,14 @@
 import react from "@astrojs/react";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "astro/config";
+import remarkGfm from "remark-gfm";
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [react()],
+	markdown: {
+		remarkPlugins: [remarkGfm],
+	},
 	vite: {
 		plugins: [tailwindcss()],
 	},

astro.config.mjs

@@ -26,7 +26,7 @@
 		"lucide-react": "^0.545.0",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
-		"react-markdown": "^10.1.0",
+		"remark-gfm": "^4.0.1",
 		"tailwind-merge": "^3.3.1"
 	},
 	"devDependencies": {

bun.lock

@@ -1,5 +1,5 @@
 import { ArrowLeft } from "lucide-react";
-import ReactMarkdown, { type Components } from "react-markdown";
+import type { ReactNode } from "react";
 import { AppLink } from "@/components/app-link";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -13,12 +13,12 @@ export interface BlogPostData {
 	publishedAt: string | Date;
 	tags: string[];
 	readingMinutes: number;
-	content: string;
 }
 
 interface Props {
 	post: BlogPostData;
 	className?: string;
+	children?: ReactNode;
 }
 
 function formatDate(iso: string | Date) {
@@ -31,70 +31,7 @@ function formatDate(iso: string | Date) {
 	}).format(date);
 }
 
-const markdownComponents: Components = {
-	h2: ({ children }) => (
-		<h2 className="text-2xl md:text-3xl font-display font-bold tracking-tight mt-10 mb-4 text-balance">
-			{children}
-		</h2>
-	),
-	p: ({ children }) => (
-		<p className="text-foreground/90 text-lg leading-relaxed mb-6">
-			{children}
-		</p>
-	),
-	blockquote: ({ children }) => (
-		<blockquote className="pl-6 border-l-2 border-primary my-8 italic text-lg text-foreground/80">
-			{children}
-		</blockquote>
-	),
-	ul: ({ children }) => (
-		<ul className="space-y-2 pl-5 list-disc text-foreground/90 text-lg leading-relaxed mb-6 marker:text-primary/50">
-			{children}
-		</ul>
-	),
-	ol: ({ children }) => (
-		<ol className="space-y-2 pl-5 list-decimal text-foreground/90 text-lg leading-relaxed mb-6 marker:text-primary/50">
-			{children}
-		</ol>
-	),
-	code: ({ className, children, ...props }) => {
-		const match = /language-(\w+)/.exec(className || "");
-		const isBlock = !!match || (children as string)?.includes?.("\n");
-
-		if (!isBlock && !match) {
-			return (
-				<code
-					className="bg-secondary px-1.5 py-0.5 rounded-md font-mono text-sm"
-					{...props}
-				>
-					{children}
-				</code>
-			);
-		}
-
-		return (
-			<div className="code-panel rounded-xl overflow-hidden my-8">
-				<div className="code-panel__header px-4 py-3 flex items-center justify-between select-none">
-					<div className="flex items-center gap-1.5">
-						<div className="code-panel__dot code-panel__dot--1" />
-						<div className="code-panel__dot code-panel__dot--2" />
-						<div className="code-panel__dot code-panel__dot--3" />
-					</div>
-					<span className="code-panel__filename text-xs font-mono opacity-80">
-						{match ? match[1] : "text"}
-					</span>
-				</div>
-				<pre className="code-panel__content p-5 overflow-x-auto text-sm md:text-[13px] leading-relaxed font-mono">
-					<code className={className} {...props}>
-						{children}
-					</code>
-				</pre>
-			</div>
-		);
-	},
-};
-
-export function BlogPost({ post, className }: Props) {
+export function BlogPost({ post, className, children }: Props) {
 	return (
 		<div className={cn("relative z-10", className)}>
 			{/* Subtle blur backdrop - reduced opacity to let background show through */}
@@ -134,10 +71,8 @@ export function BlogPost({ post, className }: Props) {
 					</p>
 				</header>
 
-				<article className="space-y-2 pb-20 max-w-[680px] mx-auto">
-					<ReactMarkdown components={markdownComponents}>
-						{post.content}
-					</ReactMarkdown>
+				<article className="blog-markdown pb-20 max-w-[680px] mx-auto">
+					{children}
 				</article>
 
 				<div className="border-t border-border/70 pt-10 pb-16">

package.json

@@ -336,3 +336,59 @@
 .code-panel__dot--3 {
 	background: var(--code-dot-3);
 }
+
+.blog-markdown {
+	overflow-x: auto;
+}
+
+.blog-markdown h2 {
+	@apply text-2xl md:text-3xl font-display font-bold tracking-tight mt-10 mb-4 text-balance;
+}
+
+.blog-markdown p {
+	@apply text-foreground/90 text-lg leading-relaxed mb-6;
+}
+
+.blog-markdown blockquote {
+	@apply pl-6 border-l-2 border-primary my-8 italic text-lg text-foreground/80;
+}
+
+.blog-markdown ul {
+	@apply space-y-2 pl-5 list-disc text-foreground/90 text-lg leading-relaxed mb-6 marker:text-primary/50;
+}
+
+.blog-markdown ol {
+	@apply space-y-2 pl-5 list-decimal text-foreground/90 text-lg leading-relaxed mb-6 marker:text-primary/50;
+}
+
+.blog-markdown code {
+	@apply bg-secondary px-1.5 py-0.5 rounded-md font-mono text-sm;
+}
+
+.blog-markdown pre code {
+	@apply bg-transparent p-0;
+}
+
+.blog-markdown pre {
+	@apply my-8 rounded-xl border border-border p-5 overflow-x-auto text-sm md:text-[13px] leading-relaxed font-mono;
+	background: var(--code-bg);
+	color: var(--code-text);
+}
+
+.blog-markdown table {
+	@apply my-8 w-full text-sm;
+	border-collapse: collapse;
+}
+
+.blog-markdown th,
+.blog-markdown td {
+	@apply border border-border px-3 py-2 align-top;
+}
+
+.blog-markdown thead th {
+	@apply bg-secondary/60 font-semibold;
+}
+
+.blog-markdown tbody tr:nth-child(even) td {
+	@apply bg-muted/30;
+}

src/components/blog/blog-post.tsx

@@ -15,17 +15,20 @@ const { post } = Astro.props;
 const readingMinutes =
   post.data.readingMinutes || Math.ceil(post.body.split(/\s+/).length / 200);
 
+const { Content } = await post.render();
+
 const formattedPost = {
   slug: post.slug,
   title: post.data.title,
   description: post.data.description,
   publishedAt: post.data.publishedAt,
   tags: post.data.tags,
   readingMinutes,
-  content: post.body,
 };
 ---
 
 <Layout title={post.data.title}>
-  <BlogPost post={formattedPost} />
+  <BlogPost post={formattedPost}>
+    <Content />
+  </BlogPost>
 </Layout>