Likes
94
caviar
@jxnblk
Script
Simple CSS Vars library import { caviar } from "https://esm.town/v/jxnblk/caviar";
const vars = caviar({
dark: {
text: "#000",
bg: "#fff",
},
light: {
text: "#fff",
bg: "#000",
},
}); // JSX example
<div style={vars.style.light}>
<h1
style={{
color: vars.text,
backgroundColor: vars.bg,
}}>
Hello
</h1>
</div> Can also be used for non-dynamic CSS vars import { caviar } from "https://esm.town/v/jxnblk/caviar";
const vars = caviar({
blue: "#0cf",
});
// <div style={vars.style} /> Tests: https://www.val.town/v/jxnblk/caviar_tests TODO [ ] Fallback for missing mode keys
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
serve_blobs
@pomdtr
HTTP
Serve prefixed blobs. Usage import { serveBlobs } from "https://esm.town/v/pomdtr/serve_blobs"
export default serveBlobs({
root: "public/"
}) All your blobs prefixed by public/ will be publicly accessible. Ex: Go to https://pomdtr-public.web.val.run/example.json to view the blob public/example.json from my account.
bookmark
@ramkarthik
HTTP
A minimal bookmarking tool This allows you to bookmark links and view them later. Completely powered by ValTown and SQLite. To set this up for yourself Fork the val From your ValTown settings page, add an environment variable named bookmarks_client_id and give it a value (you will be using this for saving) Add another environment variable named bookmarks_client_secret and give it a value (you will also be using this for saving) At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" table To do this, add a bookmarklet to your browser with this value (replace BOOKMARKS-CLIENT-ID and BOOKMARKS-CLIENT-SECRET with the values you added to the environment variables, and replace BOOKMARKS-URL with your VAL's URL): javascript:void(open('BOOKMARKS-URL/save?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Bookmark a link', 'width=400,height=450')) Click this bookmarklet to bookmark the URL of the current active tab Go to your VAL URL homepage to see the bookmark Demo Here are my bookmarks:
https://ramkarthik-bookmark.web.val.run/ Note Make sure you don't share bookmarks_client_id and bookmarks_client_secret . It is used for authentication before saving a bookmark.
sqlite_clone_migrate_table
@stevekrouse
Script
SQLite Migrate Table via cloning it into a new table example There are a lot of migrations that SQLite doesn't allow, such as adding a primary key on a table. The way to accomplish this is by creating a new table with the schema you desire and then copying the rows of the old table into it. This example shows how to: Get the schema for the existing table Create the new table Copy all rows from old to new Rename the old table to an archive (just in case) Rename the new table to the original table name This script shows me adding a primary key constraint to the Profile column of my DateMeDocs database. I would console and comment out various parts of it as I went. You can see everything I did in the version history. The main tricky part for me was removing the duplicate primary key entries before doing the migration step, which is a useful thing anyways, from a data cleaning perspective.
insecureFetch
@stevekrouse
Script
Insecure SSL Cert Fetch This will be useful if you're getting a invalid peer certificate: UnknownIssuer error . If you need to make a fetch request to a website with a dubious or non-standard SSL certificate, you can use this proxy we made on Cloudflare workers (which doesn't verify SSL certs): https://unsecure-fetch.val-town.workers.dev/ import { insecureFetch } from "https://esm.town/v/stevekrouse/insecureFetch";
const url = "https://assignment-api.uspto.gov/patent/basicSearch?query=1234567&fields=main&rows=20";
const data = await insecureFetch(url)
const text = await data.text();
console.log(text)
valtownByExample
@pomdtr
HTTP
Val town by example Usage Simple Example To add an example, just create a val.
The val should start with a JSDoc style multi line comment that describes the example: /**
* @title HTTP server: Hello World
* @description An example of a HTTP server that serves a "Hello World" message.
*/
// this comment will be displayed on the left
export const server = () => new Response("Hello world!") The title is required. Then, you can write the code.
Code can be prefixed with a comment that describes the code.
The comment will be rendered next to the code in the example page. Make sure your val is public, then go to https://pomdtr-val_town_by_example.web.val.run/v/<your-username>/<your-val> Using multiple vals You can add another val to your example by adding an @include directive /**
* @title HTTP server: Hello World
* @description An example of a HTTP server that serves a "Hello World" message.
* @include pomdtr/secondary_val
*/ See @pomdtr/react_example Adding external resources to your example You can attach an external link to your val by using the @resource directive. External resources are specified using a markdown link. /**
* @title HTTP server: Hello World
* @description An example of a HTTP server that serves a "Hello World" message.
* @resource [Val Town Docs](https://docs.val.town)
**/ Adding examples to the homepage Just add your val in @pomdtr/val_town_by_example_toc
awesome
@pomdtr
HTTP
Awesome Val Town An curated list of useful community vals. Feel free to create your own awesome list! Apps @pomdtr/blob_editor @nbbaier/sqliteExplorerApp View and interact with your Val Town SQLite data. @pomdtr/http_client Attach a postman-like http client to your vals VS Code Extension vt Chrome Extension Tooling Authentication @pomdtr/basicAuth @pomdtr/email_auth @pomdtr/password_auth Sqlite @sqlite/db @pomdtr/sql @pomdtr/kv @postpostscript/sqliteUniverse Blob @stevekrouse/blobAdmin @pomdtr/lowdb Middleware @andreterron/codeOnValTown Testing @pomdtr/test_explorer Api @pomdtr/api @pomdtr/trpc Other @vladimyr/valshot @pomdtr/mdx @pomdtr/serve_readme OpenAI @pomdtr/ask_ai Web Components Val Town Playground CodeMirror