Simple blog system (not quite done)

2025-12-03 18:50:37 +01:00
parent 36ce2b9888
commit 0e128b5308
9 changed files with 224 additions and 100 deletions
@@ -0,0 +1,122 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { Sparkles } from "lucide-react";
+import WebStuff from "@/components/Web";
+import { useParams } from "next/navigation";
+import { PostPreview } from "@/lib/posts";
+
+export default function BlogPost() {
+  const [post, setPost] = useState<(PostPreview & { content: string }) | null>(
+    null
+  );
+  const [mounted, setMounted] = useState(false);
+  const { slug } = useParams();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    async function fetchPost() {
+      const res = await fetch(`/api/blog/${slug}`);
+      const data = await res.json();
+      setPost(data);
+    }
+
+    fetchPost();
+  }, [slug]);
+
+  if (!post) {
+    return (
+      <WebStuff>
+        <div className="min-h-screen flex items-center justify-center text-slate-400">
+          Loading post...
+        </div>
+      </WebStuff>
+    );
+  }
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+  };
+
+  return (
+    <WebStuff>
+      Hero Section
+      <motion.section
+        className="relative z-10 px-6 py-16 lg:py-24 max-w-4xl mx-auto"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <motion.div variants={itemVariants} className="mb-4">
+          <span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
+            <Sparkles className="w-4 h-4" />
+            {post.category}
+          </span>
+        </motion.div>
+
+        <motion.h1
+          variants={itemVariants}
+          className="text-5xl lg:text-6xl font-bold mb-6"
+        >
+          <span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
+            {post.title}
+          </span>
+        </motion.h1>
+
+        <motion.div
+          variants={itemVariants}
+          className="flex flex-wrap items-center gap-4 text-sm text-slate-400 mb-8"
+        >
+          <span>{post.author}</span>
+          <span>•</span>
+          <span>{new Date(post.date).toLocaleDateString()}</span>
+          {post.readingTime && (
+            <>
+              <span>•</span>
+              <span>{post.readingTime} min read</span>
+            </>
+          )}
+          {post.tags?.map((tag, idx) => (
+            <span
+              key={idx}
+              className="px-2 py-1 bg-slate-800/50 border border-slate-700 rounded-full"
+            >
+              {tag}
+            </span>
+          ))}
+        </motion.div>
+
+        {/* Optional Featured Image */}
+        {post.image && (
+          <motion.div
+            variants={itemVariants}
+            className="mb-8 overflow-hidden rounded-xl"
+          >
+            <img
+              src={post.image}
+              alt={post.title}
+              className="w-full object-cover"
+            />
+          </motion.div>
+        )}
+
+        {/* Post Content */}
+        <motion.article
+          variants={itemVariants}
+          className="prose prose-invert max-w-none text-slate-300"
+          dangerouslySetInnerHTML={{ __html: post.content }}
+        />
+      </motion.section>
+    </WebStuff>
+  );
+}