dynamic mig blog

app/blog/[slug]/page.js

@@ -8,7 +8,6 @@ import { renderMarkdown } from '@/lib/markdown';
 import BlogReadingProgress from '@/components/BlogReadingProgress';
 import BlogToc from '@/components/BlogToc';
 import BlogShareBar from '@/components/BlogShareBar';
-import CodeBlockEnhancer from '@/components/CodeBlockEnhancer';
 import NewsletterCTA from '@/components/NewsletterCTA';
 import SponsorCallout from '@/components/SponsorCallout';
 import AuthorSocials from '@/components/AuthorSocials';
@@ -301,9 +300,6 @@ export default async function BlogPost({ params }) {
                   </div>
                 </section>
               )}
-
-              <CodeBlockEnhancer />
-
               <hr className="my-12" style={{ borderColor: 'var(--border-subtle)' }} />
 
               <SponsorCallout sponsor={post.sponsor} variant="cta" />

app/globals.css

@@ -405,6 +405,25 @@ a:focus-visible, button:focus-visible {
   margin: 1.5em auto;
 }
 
+.prose-blog .blog-video {
+  margin: 1.75em 0;
+}
+.prose-blog .blog-video video {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+  border: 1px solid var(--border-subtle);
+  background: #05070a;
+}
+.prose-blog .blog-video figcaption {
+  margin-top: 0.65rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
 .prose-blog hr {
   border: 0;
   height: 1px;
@@ -487,6 +506,10 @@ a:focus-visible, button:focus-visible {
   border-radius: 0 0 0.75rem 0.75rem;
   margin-top: 0;
 }
+.prose-blog [data-rehype-pretty-code-title] + .blog-code-block pre {
+  border-radius: 0 0 0.75rem 0.75rem;
+  margin-top: 0;
+}
 
 /* embedded iframes (youtube, codepens) */
 .prose-blog iframe {

components/CodeBlock.jsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export default function CodeBlock({ children, ...props }) {
+  const preRef = useRef(null);
+  const resetTimerRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+    };
+  }, []);
+
+  async function copyCode() {
+    const code = preRef.current?.innerText;
+    if (!code) return;
+
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard access can be blocked by browser or page permissions.
+    }
+  }
+
+  return (
+    <div className="blog-code-block relative group">
+      <pre ref={preRef} {...props}>{children}</pre>
+      <button
+        type="button"
+        aria-label="Copy code"
+        className="absolute top-2 right-2 px-2 py-1 text-[11px] font-semibold rounded border border-white/20 bg-black/50 text-white/80 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity hover:bg-black/70"
+        onClick={copyCode}
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  );
+}