Search

iosMobileConfigMultipleWebClip

* This val creates a client-side application for generating iOS mobile configs. * It allows users to input details for multiple web clips, use the website's favicon or upload custom icons, * and download the generated mobile config file with multiple web clips. * The generated config will be available for download through a dialog that requires a user gesture.

HTTP

* This val creates a client-side application for generating iOS mobile configs.

* It allows users to input details for multiple web clips, use the website's favicon or upload custom icons,

* and download the generated mobile config file with multiple web clips.

repp

@maxm

repp

HTTP

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

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

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

// The script we run within the worker. Don't reference anything

// outside of this function as it won't be available within the worker. We could even host this in a separate val and pass

const workerScript = () => {

// throw new Error("hi")

// evaluate("console.log(\"SIDE EFFECT\")");

// evaluate("let twenty = 20");

valle_tmp_50677281064121176482256801591227

@janpaul123

// Improvements Made:

HTTP

import _ from "npm:lodash";

import OpenAI from "npm:openai";

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

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

test_explorer

@willthereader

Test Explorer Click on the play button next to list items to run them. Usage Fork this val Create new tests in any of vals (and export them) (see @pomdtr/example_test) import { assertEquals } from "https://deno.land/std@0.216.0/assert/mod.ts"; import { Test } from "https://esm.town/v/<account>/test_explorer"; export const exampleTestSuccess = new Test(() => { assertEquals(1 + 1, 2); }); export const exampleTestFailure = new Test(() => { assertEquals(1 + 1, 3); }); Go to https://<account>-test_explorer.web.val.run to run your test click on the val name to go to the val the tests are originating from click on the test name to run it ℹ️ You probably want to protect your test explorer behind an authentication middleware like @pomdtr/basicAuth Discovery mechanism In order to define a test, the user need to import the Test class from https://val.town/v/<account>/Test . So we can use the api to search for vals containing the https://val.town/v/<account>/Test string to locate the vals containing tests. Next, we need to extract the tests from the val exports. We use exported instanceof Test to filter them (at some point we will probably use static analysis for this). TODO [x] persist test results in sqlite [x] Improve styling (help welcome ❤️) [ ] View logs in a modal [ ] Batch http requests

HTTP

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

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const exampleTests = {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

async function runTests(valUrl: string, testCode: string) {

testWebsite

@willthereader

@jsxImportSource https://esm.sh/react

HTTP

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

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

export const testWebsite = (request: Request) => {

// convert to Response

passkeys_demo

@maxm

Passkeys Demo Passkeys are pretty neat! I wanted to get a demo working in Val Town so I ported over https://github.com/maximousblk/passkeys-demo. One challenge was that the original extensively uses DenoKV store with compound keys and values. I created @stevekrouse/DenoSyntheticKV as a replacement for DenoKV. It uses SuperJSON to encode the keys and values. You can find the client-side script for the main page here: @stevekrouse/passkey_script

HTTP

You can find the client-side script for the main page here: @stevekrouse/passkey_script

residentKey: "required",

const clientData = JSON.parse(atob(cred.response.clientDataJSON));

console.log({ clientData });

const challenge = await kv.get<Challenge>(["challenges", clientData.challenge]);

expectedChallenge: clientData.challenge,

await kv.delete(["challenges", clientData.challenge]);

const clientData = JSON.parse(atob(cred.response.clientDataJSON));

console.log({ clientData });

const challenge = await kv.get<Challenge>(["challenges", clientData.challenge]);

expectedChallenge: clientData.challenge,

dreamInterpreterApp

@Bilelghrsalli

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

HTTP

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

import React, { useState } from "https://esm.sh/react@18.2.0";

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

function App() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

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

greenWren

@deepfates

@jsxImportSource https://esm.sh/preact

HTTP

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

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

export default async function(req: Request) {

if (req.method === "POST") {

burnCaloriesCalculator

@Azazil

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

// Calorie burn rates per hour (approximate values)

</div>

function client() {

createRoot(document.getElementById("root")).render(<CalorieCalculator />);

if (typeof document !== "undefined") { client(); }

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

reactDemo

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

import { addReactFromCDN } from "https://esm.town/v/liamdanielduffy/addReactFromCDN";

import { buildHtml } from "https://esm.town/v/liamdanielduffy/buildHtml";

export function reactDemo() {

return buildHtml(addReactFromCDN(), "");

dateme_react_hydrated

@jacobhthomas

Date Me Directory This is entry-point val for the source code for the Date Me Directory. Contributions welcome! This app uses Hono as the server framework and for JSX . The vals are stored in Val Town SQLite . Contributing Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. This script should do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya! Todos [ ] Make the SQLite database forkable and build a widget/workflow for that, ie fix @stevekrouse/dateme_sqlite [ ] Require an email (that isn't shared publicly) [ ] Verify the email address with a "magic link" [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles

HTTP

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

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

import {

StaticRouterProvider,

} from "https://esm.sh/react-router-dom@6.23.0/server?deps=react@18.2.0";

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

valle_tmp_25273384802368385202566002443081

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP

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

import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";

import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

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

// Set these to your own

const username = "janpaul123";

asciiNycCameras

@maxm

ASCII NYC Traffic Cameras All of NYC's traffic cameras available as streaming ASCII images: https://maxm-asciinyccameras.web.val.run/ NYC has a bunch of traffic cameras and makes them available through static images like this one . If you refresh the page you'll see the image update every 2 seconds or so. I thought it might be fun to make these cameras viewable as an ASCII art video feed. I made a small library that takes most of its logic from this repo . You can see a basic example of how to convert any image to ASCII here . I pull in NYC GeoJSON from here and then hook up a Server-Sent Events endpoint to stream the ASCII updates to the browser. (Polling would work just as well, I've just been on a bit of a SSE kick lately.) Hilariously (and expectedly) The ASCII representation is about 4x the size of the the source jpeg and harder to see, but it has a retro-nostalgia look to it that is cool to me :)

HTTP

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

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

import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge?v=16";

import { imageToAscii } from "https://esm.town/v/maxm/imageToAscii";

magnificentJadeDonkey

@daniel1987600

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { FaEdit, FaTrash, FaWhatsapp } from "https://esm.sh/react-icons/fa";

// Mock data

return <Dashboard />;

function client() {

if (typeof document !== "undefined") {

console.error("Erro ao renderizar o componente:", error);

client();

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

dotcom

@blotre

@jsxImportSource https://esm.sh/react

HTTP

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

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

import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";

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

const linkClass = "text-blue-500 hover:underline";

{ children, href }: {

children?: React.ReactNode;

href: string;

…

41 42

44 45

…

251