/** @jsxImportSource https://esm.sh/react */ import { createClient } from "https://esm.sh/@supabase/supabase-js"; import DOMPurify from "https://esm.sh/dompurify"; import { marked } from "https://esm.sh/marked"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface Metadata { totalScraps: number; scrapsByDay: Record; tagCounts: Record; } function App() { const [summary, setSummary] = useState(""); const [loading, setLoading] = useState(true); const [debugInfo, setDebugInfo] = useState([]); const [metadata, setMetadata] = useState(null); const [currentWeek, setCurrentWeek] = useState(() => { const urlParams = new URLSearchParams(window.location.search); const weekParam = urlParams.get("week"); return weekParam ? new Date(weekParam) : new Date(); }); useEffect(() => { fetchScrapsAndGenerateSummary(currentWeek); updateUrlState(currentWeek); }, [currentWeek]); const fetchScrapsAndGenerateSummary = async (weekStart: Date) => { setLoading(true); setSummary(""); setMetadata(null); setDebugInfo([]); try { setDebugInfo( prev => [...prev, `Fetching scraps and generating summary for week of ${weekStart.toDateString()}...`], ); const response = await fetch(`/api/summary?week=${weekStart.toISOString()}`); const data = await response.json(); if (data.error) { throw new Error(data.error); } setDebugInfo(prev => [ ...prev, `Fetched ${data.scrapCount} scraps for the week of ${weekStart.toDateString()}`, "Summary generated successfully", ]); setSummary(data.summary); setMetadata(data.metadata); } catch (error) { console.error("Error fetching summary:", error); setDebugInfo(prev => [...prev, `Error: ${error.message}`]); setSummary("Error generating summary. Please check the debug information and try again later."); } finally { setLoading(false); } }; const updateUrlState = (weekStart: Date) => { const newUrl = new URL(window.location.href); newUrl.searchParams.set("week", weekStart.toISOString().split("T")[0]); window.history.pushState({}, "", newUrl); }; const changeWeek = (offset: number) => { const newWeek = new Date(currentWeek); newWeek.setDate(newWeek.getDate() + offset * 7); setCurrentWeek(newWeek); }; const renderMarkdown = (content: string) => { const rawMarkup = marked(content); const sanitizedMarkup = DOMPurify.sanitize(rawMarkup); return { __html: sanitizedMarkup }; }; return (

EJ Fox's Weekly Work Summary

Week of {currentWeek.toDateString()}

Debug Information:

{info}

{metadata && (

Weekly Statistics:

Total scraps: {metadata.totalScraps}

Scraps by Day:

{day}: {count}

Top Tags:

{tag}: {count}

)} {loading ?

Loading summary...

: (

Summary for the Week

)}

curl

curl 'https://ejfox-weeksummary.web.val.run/api/summary?week=2024-06-16T00:00:00.000Z'

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/api/summary") { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const supabaseUrl = Deno.env.get("SUPABASE_PERSONAL_URL"); const supabaseKey = Deno.env.get("SUPABASE_PERSONAL_KEY"); if (!supabaseUrl || !supabaseKey) { return new Response(JSON.stringify({ error: "Supabase personal credentials not set" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } const supabase = createClient(supabaseUrl, supabaseKey); const weekParam = url.searchParams.get("week"); const startOfWeek = weekParam ? new Date(weekParam) : new Date(); startOfWeek.setHours(0, 0, 0, 0); startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay()); const endOfWeek = new Date(startOfWeek); endOfWeek.setDate(endOfWeek.getDate() + 6); endOfWeek.setHours(23, 59, 59, 999); const { data: scraps, error } = await supabase .from("scraps") .select("*") .gte("created_at", startOfWeek.toISOString()) .lte("created_at", endOfWeek.toISOString()); if (error) { return new Response(JSON.stringify({ error: "Error fetching scraps: " + error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } if (!scraps || scraps.length === 0) { return new Response( JSON.stringify({ error: `No scraps found for the week of ${startOfWeek.toDateString()}`, scrapCount: 0, metadata: { totalScraps: 0, scrapsByDay: {}, tagCounts: {} }, }), { status: 200, headers: { "Content-Type": "application/json" }, }, ); } // Generate metadata const metadata: Metadata = { totalScraps: scraps.length, scrapsByDay: {}, tagCounts: {}, }; scraps.forEach(scrap => { const date = new Date(scrap.created_at).toLocaleDateString("en-US", { weekday: "long" }); metadata.scrapsByDay[date] = (metadata.scrapsByDay[date] || 0) + 1; if (typeof scrap.tags === "string") { // const tags = scrap.tags.split(",").map(tag => tag.trim()); const tags = JSON.parse(scrap.tags); tags.forEach(tag => { metadata.tagCounts[tag] = (metadata.tagCounts[tag] || 0) + 1; }); } }); // Create a summarized version of scraps const summarizedScraps = scraps.map(scrap => ({ source: scrap.source, content: scrap.content ? scrap.content.substring(0, 4096) : "", summary: scrap.summary ? scrap.summary.substring(0, 4096) : "", created_at: scrap.created_at, tags: scrap.tags, title: scrap.title ? scrap.title.substring(0, 256) : "", })); // Generate summary using OpenAI try { const metadataString = ` Weekly Statistics: Total scraps: ${metadata.totalScraps} Scraps by Day: ${Object.entries(metadata.scrapsByDay).map(([day, count]) => `${day}: ${count}`).join(", ")} Top Tags: ${ Object.entries(metadata.tagCounts) .sort((a, b) => b[1] - a[1]) .slice(0, 5) .map(([tag, count]) => `${tag}: ${count}`) .join(", ") } `; const scrapsSummary = summarizedScraps.map(scrap => `Source: ${scrap.source}\nDate: ${scrap.created_at}\nTitle: ${scrap.title}\nTags: ${scrap.tags}\nContent: ${scrap.content}\nSummary: ${scrap.summary}\n` ).join("\n"); const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are an assistant tasked with summarizing EJ Fox's work based on various data points. Provide your response in markdown format. Do not specifically mention any tags or their usage, just let it inform your decision on the direction of the week. Only GitHub scraps represent code EJ Fox has written, other scraps may just be bookmarks or information Fox has gathered. Use short paragraphs. Add space between thoughts. Keep it simple and objective.", }, { role: "user", content: `Here's the metadata for EJ Fox's work for the week of ${startOfWeek.toDateString()}:\n${metadataString} - do not repeat this metadata, just use it to inform your narrative summary. \n\nNow, write a narrative summary of EJ Fox's (hacker-journalist based in NY) work for the week based on these clues (mastodon posts, bookmarks, github activity, etc) - try to get the high-level patterns of analysis, what was focused on repeatedly, what code was written, what motivations could be deduced:\n${scrapsSummary} - keep your summary brief, to the point, objective, in the style of an anthropological study of a test subject. Try to keep it to 1-2 short paragraphs please.`, }, ], model: "gpt-4o-mini", max_tokens: 300, }); const summary = completion.choices[0].message.content; return new Response(JSON.stringify({ summary, scrapCount: scraps.length, metadata }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response( JSON.stringify({ error: "Error generating summary: " + error.message, scrapCount: scraps.length, metadata }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } return new Response( ` EJ Fox's Weekly Work Summary

`, { headers: { "Content-Type": "text/html" }, }, ); } export default server;

weeksummary

Versions

v0