/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function ThemeToggle({ isDarkMode, toggleTheme }) { return (

☀️ 🌙

); } function BlogPost({ title, content, timestamp, author, preview = false }) { const truncatedContent = preview ? content.length > 200 ? content.substring(0, 200) + '...' : content : content; return (

{title}

{new Date(timestamp).toLocaleDateString()} {author && ` • By ${author}`}

{truncatedContent}

{preview && (

)}

); } function Navigation({ currentPage, setCurrentPage, isDarkMode, toggleTheme }) { return ( ); } function HomePage({ posts, currentPage, setCurrentPage, totalPages }) { return (

🖋️ Welcome to My Blog

Sharing thoughts, insights, and stories

{posts.map(post => ( ))}

Page {currentPage} of {totalPages}

); } function Dashboard({ postCount, totalViews, posts, fetchDashboardStats }) { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [author, setAuthor] = useState(""); const [apiKey, setApiKey] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [generateTopic, setGenerateTopic] = useState(""); const handleApiKeySave = async () => { const response = await fetch('/save-api-key', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey }) }); if (response.ok) { alert('API Key saved successfully!'); } }; const handleAIGenerate = async (e) => { e.preventDefault(); setIsGenerating(true); try { const response = await fetch('/generate-post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ topic: generateTopic }) }); const result = await response.json(); setTitle(result.title); setContent(result.content); } catch (error) { console.error('Error generating post:', error); alert('Failed to generate post. Check your API key.'); } finally { setIsGenerating(false); } }; const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch('/create-post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title, content, author }) }); const newPost = await response.json(); fetchDashboardStats(); setTitle(""); setContent(""); setAuthor(""); }; return (

📊 Blog Dashboard

Total Posts

{postCount}

Total Views

{totalViews}

🔑 Gemini API Configuration

Gemini API Key setApiKey(e.target.value)} />

🤖 AI Post Generator

Generate Post About setGenerateTopic(e.target.value)} />

Create New Post

Author Name setAuthor(e.target.value)} />

Post Title setTitle(e.target.value)} required />

Post Content

setContent(e.target.value)}
            required
          />
        </div>
        <button type="submit">Publish Post</button>
      </form>
    </div>
  );
}

function BlogApp() {
  const [posts, setPosts] = useState([]);
  const [dashboard, setDashboard] = useState({ postCount: 0, totalViews: 0 });
  const [currentPage, setCurrentPage] = useState('home');
  const [pageNumber, setPageNumber] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [isDarkMode, setIsDarkMode] = useState(() => {
    // Initialize dark mode from localStorage
    const savedTheme = localStorage.getItem('blog-theme');
    return savedTheme === 'dark';
  });

// Apply theme on initial load
  useEffect(() => {
    document.body.classList.toggle('dark-mode', isDarkMode);
  }, []);

useEffect(() => {
    fetchPosts(pageNumber);
    fetchDashboardStats();
  }, [pageNumber]);

const toggleTheme = () => {
    const newTheme = !isDarkMode;
    setIsDarkMode(newTheme);
    
    // Toggle dark mode class on body
    document.body.classList.toggle('dark-mode', newTheme);
    
    // Save theme preference
    localStorage.setItem('blog-theme', newTheme ? 'dark' : 'light');
  };

const fetchPosts = async (page) => {
    const response = await fetch(`/posts?page=${page}`);
    const data = await response.json();
    setPosts(data.posts);
    setTotalPages(data.totalPages);
  };

const fetchDashboardStats = async () => {
    const response = await fetch('/dashboard');
    const stats = await response.json();
    setDashboard(stats);
  };

return (
    <div className={`blog-container ${isDarkMode ? 'dark-mode' : ''}`}>
      <Navigation 
        currentPage={currentPage} 
        setCurrentPage={setCurrentPage} 
        isDarkMode={isDarkMode}
        toggleTheme={toggleTheme}
      />

{currentPage === 'home' && (
        <HomePage 
          posts={posts} 
          currentPage={pageNumber}
          setCurrentPage={setPageNumber}
          totalPages={totalPages}
        />
      )}

{currentPage === 'dashboard' && (
        <Dashboard 
          postCount={dashboard.postCount} 
          totalViews={dashboard.totalViews}
          posts={posts}
          fetchDashboardStats={fetchDashboardStats}
        />
      )}

<a 
        href={import.meta.url.replace("esm.town", "val.town")} 
        target="_top" 
        className="source-link"
      >
        View Source
      </a>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<BlogApp />);
}
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 SCHEMA_VERSION = 5;

// Create blog posts table
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_blog_posts_${SCHEMA_VERSION} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      title TEXT NOT NULL,
      content TEXT NOT NULL,
      author TEXT,
      views INTEGER DEFAULT 0,
      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
    )
  `);

// Create API keys table
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_api_keys_${SCHEMA_VERSION} (
      service TEXT PRIMARY KEY,
      api_key TEXT NOT NULL
    )
  `);

