/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useCallback, useEffect, useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { AnimatePresence, motion } from "https://esm.sh/framer-motion"; import ReactMarkdown from "https://esm.sh/react-markdown"; import rehypeHighlight from "https://esm.sh/rehype-highlight"; import remarkGfm from "https://esm.sh/remark-gfm"; // Expanded Theme Collection const THEMES = { ocean: { primary: "#3498db", secondary: "#2ecc71", background: "linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)", text: "#ffffff", icon: "🌊", }, sunset: { primary: "#ff6b6b", secondary: "#4ecdc4", background: "linear-gradient(135deg, #ff6b6b 0%, #feca57 100%)", text: "#2d3436", icon: "🌅", }, forest: { primary: "#27ae60", secondary: "#2c3e50", background: "linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%)", text: "#ffffff", icon: "🌲", }, cyberpunk: { primary: "#0be881", secondary: "#ff3f34", background: "linear-gradient(135deg, #000000 0%, #222f3e 100%)", text: "#0be881", icon: "🤖", }, pastel: { primary: "#ff85a2", secondary: "#6a5af9", background: "linear-gradient(135deg, #fad0c4 0%, #ff9a9e 100%)", text: "#333333", icon: "🍬", }, midnight: { primary: "#8e44ad", secondary: "#2c3e50", background: "linear-gradient(135deg, #000428 0%, #004e92 100%)", text: "#ecf0f1", icon: "🌙", }, }; function PostContent({ content }) { return (

{ const match = /language-(\w+)/.exec(className || ""); return !inline ? (

                
                  {children}

) : (


                  {children}

); }, }} > {content}

); } function App() { const [posts, setPosts] = useState([]); const [newPost, setNewPost] = useState({ content: "", tags: "" }); const [selectedTag, setSelectedTag] = useState(null); const [tags, setTags] = useState([]); const [currentTheme, setCurrentTheme] = useState("ocean"); const [isThemeMenuOpen, setIsThemeMenuOpen] = useState(false); const [error, setError] = useState(null); // Apply theme to document useEffect(() => { document.documentElement.style.setProperty("--theme-primary", THEMES[currentTheme].primary); document.documentElement.style.setProperty("--theme-secondary", THEMES[currentTheme].secondary); document.documentElement.style.setProperty("--theme-background", THEMES[currentTheme].background); document.documentElement.style.setProperty("--theme-text", THEMES[currentTheme].text); }, [currentTheme]); const fetchPosts = useCallback(async () => { try { const url = selectedTag ? `/posts?tag=${encodeURIComponent(selectedTag)}` : "/posts"; const response = await fetch(url); if (!response.ok) { throw new Error("Failed to fetch posts"); } const data = await response.json(); setPosts(data.map(post => ({ ...post, uniqueKey: `post-${post.id}-${post.created_at}` }))); } catch (err) { setError(err.message); console.error(err); } }, [selectedTag]); const fetchTags = useCallback(async () => { try { const response = await fetch("/tags"); if (!response.ok) { throw new Error("Failed to fetch tags"); } const data = await response.json(); setTags(data.map((tag, index) => ({ name: tag, uniqueKey: `tag-${tag}-${index}` }))); } catch (err) { setError(err.message); console.error(err); } }, []); useEffect(() => { fetchPosts(); fetchTags(); }, [fetchPosts, fetchTags]); const handleSubmit = async (e) => { e.preventDefault(); setError(null); try { const tagArray = newPost.tags.split(",").map(tag => tag.trim()).filter(Boolean); const response = await fetch("/posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: newPost.content, tags: tagArray, }), }); if (!response.ok) { throw new Error("Failed to create post"); } fetchPosts(); fetchTags(); setNewPost({ content: "", tags: "" }); } catch (err) { setError(err.message); console.error(err); } }; return (

🌐 JUST P0ST setIsThemeMenuOpen(!isThemeMenuOpen)} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} > 🎨

{isThemeMenuOpen && ( {Object.keys(THEMES).map(theme => ( { setCurrentTheme(theme); setIsThemeMenuOpen(false); }} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} > {THEMES[theme].icon} {theme} ))} )} {error && ( {error} )}

Trending Tags

{tags.map((tag) => ( setSelectedTag(selectedTag === tag.name ? null : tag.name)} initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }} > {tag.name} ))}

{posts.map((post) => ( {post.tags && (

{post.tags.split(",").map((tag, tagIndex) => ( {tag.trim()} ))}

)}

{new Date(post.created_at).toLocaleString()}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Rest of the server-side code remains the same as in the previous implementation

d4x3d