Search
codeOnValTown
@vladimyr
Code on Val Town Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it. This uses github-fork-ribbon-css under the hood. Usage Here are 2 different ways to add the "Code on Val Town" ribbon: 1. Wrap your fetch handler (recommended) import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default modifyFetchHandler(async (req: Request): Promise<Response> => {
return html(`<h2>Hello world!</h2>`);
}); Example: @andreterron/openable_handler 2. Wrap your HTML string import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(modifyHtmlString(`<h2>Hello world!</h2>`));
}; Example: @andreterron/openable_html Other ways We made sure this was very modular, so you can also add the ribbon using these methods: Get the element string directly: @andreterron/codeOnVT_ribbonElement Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream Customization Linking to the val These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val argument: modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }}) modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }}) Styling You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element. modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"}) modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"}) Here's how you can hide the ribbon on small screens: modifyFetchHandler(handler, {style: `@media (max-width: 768px) {
.github-fork-ribbon {
display: none !important;
}
}`}) To-dos [ ] Let users customize the ribbon. Some ideas are the text, color or placement.
Script
# Code on Val Town
Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.
This uses [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css) under the hood.
## Usage
Here are 2 different ways to add the "Code on Val Town" ribbon:
* @param bodyText HTML string that will be used to inject the element.
* @param val Define which val should open. Defaults to the root reference.
export function modifyHtmlString(
bodyText: string,
remarkHtmlTest
@stevekrouse
// Forked from @nbbaier.remarkHtmlTest
Script
export const remarkHtmlTest = (async () => {
const { unified } = await import(
"https://cdn.jsdelivr.net/npm/unified@10/+esm"
const { default: remarkParse } = await import("npm:remark-parse");
const { default: remarkHTML } = await import("npm:remark-html");
const output = await unified()
.use(remarkParse)
.use(remarkHTML)
.process("# Hello World")
.then((file) => console.log(String(file)));
deployBackend
@toowired
An interactive, runnable TypeScript val by toowired
Script
export default function deployBackend({ code, schema, dependencies }) {
// Input Validation
if (!code || typeof code !== 'string') {
throw new Error("Invalid input: 'code' must be a string.");
if (!schema || !Array.isArray(schema)) {
throw new Error("Invalid input: 'schema' must be an array.");
if (!dependencies || !Array.isArray(dependencies)) {
throw new Error("Invalid input: 'dependencies' must be an array.");
// Actual deployment logic
return (async () => {
hackerNewsRAG
@paulhoule
Find comments on HN (powered by Algolia ), extract content and return a streaming markdown summary (powered by Substrate ). The RAG portion of this is 34 lines of Substrate code. Twitter thread walkthrough: https://x.com/vprtwn/status/1812844236401762513 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits.
HTTP
Find comments on HN (powered by [Algolia](https://hn.algolia.com/api)), extract content and return a streaming markdown summary (powered by [Substrate](https://substrate.run)).
The RAG portion of this is 34 lines of Substrate code. Twitter thread walkthrough: https://x.com/vprtwn/status/1812844236401762513
🪩 To fork, [sign up for Substrate](https://substrate.run/signin) to get your own API key and $50 free credits.
const substrate = new Substrate({ apiKey: Deno.env.get("SUBSTRATE_API_KEY") });
// search for HN comments using https://hn.algolia.com/api
const query = "rust";
const searchResults = await hnSearch({
query: query,
numericFilters: `created_at_i>${Math.floor(Date.now() / 1000) - 60 * 60 * 24 * 7 * 4}`,
tags: "comment",
dispatch
@beneskildsen
An interactive, runnable TypeScript val by beneskildsen
Script
import { getItem } from "https://esm.town/v/beneskildsen/getItem";
export const dispatch = async (action, reducer, stateNamespace) => {
const state = getItem(stateNamespace);
const nextState = reducer(state, action);
await setItem(stateNamespace, nextState);
return nextState;
feeds
@elan
Bluesky feed generator
HTTP
Bluesky feed generator
export default async function(req: Request): Promise<Response> {
const url = new URL(req.url);
const path = url.pathname;
if (path === "/") {
return new Response(
`<!DOCTYPE html><html><head><style>:root {color-scheme: light dark;}body {font-family: Arial, sans-serif;}</style><meta name="viewport" content="width=device-width, initial-scale=1" /></head>
<body><h1>Bluesky Feed: Posts Without 'E'</h1>
<p>This feed includes all Bluesky posts that do not contain the letter 'E'.</p>
<ul>
moccasinMoose
@yusukebe
An interactive, runnable TypeScript val by yusukebe
HTTP
import { Hono } from "npm:hono@4";
const app = new Hono();
app.get("/", (c) => c.text("Hello Val!"));
export default app.fetch;
consoleEmailEx
@suncin
An interactive, runnable TypeScript val by suncin
Script
export let consoleEmailEx = (() => {
console.email({ html: "<b>hi!</b>", subject: "Subject accepted here too" });
CVE
@curtcox
An interactive, runnable TypeScript val by curtcox
HTTP
import { chatio } from "https://esm.town/v/curtcox/_cve";
export const Chatio = (req: Request) => {
return chatio(req);
examplebot_endpoint
@stevekrouse
// Forked from @malloc.examplebot_endpoint
Script
export let examplebot_endpoint = (
req: express.Request,
res: express.Response,
console.log(res);
if (!req.get("X-Signature-Timestamp") || !req.get("X-Signature-Ed25519")) {
res.status(400);
res.end("Signature headers missing");
verify_discord_signature(
process.env.discord_pubkey,
JSON.stringify(req.body),
val_f82nThdwYO
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
function isPrime(num) {
if (num <= 1) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
return true;
function findLowestThreeDigitPrime() {
for (let num = 100; num < 1000; num++) {
dummyJustProxyLibsql
@janpaul123
An interactive, runnable TypeScript val by janpaul123
HTTP
import { InStatement, sqlite } from "https://esm.town/v/std/sqlite?v=4";
export default rpc(async (statement: InStatement) => {
try {
return await sqlite.execute(statement);
} catch (e) {
throw new Response(e.message, {
status: 500,
ics_example
@ije
An interactive, runnable TypeScript val by ije
Script
const event = {
start: [2018, 5, 30, 6, 30],
duration: { hours: 6, minutes: 30 },
title: "Bolder Boulder",
description: "Annual 10-kilometer run in Boulder, Colorado",
location: "Folsom Field, University of Colorado (finish line)",
url: "http://www.bolderboulder.com/",
geo: { lat: 40.0095, lon: 105.2669 },
categories: ["10k races", "Memorial Day Weekend", "Boulder CO"],
status: "CONFIRMED",
FontPack
@rektdeckard
An interactive, runnable TypeScript val by rektdeckard
HTTP
const CDN_BASE_URL = "https://unpkg.com/@phosphor-icons";
type SemVer = `${number}.${number}.${number}`;
type IconStyleMap = Partial<Record<IconStyle, string[]>>;
type FontFormatMap = Partial<Record<FontEditor.FontType, ArrayBuffer>>;
type SerialFontFormatMap = Partial<Record<FontEditor.FontType, string>>;
type FontPack = {
fonts: FontFormatMap;
css: string;
type SerialFontPack = {
fonts: SerialFontFormatMap;
twitterRAG
@levi
NOTE: We've disabled the Exa API key in this demo due to high volume – you'll need to fork and provide your own to use it. Search on Twitter (powered by Exa ) and return a streaming markdown summary (powered by Substrate ). To fork, sign up for Substrate to get your own API key and $51 free credits. You'll also need Exa, which comes with generous free credits and can be a much cheaper alternative to the Twitter API.
HTTP
NOTE: We've disabled the Exa API key in this demo due to high volume – you'll need to fork and provide your own to use it.
Search on Twitter (powered by [Exa](https://exa.ai)) and return a streaming markdown summary (powered by [Substrate](https://substrate.run)).
To fork, [sign up for Substrate](https://substrate.run/) to get your own API key and $51 free credits.
You'll also need Exa, which comes with generous free credits and can be a much cheaper alternative to the Twitter API.
// NOTE: We've disabled the Exa API key in this demo due to high volume – you'll need to fork and provide your own to run it.
const exa = new Exa(Deno.env.get("EXA_API_KEY"));
const substrate = new Substrate({ apiKey: Deno.env.get("SUBSTRATE_API_KEY") });
const query = `"exa.ai" OR "@ExaAILabs"`;
// Search for tweets from the last week
const searchResults = await exa.searchAndContents(query, {