extractValInfo

Val Town Blog A blog written, developed and hosted on val.town. How ? Each article on this blog is contained single val, with a #blog tag. See this example article . // #blog // title: Example Post import { article } from "https://esm.town/v/pomdtr/article"; import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export async function examplePost(req: Request) { const { author, name } = extractValInfo(import.meta.url); return html(await article(author, name)); } Each of these post work on it's own . This val is able to: list them with the /v1/search api (with a #blog query) post with different author than the owner of this val will be filtered out only public vals will be listed render the readme of those vals using remark (with github styling) This process run each time a user visit the web endpoint , so the blog is always up to date. You can get your own instance of the blog by just forking this val .

An interactive, runnable TypeScript val by vladimyr

Forked from janpaul123/VALLE

@jsxImportSource npm:hono/jsx

Val Shot Generate val source code screenshot using sourcecodeshots.com ⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs 📣 Special thanks to @pomdtr for their help and contributions! Usage https://vladimyr-valshot.web.val.run/v/<author>/<val> Example https://vladimyr-valshot.web.val.run/v/vladimyr/valshot https://vladimyr-valshot.web.val.run/v/pomdtr/readme

Sqlite Table Usage: Fork this Val Replace the existing migrations by your own table The table name will match the val name. To update the table, just add new items to the migrations array, and re-run the val

// SPDX-License-Identifier: 0BSD

Forked from janpaul123/VALLE

Forked from maxm/infiniteSVGGraph

Telemetry For Vals. Telemetry is a library that lets you trace val town executions with opentelemetry. All traces are stored in val.town sqlite and there is an integrated trace viewer to see them. Quickstart Instrument an http val like this. import { init, tracedHandler, } from "https://esm.town/v/saolsen/telemetry"; // Set up tracing by passing in `import.meta.url`. // be sure to await it!!! await init(import.meta.url); async function handler(req: Request): Promise<Response> { // whatever else you do. return } export default tracedHandler(handler); This will instrument the http val and trace every request. Too add additional traces see this widgets example . Then, too see your traces create another http val like this. import { traceViewer } from "https://esm.town/v/saolsen/telemetry"; export default traceViewer; This val will serve a UI that lets you browse traces. For example, you can see my UI here . Tracing By wrapping your http handler in tracedHandler all your val executions will be traced. You can add additional traces by using the helpers. trace lets you trace a block of syncronous code. import { trace } from "https://esm.town/v/saolsen/telemetry"; trace("traced block", () => { // do something }); traceAsync lets you trace a block of async code. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; await traceAsync("traced block", await () => { // await doSomething(); }); traced wraps an async function in tracing. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; const myTracedFunction: () => Promise<string> = traced( "myTracedFunction", async () => { // await sleep(100); return "something"; }, ); fetch is a traced version of the builtin fetch function that traces the request. Just import it and use it like you would use fetch . sqlite is a traced version of the val town sqlite client. Just import it and use it like you would use https://www.val.town/v/std/sqlite attribute adds an attribute to the current span, which you can see in the UI. event adds an event to the current span, which you can see in the UI.

Open Command

Forked from pomdtr/test_explorer_router

Code Search is Easy Earlier this week, Tom MacWright posted Code Search is Hard . He describes the research he his doing to improve the code search experience of Val Town . It was a great read, and you might have seen it trending on Hacker News . As Val Town's most active user (behind Steve Krouse, one of the founders of Val Town), I for sure agree with Tom that the search feature needs improvements. But while reading his post, I immediately thought of a different approach to the problem. And a few hours later, Val Town Search was born. Do things that don't scale How does this new shiny search engine work? Well, it's quite simple. I wrote a Deno script that fetches all vals from the Val Town API. #!/usr/bin/env -S deno run -A import * as path from "https://deno.land/std/path/mod.ts"; const dir = path.join(import.meta.dirname!, "..", "vals"); const blocklist = Deno.readTextFileSync( path.join(import.meta.dirname!, "blocklist.txt") ) .split("\n") .map((line) => line.trim()) .filter((line) => line.length > 0); let url = `https://api.val.town/v1/search/vals?limit=100&query=+`; const vals = []; while (true) { console.log("fetching", url); const resp = await fetch(url); if (!resp.ok) { console.error(resp.statusText); Deno.exit(1); } const { data, links } = await resp.json(); vals.push(...data); if (!links.next) { break; } url = links.next; } Deno.removeSync(dir, { recursive: true }); Deno.mkdirSync(dir, { recursive: true }); for (const val of vals) { const slug = `${val.author.username}/${val.name}`; if (blocklist.includes(slug)) { console.log("skipping", slug); continue; } const userDir = path.join(dir, val.author.username); Deno.mkdirSync(userDir, { recursive: true }); Deno.writeTextFileSync(path.join(userDir, `${val.name}.tsx`), val.code); } I pushed the data to a Github Repository (now private) I added a Github Action that runs the script every hour to refresh the data. #!/usr/bin/env -S deno run -A import * as path from "https://deno.land/std/path/mod.ts"; const dir = path.join(import.meta.dirname!, "..", "vals"); const blocklist = Deno.readTextFileSync( path.join(import.meta.dirname!, "blocklist.txt") ) .split("\n") .map((line) => line.trim()) .filter((line) => line.length > 0); let url = `https://api.val.town/v1/search/vals?limit=100&query=+`; const vals = []; while (true) { console.log("fetching", url); const resp = await fetch(url); if (!resp.ok) { console.error(resp.statusText); Deno.exit(1); } const { data, links } = await resp.json(); vals.push(...data); if (!links.next) { break; } url = links.next; } Deno.removeSync(dir, { recursive: true }); Deno.mkdirSync(dir, { recursive: true }); for (const val of vals) { const slug = `${val.author.username}/${val.name}`; if (blocklist.includes(slug)) { console.log("skipping", slug); continue; } const userDir = path.join(dir, val.author.username); Deno.mkdirSync(userDir, { recursive: true }); Deno.writeTextFileSync(path.join(userDir, `${val.name}.tsx`), val.code); } I created a simple frontend on top of the Github Search API that allows you to search the data. It's hosted on Val Town (obviously). That was it. I didn't have to build a complex search engine, I just used the tools that were available to me. Is this a scalable solution for Val Town? Probably not. Am I abusing the Github API? Maybe. Does it work better than the current search feature of Val Town? Absolutely! I hope that the val.town engineers will come up with a search feature that will put my little project to shame. But for now, you won't find a better way to search for vals than Val Town Search . PS: This post was written / is served from Val Town

This val is supposed to be used with the val.town extension. See the extension readme for installation instructions.

Proxy Server for Github Oauth The mechanism is inspired from https://indielogin.com/

Forked from mxdvl/vals