${title}

${item.title}

${item.description}

${makeShortDate(item.pubDate)}

\n ◉︎\n

\n`;\n};\n\nconst writeTopic = (topic: any) => {\n if (topic.news.length > 0) {\n const plot = plotTopic(topic.count, topic.plotParams);\n return `\n

\n ${topic.topic}\n

day.counts + acc, 0)\n } noticias en los últimos ${topic.plotParams.days} días\" class=\"topicPlot\">\n ${plot}\n

\n ${topic.news.map(writeItem).join(\"\")}\n

\n `;\n }\n};\n\nconst writePage = (data: any, style: string, script: string, plotDays: number = 30) => {\n const title = \"digest\";\n const favicon =\n \"iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI3SURBVFiF7ZbNS1RhFIef8167Ox3ICGultu0Dnelu3FwoqkVSG1f9Dy100R8RSv9BSO3cSVKGwmxCnA8HKhdFmi0iKadQGQjxfU+LSZiPe4dxnEsE/nb3vPfyPPfrvAdO848jx70gDMOeSsUPrGXIGM4DOMd3VbOZSv3OZ7PZw0QERkZuXzNGJ4G7wNmY08rAgqqZXlt79bYrAul0eE71zIyIPABMm74OeOZ5diqXWy53LJDJ3Lqsyjww1Ca4MZsi3CsUXr8/tsBf+Bugr0P4UXaNkbF8fnG9bYEguNFvrbcKXDoh/ChbznlBqfTyR+NC5Dt1znvSRTjAoDH2cdRC0xMYHb1zVcSV4uROECfiMoXCUqm22AQRcVMJwAGMqvewiVd7EIZhz/6+vw30JyAAUO7tPRiobVZ1d1qp+EGCcID+vb2eTG2hTsDajv/3tmOM1DHqBES4kLSAqrkYKwCiSQuAq2M0fu3fksarytdYAWN0K2kBcF9iBQYHU6sgOwnSy319h4VYgbm5OQu6kBRdROcbB5aIjuemAZsA34LMNBabBIrFpXfA827TVZmNmgsie77vyyTwqYv8zyIHj6IWIgVWVhZ/GiP3gd0uwHeNkfFiMRv5ccfuevn84rrn2QD4cAL4RqtpqKUAQC63/NHz7BgwS3XQbDdWRJ/6vgSt4HCMsTydvnkFvEnQcWJ3TNkBXojodKtBtCOBo0xMTHgbG7+uV3c1GahWdVtVNoeHU4VqLznNf5Q/zs6/KOtEX1YAAAAASUVORK5CYII=\";\n return `\n\n\n \n \n \n \n \n \n \n ${title}\n \n \n

${title}

\n ${data.map(writeTopic).join(\"\")}\n

\n \n \n\n `;\n};\n\nconst plotTopic = (data, params) => {\n const document = parseHTML(\"\").document;\n const markOptions = {\n x: \"pubDate\",\n y: \"counts\",\n z: \"topic\",\n sort: { channel: \"x\" },\n curve: \"basis\",\n };\n const scaleOptions = {\n ticks: 0,\n label: null,\n };\n return Plot.plot({\n document,\n height: 40,\n width: 50,\n marginTop: 2,\n marginBottom: 10,\n marginLeft: 5,\n marginRight: 5,\n y: {\n ...scaleOptions,\n domain: [0, params.maxY],\n },\n x: {\n ...scaleOptions,\n domain: [params.minX, new Date().getTime()],\n },\n marks: [\n Plot.line(data, {\n ...markOptions,\n strokeWidth: 1.5,\n }),\n ],\n });\n};\n\nconst makeReadable = async (link: string) => {\n console.log(\"fetch\");\n const response = await fetch(link, { signal: AbortSignal.timeout(5000) });\n const text = await response.text();\n console.log(\"parse\");\n const doc = new JSDOM(text);\n const reader = new Readability(doc.window.document);\n const article = reader.parse();\n const html = parse(article.content);\n console.log(\"select\");\n const content = html.querySelectorAll(\"p\").filter(p => p.textContent.trim() != \"\").map(p =>\n `

${p.textContent.trim()}

`\n ).join(\"\");\n console.log(\"return\");\n return `

${content}

`;\n};\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname == \"/readable\" && req.method == \"POST\") {\n try {\n console.log(\"post\");\n const r = await req.json();\n const content = await makeReadable(r.link);\n return new Response(content, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n } catch (error) {\n console.log(error);\n }\n } else if (req.method == \"GET\") {\n const data = await organizeNews();\n const page = writePage(data, style, script);\n const response = new Response(page, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n return response;\n }\n}","2025-09-29T23:13:10.862Z","digest","https://www.val.town/x/mmrech/digest/code/","mmrech",[197,199,201,203,204],{"_127":133,"_129":198,"_131":22},"import * as Plot from \"npm:@observablehq/plot@0.6.14\";",{"_127":136,"_129":200,"_131":22},"import { d3 } from \"npm:d3@7\";",{"_127":140,"_129":202,"_131":138},"import { parseHTML } from \"npm:linkedom@0.15\";",{"_127":142,"_129":72,"_131":22},{"_127":205,"_129":206,"_131":22},9,"const style = `",{"_104":208,"_106":209,"_108":210,"_110":111,"_112":211,"_114":212,"_116":213,"_118":214,"_120":215,"_122":-5,"_123":-5,"_124":216,"_144":145},"383dcfc6-9af8-11f0-813e-0224a6c84d84","https://www.val.town/x/craigary/japanese-traditional-colors-to-notion/code/main.ts","383a9ef0-9af8-11f0-813e-0224a6c84d84","import { Client } from \"npm:@notionhq/client\";\nimport process from \"node:process\";\nimport { DOMParser } from \"npm:linkedom\";\nimport { createCanvas } from \"jsr:@gfx/canvas@0.5.6\";\n\nconst datasourceId = process.env.NOTION_DS_ID;\nconst jpColorURL = \"https://www.colordic.org/w\";\n\nconst parser = new DOMParser();\nconst notion = new Client({ auth: process.env.NOTION_TOKEN });\n\nconst solidColorDataURL = (hex: string) => {\n // Create a 256 x 256 canvas in Node\n const canvas = createCanvas(256, 256);\n const ctx = canvas.getContext(\"2d\");\n\n // Fill with the provided hex color\n ctx.fillStyle = hex;\n ctx.fillRect(0, 0, 256, 256);\n\n // Return PNG data URL (defaults to image/png)\n return canvas.toDataURL();\n};\n\n// Fetch All Colors\nconst fetchAllColors = async () => {\n const htmlStr = await fetch(jpColorURL).then((res) => res.text());\n\n const document = parser.parseFromString(htmlStr, \"text/html\");\n\n const colorTable = document.querySelector(\".colortable\");\n\n const colors = [...colorTable.querySelectorAll(\"td\")].map((color) => {\n const link = color.querySelector(\"a\");\n const linkContent = link.textContent.replaceAll(\"\\t\", \"\");\n const [name, _, code] = linkContent.split(\"\\n\");\n const colorUrl = solidColorDataURL(code);\n return { name, code, colorUrl };\n });\n\n return colors;\n};\n\nconst addColorToNotion = async (color: {\n name: string;\n code: string;\n colorUrl: string;\n}) => {\n console.log(\"start adding color: \", color.name, color.code);\n await notion.pages.create({\n parent: { data_source_id: datasourceId },\n icon: {\n type: \"external\",\n external: { url: color.colorUrl },\n },\n properties: {\n Name: { title: [{ text: { content: color.name } }] },\n \"Hex Code\": { rich_text: [{ text: { content: color.code } }] },\n \"Color\": {\n rich_text: [{\n type: \"equation\",\n equation: { expression: `\\\\color{${color.code}}\\\\rule{100px}{10px}` },\n }],\n },\n Swatch: {\n files: [\n {\n type: \"external\",\n name: color.name + \".png\",\n external: { url: color.colorUrl },\n },\n ],\n },\n },\n });\n};\n\nconst colors = await fetchAllColors();\nconst batchSize = 20;\n\nfor (let i = 0; i < colors.length; i += batchSize) {\n const batch = colors.slice(i, i + batchSize);\n await Promise.all(batch.map(addColorToNotion));\n}","2025-09-26T17:48:38.808Z","japanese-traditional-colors-to-notion","https://www.val.town/x/craigary/japanese-traditional-colors-to-notion/code/","craigary",[217,219,222,225,227],{"_127":145,"_129":218,"_131":22},"import { Client } from \"npm:@notionhq/client\";",{"_127":220,"_129":221,"_131":22},2,"import process from \"node:process\";",{"_127":223,"_129":224,"_131":138},3,"import { DOMParser } from \"npm:linkedom\";",{"_127":128,"_129":226,"_131":22},"import { createCanvas } from \"jsr:@gfx/canvas@0.5.6\";",{"_127":133,"_129":72,"_131":22},"projectResults",[230],{"_104":231,"_106":232,"_110":233,"_120":234,"_122":-5,"_123":-5,"_235":-5,"_114":236,"_237":238,"_239":220},"d3982b64-25f1-11f0-ad23-569c3dd06744","https://www.val.town/x/stevekrouse/plotLinkeDOMSRRExample/code/","plotLinkeDOMSRRExample","stevekrouse","forked_branch_id","2024-06-11T18:00:08.306Z","user_id","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","matchCount","userResults",[],"docResults",[244],{"_106":245,"_112":246,"_247":248,"_249":250,"_257":258,"_278":279,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294},"https://docs.val.town/guides/web-scraping/","Web scraping. Copy page Copy page. Copy this page as Markdown for LLMs. View as Markdown View this page as plain text. Open in ChatGPT Ask questions about this page. You can use vals to scrape websites, either by fetching HTML and using a parsing library, or by making an API call to an external service that runs a headless browser for you. Locate the HTML element that contains the data you need. Section titled “Locate the HTML element that contains the data you need” Right click on the section of a website that contains the data you want to fetch and then inspect the element. In Chrome, the option is called Inspect and it highlights the HTML element in the Chrome DevTools panel. For example, to scrape the introduction paragraph of the OpenAI page on Wikipedia, inspect the first word of the first paragraph. In the Elements tab, look for the the data you need and right click the parent element and choose Copy selector to get the CSS selector: #mw-content-text > div.mw-parser-output > p:nth-child(7). If you know a little CSS, it’s better to write your own selector by hand to make it more generic. This can make the selector less vulnerable to the website being updated and, e.g., class names changing. In this case, you can use p:nth-of-type(2). Optionally, use document.querySelector in the Console to check your CSS selector is correct. Parsing HTML. Section titled “Parsing HTML” The OpenAI page on Wikipedia is rendered on the server and arrives as a complete HTML document. This makes it a good fit for cheerio which parses HTML markup and provides an API for traversing/manipulating the resulting data structure. We also recommend node-html-parser and linkedom. ExampleRun in Val Town ↗ import { fetchText } from \"https://esm.town/v/stevekrouse/fetchText?v=6\"; import { load } from \"npm:cheerio\"; const html = await fetchText(\"https://en.wikipedia.org/wiki/OpenAI\"); const $ = load(html); // Cheerio accepts a CSS selector, here we pick the second

Search

Vals1

Vals
1