✍️ Blog Idea Generator

\n \n

\n {\n setTopic(e.target.value);\n setError(null);\n }}\n placeholder=\"Enter your blog topic\"\n style={{\n ...styles.input,\n ...(error ? styles.inputError : {})\n }}\n />\n \n \n\n {error && (\n

\n {error}\n

\n )}\n\n {ideas.length > 0 && (\n

Blog Post Ideas

\n \n \n

generateOutline(idea)}\n >\n {idea}\n

\n )}\n\n {outline.length > 0 && (\n

Blog Post Outline

\n \n \n

\n {section}\n

\n )}\n\n {shareLink && (\n

\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 // Handle API and shared content routes\n if (request.method === \"POST\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const openai = new OpenAI();\n\n const { topic, idea, type } = await request.json();\n\n // Additional server-side validation\n if (type === \"ideas\" && (!topic || topic.trim() === \"\")) {\n return new Response(JSON.stringify({ error: \"Topic is required\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n try {\n let response;\n if (type === \"ideas\") {\n response = await openai.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: \"You are a creative blog post idea generator. Generate 5 unique, engaging blog post ideas based on the given topic. Format each idea as a concise, compelling headline.\" \n },\n { \n role: \"user\", \n content: `Generate blog post ideas for the topic: ${topic}` \n }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n const ideas = response.choices[0].message.content\n ?.split('\\n')\n .filter(idea => idea.trim() !== '')\n .map(idea => idea.replace(/^\\d+\\.\\s*/, '').trim()) || [];\n\n return new Response(JSON.stringify({ ideas }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } else if (type === \"outline\") {\n response = await openai.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: \"You are a professional blog post outline creator. Generate a detailed 5-6 section outline for the given blog post idea. Each section should have a clear, descriptive heading that captures the main point.\" \n },\n { \n role: \"user\", \n content: `Create a blog post outline for this idea: ${idea}` \n }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n const outline = response.choices[0].message.content\n ?.split('\\n')\n .filter(section => section.trim() !== '')\n .map(section => section.replace(/^\\d+\\.\\s*/, '').trim()) || [];\n\n return new Response(JSON.stringify({ outline }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n return new Response(JSON.stringify({ error: \"Invalid request type\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Failed to generate content\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n // Generate share link\n if (request.method === \"POST\" && request.url.includes(\"/generate-share\")) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { topic, ideas, selectedIdea, outline } = await request.json();\n \n const shareId = Math.random().toString(36).substring(2, 15);\n \n try {\n await blob.setJSON(`share_${shareId}`, { \n topic, \n ideas, \n selectedIdea, \n outline \n }, { \n expiresIn: 7 * 24 * 60 * 60 \n });\n\n return new Response(JSON.stringify({ shareId }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Failed to generate share link\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n // Retrieve shared content\n if (request.method === \"GET\" && request.url.includes(\"/shared/\")) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const shareId = new URL(request.url).pathname.split('/').pop();\n \n try {\n const sharedContent = await blob.getJSON(`share_${shareId}`);\n \n if (!sharedContent) {\n return new Response(JSON.stringify({ error: \"Shared content not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n return new Response(JSON.stringify(sharedContent), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Failed to retrieve shared content\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n // Default response for GET requests\n return new Response(`\n \n \n Blog Idea Generator\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst styles = {\n container: {\n minHeight: '100vh',\n backgroundColor: '#f4f6f9',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '20px',\n fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',\n },\n content: {\n width: '100%',\n maxWidth: '600px',\n backgroundColor: '#ffffff',\n borderRadius: '12px',\n boxShadow: '0 4px 20px rgba(0,0,0,0.08)',\n padding: '30px',\n },\n title: {\n color: '#2c3e50',\n textAlign: 'center',\n marginBottom: '25px',\n fontSize: '1.8em',\n fontWeight: '600',\n },\n form: {\n display: 'flex',\n marginBottom: '20px',\n gap: '10px',\n },\n input: {\n flex: 1,\n padding: '12px',\n fontSize: '16px',\n border: '1px solid #e0e0e0',\n borderRadius: '8px',\n transition: 'border-color 0.2s',\n },\n inputError: {\n borderColor: '#e74c3c',\n },\n button: {\n padding: '12px 20px',\n fontSize: '16px',\n backgroundColor: '#3498db',\n color: 'white',\n border: 'none',\n borderRadius: '8px',\n cursor: 'pointer',\n transition: 'background-color 0.2s',\n },\n errorMessage: {\n color: '#e74c3c',\n textAlign: 'center',\n marginBottom: '15px',\n padding: '10px',\n backgroundColor: '#fff5f5',\n borderRadius: '8px',\n },\n section: {\n backgroundColor: '#f9fafa',\n borderRadius: '10px',\n padding: '20px',\n marginBottom: '20px',\n },\n sectionHeader: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginBottom: '15px',\n paddingBottom: '10px',\n borderBottom: '1px solid #e9ecef',\n },\n sectionTitle: {\n margin: 0,\n fontSize: '1.2em',\n color: '#2c3e50',\n },\n actionButtons: {\n display: 'flex',\n gap: '10px',\n },\n actionButton: {\n backgroundColor: '#2ecc71',\n color: 'white',\n border: 'none',\n padding: '8px 12px',\n borderRadius: '6px',\n cursor: 'pointer',\n transition: 'background-color 0.2s',\n fontSize: '14px',\n },\n copiedButton: {\n backgroundColor: '#27ae60',\n },\n list: {\n listStyleType: 'none',\n padding: 0,\n margin: 0,\n },\n listItem: {\n padding: '12px',\n backgroundColor: 'white',\n borderRadius: '8px',\n marginBottom: '10px',\n cursor: 'pointer',\n transition: 'background-color 0.2s',\n border: '1px solid transparent',\n },\n selectedItem: {\n backgroundColor: '#e9f5fd',\n borderColor: '#3498db',\n },\n shareContainer: {\n display: 'flex',\n gap: '10px',\n marginTop: '20px',\n },\n shareInput: {\n flex: 1,\n padding: '10px',\n borderRadius: '8px',\n border: '1px solid #e0e0e0',\n },\n footer: {\n marginTop: '20px',\n textAlign: 'center',\n fontSize: '12px',\n },\n sourceLink: {\n color: '#7f8c8d',\n textDecoration: 'none',\n }\n};","createdAt",["D",1740045793557],"version",9,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","melissanf","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydElnQjNiRTIwdzJVQk1ld1JtNUVJVmdLZVQifQ","forkedVal","interval","slug","melissanf/blogIdeaGeneratorApp","description","AI-Powered Content Generator 🚀 Overview This is an AI-powered tool that helps users generate blog post ideas and outlines based on a given topic. Users can easily copy or share their generated content. Features ✅ User Input – Enter a topic to get relevant blog ideas. ✅ AI-Powered Suggestions – Generates three blog post ideas or a detailed outline. ✅ Copy & Share – One-click copy button and a shareable link for easy sharing. How to Use 1️⃣ Enter a topic in the input field (e.g., \"Remote Work Productivity\"). 2️⃣ Generate blog ideas with AI. 3️⃣ Copy the results or share the link with others. Tech Stack Townie AI – AI-based automation OpenAI API – For generating blog content Built-in Databases – To store and retrieve topics (if needed) How to Deploy & Share Run the app on Townie AI Copy the generated link (Townie AI auto-deploys apps). Share it on social media or with your audience. Future Improvements 🔹 Add categories (e.g., tech, marketing, health) for more tailored ideas. 🔹 Allow users to refine the output (e.g., short, medium, or detailed outlines). 🔹 Enable history storage so users can revisit past topics. 💡 Contributions & Feedback Have suggestions? Feel free to reach out or improve this project! 🚀","versions",[142,145,149,153,157,161,165,169,172,175],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1740045793557],{"_118":146,"_143":-5,"_116":147,"_113":148},8,["D",1740045642154],"8b74536e-ef71-11ef-87cf-e6cdfca9ef9f",{"_118":150,"_143":-5,"_116":151,"_113":152},7,["D",1740045604519],"75054fac-ef71-11ef-9869-e6cdfca9ef9f",{"_118":154,"_143":-5,"_116":155,"_113":156},6,["D",1740045441671],"13f39ee4-ef71-11ef-bbf7-e6cdfca9ef9f",{"_118":158,"_143":-5,"_116":159,"_113":160},5,["D",1740045370073],"e946a6c8-ef70-11ef-ac11-e6cdfca9ef9f",{"_118":162,"_143":-5,"_116":163,"_113":164},4,["D",1740045293268],"bb801a08-ef70-11ef-a497-e6cdfca9ef9f",{"_118":166,"_143":-5,"_116":167,"_113":168},3,["D",1740045165100],"6f1a21fe-ef70-11ef-be85-e6cdfca9ef9f",{"_118":90,"_143":-5,"_116":170,"_113":171},["D",1740045099742],"48255320-ef70-11ef-be85-e6cdfca9ef9f",{"_118":122,"_143":-5,"_116":173,"_113":174},["D",1740045054838],"2d63cd78-ef70-11ef-a29d-e6cdfca9ef9f",{"_118":31,"_143":-5,"_116":176,"_113":177},["D",1740045018324],"179fbd76-ef70-11ef-9e83-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":185,"_186":187,"_94":188},"single","redirect","/v/melissanf/blogIdeaGeneratorApp/versions",{"_113":174,"_114":189,"_118":122,"_116":190,"_191":99,"_100":101,"_108":109,"_130":131,"_11":96,"_192":-5,"_193":-5,"_194":-5,"_182":26,"_136":137},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [topic, setTopic] = useState(\"\");\n const [ideas, setIdeas] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n // Validate topic before submission\n const trimmedTopic = topic.trim();\n if (!trimmedTopic) {\n setError(\"Please enter a blog topic\");\n return;\n }\n\n setIsLoading(true);\n setIdeas([]);\n setError(null);\n\n try {\n const response = await fetch(\"/generate\", {\n method: \"POST\",\n body: JSON.stringify({ topic: trimmedTopic }),\n });\n const data = await response.json();\n setIdeas(data.ideas);\n } catch (error) {\n console.error(\"Error generating ideas:\", error);\n setError(\"Failed to generate blog ideas. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

🚀 Blog Idea Generator

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst styles = {\n container: {\n maxWidth: \"600px\",\n margin: \"0 auto\",\n padding: \"20px\",\n fontFamily: \"Arial, sans-serif\",\n textAlign: \"center\",\n },\n title: {\n color: \"#333\",\n marginBottom: \"20px\",\n },\n form: {\n display: \"flex\",\n marginBottom: \"20px\",\n },\n input: {\n flex: 1,\n padding: \"10px\",\n fontSize: \"16px\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px 0 0 4px\",\n },\n inputError: {\n border: \"1px solid #ff0000\",\n },\n button: {\n padding: \"10px 20px\",\n fontSize: \"16px\",\n backgroundColor: \"#4CAF50\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"0 4px 4px 0\",\n cursor: \"pointer\",\n },\n errorMessage: {\n color: \"#ff0000\",\n marginBottom: \"15px\",\n textAlign: \"left\",\n padding: \"0 20px\",\n },\n ideasContainer: {\n textAlign: \"left\",\n backgroundColor: \"#f9f9f9\",\n padding: \"20px\",\n borderRadius: \"8px\",\n },\n ideaList: {\n listStyleType: \"disc\",\n paddingLeft: \"20px\",\n },\n idea: {\n marginBottom: \"10px\",\n lineHeight: \"1.5\",\n },\n footer: {\n marginTop: \"20px\",\n fontSize: \"12px\",\n },\n sourceLink: {\n color: \"#666\",\n textDecoration: \"none\",\n }\n};\n\nconst css = `\nbody { margin: 0; font-family: Arial, sans-serif; }\nbutton:disabled { background-color: #cccccc; cursor: not-allowed; }\n`;",["D",1740045054838],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

✍️ Blog Idea Generator

Blog Post Ideas

Blog Post Outline

🚀 Blog Idea Generator

Blog Post Ideas:

blogIdeaGeneratorApp

Version 1