moe

Forked from jxnblk/reactOGImage

Forked from stevekrouse/reactClientDemo

Add a pwa manifest to an http val (to open in as an app in iOS). See https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps for available fields. Usage import handler from "https://esm.town/v/maxm/staticChess"; import { pwa } from "https://esm.town/v/pomdtr/pwa"; export default pwa(handler, { name: "Static Chess", display: "standalone", background_color: "#ffffff", start_url: "/", });

Forked from tfayyaz/reacttldrawclient

Forked from tfayyaz/react_tldraw

// JSX can be used in the client val thanks to this magic comment

* @title Running React on the Client * @description Vals can also be used to host client-side code! * @preview https://pomdtr-react_example_server.web.val.run * @include pomdtr/react_example_client * @resource [React - Quick Start](https://react.dev/learn)

Minimal val.town Farcaster Frame example. It supports dynamic image generation with Satori and ReSVG, and it's compatible with the Open Frames standard.

P5 sketch Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example. Usage Make a p5 sketch, you can import the p5 types to make it easier. import type * as p5 from "npm:@types/p5"; Export any "global" p5 functions. These are functions like setup and draw that p5 will call. Set the val type to http and default export the result of sketch , passing in import.meta.url . A full example looks like this. import type * as p5 from "npm:@types/p5"; export function setup() { createCanvas(400, 400); } export function draw() { if (mouseIsPressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); } import { sketch } from "https://esm.town/v/saolsen/p5"; export default sketch(import.meta.url); How it works The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default sketch export) so you can't call any Deno functions, environment variables, or other server side apis.

Example p5 sketch Shows a simple example of how to use https://www.val.town/v/saolsen/p5

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)