67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
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-3xl mx-auto py-20 px-6">
|
|
<div className="animate-pulse space-y-4">
|
|
<div className="h-4 bg-cream-200 rounded w-24" />
|
|
<div className="h-8 bg-cream-200 rounded w-3/4" />
|
|
<div className="h-4 bg-cream-200 rounded w-full" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SEOHead
|
|
title={content.meta.title}
|
|
description={content.meta.description}
|
|
path={`/docs/${slug}`}
|
|
/>
|
|
<div className="max-w-3xl mx-auto py-16 lg:py-20 px-6">
|
|
{/* Back link */}
|
|
<Link
|
|
to="/docs"
|
|
className="inline-flex items-center gap-1.5 text-sm text-ink-muted hover:text-ink transition-colors mb-8"
|
|
>
|
|
<ArrowLeft size={14} />
|
|
{language === 'en' ? 'All docs' : '所有文档'}
|
|
</Link>
|
|
|
|
{/* Doc body */}
|
|
<article
|
|
className="prose prose-lg prose-warm max-w-none
|
|
prose-headings:font-display prose-headings:tracking-tight
|
|
prose-h1:text-3xl prose-h1:font-bold
|
|
prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-10
|
|
prose-a:text-sage-700 prose-a:no-underline hover:prose-a:underline
|
|
prose-code:text-sage-700 prose-code:bg-sage-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-sm
|
|
prose-pre:bg-ink prose-pre:text-cream-100 prose-pre:rounded-xl
|
|
prose-img:rounded-xl
|
|
prose-blockquote:border-sage-300 prose-blockquote:bg-sage-50/30 prose-blockquote:rounded-r-xl prose-blockquote:py-1"
|
|
dangerouslySetInnerHTML={{ __html: content.html }}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|