85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { Link, useParams, Navigate } from 'react-router-dom';
|
|
import { useEffect, useState } from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
import rehypeHighlight from 'rehype-highlight';
|
|
import { getPostBySlug, formatDate } from '@/lib/blog';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
import 'highlight.js/styles/github-dark.css';
|
|
|
|
const BlogPost = () => {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const post = slug ? getPostBySlug(slug) : undefined;
|
|
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
|
|
|
useEffect(() => {
|
|
if (post) {
|
|
document.title = `${post.title} — damaj.tech`;
|
|
const meta = document.querySelector('meta[name="description"]');
|
|
if (meta && post.description) meta.setAttribute('content', post.description);
|
|
}
|
|
}, [post]);
|
|
|
|
if (!post) return <Navigate to="/blog" replace />;
|
|
|
|
return (
|
|
<div
|
|
onMouseMove={(e) => setMousePos({ x: e.clientX, y: e.clientY })}
|
|
className="min-h-screen bg-background relative overflow-hidden"
|
|
>
|
|
<div
|
|
className="fixed pointer-events-none z-0"
|
|
style={{
|
|
left: mousePos.x,
|
|
top: mousePos.y,
|
|
width: 500,
|
|
height: 500,
|
|
transform: 'translate(-50%, -50%)',
|
|
background: 'radial-gradient(circle, hsl(25 95% 55% / 0.06) 0%, transparent 70%)',
|
|
}}
|
|
/>
|
|
|
|
<article className="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 py-12 md:py-20">
|
|
<Link
|
|
to="/blog"
|
|
className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors font-mono mb-8"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
all posts
|
|
</Link>
|
|
|
|
<header className="mb-10 pb-6 border-b border-border">
|
|
<p className="text-xs text-muted-foreground font-mono mb-2">
|
|
{formatDate(post.date)}
|
|
</p>
|
|
<h1 className="text-3xl md:text-4xl font-heading font-bold text-foreground mb-3">
|
|
{post.title}
|
|
</h1>
|
|
{post.description && (
|
|
<p className="text-muted-foreground text-lg leading-relaxed">{post.description}</p>
|
|
)}
|
|
{post.tags && post.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 mt-4">
|
|
{post.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="text-[10px] font-mono px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</header>
|
|
|
|
<div className="prose-blog">
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
|
|
{post.content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BlogPost;
|