/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; interface BlogPost { id: number; title: string; content: string; author: string; createdAt: string; imageUrl: string; nameTag?: string; } function Logo() { return (

C T

Comrade Tech Media

Empowering Tech Narratives

); } function BlogPostCard({ post, onDelete }) { return (

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

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

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

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

Create New Tech Insight

setTitle(e.target.value)} required maxLength={100} /> setAuthor(e.target.value)} required maxLength={50} /> setNameTag(e.target.value)} maxLength={20} />

setContent(e.target.value)}
        required
        maxLength={1000}
      />
      <button type="submit">📝 Publish Article</button>
    </form>
  );
}

function App() {
  const [posts, setPosts] = useState<BlogPost[]>([]);
  const [error, setError] = useState<string | null>(null);

useEffect(() => {
    async function fetchPosts() {
      try {
        const response = await fetch('/get-posts');
        if (!response.ok) {
          throw new Error('Failed to fetch posts');
        }
        const fetchedPosts = await response.json();
        setPosts(fetchedPosts);
      } catch (error) {
        setError(error.message);
        console.error('Failed to fetch posts', error);
      }
    }
    fetchPosts();
  }, []);

return (
    <div className="blog-website">
      <header>
        <Logo />
        <a 
          href={import.meta.url.replace("esm.town", "val.town")} 
          target="_top" 
          className="source-link"
        >
          View Source
        </a>
      </header>
      
      {error && (
        <div className="error-banner">
          {error}
          <button onClick={() => setError(null)}>Dismiss</button>
        </div>
      )}
      
      <div className="content-area">
        <BlogPostForm onSubmit={handlePostSubmit} />
        
        <section className="blog-posts">
          <h2>Latest Tech Insights</h2>
          {posts.length === 0 ? (
            <p>No blog posts yet. Be the first to share a tech story!</p>
          ) : (
            posts.map((post) => (
              <BlogPostCard 
                key={post.id} 
                post={post} 
                onDelete={handleDeletePost}
              />
            ))
          )}
        </section>
      </div>

<footer>
        <div className="footer-content">
          <p>© 2024 Comrade Tech Media. All Rights Reserved.</p>
          <div className="footer-links">
            <a href="#">Privacy Policy</a>
            <a href="#">Terms of Service</a>
            <a href="#">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const TABLE_NAME = `${KEY}_blog_posts_5`;

// Create table with additional name_tag column
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      title TEXT NOT NULL,
      content TEXT NOT NULL,
      author TEXT NOT NULL,
      name_tag TEXT,
      image_url TEXT,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
  `);

// Handle different routes
  if (request.method === 'GET' && new URL(request.url).pathname === '/get-posts') {
    const posts = await sqlite.execute(`
      SELECT * FROM ${TABLE_NAME} ORDER BY created_at DESC LIMIT 10
    `);
    return new Response(JSON.stringify(posts.rows), {
      headers: { 'Content-Type': 'application/json' }
    });
  }

if (request.method === 'POST' && new URL(request.url).pathname === '/create-post') {
    const newPost = await request.json();
    const result = await sqlite.execute(`
      INSERT INTO ${TABLE_NAME} (title, content, author, name_tag, image_url) 
      VALUES (?, ?, ?, ?, ?)
    `, [newPost.title, newPost.content, newPost.author, newPost.nameTag, newPost.imageUrl]);

const createdPost = {
      id: result.lastInsertRowid,
      ...newPost
    };

return new Response(JSON.stringify(createdPost), {
      headers: { 'Content-Type': 'application/json' }
    });
  }

if (request.method === 'DELETE' && /^\/delete-post\/\d+$/.test(new URL(request.url).pathname)) {
    const postId = new URL(request.url).pathname.split('/').pop();
    await sqlite.execute(`DELETE FROM ${TABLE_NAME} WHERE id = ?`, [postId]);
    return new Response(null, { status: 204 });
  }

return new Response(`
    <html>
      <head>
        <title>Comrade Tech Media</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "content-type": "text/html" }
  });
}

const css = `
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;700&display=swap');

:root {
  --primary-color: #0f2027;
  --secondary-color: #203a43;
  --accent-color: #2c5364;
  --text-color: #f4f7f6;
  --highlight-color: #4ca1af;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--primary-color);
  line-height: 1.6;
  color: var(--text-color);
}

.blog-website {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--secondary-color);
  box-shadow: 0 0 30px rgba(0,0,0,0.2);
}

.error-banner {
  background-color: #d9534f;
  color: white;
  padding: 10px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.error-banner button {
  background: none;
  border: 1px solid white;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* Rest of the CSS remains the same as in the previous implementation */
`;</article></body></html>

reactPinterestClone