Search
hastscriptExample
@tmcw
hastscript hastscript is a way to create 'HTML trees' - then you can translate that tree into HTML using hast-util-to-html . It's pretty neat and straightforward to use in Val Town because it supports ESM exports.
Script
# hastscript
[hastscript](https://www.npmjs.com/package/hastscript) is a way to create 'HTML trees' - then you can translate that tree into HTML using [hast-util-to-html](https://github.com/syntax-tree/hast-util-to-html). It's pretty neat and straightforward to use in Val Town because it supports ESM exports.
export let hastscriptExample = (async () => {
const { h, s } = await import("npm:hastscript");
const { toHtml } = await import("npm:hast-util-to-html@8");
// Create a DOM tree
const tree = h(".foo#some-id", [
h("span", "some text"),
h("input", { type: "text", value: "foo" }),
h("a.alpha", { class: "bravo charlie", download: "download" }, [
citation
@yawnxyz
// https://www.crossref.org/blog/dois-and-matching-regular-expressions/
Script
// https://www.crossref.org/blog/dois-and-matching-regular-expressions/
const DOI_REGEX = /\b(10\.\d{4,9}\/[-._;()\/:\w]+)\b/i;
export const extractDOI = (content) => {
if (!content) return null;
if (!content.match) return null;
const doiRegex = DOI_REGEX;
const doiMatch = content.match(doiRegex);
let doi = doiMatch ? doiMatch[0] : null;
if (doi) {
doi = doi.replace(/^doi[:\/]/i, '');
sourceOnGithubExample
@curtcox
Example showing how to reference source in public github repos.
HTTP (deprecated)
Example showing how to reference source in public github repos.
exported_function,
exported_function_with_parameters,
exported_number,
exported_string_constant,
ExportedClass,
} from "https://raw.githubusercontent.com/curtcox/TypescriptSamples/main/ts/SampleExports.ts";
const app = new Hono();
app.get("/", (c) => {
return c.html(`
valle_tmp_32548579067333305484587672007568
@janpaul123
// Comment: Crafting a streamlined server with Hono that sends back SVG sparkline and a playful animated cat goofing around
HTTP (deprecated)
// Comment: Crafting a streamlined server with Hono that sends back SVG sparkline and a playful animated cat goofing around
export default async function() {
const sparkline = sparklineSVG([5, 10, 5, 20, 15, 10, 15, 20, 25, 30]);
// HTML response containing the sparkline SVG and a simple animated cat gif
return html(`
<html>
<body style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div>
<h1>Sparkline SVG Example with Animated Cat</h1>
${sparkline}
push
@jrmann100
@jsxImportSource npm:hono@3/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono@3/jsx */
// TODO: in an upcoming version of deno, you can also use npm:web-push which is much more popular
// by just using pushSendNotification
// .svg required for manifest, fav.farm doesn't seem to mind
const iconURL = "https://fav.farm/%F0%9F%94%94.svg";
const app = new Hono();
// key format is same as web-push's generateVAPIDKeys
const vapidDetails = {
url: thisWebURL(),
pubKey: Deno.env.get("pushVapidPublicKey"),
p5
@moe
P5 sketch Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example. Usage Make a p5 sketch, you can import the p5 types to make it easier. import type * as p5 from "npm:@types/p5"; Export any "global" p5 functions. These are functions like setup and draw that p5 will call. Set the val type to http and default export the result of sketch , passing in import.meta.url . A full example looks like this. import type * as p5 from "npm:@types/p5";
export function setup() {
createCanvas(400, 400);
}
export function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
import { sketch } from "https://esm.town/v/saolsen/p5";
export default sketch(import.meta.url); How it works The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default sketch export) so you can't call any Deno functions, environment variables, or other server side apis.
Script
# P5 sketch
Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example.
## Usage
* Make a p5 sketch, you can import the p5 types to make it easier.
```typescript
* Export any "global" p5 functions. These are functions like `setup` and `draw` that p5 will call.
export function sketch(module: string, title = "P5 Sketch") {
return async function(req: Request): Promise<Response> {
// console.log("module:", module)
const url = new URL(req.url)
expressExampleNew
@tmcw
An interactive, runnable TypeScript val by tmcw
Express
import { Buffer } from "node:buffer";
export const expressExampleNew = (req, res) => res.json({ ok: true });
newTest
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
export const newTest = "will this work";
dummyVal
@pomdtr
An interactive, runnable TypeScript val by pomdtr
Script
import { hello } from "https://esm.town/v/pomdtr/echoRef";
console.log(hello());
accepts
@vladimyr
// SPDX-License-Identifier: 0BSD
Script
// SPDX-License-Identifier: 0BSD
import { type IncomingMessage } from "node:http";
import nodeAccepts from "npm:accepts";
export function accepts(req: Request) {
const headers = {
accept: req.headers.get("accept"),
"accept-charset": req.headers.get("accept-charset"),
"accept-encoding": req.headers.get("accept-encoding"),
"accept-language": req.headers.get("accept-language"),
return nodeAccepts({ headers } as unknown as IncomingMessage);
linkifyReadme
@vladimyr
// SPDX-License-Identifier: 0BSD
Script
// SPDX-License-Identifier: 0BSD
export const linkifyReadme = (html: string) =>
linkify(html, {
ignoreTags: ["head", "script", "style", "code"],
rel: "nofollow noreferrer noopener",
formatHref: {
mention(input) {
input = input.substring(1);
if (input.includes("/")) {
const valURL = new URL(`https://www.val.town/v/${input}`);
ramdaExample
@tmcw
ramda ramda is a module like lodash or underscore but with a much heavier emphasis on functional programming. It lets you do the same kind of things but in a much 🌶️ spicier, 💪 more macho, 🤔 sometimes confusing style. I was really into this module in my late 20s.
Script
# ramda
[ramda](https://ramdajs.com/) is a module like [lodash](https://www.val.town/v/tmcw.lodashExample) or [underscore](https://www.val.town/v/tmcw.underscoreExample) but with a much heavier emphasis on functional programming. It lets you do the same kind of things but in a much 🌶️ spicier, 💪 more macho, 🤔 sometimes confusing style. I was really into this module in my late 20s.
export let ramdaExample = (async () => {
const R = await import("npm:ramda");
return R.ap([R.concat("tasty "), R.toUpper], ["pizza", "salad"]);
getEpicTvProduct
@marksteve
An interactive, runnable TypeScript val by marksteve
Script
import { fetch } from "https://esm.town/v/std/fetch";
export let getEpicTvProduct = async (url) => {
const cheerio = await import("npm:cheerio@1.0.0-rc.12");
const html = await (await fetch(url)).text();
const $ = cheerio.load(html);
return {
name: $(".page-title").text().trim(),
discount: $(".sale-value").text().trim(),
price: $('[data-price-type="finalPrice"]').text().trim(),
oldPrice: $('[data-price-type="oldPrice"]:first').text().trim(),
redMonkey
@tempguy
An interactive, runnable TypeScript val by tempguy
Script
const nanoid = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", 10);
const baseUrl = "https://d000d.com";
export async function doodstream(ctx: Context) {
let url = ctx.url;
const id = url.split("/e/")[1];
const doodDataReq = await fetch(
`https://cool-proxy.koyeb.app/hdiuhmalkmc9d0ck7UCFVGBJHN?destination=`
+ encodeURIComponent(`${url}`),
method: "GET",
const doodData = await doodDataReq.text();
