\n {tagArray.map((tag, index) => (\n \n {tag}\n \n ))}\n

\n );\n };\n\n const analyzeContent = async (item: AirtableRecord) => {\n try {\n const response = await fetch(\"/api/analyze\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n title: item.fields.Title,\n shortDescription: item.fields.ShortCardText,\n fullContent: `${item.fields[\"Intro Content\"]} ${item.fields[\"Body Content 1\"]} ${\n item.fields[\"Body Content 2\"]\n } ${item.fields[\"Body Content 3\"]} ${item.fields[\"Body Content 4\"]} ${\n item.fields[\"Conclusion & Key Takeaways\"]\n }`,\n }),\n });\n const data = await response.json();\n setAiAnalysis(data.analysis);\n } catch (error) {\n console.error(\"Error analyzing content:\", error);\n setAiAnalysis(\"Failed to analyze content. Please try again later.\");\n }\n };\n\n return (\n

Content Template App

\n\n

Instructions:

Use the category buttons to filter content by category
Use the search bar to find specific content
Click on \"View Details\" to see full content and AI analysis
To use this app in your project, import it from 'https://esm.town/v/awhitter/contentTemplateApp'

\n\n

\n setSearchTerm(e.target.value)}\n className=\"p-2 border rounded mr-4 flex-grow\"\n />\n {categories.map((category) => (\n setActiveCategory(category)}\n className={`mr-2 px-3 py-1 rounded ${\n activeCategory === category ? \"bg-blue-500 text-white\" : \"bg-gray-200\"\n }`}\n >\n {category.charAt(0).toUpperCase() + category.slice(1)}\n \n ))}\n

\n\n

\n {loading ?

Loading content...

: (\n filteredContent.map((item) => (\n

{item.fields.Title}

{item.fields.Date}

{item.fields.ShortCardText}

Read time: {item.fields.ReadTime}

\n {item.fields[\"Card Image\"] && item.fields[\"Card Image\"][0] && (\n \n )}\n {renderTags(item.fields.Tags)}\n

\n \n Created: {new Date(item.createdTime).toLocaleDateString()}\n \n {\n setSelectedItem(item);\n analyzeContent(item);\n }}\n className=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"\n >\n View Details\n \n

\n ))\n )}\n

\n\n {selectedItem && (\n

{selectedItem.fields.Title}

{selectedItem.fields.Date}

Introduction

{selectedItem.fields[\"Intro Content\"]}

Body

{selectedItem.fields[\"Body Content 1\"]}

{selectedItem.fields[\"Body Content 2\"]}

{selectedItem.fields[\"Body Content 3\"]}

{selectedItem.fields[\"Body Content 4\"]}

Conclusion

{selectedItem.fields[\"Conclusion & Key Takeaways\"]}

AI Analysis

\n {aiAnalysis ?

{aiAnalysis}

Analyzing content...

}\n

\n setSelectedItem(null)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"\n >\n Close\n \n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/content\") {\n const apiToken = Deno.env.get(\"VITE_AIRTABLE_API_KEY\");\n const baseId = Deno.env.get(\"VITE_AIRTABLE_BASE_ID\");\n const tableId = Deno.env.get(\"VITE_AIRTABLE_TABLE_ID\");\n\n if (!apiToken || !baseId || !tableId) {\n return new Response(JSON.stringify({ error: \"Missing environment variables\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const airtableUrl = `https://api.airtable.com/v0/${baseId}/${tableId}`;\n\n const headers = new Headers({\n \"Authorization\": `Bearer ${apiToken}`,\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n });\n\n if (req.method === \"OPTIONS\") {\n return new Response(null, { headers });\n }\n\n try {\n const response = await fetch(airtableUrl, {\n headers: {\n \"Authorization\": `Bearer ${apiToken}`,\n \"Content-Type\": \"application/json\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return new Response(JSON.stringify(data), { headers });\n } catch (error) {\n console.error(\"Error fetching Airtable data:\", error);\n return new Response(JSON.stringify({ error: \"Error fetching data from Airtable\" }), {\n status: 500,\n headers,\n });\n }\n } else if (url.pathname === \"/api/analyze\") {\n if (req.method === \"POST\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n try {\n const { title, shortDescription, fullContent } = await req.json();\n const prompt = `Analyze the following content and provide a brief summary and key insights:\n Title: ${title}\n Short Description: ${shortDescription}\n Full Content: ${fullContent}`;\n\n const completion = await openai.chat.completions.create({\n messages: [{ role: \"user\", content: prompt }],\n model: \"gpt-4o-mini\",\n max_tokens: 150,\n });\n\n return new Response(JSON.stringify({ analysis: completion.choices[0].message.content }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error analyzing content:\", error);\n return new Response(JSON.stringify({ error: \"Error analyzing content\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n } else {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n Content Template\n \n \n \n \n

\n \n \n

\n View source\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: system-ui, sans-serif;\n }\n .prose {\n max-width: 65ch;\n color: #374151;\n }\n .prose p {\n margin-bottom: 1em;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/awhitter/competentOlivePeacock/code/main.tsx","extension","actionData","errors"]