Search
forbetHeader
@nmsilva
@jsxImportSource https://esm.sh/react
Script
/** @jsxImportSource https://esm.sh/react */
const ForbetHeader = () => {
return (
<div className="flex justify-between items-center py-4 px-8 bg-gray-800 text-white">
<div className="container mx-auto px-4 sm:px-8">
<div className="flex justify-between items-center">
<div className="text-xl font-bold">Predictions</div>
<div className="flex space-x-4">
<a
href="https://nmsilva-forbetkelly.web.val.run"
serve_readme
@pomdtr
Serve Readme Usage import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { serveReadme } from "https://esm.town/v/pomdtr/serve_readme";
const val = extractValInfo(import.meta.url);
export default serveReadme({
val,
title: "Code Search is Easy",
}); Example @pomdtr/code_search_is_easy (rendered at https://code-search-is-easy.pomdtr.me )
Script
# Serve Readme
## Usage
```ts
const val = extractValInfo(import.meta.url);
export default serveReadme({
val,
export async function valReadme({ val, title }: {
val: { author: string; name: string };
title?: string;
if (!title) {
valTownChatGPT
@stevekrouse
ChatGPT Implemented in Val Town Demonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events
HTTP (deprecated)
# ChatGPT Implemented in Val Town
Demonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events
/** @jsxImportSource https://esm.sh/react */
const openai = new OpenAI();
const jsxResponse = (jsx) => {
return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });
const clientCode = () => {
document.getElementById("input").addEventListener("submit", function(event) {
event.preventDefault();
const msgParent = document.createElement("div");
linkInBioTemplate
@djs
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
export default async function(req: Request) {
return new Response(
renderToString(
<body>
<link rel="stylesheet" href="/style.css" />
<script src="/moment.js" defer></script>
<script src="/script.js" defer></script>
<h1>Lenny Logger</h1>
<div className="flex-row notification">
diesel
@yawnxyz
Diesel Diesel is a lightweight data manipulation library inspired by Tom Wright's Dasel, designed for easy querying and transformation of various data formats such as JSON, YAML, CSV, and TOML. It allows users to select, update, and delete data using a simple selector syntax. Heavily adapted from https://github.com/TomWright/dasel Features Multi-format Support : Works with JSON, YAML, CSV, and TOML. Dynamic Selectors : Use conditions to filter data dynamically. Function Support : Built-in functions for data manipulation (e.g., length, sum, avg). Easy Integration : Can be used in both Deno and Val Town environments. Usage import Diesel from "https://esm.town/v/yawnxyz/diesel";
async function main() {
const jsonData = `
{
"users": [
{"id": 1, "name": "Alice", "age": 30},
{"id": 2, "name": "Bob", "age": 25},
{"id": 3, "name": "Charlie", "age": 35}
],
"settings": {
"theme": "dark",
"notifications": true
}
}
`;****
const diesel = new Diesel(jsonData, 'json');
try {
console.log("All data:", await diesel.select(''));
console.log("All users:", await diesel.select('users'));
console.log("First user's name:", await diesel.select('users.[0].name'));
console.log("Users over 30:", await diesel.select('users.(age>30)'));
await diesel.put('settings.theme', 'light');
console.log("Updated settings:", await diesel.select('settings'));
// await diesel.delete('users.[1]');
// console.log("Users after deletion:", await diesel.select('users'));
console.log("Data in YAML format:");
console.log(await diesel.convert('yaml'));
console.log("Data in TOML format:");
console.log(await diesel.convert('toml'));
console.log("Number of users:", await diesel.select('users.length()'));
console.log("User names in uppercase:", await diesel.select('users.[*].name.toUpper()'));
} catch (error) {
console.error("An error occurred:", error);
}
}
main(); Installation To use Diesel, simply import it in your Deno project as shown in the usage example. License This project is licensed under the MIT License.
Script
# Diesel
Diesel is a lightweight data manipulation library inspired by Tom Wright's Dasel, designed for easy querying and transformation of various data formats such as JSON, YAML, CSV, and TOML. It allows users to select, update, and delete data using a simple selector syntax.
Heavily adapted from https://github.com/TomWright/dasel
## Features
- **Multi-format Support**: Works with JSON, YAML, CSV, and TOML.
- **Dynamic Selectors**: Use conditions to filter data dynamically.
// import * as jsonMod from "https://deno.land/std@0.224.0/json/mod.ts";
// import * as csv from "npm:csvtojson";
// import { readCSV, readCSVRows, writeCSV } from "jsr:@vslinko/csv";
// import { parse as parseCSV, stringify as stringifyCSV } from "https://deno.land/std/csv/mod.ts";
hungryWhiteLeopon
@gr8gatsby
* This application helps users write detailed reviews of coffee shops. It fetches coffee shop data
* from the OpenStreetMap Nominatim API, allows users to add custom details, and stores the augmented
* information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.
*
* It uses React for the frontend, the Nominatim API for initial coffee shop data,
* and Val Town's SQLite for data persistence.
HTTP
* This application helps users write detailed reviews of coffee shops. It fetches coffee shop data
* from the OpenStreetMap Nominatim API, allows users to add custom details, and stores the augmented
* information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.
* It uses React for the frontend, the Nominatim API for initial coffee shop data,
* and Val Town's SQLite for data persistence.
/** @jsxImportSource https://esm.sh/react */
function App() {
const [coffeeShops, setCoffeeShops] = useState([]);
const [reviews, setReviews] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
watchAceOfSpades
@chet
An interactive, runnable TypeScript val by chet
Cron
import { watchWebsite } from "https://esm.town/v/chet/watchWebsite";
export default async function(interval: Interval) {
await watchWebsite("https://www.livenation.com/venue/KovZpZAJ6lvA/ace-of-spades-events");
githubEmoji
@karfau
Usage import {githubEmojiUrl} from "https://esm.town/v/karfau/githubEmoji";
console.log(githubEmojiUrl('+1'))
//"https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8" or in a browser <img src="https://karfau-githubEmoji.web.val.run/+1"></img> Looks like in the preview. curl https://karfau-githubEmoji.web.val.run/+1 (prints "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8" ) If the name you pass (as argument or in the request path) is not in the list, it returns The list of names can be accessed using githubEmojiNames or by calling https://karfau-githubemoji.web.val.run/names
HTTP (deprecated)
Usage
```js
console.log(githubEmojiUrl('+1'))
//"https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8"
or in a browser
<img src="https://karfau-githubEmoji.web.val.run/+1"></img>
export const isEmoji = (key: string) => Object.hasOwn(GITHUB_EMOJIS, key);
export const githubEmojiUrl = (name: string, fallback = "octocat"): string =>
GITHUB_EMOJIS[isEmoji(name) ? name : fallback];
export const githubEmojiNames = (): string[] => Object.keys(GITHUB_EMOJIS);
VALLErun
@stevekrouse
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
HTTP (deprecated)
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
/** @jsxImportSource https://esm.sh/react */
// Set these to your own
const username = "janpaul123";
const tempValsParentFolderId = "4bb7b010-4443-11ef-8642-de64eea55b61";
export default function(
{ username, tempValsParentFolderId }: { username: string; tempValsParentFolderId: string },
const valTownToken = Deno.env.get("valtown");
const vt = new ValTown({ bearerToken: valTownToken });
const app = new Hono();
helloFriend
@roniemeque
An interactive, runnable TypeScript val by roniemeque
Script
import { myName } from "https://esm.town/v/rodrigotello/myName?v=1";
export let helloFriend = "Hello, " + myName;
nyChargingStations
@tmcw
NYC Charging Stations Data Analysis https://tmcw-nychargingstations.web.val.run/ This analyzes some open data about electric car charging stations in New York State and bakes a website from it. Data is messy!
HTTP (deprecated)
# NYC Charging Stations Data Analysis
https://tmcw-nychargingstations.web.val.run/
This analyzes some [open data about electric car charging stations in New York State](https://data.ny.gov/Energy-Environment/Electric-Vehicle-Charging-Stations-in-New-York/7rrd-248n) and bakes a website from it. Data is messy!
export const nyChargingStations = (async () => {
const { csvParse } = await import("npm:d3-dsv");
const { group } = await import("npm:d3-array");
const { micromark } = await import("npm:micromark");
const rows = await fetch(
"https://data.ny.gov/api/views/7rrd-248n/rows.csv?accessType=DOWNLOAD&sorting=true",
LoginModal
@iamseeley
@jsxImportSource https://esm.sh/hono@latest/jsx
Script
/** @jsxImportSource https://esm.sh/hono@latest/jsx */
export default function LoginModal() {
return (
<div id="login-modal" className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 animate-fadeIn">
<div className="bg-white rounded-lg shadow-xl p-8 w-full max-w-md mx-4 mt-4 mb-0">
<div className="flex flex-col gap-1 mb-4">
<h2 className="text-xl font-bold ">Login to Your Profile</h2>
<p className="text-sm text-neutral-800">
No account?{' '}
<a
my_thing
@whatrocks
An interactive, runnable TypeScript val by whatrocks
Script
import { testy } from "https://esm.town/v/whatrocks/testy";
export let my_thing = testy;
generateKeys
@easrng
An interactive, runnable TypeScript val by easrng
Script
import { Buffer } from "node:buffer";
export async function generateKeys() {
const { default: nacl } = await import("npm:tweetnacl@1.0.3");
const keyPair = nacl.sign.keyPair();
return {
publicKey: Buffer.from(keyPair.publicKey).toString("base64"),
secretKey: Buffer.from(keyPair.secretKey).toString("base64"),
valle_tmp_272587506760611838217863338600184
@janpaul123
// Respond with fun HTML content and silly gradients on every HTTP request
HTTP (deprecated)
// Respond with fun HTML content and silly gradients on every HTTP request
export default async function(req: Request): Promise<Response> {
const htmlContent = `
<html>
<head>
<style>
body {
background: linear-gradient(to right, #ff758c, #ff7eb3);
font-family: Arial, sans-serif;
text-align: center;