\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 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 ? (\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 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 ? (\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*/","deleted","label",[99],"permalink","https://www.val.town/x/awhitter/contentTemplateApp/code/main.tsx","extension","actionData","errors"]