Changes

Co-authored-by: Damaj301damaj-lol <90093996+Damaj301damaj-lol@users.noreply.github.com>
2026-05-19 15:18:51 +00:00 · 2026-05-19 15:18:51 +00:00 · 9d274a0e91
commit 9d274a0e91
parent f4a4c03de2
6 changed files with 273 additions and 1 deletions
--- a/src/pages/BlogPost.tsx
+++ b/src/pages/BlogPost.tsx
@ -0,0 +1,85 @@
+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;