Trending Vals

Forked from std/sqlite

Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.

Forked from mewtru/valentine

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

SQLite Dump Util A utility function that generates SQL statements to dump the data and schema of tables in a SQLite database. Usage This example specifically dumps the users table and logs the output: import { sqliteDump } from "https://esm.town/v/nbbaier/sqliteDump"; const dump = await sqliteDump(["users"]); console.log(dump) You can optionally specify a callback to handle the result. The example below dumps the users table and emails it using std/email . import { email } from "https://esm.town/v/std/email"; import { sqliteDump } from "https://esm.town/v/nbbaier/sqliteDump"; await sqliteDump(["users"], async (res) => { await email({ text: res }); }); Function Signature function sqliteDump(tables?: string[], callback?: ((result: string) => string | void | Promise<void>) | undefined): Promise<string | void> Parameters tables : (Optional) Array of table names to include in the dump. If not provided, all tables will be included. callback : (Optional) An (potentially async) callback function to process the dump result. The callback receives the dump string as its argument.

FileThing P2P file transfer using WebRTC

Forked from stevekrouse/sqlite_admin

Twitter/𝕏 Keyword Alerts [TEMPLATE] Get custom notifications when you, your company, or anything you care about is mentioned on Twitter/X, even if they don't tag you directly. This template will help you: Search for specific mentions on Twitter/X using customizable keywords. Deliver notifications wherever you'd like (email, Discord, Slack, Telegram, etc). Example This val tracks mentions of "Val Town" and related terms, excluding noise like retweets and irrelevant accounts. Notifications are sent to a Discord webhook but can be easily reconfigured for other platforms. To see exactly how we use this template at Val Town: https://www.val.town/v/stevekrouse/twitterAlert Set Up 1. Fork this Val To use this template, fork this val on the top right corner of this page. 2. View Source Code The CODE box shows you the the full source code of this val, you may need to scroll down to see it. 3. Customize Query Define what you want to search for by modifying query : const query = "\"val.town\" OR \"val.run\" OR \"val town\" -_ValTown_ -is:retweet -from:valenzuelacity -from:val__run"; Refer to Twitter's search operators to fine-tune your query. 4. Test API call Set isProd = false in the code if you are testing, to ensure there are enough tweets to display. Toggle it back to true when you're ready to run this cron job in production and actuall send notifications. 5. Choose Notification Method This template uses a Discord webhook for notifications, but you can update this to your preferred platform by replacing the discordWebhook call with a call to Slack , @std/email , etc. Create a Discord webhook following this guide . Save your Discord Webhook URL in your Val Town environment variables : Key: mentionsDiscord Value: Your Discord webhook URL. Notifications will be sent using this function: await discordWebhook({ url: Deno.env.get("mentionsDiscord"), content, }); 🎉 Congrats! You now have a val running that ensures you never miss another Twitter/X mention. 🎉 NOTE: Usage Limits This val uses the SocialData API for Twitter data: Proxies via Val Town's SocialDataProxy : Limited to 10 cents per day for Val Town Pro users . This API is only for Pro users. Need more calls? Sign up for your own SocialData API token and configure the socialDataSearch function.

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

Forked from sdan/getWeather

Neighbor Solutions At Neighbor Solutions , we are empowering communities to transform the lives of those in need. Contact Neighbor Solutions Visit our website Email us! Find us on LinkedIn While this is on rowdypow's ValTown, this code is owned and operated by Neighbor Solutions.

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

Example Hono app with a Fiberplane API explorer. For an example with OpenApiHono , see: https://www.val.town/x/fiberplane/fiberplaneHonoZodStarter Import @fiberplane/hono import { createFiberplane, createOpenAPISpec } from "https://esm.sh/@fiberplane/hono@0.4.4"; Generate a simplified API spec (if you don't already have one) app.get("/openapi.json", async (c) => { const spec = createOpenAPISpec(app, { info: { title: "My Hono API", version: "1.0.0" }, }); return c.json(spec); }); Mount the api explorer This will mount it at the root /* , but you can mount it to another route, like /fp/* if you are using / for your main app. We recommend / if your Hono app is an API without a frontend. app.use( "/*", createFiberplane({ openapi: { url: "/openapi.json" }, }), ); Visit your Val's root route to play with the API explorer! How it Works createFiberplane mounts Fiberplane on your app at the specified path, which can be used to explore the api's routes and make requests. Think of it like an embedded, lightweigh postman. If you don't have an API spec at the ready, then the createOpenAPISpec utility helps create a simple OpenAPI spec from all routes in the application. ( Note that this simple spec does not include information on expected query parameters, headers, or payloads! )

Manage your blobs using VS Code ! Just fork this val to install it, and authenticate with your account email.

