/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; interface AirtableAttachment { id: string; width: number; height: number; url: string; filename: string; size: number; type: string; } interface AirtableRecord { id: string; createdTime: string; fields: { Title?: string; CardText?: string; Date?: string; ReadTime?: string; ShortCardText?: string; Category?: string; Tags?: string | string[]; "Card Image"?: AirtableAttachment[]; "Intro Image"?: AirtableAttachment[]; "Body Image 1"?: AirtableAttachment[]; "Body Image 2"?: AirtableAttachment[]; "Body Image 3"?: AirtableAttachment[]; "Quote or Emphasized Text 1"?: string; "Quote or Emphasized Text 2"?: string; "Intro Content"?: string; "Body Content 1"?: string; "Body Content 2"?: string; "Body Content 3"?: string; "Body Content 4"?: string; "Conclusion & Key Takeaways"?: string; FAQ?: string; "Poll or Survey"?: string; Audio?: AirtableAttachment[]; Video?: AirtableAttachment[]; }; } function ContentTemplateApp() { const [content, setContent] = useState([]); const [loading, setLoading] = useState(true); const [activeCategory, setActiveCategory] = useState("all"); const [searchTerm, setSearchTerm] = useState(""); const [selectedItem, setSelectedItem] = useState(null); const [aiAnalysis, setAiAnalysis] = useState(null); useEffect(() => { fetchContent(); }, []); const fetchContent = async () => { try { const response = await fetch("/api/content"); const data = await response.json(); if (data.records) { setContent(data.records); } else { throw new Error("Failed to fetch content"); } setLoading(false); } catch (error) { console.error("Error fetching content:", error); setLoading(false); } }; const categories = ["all", ...new Set(content.map((item) => item.fields.Category || ""))]; const filteredContent = content.filter((item) => { const matchesCategory = activeCategory === "all" || item.fields.Category === activeCategory; const matchesSearch = searchTerm === "" || Object.values(item.fields).some(value => typeof value === "string" && value.toLowerCase().includes(searchTerm.toLowerCase()) ); return matchesCategory && matchesSearch; }); const renderTags = (tags: string | string[] | undefined) => { if (!tags) return null; const tagArray = Array.isArray(tags) ? tags : [tags]; return (

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

); }; const analyzeContent = async (item: AirtableRecord) => { try { const response = await fetch("/api/analyze", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: item.fields.Title, shortDescription: item.fields.ShortCardText, 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"] }`, }), }); const data = await response.json(); setAiAnalysis(data.analysis); } catch (error) { console.error("Error analyzing content:", error); setAiAnalysis("Failed to analyze content. Please try again later."); } }; return (

Content Template App

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'

setSearchTerm(e.target.value)} className="p-2 border rounded mr-4 flex-grow" /> {categories.map((category) => ( ))}

{loading ?

Loading content...

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

{item.fields.Title}

{item.fields.Date}

{item.fields.ShortCardText}

Read time: {item.fields.ReadTime}

{item.fields["Card Image"] && item.fields["Card Image"][0] && ( {item.fields.Title}

)} {renderTags(item.fields.Tags)}

Created: {new Date(item.createdTime).toLocaleDateString()}

)) )}

{selectedItem && (

{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

{aiAnalysis ?

{aiAnalysis}

Analyzing content...

}

)}

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

View source

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: system-ui, sans-serif; } .prose { max-width: 65ch; color: #374151; } .prose p { margin-bottom: 1em; } `;

competentOlivePeacock