feat: wire Docs and Blog pages to markdown content pipeline

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/DocDetailPage.tsx

@@ -1,14 +1,42 @@
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import SEOHead from '../components/seo/SEOHead';
+import { useLanguage } from '../contexts/LanguageContext';
+import { loadContent, type ContentItem } from '../lib/content';
 
 export default function DocDetailPage() {
   const { slug } = useParams<{ slug: string }>();
+  const { language } = useLanguage();
+  const [content, setContent] = useState<ContentItem | null>(null);
+
+  useEffect(() => {
+    if (slug) {
+      loadContent('docs', language, slug)
+        .then(setContent)
+        .catch(() => setContent(null));
+    }
+  }, [slug, language]);
+
+  if (!content) {
+    return (
+      <div className="max-w-4xl mx-auto py-16 px-6">
+        <p className="text-gray-600">{language === 'en' ? 'Loading...' : '加载中...'}</p>
+      </div>
+    );
+  }
+
   return (
     <>
-      <SEOHead title={slug ?? 'Doc'} description={`Documentation: ${slug}`} path={`/docs/${slug}`} />
+      <SEOHead
+        title={content.meta.title}
+        description={content.meta.description}
+        path={`/docs/${slug}`}
+      />
       <div className="max-w-4xl mx-auto py-16 px-6">
-        <h1 className="text-3xl font-bold text-gray-900 mb-4 capitalize">{slug?.replace(/-/g, ' ')}</h1>
-        <p className="text-gray-600">Content coming soon.</p>
+        <article
+          className="prose prose-gray max-w-none"
+          dangerouslySetInnerHTML={{ __html: content.html }}
+        />
       </div>
     </>
   );