\n C\n T\n

Comrade Tech Media

Empowering Tech Narratives

\n );\n}\n\nfunction BlogPostCard({ post, onDelete }) {\n return (\n

{post.title} \n {post.nameTag && #{post.nameTag}}\n

\n By {post.author} | {new Date(post.createdAt).toLocaleDateString()}\n

{post.content.substring(0, 150)}...

\n \n

\n );\n}\n\nfunction BlogPostForm({ onSubmit }) {\n const [title, setTitle] = useState('');\n const [content, setContent] = useState('');\n const [author, setAuthor] = useState('');\n const [nameTag, setNameTag] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n const newPost = {\n title,\n content,\n author,\n nameTag: nameTag.trim(),\n imageUrl: `https://maxm-imggenurl.web.val.run/${encodeURIComponent(title.toLowerCase().replace(/\\s+/g, '-'))}`,\n createdAt: new Date().toISOString()\n };\n onSubmit(newPost);\n setTitle('');\n setContent('');\n setAuthor('');\n setNameTag('');\n };\n\n return (\n

Create New Tech Insight

\n setTitle(e.target.value)}\n required\n maxLength={100}\n />\n setAuthor(e.target.value)}\n required\n maxLength={50}\n />\n setNameTag(e.target.value)}\n maxLength={20}\n />\n setContent(e.target.value)}\n required\n maxLength={1000}\n />\n \n \n );\n}\n\nfunction App() {\n const [posts, setPosts] = useState([]);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchPosts() {\n try {\n const response = await fetch('/get-posts');\n if (!response.ok) {\n throw new Error('Failed to fetch posts');\n }\n const fetchedPosts = await response.json();\n setPosts(fetchedPosts);\n } catch (error) {\n setError(error.message);\n console.error('Failed to fetch posts', error);\n }\n }\n fetchPosts();\n }, []);\n\n const handlePostSubmit = async (newPost) => {\n try {\n const response = await fetch('/create-post', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(newPost)\n });\n \n if (!response.ok) {\n throw new Error('Failed to create post');\n }\n \n const createdPost = await response.json();\n setPosts([createdPost, ...posts]);\n } catch (error) {\n setError(error.message);\n console.error('Failed to create post', error);\n }\n };\n\n const handleDeletePost = async (postId) => {\n try {\n const response = await fetch(`/delete-post/${postId}`, { method: 'DELETE' });\n \n if (!response.ok) {\n throw new Error('Failed to delete post');\n }\n \n setPosts(posts.filter(post => post.id !== postId));\n } catch (error) {\n setError(error.message);\n console.error('Failed to delete post', error);\n }\n };\n\n return (\n

\n \n \n View Source\n \n

\n \n {error && (\n

\n {error}\n \n

\n )}\n \n

\n \n \n

Latest Tech Insights

\n {posts.length === 0 ? (\n

No blog posts yet. Be the first to share a tech story!

\n ) : (\n posts.map((post) => (\n \n ))\n )}\n

\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"reactPinterestClone\";\n const TABLE_NAME = `${KEY}_blog_posts_5`;\n\n // Create table with additional name_tag column\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n content TEXT NOT NULL,\n author TEXT NOT NULL,\n name_tag TEXT,\n image_url TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle different routes\n if (request.method === 'GET' && new URL(request.url).pathname === '/get-posts') {\n const posts = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} ORDER BY created_at DESC LIMIT 10\n `);\n return new Response(JSON.stringify(posts.rows), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/create-post') {\n const newPost = await request.json();\n const result = await sqlite.execute(`\n INSERT INTO ${TABLE_NAME} (title, content, author, name_tag, image_url) \n VALUES (?, ?, ?, ?, ?)\n `, [newPost.title, newPost.content, newPost.author, newPost.nameTag, newPost.imageUrl]);\n\n const createdPost = {\n id: result.lastInsertRowid,\n ...newPost\n };\n\n return new Response(JSON.stringify(createdPost), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n if (request.method === 'DELETE' && /^\\/delete-post\\/\\d+$/.test(new URL(request.url).pathname)) {\n const postId = new URL(request.url).pathname.split('/').pop();\n await sqlite.execute(`DELETE FROM ${TABLE_NAME} WHERE id = ?`, [postId]);\n return new Response(null, { status: 204 });\n }\n\n return new Response(`\n \n \n Comrade Tech Media\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\n@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;700&display=swap');\n\n:root {\n --primary-color: #0f2027;\n --secondary-color: #203a43;\n --accent-color: #2c5364;\n --text-color: #f4f7f6;\n --highlight-color: #4ca1af;\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--primary-color);\n line-height: 1.6;\n color: var(--text-color);\n}\n\n.blog-website {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n background-color: var(--secondary-color);\n box-shadow: 0 0 30px rgba(0,0,0,0.2);\n}\n\n.error-banner {\n background-color: #d9534f;\n color: white;\n padding: 10px;\n text-align: center;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.error-banner button {\n background: none;\n border: 1px solid white;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n cursor: pointer;\n}\n\n/* Rest of the CSS remains the same as in the previous implementation */\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Ronu12_05/reactPinterestClone/code/main.tsx","extension","actionData","errors"]