Likes
43
compileAndUploadTinygoWasm
@maxm
Script
Compile and Upload Tinygo WASM to Val Town Using Deno Make a Go program like so: package main
import (
"fmt"
"net/http"
gotown "github.com/maxmcd/go-town"
)
func main() {
gotown.ListenAndServe(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Hello World")
}))
} Make sure you have tinygo (and optionally wasm-strip) installed. Then run this command with Deno to invoke this script: deno run --allow-net --allow-run --allow-read \
"https://esm.town/v/maxm/compileAndUploadTinygoWasm?v=58" That will print out the following: Running tinygo build -o main.wasm -target=wasi .
Compliation complete
Running wasm-strip main.wasm
Copy the following into a val town HTTP val:
import { wasmHandler } from "https://esm.town/v/maxm/tinygoHttp";
const resp = await fetch("https://maxm-wasmBlobHost.web.val.run/jpxqvyy5tphiwehzklmioklpkpz4gpzs.wasm");
const handler = await wasmHandler(new Uint8Array(await resp.arrayBuffer()));
export default async function(req: Request): Promise<Response> {
return handler(req);
} Copy that into a Val and you have a working Go http handler! View that example here: https://www.val.town/v/maxm/crimsonMacaw
animatedReadmeSVG
@maxm
HTTP
Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" />
</p> <p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" />
</p>
staticWordle
@stevekrouse
HTTP
Clone of @maxm/staticChess but for Wordle. Every letter is a link. The game state is stored in the URL bar. You could do silly things like playing collaborative Wordle with your friends by trading links back and forth. Or undo any mistakes by clicking the back button. I also make it easy to generate a new game from any of your current game's guesses – to send to a friend. They key to these static games like this one and @maxm/staticChess is to figure out: a representation for your game state (the Game type ) how to encode/decode your game state into the URL ( base64-encoding JSON ) how to render your game state into HTML ( looping over guesses and making divs ) placing the links into your HTML in the right spots (on my on-screen keyboard ) prettify with CSS (for guesses and the keyboard )
tinygoHttpExample
@maxm
HTTP
A Go http handler running in Val Town: The Go source is here . Mandelbrot rendering code taken from here . I used maxm/compileAndUploadTinygoWasm to compile the code and create the val. $ git clone git@github.com:maxmcd/go-town.git
$ cd go-town/val-town-tinygo-http-example
$ deno run --allow-net --allow-run --allow-read "https://esm.town/v/maxm/compileAndUploadTinygoWasm?v=58"
Running tinygo build -o main.wasm -target=wasi .
Compliation complete
Running wasm-strip main.wasm
Copy the following into a val town HTTP val:
import { wasmHandler } from "https://esm.town/v/maxm/tinygoHttp";
const resp = await fetch("https://maxm-wasmblobhost.web.val.run/jpxqvyy5tphiwehzklmioklpkpz4gpzs.wasm");
const handler = await wasmHandler(new Uint8Array(await resp.arrayBuffer()));
export default async function(req: Request): Promise<Response> {
return handler(req);
}
staticChess
@maxm
HTTP
Check it out here: https://chess.maxmcd.com Plain, brutalist, no bloat chess. Every page is only html and css. Every chess move is made by clicking a link. Send a link to your friend and they'll send you one back to make your move. No silly animations or slick interactivity to trip up your gameplay. When Google indexes this site will we successfully compute all possible chess moves? Functionality is quite limited, and things might be broken. Please let me know if you find bugs! Inspired by this HN discussion about sites that have all possible game states of tic-tac-toe. I plan on extending this to support real gameplay. I think it could be a nice simple interface for long form games with friends. Might also be fun to add a static AI to play against. Feel free to PR any changes if you'd like to see something added.
translator
@yawnxyz
HTTP
Press to talk, and get a translation! The app is set up so you can easily have a conversation between two people. The app will translate between the two selected languages, in each voice, as the speakers talk. Add your OpenAI API Key, and make sure to open in a separate window for Mic to work.
tuna
@jxnblk
Script
🐟 Simple CSS library for Val Town import { css } from "https://esm.town/v/jxnblk/tuna";
const styles = css({
body: { // special keyword for <body> element
fontFamily: "system-ui, sans-serif",
margin: 0,
backgroundColor: "#f5f5f5",
},
container: {
padding: 32, // numbers are converted to pixel units
margin: "0 auto",
maxWidth: 1024,
},
input: {
fontFamily: "inherit",
fontSize: "inherit",
lineHeight: "1.5",
padding: "2px 8px",
border: "1px solid #ccc",
borderRadius: "4px",
},
}); // JSX example
const html = render(
<div className={styles.container}>
<style {...styles.tag} />
<h1>Tuna Example</h1>
<input
type="text"
defaultValue="hi"
className={styles.input}
/>
</div>
); // get raw CSS string
styles.css Nested selectors and pseudoselectors const styles = css({
button: {
background-color: "tomato",
"&:hover": {
background-color: "magenta",
},
"& > svg": {
fill: "currentColor",
},
},
}); Media queries const styles = css({
box: {
padding: 16,
"@media screen and (min-width: 768px)": {
padding: 32,
"&:hover": {
color: "tomato",
},
},
}
}); Limitations Does not support HTML element selectors (other than body ) Tests: https://www.val.town/v/jxnblk/tuna_tests
email_auth
@pomdtr
Script
Email Auth for Val Town ⚠️ Require a pro account (needed to send email to users) Usage Create an http server, and wrap it in the emailAuth middleware. import { emailAuth } from "https://esm.town/v/pomdtr/email_auth"
export default emailAuth((req) => {
return new Response(`your mail is ${req.headers.get("X-User-Email")}`);
}, {
verifyEmail: (email) => { return email == "steve@val.town" }
}); 💡 If you do not want to put your email in clear text, just move it to an env var (ex: Deno.env.get("email") ) If you want to allow anyone to access your val, just use: import { emailAuth } from "https://esm.town/v/pomdtr/email_auth"
export default emailAuth((req) => {
return new Response(`your mail is ${req.headers.get("X-User-Email")}`);
}, {
verifyEmail: (_email) => true
}); Each time someone tries to access your val but is not allowed, you will get an email with: the email of the user trying to log in the name of the val the he want to access You can then just add the user to your whitelist to allow him in (and the user will not need to confirm his email again) ! TODO [ ] Add expiration for verification codes and session tokens [ ] use links instead of code for verification [ ] improve errors pages
