Likes
94
codeOnValTown
@andreterron
Script
Code on Val Town Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it. This uses github-fork-ribbon-css under the hood. Usage Here are 2 different ways to add the "Code on Val Town" ribbon: 1. Wrap your fetch handler (recommended) import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default modifyFetchHandler(async (req: Request): Promise<Response> => {
return html(`<h2>Hello world!</h2>`);
}); Example: @andreterron/openable_handler 2. Wrap your HTML string import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(modifyHtmlString(`<h2>Hello world!</h2>`));
}; Example: @andreterron/openable_html Other ways We made sure this was very modular, so you can also add the ribbon using these methods: Get the element string directly: @andreterron/codeOnVT_ribbonElement Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream Customization Linking to the val These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val argument: modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }}) modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }}) Styling You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element. modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"}) modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"}) Here's how you can hide the ribbon on small screens: modifyFetchHandler(handler, {style: `@media (max-width: 768px) {
.github-fork-ribbon {
display: none !important;
}
}`}) To-dos [ ] Let users customize the ribbon. Some ideas are the text, color or placement.
sqliteExplorerApp
@nbbaier
HTTP (deprecated)
SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query
sql
@pomdtr
Script
SQL Template Tag Port of blakeembrey/sql-template-tag for usage in val.town. Usage import { sqlite } from "https://esm.town/v/std/sqlite"
import { sql, zip } from "https://esm.town/v/pomdtr/sql"
const query = sql`SELECT * FROM books WHERE author = ${author}`;
console.log(query.sql) // => "SELECT * FROM books WHERE author = ?"
console.log(query.args) // => [author]
const res = await sqlite.execute(query)
console.table(zip(res)) For advanced usage (ex: nesting queries), refer to the project readme .
p5
@saolsen
Script
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.
bookmarklets
@pomdtr
HTTP (deprecated)
Bookmarklet Manager Write your bookmarklets in val.town. Usage You val should just contain your bookmarklet code. alert("Hi mom!"); Make sure that your val is either unlisted or public, and not named bookmarklets .
Then navigate to https://pomdtr-bookmarklets.web.val.run/v/:author/:name to generate the bookmarklet link. Sharing a bookmarklet Make sure that your val is public, and add a #bookmarklet tag anywhere in the code. alert("Hi mom!");
// #bookmarklet It should automatically appears on https://pomdtr-bookmarklets.web.val.run . ⚠️
If you are using the Arc Browser , you can use the Powerlet extension to install bookmarklets.
githubEmoji
@karfau
HTTP (deprecated)
Usage import {githubEmojiUrl} from "https://esm.town/v/karfau/githubEmoji";
console.log(githubEmojiUrl('+1'))
//"https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8" or in a browser <img src="https://karfau-githubEmoji.web.val.run/+1"></img> Looks like in the preview. curl https://karfau-githubEmoji.web.val.run/+1 (prints "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8" ) If the name you pass (as argument or in the request path) is not in the list, it returns The list of names can be accessed using githubEmojiNames or by calling https://karfau-githubemoji.web.val.run/names
blog
@pomdtr
HTTP (deprecated)
Val Town Blog A blog written, developed and hosted on val.town. How ? Each article on this blog is contained single val, with a #blog tag. See this example article . // #blog
// title: Example Post
import { article } from "https://esm.town/v/pomdtr/article";
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export async function examplePost(req: Request) {
const { author, name } = extractValInfo(import.meta.url);
return html(await article(author, name));
} Each of these post work on it's own . This val is able to: list them with the /v1/search api (with a #blog query) post with different author than the owner of this val will be filtered out only public vals will be listed render the readme of those vals using remark (with github styling) This process run each time a user visit the web endpoint , so the blog is always up to date. You can get your own instance of the blog by just forking this val .