\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`;",["D",1738469917270],"version","currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal",{"_94":155,"_96":97,"_128":156,"_145":157,"_158":-5},"41b6a928-e00f-11ef-b7ce-e6cdfca9ef9f","contentTemplateApp",9,"prDisabledHint","interval","description","latestEvaluation","slug","awhitter/competentOlivePeacock","versions",[166,170,173],{"_98":167,"_145":90,"_168":169},["D",1738469917270],"n","1",{"_98":171,"_145":110,"_168":172},["D",1738463963184],"2",{"_98":174,"_145":31,"_168":175},["D",1738362785770],"3",{"_124":177,"_126":178},"91a27384-e002-11ef-a46e-e6cdfca9ef9f",{"_128":156,"_130":95,"_124":177,"_131":179,"_108":132,"_133":134,"_135":136,"_137":138,"_139":155,"_141":26,"_94":155,"_142":180,"_98":181,"_145":157,"_146":132,"_111":110,"_147":31,"_148":110,"_149":31,"_112":90,"_150":31,"_151":-5,"_20":182,"_153":-5,"_159":-7,"_160":136,"_161":-5,"_162":183,"_164":184},"bdac3136-e002-11ef-b950-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface AirtableAttachment {\n id: string;\n width: number;\n height: number;\n url: string;\n filename: string;\n size: number;\n type: string;\n}\n\ninterface AirtableRecord {\n id: string;\n createdTime: string;\n fields: {\n Title?: string;\n CardText?: string;\n Date?: string;\n ReadTime?: string;\n ShortCardText?: string;\n Category?: string;\n Tags?: string | string[];\n \"Card Image\"?: AirtableAttachment[];\n \"Intro Image\"?: AirtableAttachment[];\n \"Body Image 1\"?: AirtableAttachment[];\n \"Body Image 2\"?: AirtableAttachment[];\n \"Body Image 3\"?: AirtableAttachment[];\n \"Quote or Emphasized Text 1\"?: string;\n \"Quote or Emphasized Text 2\"?: string;\n \"Intro Content\"?: string;\n \"Body Content 1\"?: string;\n \"Body Content 2\"?: string;\n \"Body Content 3\"?: string;\n \"Body Content 4\"?: string;\n \"Conclusion & Key Takeaways\"?: string;\n FAQ?: string;\n \"Poll or Survey\"?: string;\n Audio?: AirtableAttachment[];\n Video?: AirtableAttachment[];\n };\n}\n\nfunction ContentTemplateApp() {\n const [content, setContent] = useState([]);\n const [loading, setLoading] = useState(true);\n const [activeCategory, setActiveCategory] = useState(\"all\");\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [selectedItem, setSelectedItem] = useState(null);\n const [aiAnalysis, setAiAnalysis] = useState(null);\n\n useEffect(() => {\n fetchContent();\n }, []);\n\n const fetchContent = async () => {\n try {\n const response = await fetch(\"/api/content\");\n const data = await response.json();\n if (data.records) {\n setContent(data.records);\n } else {\n throw new Error(\"Failed to fetch content\");\n }\n setLoading(false);\n } catch (error) {\n console.error(\"Error fetching content:\", error);\n setLoading(false);\n }\n };\n\n const categories = [\"all\", ...new Set(content.map((item) => item.fields.Category || \"\"))];\n\n const filteredContent = content.filter((item) => {\n const matchesCategory = activeCategory === \"all\" || item.fields.Category === activeCategory;\n const matchesSearch = searchTerm === \"\" || \n Object.values(item.fields).some(value => \n typeof value === \"string\" && value.toLowerCase().includes(searchTerm.toLowerCase())\n );\n return matchesCategory && matchesSearch;\n });\n\n const renderTags = (tags: string | string[] | undefined) => {\n if (!tags) return null;\n const tagArray = Array.isArray(tags) ? tags : [tags];\n return (\n

\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\"]} ${item.fields[\"Body Content 2\"]} ${item.fields[\"Body Content 3\"]} ${item.fields[\"Body Content 4\"]} ${item.fields[\"Conclusion & Key Takeaways\"]}`,\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 {loading ? (\n

Loading content...

\n ) : (\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 )}\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 ? (\n

{aiAnalysis}

\n ) : (\n

Analyzing content...

\n )}\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 = \"patXZjAXzGvcAyCcv.f35f12a672442df9c98a9a30f081dc21aa56b072addc93f4c53bc389fb22defd\";\n const baseId = \"appe6CB5XnPgGVQHw\";\n const tableId = \"tblldKWyq3kppzUoP\";\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 Content Template\n \n \n \n \n

