/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { marked } from "https://esm.sh/marked"; // Configure marked options marked.setOptions({ gfm: true, // GitHub Flavored Markdown breaks: true, // Convert \n to
}); interface RSSFeed { title: string; description: string; items: RSSItem[]; } interface RSSItem { title: string; link: string; published?: number; description?: string; } interface BlobKey { key: string; size: number; lastModified: string; } function App() { const [keys, setKeys] = useState([]); const [selectedFeed, setSelectedFeed] = useState(null); const [analysis, setAnalysis] = useState(null); const [error, setError] = useState(null); const [isAnalyzing, setIsAnalyzing] = useState(false); useEffect(() => { fetchKeys(); }, []); const fetchKeys = async () => { try { const response = await fetch("/keys"); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data: BlobKey[] = await response.json(); setKeys(data.map(item => item.key)); } catch (e) { setError(`Failed to fetch keys: ${e.message}`); } }; const handleKeyClick = async (key: string) => { try { const response = await fetch(`/feed/${encodeURIComponent(key)}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (!data.title || !Array.isArray(data.items)) { throw new Error("Invalid feed data structure"); } setSelectedFeed(data); setAnalysis(null); setError(null); } catch (e) { setError(`Failed to fetch feed: ${e.message}`); } }; const handleItemClick = async (item: RSSItem) => { try { setIsAnalyzing(true); setAnalysis(null); setError(null); const response = await fetch("/analyze", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: item.title, description: item.description || "" }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const analysisHtml = await response.text(); setAnalysis(analysisHtml); } catch (e) { setError(`Failed to analyze item: ${e.message}`); } finally { setIsAnalyzing(false); } }; return (

RSS Feed Reader

{error &&

{error}

}

RSS Feeds

handleKeyClick(key)}> {key}

{selectedFeed && (

{selectedFeed.title}

{selectedFeed.description}

handleItemClick(item)}>
{item.title}
{item.description &&
{item.description}
} {item.published &&
Published: {new Date(item.published).toLocaleString()}
}

)}

Analysis

{isAnalyzing ? (

Analyzing content...

) : analysis ? (

) : (

Select an item to analyze

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); const url = new URL(request.url); try { if (url.pathname === "/keys") { const keys = await blob.list("rss_"); return new Response(JSON.stringify(keys), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname.startsWith("/feed/")) { const key = decodeURIComponent(url.pathname.slice(6)); const feed = await blob.getJSON(key); return new Response(JSON.stringify(feed), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/analyze" && request.method === "POST") { const { title, description } = await request.json(); const analyzeContent = (await import("https://esm.town/v/vip/getAIAnalysis")).default; const analysis = await analyzeContent(title, description); const htmlContent = marked(analysis); return new Response(`${htmlContent}`, { headers: { "Content-Type": "text/html" }, }); } return new Response( ` RSS Feed Reader

`, { headers: { "Content-Type": "text/html" }, }, ); } catch (error) { console.error("Server error:", error); return new Response(`Error: ${error.message}`, { status: 500 }); } } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 1200px; margin: 0 auto; padding: 1rem; } h1 { color: #333; text-align: center; } .content { display: flex; gap: 2rem; } .key-list { flex: 1; background-color: #fff; padding: 1rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .key-list ul { list-style-type: none; padding: 0; } .key-list li { cursor: pointer; padding: 0.5rem; border-bottom: 1px solid #eee; } .key-list li:hover { background-color: #f0f0f0; } .feed-content { flex: 2; background-color: #fff; padding: 1rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .feed-content ul { list-style-type: none; padding: 0; } .feed-content li { cursor: pointer; padding: 1rem; border-bottom: 1px solid #eee; } .feed-content li:hover { background-color: #f0f0f0; } .analysis { flex: 2; background-color: #fff; padding: 1rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .error { background-color: #ffebee; color: #c62828; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid #ef9a9a; } footer { text-align: center; margin-top: 2rem; } footer a { color: #333; text-decoration: none; } footer a:hover { text-decoration: underline; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; } .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `;

RSS Feed Reader

RSS Feeds

{selectedFeed.title}

{item.title}

Analysis