✍️ 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};","deleted","label",[99],"permalink","https://www.val.town/x/melissanf/blogIdeaGeneratorApp/code/main.tsx","extension","actionData","errors"]