Search

dumpValTownToMainframe

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Cron

import { valtownToSQLite } from "https://esm.town/v/pomdtr/valTownToSQLite";

import { createClient } from "https://jsr.io/@pomdtr/sqlite-explorer/0.0.6/client.ts";

const client = createClient({

url: "https://mainframe.pomdtr.me",

await valtownToSQLite({

driver: client,

falSDXLExample

@isidentical

An interactive, runnable TypeScript val by isidentical

Script

import * as fal from "npm:@fal-ai/serverless-client";

fal.config({

// Can also be auto-configured using environment variables:

ChatGPTTextDefinitionUserscript

@willthereader

// @name Improved ChatGPT Text Definition

Script

const contentElement = document.querySelector(".p-body-inner");

if (!contentElement) return { width: window.innerWidth, height: window.innerHeight };

const contentRect = contentElement.getBoundingClientRect();

const availableWidth = window.innerWidth - contentRect.right;

const availableHeight = window.innerHeight;

todo_app

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import React from "https://esm.sh/react";

import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";

import { sqlite } from "https://esm.town/v/std/sqlite?v=4";

vanPlate

@pomdtr

Van Plate

HTTP (deprecated)

"area",

"article",

"aside",

"audio",

"b",

reloadOnSave

@lisardo

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>`); })

Script

import { parentReference } from "https://esm.town/v/stevekrouse/parentReference";

import type { MiddlewareHandler } from "npm:hono";

// this script runs client-side

export const reloadOnVals = async function(vals: ValRef[]) {

const valVersions = await Promise.all(vals.map(getCurrentValVersionNumber));

todo_demo

@billtrenchard

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import React from "https://esm.sh/react";

import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";

import { sqlite } from "https://esm.town/v/std/sqlite?v=4";

getValsContextWindow

@janpaul123

An interactive, runnable TypeScript val by janpaul123

1 7

Script

type: "http",

prompt: "Generate a val that uses React to render HTML",

code: `/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export const reactExample = (request: Request) =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

prompt: null,

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export const preactExample = (request: Request) =>

new Response(render(<div>Test {1 + 1}</div>), {

type: "http",

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {

lastlogin

@stevekrouse

LastLogin Authentication Add user auth to your app via LastLogin. LastLogin is a hosted auth provider that enables login through email, Google, Github, etc. How to setup These instructions were written to be easily copy-and-pasteable into LLMs like Townie. import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe"; Wrap your HTTP handler in it, ie export default lastLogin(handler) In your handler, redirect to /auth/login or /auth/logout to trigger those flows. In your HTTP handler, read the X-LastLogin-Email header, ie const email = req.headers.get("X-LastLogin-Email") If the user is logged in, you now have a email you can work with. If not, it will be empty Live demo How it works: Your users click on a link to /auth/login in your app This middleware directs them to login via LastLogin They authenticate to LastLogin LastLogin redirects them back to your app This middleware "logs them in" to your app by giving them a session cookie. In your app, you can read the X-LastLogin-Email header to see which (if any) user is logged in Notes If you want username & password auth: @stevekrouse/lucia_middleware This middleware stores sessions in the lastlogin_session table in your Val Town SQLite This val has NOT been properly audited for security. I am not a security expert. I would suggest only using it for demos, prototypes, or apps where security is not paramount. If you are a security expert, I would appreciate your help auditing this! Todos [ ] Let the user customize the name of the SQLite table [ ] Get a proper security audit for this

1 11

Script

const url = new URL(req.url);

const clientID = `${url.protocol}//${url.host}/`;

const redirectUri = `${url.protocol}//${url.host}/auth/callback`;

const tokenUrl = new URL("https://lastlogin.io/token");

tokenUrl.searchParams.set("client_id", clientID);

tokenUrl.searchParams.set("code", code);

const authUrl = new URL("https://lastlogin.io/auth");

authUrl.searchParams.set("client_id", clientID);

authUrl.searchParams.set("redirect_uri", redirectUri);

date_me_faq

@stevekrouse

@jsxImportSource https://esm.sh/preact

1 1

Script

/** @jsxImportSource https://esm.sh/preact */

let linkClass = "text-sky-600 hover:text-sky-500";

export let date_me_faq = (

val_town_client_example

@pomdtr

Typed Client for the Val Town API Automatically generated using open-api-typescript and openapi-fetch .

1 1

Script

# Typed Client for the Val Town API

Automatically generated using [open-api-typescript](https://www.npmjs.com/package/openapi-typescript) and [openapi-fetch](htt

import createClient from "https://esm.town/v/pomdtr/val_town_client";

const client = createClient({

token: Deno.env.get("valtown"),

const { data, error } = await client.GET("/v1/search/vals", {

params: {

linkInBioTemplate

@ototao

A simple linketree-esque page originally made by Steve Krouse

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request) {

return new Response(

FindTrendsUsingGPT

@weaverwhale

An interactive, runnable TypeScript val by weaverwhale

HTTP (deprecated)

const styles = "<style>* { font-family: sans-serif; }</style>";

const mermaidClient = `

// Buffer the HTML content

let htmlContent = styles + mermaidClient;

let finalContent = "";

await trendGPT(JSON.stringify(trendsData), (streamedData) => {

finalContent = styles + mermaidClient + marked.parse(streamedData, {

breaks: true,

valle_tmp_125920830351466952258206466703858

@janpaul123

// This val will create a simple comment box using a form. Comments are persisted using SQLite

HTTP (deprecated)

// This val will create a simple comment box using a form. Comments are persisted using SQLite

// and it will display all previous comments. The HTTP route uses a server-side approach to

// handle both displaying comments and submitting new ones.

import { blob } from "https://esm.town/v/std/blob?v=11";

authMiddleware

@pomdtr

authMiddleware: middleware to protect your HTTP val Todo [ ] Human readable JWT claim validation errors

Script

const clientToken = qs.get("clientToken");

qs.delete("clientToken");

const [tokenPayload, clientTokenPayload] = await Promise.all([

tokenDecoded && clientToken && verifyThirdParty(clientToken, {

console.log("error validating clientToken", e, clientToken);

failReason = html`clientToken validation failed: ${e.message}`;

if (tokenPayload && clientTokenPayload) {

if (tokenPayload.clientTokenId === clientTokenPayload.jti) {

const { searchParams } = new URL(ENDPOINT + clientTokenPayload.returnTo.slice(HANDLER_NAME.length));

failReason = html`clientToken validation failed: client token id mismatch`;

…

42 43

45 46

…

184