Search

azureCheetah

@tmcw

The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE

HTTP (deprecated)

The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE

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

export default function(

{ tempValsParentFolderId }: { tempValsParentFolderId: string },

const { author, name } = extractValInfo(import.meta.url);

const username = author;

const valTownToken = Deno.env.get("valtown");

const vt = new ValTown({ bearerToken: valTownToken });

const app = new Hono();

const jsxResponse = (jsx) => {

connect4_agent

@saolsen

An interactive, runnable TypeScript val by saolsen

Script

export type Agent = (state: connect4.State) => connect4.Action;

export type AsyncAgent = (state: connect4.State) => Promise<connect4.Action>;

export function connect4_agent(agent: Agent | AsyncAgent) {

const app = new Hono();

app.get("/", (c) => c.json("connect4 agent"));

app.post("/", async (c) => {

const body = await c.req.json();

const parsed = connect4.State.safeParse(body);

if (!parsed.success) {

return c.json({ error: parsed.error }, 400);

VALLErun

@roadlabs

The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE

HTTP (deprecated)

The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE

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

export default function(

{ tempValsParentFolderId, username }: { tempValsParentFolderId: string; username: string },

const valTownToken = Deno.env.get("valtown");

const vt = new ValTown({ bearerToken: valTownToken });

const app = new Hono();

const jsxResponse = (jsx) => {

return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });

const systemprompt = `All the above are example conversations and context you can refer to, but don't

theHereTimes

@gio

* This application creates "The Here Times", a map-based news aggregator. * It uses the Google Maps JavaScript API for map rendering, Geonames for location data, * and the NewsAPI for fetching news articles. * The app displays news for the top 12 most populous cities/neighborhoods in the current map view. * * We'll use the following approach: * 1. Use Google Maps JavaScript API for rendering the map * 2. Use Geonames API to get top 12 most populous cities within the map bounds * 3. Fetch news data from NewsAPI based on these locations * 4. Display news articles in a side drawer, only showing articles that contain the city's name in the title * 5. Place markers on the map for each location (exactly 12) * 6. Add a search bar to allow users to search for specific locations * 7. Recenter the map when a location is clicked or searched

HTTP

* This application creates "The Here Times", a map-based news aggregator.

* It uses the Google Maps JavaScript API for map rendering, Geonames for location data,

* and the NewsAPI for fetching news articles.

* The app displays news for the top 12 most populous cities/neighborhoods in the current map view.

* We'll use the following approach:

* 1. Use Google Maps JavaScript API for rendering the map

* 2. Use Geonames API to get top 12 most populous cities within the map bounds

* 3. Fetch news data from NewsAPI based on these locations

* 4. Display news articles in a side drawer, only showing articles that contain the city's name in the title

* 5. Place markers on the map for each location (exactly 12)

valle_tmp_8772577792541712013582363429356

@janpaul123

// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat

HTTP (deprecated)

// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat

export default async function(req: Request): Promise<Response> {

const html = `

<html>

<head>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

search_heroicons

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Script

export default async function(ctx: BrowserContext) {

const resp = await fetch("https://api.iconify.design/collection?prefix=heroicons");

if (!resp.ok) {

throw new Error(await resp.text());

const { uncategorized: icons } = await resp.json() as { uncategorized: string[] };

const items = icons.filter(

(icon) => !icon.endsWith("-solid"),

).map(icon => ({

icon,

title: icon,

automergeToJson

@pvh

set up Automerge's internal wasm guts manually

HTTP (deprecated)

/* set up Automerge's internal wasm guts manually */

await automerge.next.initializeBase64Wasm(automergeWasmBase64);

/* This example will return the contents of a documentID passed in as the path as JSON. */

export default async function(req: Request): Promise<Response> {

const docId = new URL(req.url).pathname.substring(1);

if (!isValidAutomergeUrl("automerge:" + docId)) {

return Response.error();

const repo = new Repo({ network: [new BrowserWebSocketClientAdapter("wss://sync.automerge.org")] });

const handle = repo.find(docId);

const contents = await handle.doc();

aqi

@Exam6918

An interactive, runnable TypeScript val by Exam6918

Cron

export let aqi = async () => {

let pm25 = (

await fetchJSON(

"https://api.openaq.org/v2/latest?" +

new URLSearchParams({

limit: "10",

page: "1",

location: "San Francisco",

offset: "0",

sort: "desc",

bulletinBoard

@roramigator

// This app creates a community bulletin board where users can post messages with titles and view all posts.

HTTP (deprecated)

// This app creates a community bulletin board where users can post messages with titles and view all posts.

// Posts are automatically deleted after 24 hours. A basic spam filter is implemented to prevent abuse.

// The app uses SQLite for data storage and includes both server-side and client-side components.

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

function App() {

const [posts, setPosts] = useState([]);

const [newTitle, setNewTitle] = useState("");

const [newPost, setNewPost] = useState("");

const [error, setError] = useState("");

useEffect(() => {

handshake

@jdan

An interactive, runnable TypeScript val by jdan

Script

export const handshake = "🤝".codePointAt(0);

Nav

@iamseeley

@jsxImportSource https://esm.sh/hono@latest/jsx

Script

/** @jsxImportSource https://esm.sh/hono@latest/jsx */

export default function Nav({ currentPath }) {

const isEditProfilePath = currentPath && currentPath.startsWith('/edit-profile/');

return (

<a className="" href="/"><h2 style={{ fontFamily: '"Jaro", sans-serif' }} className="text-4xl text-neutral-800">/now</h

{isEditProfilePath ? (

<button

hx-post="/logout"

authIdExampleCookiePrivate

@postpostscript

An interactive, runnable TypeScript val by postpostscript

HTTP (deprecated)

import {

authMiddlewareCookie,

userActionsDisplay,

type HonoEnv,

} from "https://esm.town/v/postpostscript/authMiddleware";

import { Layout } from "https://esm.town/v/postpostscript/Layout";

import { Hono } from "npm:hono";

const app = new Hono<HonoEnv>();

app.use("*", authMiddlewareCookie());

app.get("/", (c) => c.html(Layout`${userActionsDisplay(c.get("auth"))}` as string));

export default app.fetch;

expressHandler

@tmcw

An interactive, runnable TypeScript val by tmcw

Script

export let expressHandler = (req, res) => {

res.send("hello world");

Time_Blindness_Loud_Calendar_via_iOS_shortcuts

@stevekrouse

@jsxImportSource https://esm.sh/hono@latest/jsx

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/hono@latest/jsx **/

// Define the route handler function

export const Time_Blindness_Loud_Calendar_via_iOS_shortcuts = (c: Context) => {

console.log("Route accessed: Time_Blindness_Loud_Calendar_via_iOS_shortcuts");

const htmlContent = `

<!DOCTYPE html>

<html>

<head>

<title>Time Blindness Loud Calendar via iOS Shortcuts</title>

<style>

blobEditor

@nbbaier

Usage: import blobEditor from "https://esm.town/v/pomdtr/blob_editor" export default blobEditor("article.md") You can easily protect your val behind @pomdtr/passwordAuth or @pomdtr/emailAuth

Script

Usage:

```ts

export default blobEditor("article.md")

You can easily protect your val behind @pomdtr/passwordAuth or @pomdtr/emailAuth

/** @jsxImportSource npm:hono/jsx **/

export function blobEditor(key: string, options?: { title?: string }) {

const router = new Hono();

router.use(jsxRenderer(({ children }) => {

const c = useRequestContext();

const { pathname } = new URL(c.req.url);

…

73 74

76 77

…

364