Forked from maas/forwarder

Twitter/𝕏 keyword alerts Custom notifications for when you, your company, or anything you care about is mentioned on Twitter. If you believe in Twitter/𝕏-driven development, you want to get notified when anyone is talking about your tech, even if they're not tagging you. To get this Twitter Alert bot running for you, fork this val and modify the query and where the notification gets delivered. 1. Query Change the keywords for what you want to get notified for and the excludes for what you don't 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. Twitter Data & Limitations The Twitter API has become unusable. This val gets Twitter data via SocialData , an affordable Twitter scraping API. In order to make this val easy for you to fork & use without signing up for another API, I am proxying SocialData via @stevekrouse/socialDataProxy. Val Town Pro users can call this proxy 100 times per day, so be sure not to set this cron to run more than once every 15 min. If you want to run it more, get your own SocialData API token and pay for it directly.

werkend

Extract vals infos (author, name, version) from a val url (either from esm.town or val.town ). Example usage: const {author, name} = extractValInfo(import.meta.url) Also returns a unique slug for the val: <author>/<name>

Reddit Keyword Alerts [TEMPLATE] Get notifications when specific keywords appear in Reddit posts. This template will help you: Search Reddit for specific keywords within a defined time range. Send notifications to your preferred platform (Discord, Slack, email, etc.) Reddit does not have an API that allows users to scrape data, so we are doing this with the Google Search API, Serp . Example This val tracks mentions of "Val Town" and related terms on Reddit, filtering results from the last 7 days and sending alerts to a Discord webhook. Set Up 1. Fork this Val To start using this template, fork this val by clicking the fork button at the top-right corner of the page. 2. View Source Code The CODE box shows you the the full source code of this val, you may need to scroll down to see it. 3. Get a SerpApi Key This template requires a SerpApi key to search Reddit posts via Google search results. Get a SerpApi key : Sign up at SerpApi to create an account. Generate an API key from your account dashboard. Add the SerpApi key to your environment variables : Go to your Val Town environment variables . Add a new key: Key: SERP_API_KEY Value: Your SERP API key. Without this key, the val will not function correctly. 4. Customize Keyword In the CODE box below, update the terms or phrases you want to track: const KEYWORDS = "\"node\" OR \"node.js\""; 5. Set Up Your Notification Method This template uses a Discord webhook for notifications. You can update this to your preferred platform: Create a Discord webhook following this guide . Save your webhook URL in your Val Town environment variables: Key: mentionsDiscord Value: Your Discord webhook URL. Notifications will be sent using this function: await discordWebhook({ url: Deno.env.get("mentionsDiscord"), content, }); To switch to another platform (e.g., Slack, email, or custom webhooks), replace the discordWebhook call with the appropriate integration ((e.g., @std/email , Slack , or anywhere else ) 🎉 Congrats! You now have a val running that ensures you never miss another Reddit mention. 🎉 NOTE: Usage Limits SerpApi: Free SerpApi accounts have monthly call limits.

[WIP] Loopy Letters, another little word game A word game with a small gameplay loop. Plays best on your phone. It uses random words from the Wordnik word game list, as shared on their Github page , which has a lot of stuff on there I myself wouldn't really consider a word. Sorry about that. I probably spent as much time prompting the Townie LLM interface as I did in the code editor. So if parts seem sloppy, it's because it is slop. Rules Use every letter on the donut to spell a word. Letters in the word must be adjacent to each other on the donut. You can go clockwise or counterclockwise . When you find a word. The next word to find appears. Go fast. Go slow. Enjoy. This revisits the gameplay from a 2002 Observable notebook I made called "find a (big) word, rings" .

🏘️ Val Town Town Val Town implemented in Val Town. What if you want to build your own Val Town? What if you want features we haven't built yet? Val Town Town demonstrates how you can run untrusted code yourself. Extend it and see what you can build!

Moved to https://www.val.town/x/stevekrouse/cerebras_coder

Forked from pomdtr/lastlogin

Hacker News Keyword Alerts [TEMPLATE] Get notifications when specific keywords appear in Hacker News posts. This template will help you: Search Hacker News for specific keywords. Send notifications to your preferred platform (Discord, Slack, email, etc.), the default in this template is Discord. Example This val tracks mentions of "Val Town" on Hacker News and sends updates to a Discord webhook. Set Up 1. Fork this Val To start using this template, fork this val by clicking the fork button at the top-right corner of the page. 2. View Source Code The CODE box shows you the the full source code of this val, you may need to scroll down to see it. 3. Customize Keyword In the CODE box below, update the terms or phrases you want to track: query: '"val town" || "val.town"' 5. Set Up Your Notification Method This template uses a Discord webhook for notifications. You can update this to your preferred platform: Create a Discord webhook following this guide . Save your webhook URL in your Val Town environment variables: Key: mentionsDiscord Value: Your Discord webhook URL. Notifications will be sent using this function: await discordWebhook({ url: Deno.env.get("mentionsDiscord"), content, }); To switch to another platform (e.g., Slack, email, or custom webhooks), replace the discordWebhook call with the appropriate integration ((e.g., @std/email , Slack , or anywhere else ) 🎉 Congrats! You now have a val running that ensures you never miss another Hacker News mention. 🎉

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 .

Helper function to call SocialData Twitter Search API, via my proxy: @stevekrouse/socialDataProxy

🌦️ Weather Dashboard – Real-Time Weather Insights at Your Fingertips A modern React-powered weather application delivering real-time conditions and forecasts with intuitive visuals. 👉 Live Demo (Deployable via Val Town) Weather Dashboard Preview Clean interface showing current weather and 5-day forecast 🌟 Features That Shine 🎯 Precision Forecasting Instant Weather Snapshots: Current temp, humidity, wind speed 5-Day Outlook: Daily max/min temps with weather codes Smart Location Search: Find any city worldwide 🎨 Designed for Humans Weather Glyphs: 20+ intuitive weather code icons Mobile-Ready: Flawless experience on all devices Performance Optimized: Dual API calls for fast loads ⚡ Power Features Geo-Smart Default: Starts with NYC, adapts to your searches Source Transparency: One-click code inspection Error Resilient: Graceful API failure handling 🛠️ Tech Powerhouse Component Technology Role Core Framework React 18 Dynamic UI Components Styling CSS Modules Pixel-Perfect Layouts Geo-Services Open-Meteo API Location/Weather Data Hosting Val Town Serverless Deployment Package Mgmt ESM Browser-Native Imports 🚀 Quick Start Guide Local Exploration git clone https://github.com/piyush12kunjilwar/weather-dashboard.git cd weather-dashboard No npm install needed – ESM powered! API Integration Map graph TD A[User Search] --> B{Geocoding API} B -->|Lat/Long| C{Weather API} C --> D[Current Data] C --> E[5-Day Forecast] D --> F[Display Dashboard] E --> F Key Endpoints: Geocoding: https://geocoding-api.open-meteo.com/v1/search Weather: https://api.open-meteo.com/v1/forecast 🕹️ User Flow Search Any City Try "Marrakesh" or "Buenos Aires" Decode Weather Glyphs ☀️ = Clear | ⛈️ = Storm | 🌫️ = Fog Track Trends Hover forecast cards for detailed temps 🧑💻 Developer Playground Customization Ideas: // Try these tweaks: const ENHANCEMENTS = { UNITS: 'imperial', // Switch to Fahrenheit FORECAST_DAYS: 7, // Full week outlook NEW_FEATURES: ['uv_index', 'precipitation'] }; Architecture Highlights: Component-based state management Dynamic weather code mapping Responsive CSS grid layouts 🌱 Contribution Ecosystem We Welcome: New weather icon designs Local storage implementations Unit conversion toggles Accessibility enhancements 📜 License Commons MIT Licensed – Open skies, open code! See LICENSE for full details.

Forked from stevekrouse/lucia_middleware_safe

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.

File to Data URL Helpers to convert files to base64 & base64-encoded data URLs, which are particularly helpful for sending images to LLMs like ChatGPT, Anthropic, and Google. ChatGPT Live example import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL"; const dataURL = await fileToDataURL(file); const response = await chat([ { role: "system", content: `You are an nutritionist. Estimate the calories. We only need a VERY ROUGH estimate. Respond ONLY in a JSON array with values conforming to: {ingredient: string, calories: number} `, }, { role: "user", content: [{ type: "image_url", image_url: { url: dataURL, }, }], }, ], { model: "gpt-4o", max_tokens: 200, }); Anthropic Live example import { fileToBase64 } from "https://esm.town/v/stevekrouse/fileToDataURL"; const base64File = await fileToBase64(file); let res = await anthropic.messages.create({ model: "claude-3-5-sonnet-20240620", max_tokens: 1024, messages: [ { "role": "user", "content": [ { "type": "image", "source": { "type": "base64", "media_type": file.type, "data": base64File, }, }, { "type": "text", "text": `Write an HTML email that evokes this photo in the funniest way possible, with code fences.`, }, ], }, ], }); Google Live example import { fileToBase64 } from "https://esm.town/v/stevekrouse/fileToDataURL"; const base64Image = await fileToBase64(image); const result = await model.generateContent([ "Write all the names and authors of these books in JSON format. The response should be a valid JSON array of objects, each with 'title' and 'author' properties.", { inlineData: { data: base64Image, mimeType: image.type, }, }, ]);