const url = new URL(request.url);

// Dashboard stats route
  if (url.pathname === '/dashboard') {
    const postCount = await sqlite.execute(
      `SELECT COUNT(*) as count FROM ${KEY}_blog_posts_${SCHEMA_VERSION}`
    );
    const totalViews = await sqlite.execute(
      `SELECT SUM(views) as total FROM ${KEY}_blog_posts_${SCHEMA_VERSION}`
    );
    return Response.json({
      postCount: postCount.rows[0].count,
      totalViews: totalViews.rows[0].total || 0
    });
  }

// Save API key route
  if (request.method === 'POST' && url.pathname === '/save-api-key') {
    const { apiKey } = await request.json();
    await sqlite.execute(
      `INSERT OR REPLACE INTO ${KEY}_api_keys_${SCHEMA_VERSION} (service, api_key) VALUES (?, ?)`,
      ['gemini', apiKey]
    );
    return Response.json({ success: true });
  }

// Generate post route
  if (request.method === 'POST' && url.pathname === '/generate-post') {
    const { topic } = await request.json();
    
    // Fetch stored API key
    const apiKeyResult = await sqlite.execute(
      `SELECT api_key FROM ${KEY}_api_keys_${SCHEMA_VERSION} WHERE service = ?`,
      ['gemini']
    );

if (apiKeyResult.rows.length === 0) {
      return new Response(JSON.stringify({ error: 'No API key found' }), { status: 400 });
    }

const apiKey = apiKeyResult.rows[0].api_key;

try {
      const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-goog-api-key': apiKey
        },
        body: JSON.stringify({
          contents: [{
            parts: [{
              text: `Write a comprehensive blog post about "${topic}". 
              Include an engaging title, a clear structure with multiple paragraphs, 
              and provide valuable insights. The post should be informative and 
              written in a conversational, professional tone.`
            }]
          }]
        })
      });

const data = await response.json();
      const generatedContent = data.candidates[0].content.parts[0].text;

// Split generated content into title and body
      const [title, ...contentParts] = generatedContent.split('\n').filter(line => line.trim() !== '');
      const content = contentParts.join('\n');

return Response.json({ 
        title: title.replace(/^#*\s*/, ''), 
        content 
      });
    } catch (error) {
      console.error('Gemini API Error:', error);
      return new Response(JSON.stringify({ error: 'Failed to generate post' }), { status: 500 });
    }
  }

// Create post route
  if (request.method === 'POST' && url.pathname === '/create-post') {
    const { title, content, author } = await request.json();
    const result = await sqlite.execute(
      `INSERT INTO ${KEY}_blog_posts_${SCHEMA_VERSION} (title, content, author) VALUES (?, ?, ?)`, 
      [title, content, author]
    );
    const newPost = await sqlite.execute(
      `SELECT * FROM ${KEY}_blog_posts_${SCHEMA_VERSION} WHERE id = ?`, 
      [result.lastInsertRowid]
    );
    return Response.json(newPost.rows[0]);
  }

// Posts route with pagination
  if (request.method === 'GET' && url.pathname === '/posts') {
    const page = parseInt(url.searchParams.get('page') || '1');
    const postsPerPage = 5;
    const offset = (page - 1) * postsPerPage;

const totalPosts = await sqlite.execute(
      `SELECT COUNT(*) as count FROM ${KEY}_blog_posts_${SCHEMA_VERSION}`
    );
    const totalPages = Math.ceil(totalPosts.rows[0].count / postsPerPage);

const posts = await sqlite.execute(
      `SELECT * FROM ${KEY}_blog_posts_${SCHEMA_VERSION} 
       ORDER BY timestamp DESC 
       LIMIT ? OFFSET ?`, 
      [postsPerPage, offset]
    );

return Response.json({
      posts: posts.rows,
      totalPages: totalPages
    });
  }

// Default HTML response
  return new Response(`
    <html>
      <head>
        <title>AI-Powered Blog Generator</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' }
  });
}

// CSS remains the same as in the previous submission
const css = `
/* Full CSS from previous submission */
:root {
  --background-primary: #ffffff;
  --background-secondary: #f4f6f9;
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --accent-color: #3498db;
  --accent-hover: #2980b9;
  --border-color: #e0e4e8;
  --card-background: #ffffff;
  --shadow: rgba(0, 0, 0, 0.1);
}

.dark-mode {
  --background-primary: #121212;
  --background-secondary: #1e1e1e;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --accent-color: #4ecdc4;
  --accent-hover: #45b7aa;
  --border-color: #333333;
  --card-background: #1f1f1f;
  --shadow: rgba(255, 255, 255, 0.05);
}

/* Rest of the CSS remains the same */
`;</article></body></html>

effortlessAquamarineHookworm