Search

Results include substring matches and semantically similar vals. Learn more
pomdtr avatar
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: {
postpostscript avatar
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));
kajgod avatar
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";
wking avatar
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) => {
tr3ntg avatar
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:**
tylergaw avatar
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
Available params:
pomdtr avatar
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)
l.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,
stevekrouse avatar
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: {
janpaul123 avatar
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> {
syncretizm avatar
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\/(
stevekrouse avatar
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)
ajax avatar
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":
sure 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
"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
"website": "https://listium.com",
doublelotus avatar
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.ones
otifications to your phone without building a native app! I built a barebones React PWA that asks for a password then loads t
## Setup
generatecoll avatar
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;
jxnblk avatar
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]: ";