/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [keywords, setKeywords] = useState({}); useEffect(() => { fetch("/keywords") .then(response => response.json()) .then(data => setKeywords(data)); }, []); return (

{Object.entries(keywords).map(([keyword, count]) => ( {keyword} ))}

); } 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"); if (request.url.endsWith("/keywords")) { const keys = await blob.list("keywords_"); const allKeywords = []; for (const { key } of keys) { const keywordList = await blob.getJSON(key); allKeywords.push(...keywordList); } const keywordCounts = allKeywords.reduce((acc, keyword) => { acc[keyword] = (acc[keyword] || 0) + 1; return acc; }, {}); return new Response(JSON.stringify(keywordCounts), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Keyword Word Cloud

Keyword Word Cloud

View source: val.town

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } h1 { text-align: center; } .word-cloud { text-align: center; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } `;

show_keyword_cloud

Versions

v0