\n \n \n \n ☀️\n 🌙\n \n \n

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

{title}

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

{truncatedContent}

\n {preview && (\n

\n \n Read More →\n \n

\n )}\n

\n );\n}\n\nfunction Navigation({ currentPage, setCurrentPage, isDarkMode, toggleTheme }) {\n return (\n \n );\n}\n\nfunction HomePage({ posts, currentPage, setCurrentPage, totalPages }) {\n return (\n

🖋️ Welcome to My Blog

Sharing thoughts, insights, and stories

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

\n \n \n Page {currentPage} of {totalPages}\n \n \n

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

📊 Blog Dashboard

\n \n

Total Posts

{postCount}

Total Views

{totalViews}

\n\n

🔑 Gemini API Configuration

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

\n\n

🤖 AI Post Generator

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

\n\n

Create New Post

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

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

\n Post Content\n

setContent(e.target.value)}\n            required\n          />\n        </div>\n        <button type=\"submit\">Publish Post</button>\n      </form>\n    </div>\n  );\n}\n\nfunction BlogApp() {\n  const [posts, setPosts] = useState([]);\n  const [dashboard, setDashboard] = useState({ postCount: 0, totalViews: 0 });\n  const [currentPage, setCurrentPage] = useState('home');\n  const [pageNumber, setPageNumber] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n  const [isDarkMode, setIsDarkMode] = useState(() => {\n    // Initialize dark mode from localStorage\n    const savedTheme = localStorage.getItem('blog-theme');\n    return savedTheme === 'dark';\n  });\n\n  // Apply theme on initial load\n  useEffect(() => {\n    document.body.classList.toggle('dark-mode', isDarkMode);\n  }, []);\n\n  useEffect(() => {\n    fetchPosts(pageNumber);\n    fetchDashboardStats();\n  }, [pageNumber]);\n\n  const toggleTheme = () => {\n    const newTheme = !isDarkMode;\n    setIsDarkMode(newTheme);\n    \n    // Toggle dark mode class on body\n    document.body.classList.toggle('dark-mode', newTheme);\n    \n    // Save theme preference\n    localStorage.setItem('blog-theme', newTheme ? 'dark' : 'light');\n  };\n\n  const fetchPosts = async (page) => {\n    const response = await fetch(`/posts?page=${page}`);\n    const data = await response.json();\n    setPosts(data.posts);\n    setTotalPages(data.totalPages);\n  };\n\n  const fetchDashboardStats = async () => {\n    const response = await fetch('/dashboard');\n    const stats = await response.json();\n    setDashboard(stats);\n  };\n\n  return (\n    <div className={`blog-container ${isDarkMode ? 'dark-mode' : ''}`}>\n      <Navigation \n        currentPage={currentPage} \n        setCurrentPage={setCurrentPage} \n        isDarkMode={isDarkMode}\n        toggleTheme={toggleTheme}\n      />\n\n      {currentPage === 'home' && (\n        <HomePage \n          posts={posts} \n          currentPage={pageNumber}\n          setCurrentPage={setPageNumber}\n          totalPages={totalPages}\n        />\n      )}\n\n      {currentPage === 'dashboard' && (\n        <Dashboard \n          postCount={dashboard.postCount} \n          totalViews={dashboard.totalViews}\n          posts={posts}\n          fetchDashboardStats={fetchDashboardStats}\n        />\n      )}\n\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        className=\"source-link\"\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<BlogApp />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"effortlessAquamarineHookworm\";\n  const SCHEMA_VERSION = 5;\n\n  // Create blog posts table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_blog_posts_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      content TEXT NOT NULL,\n      author TEXT,\n      views INTEGER DEFAULT 0,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Create API keys table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_api_keys_${SCHEMA_VERSION} (\n      service TEXT PRIMARY KEY,\n      api_key TEXT NOT NULL\n    )\n  `);\n\n  const url = new URL(request.url);\n\n  // Dashboard stats route\n  if (url.pathname === '/dashboard') {\n    const postCount = await sqlite.execute(\n      `SELECT COUNT(*) as count FROM ${KEY}_blog_posts_${SCHEMA_VERSION}`\n    );\n    const totalViews = await sqlite.execute(\n      `SELECT SUM(views) as total FROM ${KEY}_blog_posts_${SCHEMA_VERSION}`\n    );\n    return Response.json({\n      postCount: postCount.rows[0].count,\n      totalViews: totalViews.rows[0].total || 0\n    });\n  }\n\n  // Save API key route\n  if (request.method === 'POST' && url.pathname === '/save-api-key') {\n    const { apiKey } = await request.json();\n    await sqlite.execute(\n      `INSERT OR REPLACE INTO ${KEY}_api_keys_${SCHEMA_VERSION} (service, api_key) VALUES (?, ?)`,\n      ['gemini', apiKey]\n    );\n    return Response.json({ success: true });\n  }\n\n  // Generate post route\n  if (request.method === 'POST' && url.pathname === '/generate-post') {\n    const { topic } = await request.json();\n    \n    // Fetch stored API key\n    const apiKeyResult = await sqlite.execute(\n      `SELECT api_key FROM ${KEY}_api_keys_${SCHEMA_VERSION} WHERE service = ?`,\n      ['gemini']\n    );\n\n    if (apiKeyResult.rows.length === 0) {\n      return new Response(JSON.stringify({ error: 'No API key found' }), { status: 400 });\n    }\n\n    const apiKey = apiKeyResult.rows[0].api_key;\n\n    try {\n      const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          'x-goog-api-key': apiKey\n        },\n        body: JSON.stringify({\n          contents: [{\n            parts: [{\n              text: `Write a comprehensive blog post about \"${topic}\". \n              Include an engaging title, a clear structure with multiple paragraphs, \n              and provide valuable insights. The post should be informative and \n              written in a conversational, professional tone.`\n            }]\n          }]\n        })\n      });\n\n      const data = await response.json();\n      const generatedContent = data.candidates[0].content.parts[0].text;\n\n      // Split generated content into title and body\n      const [title, ...contentParts] = generatedContent.split('\\n').filter(line => line.trim() !== '');\n      const content = contentParts.join('\\n');\n\n      return Response.json({ \n        title: title.replace(/^#*\\s*/, ''), \n        content \n      });\n    } catch (error) {\n      console.error('Gemini API Error:', error);\n      return new Response(JSON.stringify({ error: 'Failed to generate post' }), { status: 500 });\n    }\n  }\n\n  // Create post route\n  if (request.method === 'POST' && url.pathname === '/create-post') {\n    const { title, content, author } = await request.json();\n    const result = await sqlite.execute(\n      `INSERT INTO ${KEY}_blog_posts_${SCHEMA_VERSION} (title, content, author) VALUES (?, ?, ?)`, \n      [title, content, author]\n    );\n    const newPost = await sqlite.execute(\n      `SELECT * FROM ${KEY}_blog_posts_${SCHEMA_VERSION} WHERE id = ?`, \n      [result.lastInsertRowid]\n    );\n    return Response.json(newPost.rows[0]);\n  }\n\n  // Posts route with pagination\n  if (request.method === 'GET' && url.pathname === '/posts') {\n    const page = parseInt(url.searchParams.get('page') || '1');\n    const postsPerPage = 5;\n    const offset = (page - 1) * postsPerPage;\n\n    const totalPosts = await sqlite.execute(\n      `SELECT COUNT(*) as count FROM ${KEY}_blog_posts_${SCHEMA_VERSION}`\n    );\n    const totalPages = Math.ceil(totalPosts.rows[0].count / postsPerPage);\n\n    const posts = await sqlite.execute(\n      `SELECT * FROM ${KEY}_blog_posts_${SCHEMA_VERSION} \n       ORDER BY timestamp DESC \n       LIMIT ? OFFSET ?`, \n      [postsPerPage, offset]\n    );\n\n    return Response.json({\n      posts: posts.rows,\n      totalPages: totalPages\n    });\n  }\n\n  // Default HTML response\n  return new Response(`\n    <html>\n      <head>\n        <title>AI-Powered Blog Generator</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\n// CSS remains the same as in the previous submission\nconst css = `\n/* Full CSS from previous submission */\n:root {\n  --background-primary: #ffffff;\n  --background-secondary: #f4f6f9;\n  --text-primary: #2c3e50;\n  --text-secondary: #6c757d;\n  --accent-color: #3498db;\n  --accent-hover: #2980b9;\n  --border-color: #e0e4e8;\n  --card-background: #ffffff;\n  --shadow: rgba(0, 0, 0, 0.1);\n}\n\n.dark-mode {\n  --background-primary: #121212;\n  --background-secondary: #1e1e1e;\n  --text-primary: #e0e0e0;\n  --text-secondary: #a0a0a0;\n  --accent-color: #4ecdc4;\n  --accent-hover: #45b7aa;\n  --border-color: #333333;\n  --card-background: #1f1f1f;\n  --shadow: rgba(255, 255, 255, 0.05);\n}\n\n/* Rest of the CSS remains the same */\n`;","deleted","label",[99],"permalink","https://www.val.town/x/nsafouane/effortlessAquamarineHookworm/code/main.tsx","extension","actionData","errors"]
</article></body></html>