Trending Vals

1
pomdtr avatar
password_auth
@pomdtr
Script
Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Demo See @pomdtr/password_auth_test 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 .
2
substrate avatar
illustratedPrimer
@substrate
HTTP
Generates a streaming illustrated primer on a subject. Enter a subject, click on titles to "delve". πŸͺ© To fork, sign up for Substrate to get your own API key and $50 free credits
3
nbbaier avatar
sqliteExplorerApp
@nbbaier
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
4
substrate avatar
hackerNewsRAG
@substrate
HTTP
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. Read the walkthrough: https://x.com/vprtwn/status/1812844236401762513 πŸͺ© To fork, sign up for Substrate to get your own API key and $50 free credits.
5
janpaul123 avatar
VALLE
@janpaul123
HTTP
Fork it and authenticate with your Val Town API token as the password. Needs an OPENAI_API_KEY env var to be set, and change the variables under "Set these to your own". https://x.com/JanPaul123/status/1812957150559211918
6
substrate avatar
similarSites
@substrate
HTTP
Find similar pages on HN and return a streaming markdown summary. Powered by Exa and Substrate . πŸͺ© To fork, sign up for Substrate to get your own API key and $50 free credits.
7
stevekrouse avatar
easyAQI_cached
@stevekrouse
Script
easyAQI Get the Air Quality Index (AQI) for a location via open data sources. It's "easy" because it strings together multiple lower-level APIs to give you a simple interface for AQI. Accepts a location in basically any string format (ie "downtown manhattan") Uses Nominatim to turn that into longitude and latitude Finds the closest sensor to you on OpenAQ Pulls the readings from OpenAQ Calculates the AQI via EPA's NowCAST algorithm Uses EPA's ranking to classify the severity of the score (ie "Unhealthy for Sensitive Groups") Example usage @stevekrouse.easyAQI({ location: "brooklyn navy yard" }) // Returns { "aqi": 23.6, "severity": "Good" } Forkable example: val.town/v/stevekrouse.easyAQIExample Also useful for getting alerts when the AQI is unhealthy near you: https://www.val.town/v/stevekrouse.aqi
8
stevekrouse avatar
blob_admin
@stevekrouse
HTTP
Blob Admin This is a lightweight Blob Admin interface to view and debug your Blob data. Use this button to install the val: It uses basic authentication with your Val Town API Token as the password (leave the username field blank). TODO [x] /new - render a page to write a new blob key and value [x] /edit/:blob - render a page to edit a blob (prefilled with the existing content) [x] /delete/:blob - delete a blob and render success [x] add upload/download buttons [ ] Use modals for create/upload/edit/view/delete page (htmx ?) [ ] handle non-textual blobs properly [ ] use codemirror instead of a textarea for editing text blobs
9
andreterron avatar
isMyWebsiteDown
@andreterron
Cron
Website Downtime Alert This val checks the availability of a specified website. If it's down or not returning a 200 OK status, it triggers an email alert. The email includes the date, time (in UTC), and the reason for the downtime, providing a way to monitor website availability. Fork this val and edit the URL variable to set up downtime notifications for your website.
10
andreterron avatar
codeOnValTown
@andreterron
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=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.
11
stevekrouse avatar
umbrellaReminder
@stevekrouse
Cron
β˜”οΈ Umbrella reminder if there's rain today Setup Fork this val πŸ‘‰ https://val.town/v/stevekrouse.umbrellaReminder/fork Customize the location (line 8). You can supply any free-form description of a location. ⚠️ Only works for US-based locations (where weather.gov covers). How it works Geocodes an free-form description of a location to latitude and longitude – @stevekrouse.nominatimSearch Converts a latitude and longitude to weather.gov grid – @stevekrouse.weatherGovGrid Gets the hourly forecast for that grid Filters the forecast for periods that are today and >30% chance of rain If there are any, it formats them appropriately, and sends me an email
12
substrate avatar
shapeshift
@substrate
Script
Semantically map a JSON object to a target schema using an LLM. (Click "Run") Inspired by https://github.com/rectanglehq/Shapeshift HN thread Check out Substrate !
13
maxm avatar
animatedReadmeSVG
@maxm
HTTP
Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" /> </p> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" /> </p>
14
yawnxyz avatar
stitchVal
@yawnxyz
HTTP
inspired by https://x.com/dankuntz/status/1813283813881225625 written by Sonnet-3.5 with ~12 prompts and some final manual tweaks
15
stevekrouse avatar
discordWebhook
@stevekrouse
Script
Send a Discord message Send a message to a Discord channel from Val Town. It's useful for notifying your team or community when someone interesting happens, like a user signup, Stripe payment, mention on social media, etc. import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook"; await discordWebhook({ url: Deno.env.get("engDiscord"), content: "Hi from val town!", }); Example val: https://www.val.town/v/stevekrouse.discordWebhookEx Setup 1. Create a Discord Webhook Follow the instructions here: https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks It really only takes 2 minutes. 2. Copy webhook URL Paste it into your secrets as discordWebhook . 3. Send a message! import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook"; await discordWebhook({ url: Deno.env.get("engDiscord"), content: "Hi from val town!", }); Example val: https://www.val.town/v/stevekrouse.discordWebhookEx
16
stevekrouse avatar
status
@stevekrouse
HTTP (preview)
Uptime Status Page This is the status page for the data generated by this uptime cron: @stevekrouse/uptime
17
maxm avatar
staticChess
@maxm
HTTP
Check it out here: https://chess.maxmcd.com Plain, brutalist, no bloat chess. Every page is only html and css. Every chess move is made by clicking a link. Send a link to your friend and they'll send you one back to make your move. No silly animations or slick interactivity to trip up your gameplay. When Google indexes this site will we successfully compute all possible chess moves? Functionality is quite limited, and things might be broken. Please let me know if you find bugs! Inspired by this HN discussion about sites that have all possible game states of tic-tac-toe. I plan on extending this to support real gameplay. I think it could be a nice simple interface for long form games with friends. Might also be fun to add a static AI to play against. Feel free to PR any changes if you'd like to see something added.
18
stevekrouse avatar
reloadOnSave
@stevekrouse
Script
Live reload in new tabs When you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that. Usage import { html } from "https://esm.town/v/stevekrouse/html"; import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave"; export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> { return html(`<h1>Hello!!</h1>`); })
19
substrate avatar
urlHeader
@substrate
HTTP
used in https://www.val.town/v/substrate/websim import urlHeader from "https://esm.town/v/substrate/urlHeader"; export default async function(req: Request): Promise<Response> { const searchParams = new URL(req.url).searchParams; const { url = "foo" } = Object.fromEntries(searchParams); const html = ` ${urlHeader(url)} <div>content</div> `; return new Response(html, { headers: { "Content-Type": "text/html", }, }); }
20
dglazkov avatar
discordBot
@dglazkov
Script
A simple Discord Bot scaffolding, a slight rev on the one in the valtown guide . The discordBot function takes in an object where each key is a Discord command and the value is a function to handle the command. If the function returns a Promise , it will be handled as a deferred interaction with a followup message . Usage: import { discordBot } from "https://esm.town/v/dglazkov/discordBot"; const echo = async (data) => { await new Promise((r) => setTimeout(r, 5000)); return { type: 4, data: { content: data.data.options[0].value, }, }; }; export default discordBot({ ping: () => ({ type: 4, data: { content: `Pong! It is ${new Date()}`, }, }) echo, });
21
stevekrouse avatar
twitterAlert
@stevekrouse
Cron
Twitter 𝕏 keyword Alerts Custom notifications for when you, your company, or anything you care about is mentioned on Twitter. 1. Authentication You'll need a Twitter Bearer Token. Follow these instructions to get one. Unfortunately it costs $100 / month to have a Basic Twitter Developer account. If you subscribe to Val Town Pro, I can let you "borrow" my token. Just comment on this val and I'll hook you up. 2. 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! 3. Notification Below I'm sending these mentions to a private channel in our company Discord, but you can customize that to whatever you want, @std/email, Slack, Telegram, whatever. TODO [x] ~Filter out retweets. We've long wanted to filter these out. Should be a quick fix if anyone wants to send me a PR :)~ Completed by @sumukh
22
pomdtr avatar
vscode
@pomdtr
HTTP
Manage your blobs using VS Code ! Just fork this val to install it, and use an api token to authenticate.
23
iamseeley avatar
sendSMS
@iamseeley
Script
πŸ’¬ Val Town Email-to-SMS Usage import { sendSMS } from 'https://esm.town/v/iamseeley/sendSMS'; sendSMS(phoneNumber: string, message: string, carrier: string): Promise<void> Parameters phoneNumber: The recipient's phone number (string of digits, no spaces or dashes) message: The text message you want to send carrier: The recipient's cell phone carrier. Supported carriers: 'att' (AT&T), 'tmobile' (T-Mobile), 'verizon' (Verizon), 'sprint' (Sprint) List of Email-To-SMS Addresses Comment on this val if you'd like me to add a carrier from the above list! Example import { sendSMS } from 'https://esm.town/v/iamseeley/sendSMS'; sendSMS('1234567890', 'Hello from Val Town!', 'verizon');
24
stevekrouse avatar
getWeather
@stevekrouse
Script
Get Weather Simple function to get weather data from the free wttr.in service. import { getWeather } from "https://esm.town/v/stevekrouse/getWeather"; let weather = await getWeather("Brooklyn, NY"); console.log(weather.current_condition[0].FeelsLikeF)
25
pomdtr avatar
extractValInfo
@pomdtr
Script
Extract vals infos (author, name, version) from a val url (either from esm.town or val.town ). Example usage: const {owner, name} = extractValInfo(import.meta.url) Also returns a unique slug for the val: <author>/<name>
26
substrate avatar
websim
@substrate
HTTP
WebSim on Val with Substrate πŸͺ© To fork, sign up for Substrate to get your own API key and $50 free credits
27
jxnblk avatar
vimarkdown
@jxnblk
HTTP
vimarkdown Try it now A VIM-mode markdown editor built with Val Town . Features Write markdown in the browser with VIM keybindings Minimal, focused UI Saves to localStorage Multiple color modes Markdown -> HTML preview (⌘+P) NOT mobile-friendly Fork this editor on Val Town to make it your own Inspired by iA Writer Made by Jxnblk
28
substrate avatar
spanishLesson
@substrate
HTTP
Generates spanish flashcards on a topic, including generated images and speech. πŸͺ© To fork, sign up for Substrate to get your own API key and $50 free credits
29
triptych avatar
smileyPNG
@triptych
HTTP
Render a PNG This tiny smiley face is rendered by this val: The image response is cached by the CDN, so make sure to change the image name if you make code changes. Any name with a .png extension will work: https://maxm-smileypng.web.val.run/-.png
30
dglazkov avatar
bbaas
@dglazkov
Script
Breadboard As a Service A simple board runner that allows hosting board as a service. The service can be public (accessible to everyone) or private (locked behind a service key). See chatbot example for a public service and generatevoice for private. Make sure to add all the necessary secrets to your environment variables. The resulting HTTP endpoint can be then used as a Service URL for Core Kit's service node.