Trending Vals
91
92
94
TodoApp
@stevekrouse
HTTP (deprecated)
SSR React Mini & SQLite Todo App This Todo App is server rendered and client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in Val Town SQLite . SSR React Mini Framework This "framework" is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix. The trick is client-side importing the React component that you're server rendering . Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as modules importable by the browser. The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side loader and action with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the loader and action , so they only run server-side.
95
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
96
97
99
cron
@stevekrouse
HTTP
CronGPT This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by Cron Prompt , but also does the timezone conversion from wherever you are to UTC (typically the server timezone). Tech Hono for routing ( GET / and POST /compile .) Hono JSX HTMX (probably overcomplicates things; should remove) @stevekrouse/openai, which is a light wrapper around @std/openai I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it: Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.
100
scraper_template
@gwoods22
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
101
weatherGovGrid
@stevekrouse
Script
Lookup a weather.gov grid by lat, lon Documentation: https://www.weather.gov/documentation/services-web-api Forecasts are created at each NWS Weather Forecast Office (WFO) on their own grid definition, at a resolution of about 2.5km x 2.5km. The API endpoint for the 12h forecast periods at a specific grid location is formatted as: https://api.weather.gov/gridpoints/{office}/{gridX},{gridY}/forecast For example: https://api.weather.gov/gridpoints/TOP/31,80/forecast To obtain the grid forecast for a point location, use the /points endpoint to retrieve the current grid forecast endpoint by coordinates: https://api.weather.gov/points/{latitude},{longitude} For example: https://api.weather.gov/points/39.7456,-97.0892
104
105
AIDateInput
@ganeshkumartk
HTTP (deprecated)
AI Date Input AI Date Input is a smart date detection React component. It uses natural language processing to interpret various date and time inputs, providing a seamless user experience for date entry. Features Real-time date and time detection as you type Supports a wide range of date and time formats Displays detected date in a formatted output Shows both the parsed date and the original input text Clean, minimalist UI with a clear input field One-click clear functionality How It Works The AI Date Input uses the chrono-node library to parse natural language date and time expressions. As the user types, the input is continuously analyzed, and when a valid date or time is detected, it's displayed below the input field. The detected date is shown in two formats: A formatted date and time (e.g., "09/09/2024 02:27 PM") The original text that was interpreted as a date (e.g., "5 days from now") Usage To use this component in Val Town: Create a new val or edit an existing one Copy and paste the entire code into the val Save the val Access the val's URL to see the AI Date Input in action Customization You can customize the appearance and behavior of the AI Date Input: Modify the Tailwind CSS classes in the HTML to change the styling Adjust the date formatting in the formatDate function Change the parsing behavior by modifying the detectDate function Dependencies React 18 chrono-node (for date parsing) Tailwind CSS (for styling) Technical Details The component uses server-side rendering for the initial HTML Client-side JavaScript handles the interactive features Date parsing is done in real-time on the client-side Contributing To contribute to this project: Fork the val in Val Town Make your changes Test thoroughly Submit a pull request or share your modified version License This project is open-source and available under the MIT License.
ยฉ๏ธ Ganesh Kumar 2024
106
107
109
110
111
112
113
codeOnVT_modifyResponse
@andreterron
Script
"Code on Val Town" Response modifier Appends the "Code on Val Town" ribbon to an HTTP Response. Usage new modifyResponse(res, { handle: "andre", name: "foo" }) - define which val to link to; new modifyResponse(res) - infer the val from the call stack. Example: @andreterron/openable_res import { modifyResponse } from "https://esm.town/v/andreterron/codeOnVT_modifyResponse";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return modifyResponse(html(`
<h2>Hello world!</h2>
<style>* { font-family: sans-serif }</style>
`));
};
114
codeOnVT_ribbonElement
@andreterron
Script
"Code on Val Town" Ribbon HTML Element Ribbon element used by @andreterron/codeOnValTown Usage ribbonElement({val: { handle: "andre", name: "foo" }}) - define which val to link to; ribbonElement() - infer the val from the call stack. Example: @andreterron/openable_element import { ribbonElement } from "https://esm.town/v/andreterron/codeOnVT_ribbonElement?v=3";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(`
<h2>Hello world!</h2>
<style>* { font-family: sans-serif }</style>
${ribbonElement()}
`);
};
115
116
dobby
@yawnxyz
Script
Simple wrapper class around valtown's sqlite https://www.val.town/v/yawnxyz/dobby // Example usage:
const dobby = new Dobby("myDatabase", [
{ name: "id", type: "INTEGER", primaryKey: true },
{ name: "name", type: "TEXT", notNull: true },
{ name: "age", type: "INTEGER" },
{ name: "balance", type: "REAL" },
]);
await dobby.createDatabase();
// Insert some sample data
await dobby.insert({ id: 1, name: "John Doe", age: 30, balance: 1000.50 });
await dobby.insert({ id: 2, name: "Jane Smith", age: 25, balance: 2000.75 });
await dobby.insert({ id: 3, name: "Bob Johnson", age: 40, balance: 1500.25 });
// Filter examples
const results1 = await dobby.filter({ age: { gt: 25 } });
console.log("Users older than 25:", results1);
const results2 = await dobby.filter({ name: { like: '%John%' } });
console.log("Users with 'John' in their name:", results2);
const results3 = await dobby.filter({ balance: { between: [1000, 2000] } });
console.log("Users with balance between 1000 and 2000:", results3);
const results4 = await dobby.filter({ age: { in: [25, 30, 35] } });
console.log("Users aged 25, 30, or 35:", results4);
const results5 = await dobby.filter({ name: { ne: 'John Doe' } }, { limit: 2 });
console.log("Up to 2 users not named John Doe:", results5);
// Search examples
const searchResults1 = await dobby.search("name", "John");
console.log("Users with 'John' in their name:", searchResults1);
const searchResults2 = await dobby.search("name", "son", { limit: 1 });
console.log("First user with 'son' in their name:", searchResults2);
// You can search in any text column
const searchResults3 = await dobby.search("age", "3");
console.log("Users with '3' in their age:", searchResults3);
// Example of using the new dropDatabase function
await dropDatabase("myDatabase");
117
getDayName
@stevekrouse
Script
Get the day of week name JavaScript's Date.prototype.getDay() returns a number that represents the day of the week, 0 for Sunday, 1 for Monday, etc. This function returns the name of the week, ie "Sunday" , "Monday" , etc. The function optionally inputs a Date object, but will default to the current time if none is provided.
119
getContentFromUrl
@yawnxyz
HTTP
getContentFromUrl Use this for summarizers.
Combines https://r.jina.ai/URL and markdown.download's Youtube transcription getter to do its best to retrieve content from URLs. https://arstechnica.com/space/2024/06/nasa-indefinitely-delays-return-of-starliner-to-review-propulsion-data
https://journals.asm.org/doi/10.1128/iai.00065-23 Usage: https://yawnxyz-getcontentfromurl.web.val.run/https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10187409/ https://yawnxyz-getcontentfromurl.web.val.run/https://www.youtube.com/watch?v=gzsczZnS84Y&ab_channel=PhageDirectory
