Polish blog post metadata

packages/website/src/routes/blog/$.tsx

@@ -14,6 +14,23 @@ export const Route = createFileRoute("/blog/$")({
   component: BlogPost,
 });
 
+const markdownComponents = {
+  a: ({ href, children, ...props }: React.ComponentPropsWithoutRef<"a">) => {
+    const isExternal = typeof href === "string" && /^https?:\/\//i.test(href);
+
+    return (
+      <a
+        {...props}
+        href={href}
+        rel={isExternal ? "nofollow noopener noreferrer" : undefined}
+        target={isExternal ? "_blank" : undefined}
+      >
+        {children}
+      </a>
+    );
+  },
+};
+
 function BlogPost() {
   const { _splat } = Route.useParams();
   const slug = _splat ?? "";
@@ -24,15 +41,25 @@ function BlogPost() {
   }
 
   return (
-    <article>
+    <article className="pt-12 pb-16">
       <div className="mb-8">
-        <h1 className="text-4xl font-bold mb-2">{post.frontmatter.title}</h1>
-        <span className="text-lg text-muted-foreground">
-          {formatDate(new Date(post.frontmatter.date))}
-        </span>
+        <h1 className="text-4xl font-bold mb-4">{post.frontmatter.title}</h1>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <a
+            href="https://x.com/moboudra"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className="flex items-center gap-3 text-foreground hover:text-primary transition-colors"
+          >
+            <img src="/9viSwGkz_400x400.jpg" alt="Mo Boudra" className="size-6 rounded-full" />
+            <span className="font-medium">Mo Boudra</span>
+          </a>
+          <span>·</span>
+          <span className="tabular-nums">{formatDate(new Date(post.frontmatter.date))}</span>
+        </div>
       </div>
       <div className="blog-prose">
-        <ReactMarkdown>{post.content}</ReactMarkdown>
+        <ReactMarkdown components={markdownComponents}>{post.content}</ReactMarkdown>
       </div>
     </article>
   );