feat(posts, tools): integrate MDX support for post content and add code block component

Author: tyronejosee

src/app/(public)/posts/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 
 import { notFound } from "next/navigation";
+import { bundleMDX } from "mdx-bundler";
 import { PostDetail } from "@/components/posts";
 import { getPostBySlug } from "@/actions/posts";
 import { PROJECT_NAME } from "@/config/constants";
@@ -46,7 +47,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function PostDetailPage({ params }: Props) {
   const { slug } = await params;
+
   const post = await getPostBySlug(slug);
   if (!post) return notFound();
-  return <PostDetail post={post} />;
+
+  const { code } = await bundleMDX({ source: post.content });
+  return <PostDetail post={{ ...post, content: code }} />;
 }

src/components/posts/post-detail.tsx

@@ -2,22 +2,20 @@
 
 import type { Post } from "@/types";
 
+import { formatDistanceToNow } from "date-fns";
 import { Image } from "@heroui/react";
-import dynamic from "next/dynamic";
-
-const MarkdownPreview = dynamic(
-  () => import("@uiw/react-markdown-preview").then((mod) => mod.default),
-  { ssr: false },
-);
+import { MDXContent } from "@/components/tools";
 
 type Props = { post: Post };
 
 export default function PostDetail({ post }: Props) {
   return (
-    <article className="max-w-3xl mx-auto py-12 px-4 space-y-8">
-      <header className="space-y-4">
-        <h1 className="text-4xl font-bold leading-tight">{post.name}</h1>
-        <div className="flex items-center gap-3 text-sm text-gray-500">
+    <article className="max-w-3xl mx-auto py-4 px-4 space-y-8">
+      <header className="flex flex-col gap-4">
+        <h1 className="text-4xl font-bold leading-tight text-neutral-950 dark:text-white text-center">
+          {post.name}
+        </h1>
+        <div className="flex justify-center items-center gap-3 text-sm text-gray-500">
           {post.author.avatar_url && (
             <Image
               isBlurred
@@ -26,32 +24,35 @@ export default function PostDetail({ post }: Props) {
               width={18}
               height={18}
               radius="full"
+              className="border-2 border-neutral-200 dark:border-neutral-800"
             />
           )}
-          <span>
-            By <strong>{post.author.full_name || post.author.username}</strong>
+          <span className="hover:underline">
+            {post.author.full_name || post.author.username}
           </span>
           <span>•</span>
           <time dateTime={post.created_at}>
-            {new Date(post.created_at).toLocaleDateString()}
+            {formatDistanceToNow(new Date(post.created_at), {
+              addSuffix: true,
+            })}
           </time>
         </div>
-
         {post.cover_url && (
-          <Image
-            src={post.cover_url}
-            alt={post.name}
-            width={400}
-            height={200}
-            radius="lg"
-          />
+          <figure className="h-60 border-2 border-neutral-200 dark:border-neutral-800 overflow-hidden rounded-xl">
+            <Image
+              src={post.cover_url}
+              alt={post.name}
+              radius="none"
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              className="object-cover w-full h-full"
+            />
+          </figure>
         )}
       </header>
 
-      <MarkdownPreview
-        source={post.content}
-        className="prose max-w-none dark:prose-invert"
-      />
+      <div className="prose dark:prose-invert break-words mx-auto sm:pb-56">
+        <MDXContent code={post.content} />
+      </div>
     </article>
   );
 }

src/components/tools/code-block.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@heroui/react";
+import { Check, Copy } from "lucide-react";
+
+type ReactNodeWithProps = {
+  props: {
+    children?: React.ReactNode;
+    [key: string]: unknown;
+  };
+};
+
+export default function CodeBlock({
+  children,
+  language,
+}: {
+  children: React.ReactNode;
+  language?: string;
+}) {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const extractText = (node: React.ReactNode): string => {
+    if (typeof node === "string" || typeof node === "number") {
+      return node.toString();
+    }
+    if (Array.isArray(node)) {
+      return node.map(extractText).join("");
+    }
+    if (typeof node === "object" && node !== null && "props" in node) {
+      const nodeWithProps = node as ReactNodeWithProps;
+      return extractText(nodeWithProps.props.children);
+    }
+    return "";
+  };
+
+  const code = extractText(children);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group">
+      {language && (
+        <Button
+          isIconOnly
+          size="sm"
+          onPress={handleCopy}
+          className="absolute bg-neutral-200 dark:bg-neutral-800 top-2 right-2 text-red-neutral-950 dark:text-white transition px-0.5 py-0.5"
+        >
+          {copied ? <Check size={10} /> : <Copy size={10} />}
+        </Button>
+      )}
+      <pre>{children}</pre>
+    </div>
+  );
+}

src/components/tools/index.ts

@@ -0,0 +1,2 @@
+export { default as CodeBlock } from "./code-block";
+export { default as MDXContent } from "./mdx-content";

src/components/tools/mdx-content.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { MDXComponents } from "mdx/types";
+
+import { useMemo } from "react";
+import Link from "next/link";
+import { getMDXComponent } from "mdx-bundler/client";
+import { CodeBlock } from "@/components/tools";
+
+const mdxComponents: MDXComponents = {
+  a: ({ href = "", children, ...props }) =>
+    href.startsWith("/") || href.startsWith("#") ? (
+      <Link href={href} {...props}>
+        {children}
+      </Link>
+    ) : (
+      <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    ),
+  pre: ({ children }) => {
+    const className = children.props?.className || "";
+    const language = className.replace("language-", "");
+    return <CodeBlock language={language}>{children}</CodeBlock>;
+  },
+};
+
+export default function MDXContent({
+  code,
+  components = mdxComponents,
+}: {
+  code: string;
+  components?: MDXComponents;
+}) {
+  const Component = useMemo(() => getMDXComponent(code), [code]);
+  return <Component components={components} />;
+}