import renderToString from "https://esm.sh/preact-render-to-string@6.2.1"; import { h } from "https://esm.sh/preact@10.23.2"; // Function to fetch JSON data from URL async function fetchJSON(url: string) { try { console.log(`Attempting to fetch data from: ${url}`); const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } const data = await response.json(); console.log(`Successfully fetched data: ${JSON.stringify(data)}`); return data; } catch (error) { console.error(`Fetch error: ${error.message}`); return null; } } // Function to parse and format date function formatDate(dateString: string) { try { const [datePart, timePart] = dateString.split(" "); const [year, month, day] = datePart.split("-").map(Number); const [hour, minute, second] = timePart.split(":").map(Number); const date = new Date(year, month - 1, day, hour, minute, second); if (isNaN(date.getTime())) { throw new Error(`Invalid date: ${dateString}`); } const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: true, }; return date.toLocaleString("en-US", options); } catch (error) { console.error(`Error formatting date: ${error.message}`); return `Error: ${dateString}`; } } // Define the FeedItem component const FeedItem = ({ subject, time, text }: { subject: string; time: string; text: string }) => ( h( "div", { className: "feed-item" }, h("h2", null, subject || "No Subject"), h("p", { className: "timestamp" }, formatDate(time)), h("p", null, text || "No Content"), h("p", { className: "debug" }, `Raw time: ${time}`), ) ); // Main App component function App({ data }: { data: Array<{ id: number; Subject: string; Time: string; Text: string }> }) { if (!data || data.length === 0) { return h("div", null, "No data available"); } // Sort data by time in descending order const sortedData = [...data].sort((a, b) => new Date(b.Time).getTime() - new Date(a.Time).getTime()); return h( "div", { id: "feed-container" }, h("pre", { className: "debug" }, JSON.stringify(data, null, 2)), sortedData.map((item) => h(FeedItem, { key: item.id, subject: item.Subject, time: item.Time, text: item.Text, }) ), ); } // Server-side rendering export default async function server(request: Request): Promise { const jsonUrl = "https://avycado13-valboardapi.web.val.run"; const data = await fetchJSON(jsonUrl); let debugInfo = ""; if (!data) { debugInfo = "

Error: Failed to fetch data. Check console for more details.

"; } else if (data.length === 0) { debugInfo = "

Warning: Fetched data is empty

"; } else { debugInfo = `

Fetched ${data.length} items

`; } const appHtml = renderToString(h(App, { data: data || [] })); return new Response( ` Feed App

Feed App

${debugInfo}

${appHtml}

`, { headers: { "Content-Type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; line-height: 1.6; } h1 { text-align: center; color: #333; } #feed-container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feed-item { border-bottom: 1px solid #eee; padding: 20px 0; } .feed-item:last-child { border-bottom: none; } .feed-item h2 { margin: 0 0 10px 0; color: #333; } .timestamp { font-size: 0.8em; color: #666; margin-bottom: 10px; } .debug { font-size: 0.7em; color: #999; font-style: italic; white-space: pre-wrap; word-wrap: break-word; } footer { margin-top: 20px; text-align: center; font-size: 0.8em; color: #666; } `;