Search
generate_openapi_schema
@pomdtr
An interactive, runnable TypeScript val by pomdtr
Script
import createClient from "https://esm.town/v/pomdtr/val_town_client";
import openapiTS from "npm:openapi-typescript";
const client = createClient({
token: Deno.env.get("valtown"),
const code = await openapiTS(new URL("https://pomdtr-val_town_openapi.web.val.run"));
const { data, error, response } = await client.PUT("/v1/vals", {
body: {
reactiveStateBlob
@postpostscript
reactiveStateBlob: wrap blob state in a proxy to autosave it on changes Examples (full example at @postpostscript/reactiveStateBlobExample ) import { reactiveStateBlob } from "https://esm.town/v/postpostscript/reactiveStateBlob"
using state = await reactiveStateBlob({
viewCount: 0,
rows: [] as {
x: number;
y: number;
}[],
});
state.viewCount += 1;
state.rows.push({
x: Math.random(),
y: Math.random(),
}); This infers the key from the name of the val that uses it. To specify it, pass the key option: using state = await reactiveStateBlob({
viewCount: 0,
rows: [] as {
x: number;
y: number;
}[],
}, {
key: 'reactiveStateBlobExample.state',
}); Updating Schema If you want to update the schema, or always verify the state that is pulled from the job, pass a function as the first argument: using state = await reactiveStateBlob((existingState) => {
return {
viewCount: (existingState.viewCount ?? 0) as number,
rows: (existingState.rows ?? []) as {
x: number;
y: number;
}[],
someNewField: (existingState.someNewField ?? "") as string,
}
}) Options using state = await reactiveStateBlob<{
value: number;
}>({
value: 0,
}, {
log: true, // log when saving
key: "blobKey", // blob key to fetch/save to
timeout: 100, // ms, defaults to 10
lock: true, // or LockOptions (see https://www.val.town/v/postpostscript/lock#options)
}) See Also @postpostscript/counter (example at @postpostscript/counterExample )
Script
# reactiveStateBlob: wrap blob state in a proxy to autosave it on changes
## Examples (full example at [@postpostscript/reactiveStateBlobExample](reactiveStateBlobExample))
import { reactiveStateBlob } from "https://esm.town/v/postpostscript/reactiveStateBlob"
using state = await reactiveStateBlob({
persistentStateReactive,
export async function reactiveStateBlob<T extends Record<string, unknown>>(
return `reactiveStateBlob:${handle}/${name}`;
const cache = persistentStateBlobReactive({
export function persistentStateBlobReactive<T extends Record<string, unknown>>(
return persistentStateReactive(persistentStateBlob(opts));
reminder_cron
@kajgod
An interactive, runnable TypeScript val by kajgod
Cron
import { sqlite } from "https://esm.town/v/std/sqlite?v=4";
import { Row } from "npm:@libsql/client";
import axios from "npm:axios";
const fromAddress = "reminder@plk-bjelowbar.hr";
generativeNoise
@wking
Generative Noise Demo This is based on a post I wrote on Craft Lab The article breaks down the basic building blocks that go into most generative projects.
HTTP (deprecated)
/** @jsxImportSource npm:react **/
import Alea from "npm:alea";
import { renderToString } from "npm:react-dom@18/server";
import { createNoise2D } from "npm:simplex-noise";
export default (req: Request) => {
googleGenerativeAIStreamingExample
@tr3ntg
Google Generative AI Streaming Example Example Val showing how to set up an authenticated Google GoogleGenerativeAI client. Prerequisite: Follow Google's Getting Started guide to get an API key and view some example methods.
HTTP (deprecated)
# Google Generative AI Streaming Example
Example Val showing how to set up an authenticated Google `GoogleGenerativeAI` client.
**Prerequisite:**
socialImage
@tylergaw
Simple image generator A bit of a toy image creator that can be used anywhere images can be, but is intended for social share images in og:image or twitter:image meta tags. Usage examples In a live web page Live example https://tylergaw-socialimageusage.web.val.run/ Live example Val https://www.val.town/v/tylergaw.socialImageUsage Code examples Default This will set the og:image of a web page to a png image of an orange 1200x600 pixel rectangle <meta property="og:image" content="https://tylergaw-socialimage.web.val.run/"> Works the same way as an embedded image <img src="https://tylergaw-socialimage.web.val.run/"> Customize with query parameters General note, some clients are more permissive with unencoded query params than others. It's best to encodeURIComponent for all params. Available params: bg : Sets the background color. Default orange . See Color format examples below for details color : Sets the background color. Default black . See Color format examples below for details w : Sets the width of the image. Default 1200 h : Sets the height of the image. Default 600 text : Sets the text displayed. Default Wellow horld <meta property="og:image" content="https://tylergaw-socialimage.web.val.run/?bg=pink&w=1000&h=400"> Color format examples bg and color parameters can any valid color that works with canvas fillStyle in hex, rgb(a), hsl(a), rrggbbaa, etc format. Note # must be encoded. Hex ?bg=%235f0ac7 rgb(a) ?bg=rgba(100,200,85,0.5) rrggbbaa ?bg=%23ff0095d1 hsl(a) ?bg=hsla(100,100%25,50%25,0.5)
HTTP (deprecated)
**Customize with query parameters**
General note, some clients are more permissive with unencoded query params than others. It's best to `encodeURIComponent` for all params.
Available params:
valtownOpenAPI
@pomdtr
Val Town Typescript Spec This val return an up-to-date typescript version of the val.town openapi spec for usage with a feTS client. Usage Deno script import { createClient, type NormalizeOAS } from "npm:fets";
import openapi from "https://pomdtr-valtownOpenAPI.web.val.run/openapi.ts";
export const client = createClient<NormalizeOAS<typeof openapi>>({
endpoint: openapi.servers[0].url,
});
HTTP (deprecated)
# [Val Town Typescript Spec](https://pomdtr-valtownOpenAPI.web.val.run)
This val return an up-to-date typescript version of the val.town openapi spec for usage with a [feTS](https://github.com/ardatan/feTS) client.
## Usage
```typecript
import { createClient, type NormalizeOAS } from "npm:fets";
import openapi from "https://pomdtr-valtownOpenAPI.web.val.run/openapi.ts";
export const client = createClient<NormalizeOAS<typeof openapi>>({
endpoint: openapi.servers[0].url,
clone_my_vals_to_sqlite
@stevekrouse
I'm not particularly proud of this code
Script
import createClient from "https://esm.town/v/stevekrouse/val_town_client";
const client = createClient();
// from https://www.val.town/v/pomdtr/valTownToSQLite
while ((page === 0 || vals.length) && page < 100 && !error) {
const response = await client.GET("/v1/users/{user_id}/vals", {
params: {
reproduceResolveModuleError
@janpaul123
// Copied from https://www.val.town/v/sqlite/db
Script
import { db } from "https://esm.town/v/sqlite/db?v=9";
import type { InStatement } from "https://esm.town/v/std/sqlite";
import type { ResultSet } from "npm:@libsql/client";
// Copied from https://www.val.town/v/sqlite/db
async function execute(statement: InStatement): Promise<ResultSet> {
youtubeEndpoint
@syncretizm
An interactive, runnable TypeScript val by syncretizm
HTTP (deprecated)
let mode = url.searchParams.get("mode") || "";
let responseContent;
let publishedDate, currentDate, timeDiff, daysDiff; // Declare variables outside the switch
yturl = decodeURIComponent(yturl);
const videoIdMatch = yturl.match(/(?:https?:\/\/)?(?:www\.)?youtube\.com\/(?:watch\?v=|live\/)([a-zA-Z0-9_-]+)|youtu\.be\/([a-zA-Z0-9_-]+)/);
mongo
@stevekrouse
Silly mongo-like client on Val Town SQLite inspired by Pongo
Script
# Silly mongo-like client on Val Town SQLite inspired by [Pongo](https://github.com/event-driven-io/Pongo)
resumeConfig
@ajax
⚙️ configuration for hello, resume this guide will help you configure and use the resume builder to create your resume page. Ensure that your resume is formatted according to the JSON Resume standard . This is crucial for the resume builder to interpret and render your resume correctly. If you don't want to take the time to manually format your resume content and set up hosting, try using this: Resume to JSON 1. Configure the Resume JSON You have two options to provide your resume data: Resume JSON URL : Point this to your raw resume JSON hosted online. Recommended setups include using Val Town or a GitHub Gist. Example: resumeJsonUrl: 'https://example.com/resume.json' Paste Resume JSON : Provide the resume JSON directly within the configuration. Example: resumeJson: {
"basics": { "name": "John Doe" },
"work": [ ... ]
} 2. Choose a Theme Select a theme for your resume. You can use the predefined themes or create your own: Predefined Themes : starterTheme oceanTheme Custom Theme : Customize the styles in the starterTheme or create a new one and import it. 3. Custom Styles (Optional) If you want to add additional styles, provide a URL to a custom stylesheet: Example: customStyleUrl: 'https://example.com/styles.css' 4. Set the Section Order Customize the order of the sections in your resume: Default order: sectionOrder: ['header', 'summary', 'education', 'work', 'projects', 'volunteer', 'awards', 'certificates', 'publications', 'skills', 'languages', 'interests', 'references'] Example custom order: sectionOrder: ['header', 'summary', 'projects', 'education', 'work'] 5. Add Custom Sections (Optional) Override any default sections with custom sections: Example: customSections: {
header: customHeader
} 6. Show/Hide "Save as PDF" Button Control the visibility of the "Save asPDF" button: Example: savePDFIsVisible: true 7. View Your Resume Copy this resumeConfig's module URL and import it in your resumeHandler . Visit the resumeHandler HTTP endpoint to view your resume!
Script
"reference":
"I've had the great pleasure of working with Thomas for the past three years at Earbits, and on a few side projects. Two years ago our CTO left on a moment's notice, Thomas saved our company by quickly stepping up to fill this role. He has been with our company through thick and thin and made serious personal sacrifices in order to help the company during tough times. He is a phenomenal hacker and a true team player. Highly recommended!",
"name": "Yotam Rosenbaum, SVP of Operations, Earbits, Inc.",
"Javascript / Typescript",
"React / Next",
"Redux / Apollo",
"highlights": [
"React / Next",
"Node / Laravel",
"highlights": [
"React",
"Redux",
"highlights": [
"React, Apollo, Styled Components",
"Node.js / Rails",
"summary":
"Built a very large and complex React / Redux application. It works on all platforms and has IOS/Android builds due to it being a PWA. (wrapped it in React Native though only implementing a WebView)",
"website": "https://listium.com",
sendNotification
@doublelotus
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";
Script
This val can be used in other vals to send notifications to a segment using [OneSignal's REST API](https://documentation.onesignal.com/reference/create-notification)
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](https://www.netlify.com/) for free. OneSignal has [easy to follow docs](https://documentation.onesignal.com/docs/web-sdk-setup) so you can build this functionality into a React, Angular, Vue app or even Wordpress! Then [install the PWA](https://www.bitcot.com/how-to-install-a-pwa-to-your-device/) on your platform of choice and you're off to the races!
## Setup
creativity_quotes
@generatecoll
Random Creativity Quotes The following call will bring back random creativity quotes
HTTP (deprecated)
const postgres = await import("https://deno.land/x/postgres/mod.ts");
const client = new postgres.Client(process.env.neon_url);
await client.connect();
let res = await client.queryObject`select quote_text, author FROM quotes ORDER BY RANDOM() LIMIT 1;`;
let quote = res.rows[0].quote_text;
test
@jxnblk
A test utility and badge to put in your val readme to show test suite status Example: Usage: Make a val Make a separate test suite HTTP val for the val you want to test Import describe and it utilities Write tests Add the badge to your readme, with the url parameter pointing to the test suite val's endpoint. Tests run whenever the test suite val or the badge is fetched import { describe, it } from "https://esm.town/v/jxnblk/test";
import { assertEquals } from "jsr:@std/assert@1";
export default describe("my test suite", () => {
const sum = (a, b) => a + b;
it("sums it up", () => {
assertEquals(sum(1, 2), 3);
})
}) Badge: [![][badge]][url]
[badge]: https://jxnblk-test.web.val.run?url=YOUR_TEST_SUITE_ENDPOINT
[url]: YOUR_TEST_SUITE_URL Example [![][badge]][url]
[badge]: https://jxnblk-test.web.val.run?url=https://jxnblk-tunatestsuite.web.val.run
[url]: https://www.val.town/v/jxnblk/tunaTestSuite
HTTP (deprecated)
/** @jsxImportSource npm:preact */
import { render } from "npm:preact-render-to-string";
export function it(name, fn) {
const ok = "✅ [OK]: ";