\n \n \n

\n View source\n

\n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\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`;\n\n// Examples of how to use this endpoint and contentTemplateApp\n\n// Example 1: Importing and using contentTemplateApp in another val\n/*\nimport ContentTemplateApp from 'https://esm.town/v/awhitter/contentTemplateApp';\n\nexport default function MyCustomApp() {\n return (\n

My Custom App

\n \n

\n );\n}\n*/\n\n// Example 2: Making an API call to /api/content endpoint\n/*\nasync function fetchContent() {\n try {\n const response = await fetch('https://awhitter-contenttemplateapp.web.val.run/api/content');\n const data = await response.json();\n console.log('Content:', data);\n // Process the data as needed\n } catch (error) {\n console.error('Error fetching content:', error);\n }\n}\n\nfetchContent();\n*/\n\n// Example 3: Rendering the ContentTemplateApp component in a custom layout\n/*\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport ContentTemplateApp from 'https://esm.town/v/awhitter/contentTemplateApp';\n\nfunction CustomLayout() {\n return (\n

My Website

\n \n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")).render();\n*/\n\n// Example 4: Using the endpoint in make.com\n/*\nTo use this endpoint in make.com:\n1. Create a new scenario in make.com\n2. Add an HTTP module as the first step\n3. Configure the HTTP module as follows:\n - URL: https://awhitter-contenttemplateapp.web.val.run/api/content\n - Method: GET\n - Headers: None required\n4. In the next module, you can process the JSON response from the API\n The response will contain an array of records with the content from Airtable\n*/\n\n// Example 5: Using the endpoint in Framer with fetch\n/*\n// In your Framer project, create a new code component and use the following code:\n\nimport { Data, animate, Override, Animatable } from \"framer\"\n\n// This function fetches the content from the API\nasync function fetchContent() {\n try {\n const response = await fetch('https://awhitter-contenttemplateapp.web.val.run/api/content')\n const data = await response.json()\n return data.records\n } catch (error) {\n console.error('Error fetching content:', error)\n return []\n }\n}\n\n// This is your Framer component\nexport function ContentDisplay(): Override {\n const [content, setContent] = Data.useState([])\n\n Data.useEffect(() => {\n fetchContent().then(setContent)\n }, [])\n\n return {\n content: content,\n variants: {\n hidden: { opacity: 0, y: 20 },\n visible: { opacity: 1, y: 0 },\n },\n initial: \"hidden\",\n animate: \"visible\",\n transition: { staggerChildren: 0.1 },\n children: content.map((item, index) => (\n \n )),\n }\n}\n\nfunction ContentItem({ title, description, image }) {\n return {\n width: 300,\n height: 400,\n background: \"#fff\",\n borderRadius: 10,\n overflow: \"hidden\",\n boxShadow: \"0 4px 6px rgba(0,0,0,0.1)\",\n children: [\n image && {\n width: \"100%\",\n height: 200,\n background: `url(${image})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n },\n {\n y: image ? 200 : 0,\n padding: 20,\n children: [\n { type: \"h2\", text: title, fontSize: 18, fontWeight: \"bold\" },\n { type: \"p\", text: description, fontSize: 14, color: \"#666\" },\n ],\n },\n ],\n }\n}\n*/",["D",1738354160303],{"_96":97,"_101":102},"awhitter/contentTemplateApp",[185,187,190,193,196,200,204,208,211,214],{"_98":186,"_145":157,"_168":169},["D",1738354160303],{"_98":188,"_145":189,"_168":172},["D",1738354087943],8,{"_98":191,"_145":192,"_168":175},["D",1738353692832],7,{"_98":194,"_145":113,"_168":195},["D",1738353577921],"4",{"_98":197,"_145":198,"_168":199},["D",1738351676986],5,"5",{"_98":201,"_145":202,"_168":203},["D",1738351637186],4,"6",{"_98":205,"_145":206,"_168":207},["D",1738351276303],3,"7",{"_98":209,"_145":90,"_168":210},["D",1738351228390],"8",{"_98":212,"_145":110,"_168":213},["D",1738349489243],"9",{"_98":215,"_145":31,"_168":216},["D",1738348710964],"10","hasNext","routes/_app","actionData","errors"]