Trending Vals
2
4
nbbaier
sqliteExplorerApp
HTTP
SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query
19
5
pomdtr
password_auth
Script
Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Usage import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: (password) => password == Deno.env.get("VAL_PASSWORD") }); If you want to use an api token to authenticate: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: verifyToken }); TODO [x] allow to authenticate using a val town token [ ] add a way to send an email to ask a password from the val owner [ ] automatically extend the session [ ] automatically remove expired sessions FAQ How to sign out ? Navigate to <your-site>/signout .
14
6
peterqliu
selfDestruct
Script
π₯ Deletes the val using it, or whatever url is fed it. Handy for sharing single-use scripts without cluttering people's accounts. If used in an HTTP val, this will run immediately when anyone forks it, making for a zero-click execution as long as ValTown immediately serves a preview of the forked val. Add this to your code last and then do not run it, or you will lose your work. Recommend first checking that the val owner isn't you, so that only forked copies will self-destruct. Usage selfDestruct(import.meta.url) Returns a promise of successful deletion, though the val would not be around to read it.
3
7
8
andreterron
codeOnValTown
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 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=50";
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=50";
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.
5
9
trob
multilingualchatroom
HTTP
A simple chat room to share with friends of other languages, where each user can talk in their own language and see others' messages in their own language.
Click and hold a translated message to see the original message.
Open the app in a new window to start your own, unique chatroom that you can share with your friends via the room URL. TODO: BUG: fix the issue that keeps old usernames in the "[User] is typing" section after a user changes their name. BUG: Username edit backspaces is glitchy. UI: Update the title for each unique chatroom to make the difference clear. UI: mobile friendly. Feature: the ability for the message receiver to select a part of a translation that is confusing and the author will see that highlight of the confusing words and have the opportunity to reword the message or... Feature: bump a translation to a higher LLM for more accurate translation. Feature: use prior chat context for more accurate translations. Feature: Add video feed for non-verbals while chatting.
5
10
11
xkonti
cache
Script
Implementation of Redis-like cache - a key-value store with expiring keys. Data is stored in the Val Town SQLite database and shared between all your vals. Setup First you should decide on a name of a SQL table that will be used for storing cache data. It could something like cacheData or kv . Set that value to a new Environment Variable CACHE_TABLE_NAME . Optionally you might add a new CACHE_DEFAULT_TTL Environment Variable. It's value should be set to a number of seconds that will be used when saving new values to the cache without providing the expiration time. By default it's 24h. The setup() function should be ran before using the cache for the first time. You can do that by creating a small temporary Val: import { setup } from "https://esm.town/v/xkonti/cache";
await setup(); Optionally create a scheduled val that will delete expired keys on some interval - 15 minutes can be a good start. import { deleteExpired } from "https://esm.town/v/xkonti/cache";
export default async function cacheCleaner(interval: Interval) {
await deleteExpired();
} Usage After setting your cache up you can use it simply by importing functions from https://esm.town/v/xkonti/cache . set(key, value, ttl): Promise Set a value in the cache. key - the key to set the value for value - the value to set - it can be any value that can be serialized to JSON ttl - the time to live in seconds. In other words, after how many seconds the key will expire. If not set, the default TTL is used. returns the number of keys set: 1 if the key was inserted/updated, 0 if the ttl was 0 or invalid // Set a value in the cache with a default TTL
await set("luckyNumber", 13);
// Set a value that will expire in 5 minutes
await set("product:344798", { name: "Audio Interface", price: 209.99}, 5 * 60); setUntil(key, value, expiresAt): Promise Set a value in the cache until a specific date and time. key - the key to set the value for value - the value to set - it can be any value that can be serialized to JSON expiresAt - the expiration time as a UTC date string returns the number of keys set: 1 if the key was inserted/updated, 0 if the `expiresAt`` was in the past // Set a value in the cache until 2024-01-01 16:23:05 UTC
await setUntil(
"product:155392",
{ name: "Audio Interface", price: 209.99 },
new Date('2024-01-01T16:23:05Z').toISOString()
); setExpiration(key, ttl): Promise Update the expiration date of a cache entry based on TTL. If the key does not exist or is expired, nothing happens. key - the key of the cache entry to update ttl - the time to live in seconds from now. In other words, after how many seconds the key will expire. If not set, the default TTL is used. returns the number of keys updated: 1 if updated, 0 if not found or ttl was 0 // Set the expiration date in the cache with a default TTL
await setExpiration("luckyNumber");
// Set the expiration date in the cache for 5 minutes from now.
await setExpiration("luckyNumber", 5 * 60); setExpirationUntil(key, expiresAt): Promise Update the expiration date of a cache entry to a specific UTC date and time. If the key does not exist or is expired, nothing happens. key - the key of the cache entry to update expiresAt - the expiration time as a UTC date string returns the number of keys updated: 1 if updated, 0 if not found or expiresAt was in the past // Set the expiration date in the cache until 2024-01-01 16:23:05 UTC
await setExpirationUntil(
"product:155392",
new Date('2024-01-01T16:23:05Z').toISOString()
); exists(key): Promise Checks if the provided key exists (has value) in the cache. If the key is expired, it's considered non-existent. key - the key to check for existence // Check if the key is present in the cache
const hasLuckyNumber: Boolean = await exists("luckyNumber"); get (key): Promise<T | null> Get a value from the cache by key. You can provide a type of the return value or it will default to unknown . If there is no value for the key or the value has expired, null is returned. key - the key to get the value for // Get a value from the cache
const luckyNumber: number = await get<number>("luckyNumber");
const luckyNumber: number = await get("luckyNumber") as number; // same as above listKeys(prefix): Promise<string[]> Gets a list of all non-expired keys in the cache that match the prefix. If no prefix is provided, all keys are returned. prefix - the optional prefix to match keys against // Get all keys from the cache
const keys: string[] = await listKeys();
// Get all keys from the cache that start with "product:"
const keys: string[] = await listKeys("product:"); getMany (prefix, limit): Promise<Array<{ key: string, value: T }>> Get many key-value pairs from the cache that match the given prefix. prefix - the optional prefix to match keys against. If not provided, all keys are considered. limit - the optional maximum number of key-value pairs to return. If 0 , no limit is applied. Defaults to 0 . returns An array of key-value pairs. Each pair is an object with key and value properties. // Get all non-expired keys and their values
const everything = await getMany();
// Get all keys and values with a matching prefix
const allProducts = await getMany("product:");
// Get 5 keys and values with a matching prefix
const discountedProducts = await getMany("discounts:", 5); deleteKey(key): Promise Delete a key from the cache. key - the key to delete returns the number of keys deleted: 1 if the key was deleted, 0 if the key did not exist. // Delete a key from the cache
await deleteKey("luckyNumber"); deleteKeys(prefix): Promise Delete all keys from the cache that match the prefix. If no prefix is provided, all keys in the cache are deleted. prefix - the optional prefix to match keys against returns the number of keys deleted // Delete all keys from the cache
await deleteKeys();
// Delete all keys from the cache that start with "product:"
await deleteKeys("product:"); deleteExpired(): Promise Delete all expired keys from the cache. Perfect for running on a schedule to keep the cache small and fast. returns the number of keys deleted // Delete all expired keys from the cache
await deleteExpired();
2
13
gwoods22
sendNotification
Script
Push Notification Sender This val can be used in other vals to send notifications to a segment using OneSignal's REST API This is really handy if you want to send push notifications to your phone without building a native app! I built a barebones React PWA that asks for a password then loads the OneSignal Web SDK that I deployed to Netlify for free. OneSignal has easy to follow docs so you can build this functionality into a React, Angular, Vue app or even Wordpress! Then install the PWA on your platform of choice and you're off to the races! Setup Save your ONESIGNAL_TOKEN and SEGMENT_APPID from OneSignal to your Val Town environment variables Import into another val! import sendNotification from "https://esm.town/v/gwoods22/sendNotification";
1
15
pomdtr
fetchValInfo
Script
Usage import { fetchValInfo } from "https://esm.town/v/pomdtr/fetchValInfo"
const val = await fetchValInfo(import.meta.url)
console.log(val.id) What's the difference with extractValInfo ? @pomdtr/extractValInfo get metadata synchronously by analysing the val import url, while @pomdtr/fetchValInfo perform an http call to the val.town REST api. Only use fetchValInfo if you need some metadata that are not available from extractValInfo .
1
16
gwoods22
scraper_template
Script
Website Scraper Template A basic website scraper template that can be ran on an interval to check for changes. It uses blob storage to save whatever data you'd like to compare the website to. Uses my sendNotification val to alert yourself of the change. Steps to use Add the scrapeURL you would like to scrape and pick a name for your blob storage blobKey . Change the "selector" value to fit your needs. cheerio is used to find the part of the page you'd like to check. Adjust the if statement to detect changes and update your blob Craft a message to be sent with sendNotification() function
1
20
vtdocs
resyBot
Script
Resy bot This bot books restaurant reservations via Resy. Use it to snipe reservations at your favorite restaurant! How to use it Set up a scheduled val to call it like this: import { resyBot } from "https://esm.town/v/stevekrouse/resyBot?v=2";
import { email } from "https://esm.town/v/std/email?v=13";
export default async function (interval: Interval) {
const bookingInfo = await resyBot( {
slug: 'amaro-bar',
city: 'ldn',
day: '2023-07-05',
start: '19:00',
end: '21:00',
partySize: 2,
// Use https://www.val.town/settings/secrets for these!
email: Deno.env.get("resyEmail"),
password: Deno.env.get("resyPassword"),
})
// If the val doesn't error, it successfully made a booking!
// Send yourself an email like this:
await email({ text: bookingInfo, subject: 'resy bot made a booking for you!' })
} How it works This val makes the same requests that your browser would make when you reserve a slot on Resy (that's why it needs your login info β to request an auth token). When there isn't a matching slot, this val errors and nothing else happens. When a booking is available, this val books it and returns a description of the booking so you can email it to yourself (Resy will also email you). This val will then stop attempting bookings for you until you change one of the arguments you're passing (it concats the non-sensitive arguments and uses this as a key). Credit to @rlesser and @alp for their existing Resy vals (search for resy on here).
6
21
maxm
eval
Script
Eval web demo Security Caveats This code runs in a Worker with { permissions: { write: false, read: false, net: false } } . This is likely very safe, but if you enable network access keep in mind that users might generate junk network traffic or attempt to make infinite loops. If sandboxed code knows the name of one of your private vals it will be able to import the code with import "https://esm.town/v/maxm/private" . If you enabled write: true in the Worker, the unix socket that Deno uses to communicate with the host can be deleted and intercepted. This might mean that evaluated code can steal the socket and read the next request. You should not use this to evaluate code that should not be read by a previous evaluation. All code is running on the same process and you are not protected from exotic attacks like speculative execution. Overview You can use this library to evaluate code: import { evalCode } from "https://esm.town/maxm/eval"
console.log(await evalCode("export const foo = 1")) // => 1 You can use this library with https://www.val.town/v/maxm/transformEvalCode to return the last value without needing to export it. This is how the /eval api endpoint used to work and makes the library preform similarly to a repl. import { evalCode } from "https://esm.town/maxm/eval"
import { transform } from "https://esm.town/maxm/transformEvalCode"
console.log(await evalCode(transform("1+1"))) // => 2 Here's an example UI application that demonstrates how you can string this all together: https://maxm-evalui.web.val.run/ (source: https://www.val.town/v/maxm/evalUI) Security Model Code is evaluated using a dynamic import within a Worker. await import(`data:text/tsx,${encodeURIComponent(e.data)}`); Running the code withing a Worker prevents access to GlobalThis and window from leaking between evals. Similarly, access to Deno.env is prevented and evaluations will see errors when trying to access any environment variables. TODO: what else?
3
22
stevekrouse
aqi
Cron
AQI Alerts Get email alerts when AQI is unhealthy near you. Set up Click Fork Change location (Line 4) to describe your location. It accepts fairly flexible English descriptions which it turns into locations via nominatim's geocoder API . Click Run Background This val uses nominatim's geocoder to get your lat, lon, and air quality data from OpenAQ. It uses EPA's NowCast
AQI Index calculation and severity levels. Learn more: https://www.val.town/v/stevekrouse.easyAQI
5
23
24
g
serveUtils
Script
Serve Utils This val exports various utility functions, mainly the serve(commentFunction, contentType?) .
It enables easy serving of different files, while allowing the use of all string characters: // this is possible
const arr = ["Hello", 'world', `!`]; Townie Prompt This can be used as a replacement system prompt for Townie.
Townie will: Write client-side applications with vanilla JavaScript Serve them as different assets, ie. index.html , style.css and main.js Use modern module syntax, including importing modules directly from esm.sh on the client side Not reuse the same script for the server and client logic IMPORTANT: Due tue val.town README restrictions,
the custom prompt can now be found
here .
0
25
stevekrouse
twitterAlert
Cron
Twitter π keyword alerts Custom notifications for when you, your company, or anything you care about is mentioned on Twitter. This val gets Twitter data via SocialData via
@stevekrouse/socialDataProxy. Val Town Pro users can call this API
100 times per day, so be sure not to set this cron to run more than once every 15 min.
If you want to use it more, get your own SocialData
API token and pay for it directly. 1. Query Change the query variable for what you want to get notified for. You can use Twitter's search operators to customize your query, for some collection of keywords, filtering out others, and much more! 2. Notification Below I'm sending these mentions to a public channel in our company Discord, but you can customize that to whatever you want, @std/email, Slack, Telegram, whatever.
2
26
28
torlanco
shirtGenScript
HTTP
π Shirtgen API Endpoint Shirtgen lets you generate AI-powered t-shirt designs with just a prompt! ποΈ Choose between the standard "Flux Schnell" model or the enhanced "Pro" model. Perfect for creating unique custom apparel in seconds! π π‘ How it Works Send a POST request to the endpoint with your design prompt. Toggle between Standard and Pro models using the useProModel flag. The AI generates a high-quality t-shirt design based on your prompt. π₯ Expected POST Data {
"prompt": "A retro sunset with palm trees π΄π
",
"useProModel": true
}
0
30
ashryanio
openAiProxy
HTTP
openAiProxy Overview This val is a proxy server that interacts with the OpenAI API to generate responses based on prompts in the request body. The function handles incoming HTTP POST requests, processes the prompt, and returns a response generated by the LLM. Prerequisites Server-side: (Optional) An active OpenAI API key Client-side: Something that can make POST requests (browser code, Postman, cURL, another Val, etc) Usage Endpoint The primary endpoint for this function is designed to handle HTTP POST requests. Request Method : POST Content-Type : application/json Body : JSON object containing a prompt field (e.g. {"prompt": "Help me make a boat."} ) Example Request curl -X POST https://ashryanio-openaiproxy.web.val.run -H "Content-Type: application/json" -d '{"prompt": "Hello, OpenAI!"}' Response Content-Type : application/json Body : JSON object containing the response from the OpenAI language model. Example Response {
"llmResponse": "Hi there! How can I assist you today?"
} Error Handling 400 Bad Request : Returned if the prompt field is missing in the request body. 405 Method Not Allowed : Returned if any method other than POST or OPTIONS is used. 500 Internal Server Error : Returned if there is an error processing the request.
1