Avatar

jxnblk

Bicycle riding cat from the future
20 public vals
Joined April 28, 2024
jxnblk avatar
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
jxnblk avatar
color_contrast
@jxnblk
HTTP
Test color contrast values with a URL that unfurls to share with others Usage Add hex color values to the end of the URL. Don't include the # symbol. You can use 3 or 6 digit codes. https://jxnblk-color_contrast.web.val.run/f8f/313 Share the link on social media or in chat to see a preview of the colors along with the level of contrast
jxnblk avatar
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
jxnblk avatar
valTownBadgeMiddleware
@jxnblk
Script
An interactive, runnable TypeScript val by jxnblk
jxnblk avatar
codeIconReact
@jxnblk
Script
@jsxImportSource npm:react
jxnblk avatar
valTownBadgeExample
@jxnblk
HTTP
Example of how to add a Val Town badge to your val Demo: https://jxnblk-valtownbadgeexample.web.val.run/ Option 1 Wrap your HTTP response handler with https://www.val.town/v/jxnblk/valTownBadgeMiddleware [^1] import wrapper from "https://esm.town/v/jxnblk/valTownBadgeMiddleware"; async function handler(req: Request): Promise<Response> { const html = ` <h1>Hello, world</h1> `; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); } export default wrapper(handler, import.meta.url); Option 2 Get the HTML string for the badge using https://www.val.town/v/jxnblk/valTownBadge Add the HTML to your response's HTML string wherever you like import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge"; export default async function(req: Request): Promise<Response> { const badge = valTownBadge(import.meta.url); const html = ` <h1>Hello, world</h1> ${badge} `; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); } Manual options You can also edit the snippet below to manually add the badge in HTML <a href="https://www.val.town/v/jxnblk/valTownBadgeExample" target="_blank" style="text-decoration:none;color:inherit"> <img src="https://jxnblk-valtownbadgesvg.web.val.run/" width="160" height="160"> </a> Or markdown: [![View source on Val Town](https://jxnblk-valtownbadgesvg.web.val.run/)](https://www.val.town/v/jxnblk/valTownBadgeExample) [^1]: Middleware is not recommended when using client-side hydration in apps like React or when returning a full, valid HTML response
jxnblk avatar
valTownBadge
@jxnblk
Script
Add a Val Town badge to your own HTTP vals Option 1: Middleware Import the middleware from https://www.val.town/v/jxnblk/valTownBadgeMiddleware Wrap your HTML request handler with middleware, and pass import.meta.url to link to your val import wrapper from "https://esm.town/v/jxnblk/valTownBadgeMiddleware"; async function handler(req: Request): Promise<Response> { const html = ` <h1>Hello, world</h1> `; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); } export default wrapper(handler, import.meta.url); Option 2: HTML string generator Get the HTML string for the badge using https://www.val.town/v/jxnblk/valTownBadge Add the HTML to your response's HTML string wherever you like import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge"; export default async function(req: Request): Promise<Response> { const badge = valTownBadge(import.meta.url); const html = ` <h1>Hello, world</h1> ${badge} `; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); } Manual options You can also edit the snippet below to manually add the badge in HTML <a href="https://www.val.town/v/jxnblk/valTownBadgeExample" target="_blank" style="text-decoration:none;color:inherit"> <img src="https://jxnblk-valtownbadgesvg.web.val.run/" width="160" height="160"> </a> Or markdown: [![View source on Val Town](https://jxnblk-valtownbadgesvg.web.val.run/)](https://www.val.town/v/jxnblk/valTownBadgeExample) Vals used to create this https://www.val.town/v/jxnblk/valTownBadgeSVG SVG badge image service https://www.val.town/v/jxnblk/valTownLogotypeReact Val Town logo React component https://www.val.town/v/jxnblk/codeIconReact Code icon React component https://www.val.town/v/jxnblk/valTownBadge HTML generator that uses import.meta.url to create a link to your val https://www.val.town/v/jxnblk/valTownBadgeMiddleware Middleware to inject badge HTML in the lower right corner of your page
jxnblk avatar
valTownBadgeSVG
@jxnblk
HTTP
SVG Val Town badge image service
jxnblk avatar
valTownLogotypeReact
@jxnblk
Script
@jsxImportSource npm:react
jxnblk avatar
svg_favicon
@jxnblk
HTTP
SVG favicon service, with support for custom text/letters and colors <img src="https://jxnblk-svg_favicon.web.val.run?text=Hi&color=000&bg=f0f" />
jxnblk avatar
color_contrast_api
@jxnblk
HTTP
An interactive, runnable TypeScript val by jxnblk
jxnblk avatar
tuna_tests
@jxnblk
Script
An interactive, runnable TypeScript val by jxnblk
jxnblk avatar
caviar_tests
@jxnblk
Script
An interactive, runnable TypeScript val by jxnblk
jxnblk avatar
tuna_example
@jxnblk
HTTP
// Example of using tuna and caviar with React (resrv) on Val Town
jxnblk avatar
resrv_example
@jxnblk
HTTP
@jsxImportSource https://esm.sh/react
jxnblk avatar
resrv
@jxnblk
Script
React SSR and client-side hydration for Val Town Usage /** @jsxImportSource https://esm.sh/react */ import resrv, { React } from "https://esm.town/v/jxnblk/resrv"; function App() { const [count, setCount] = React.useState(0); return ( <div> <h1>Resrv</h1> <p>React SSR with client-side hydration in Val Town</p> <pre>{count}</pre> <button onClick={() => setCount(count - 1)}>-</button> <button onClick={() => setCount(count + 1)}>+</button> </div> ); } export default resrv(App, import.meta.url); Live example React requires matching versions for SSR and hydration. Import React from https://esm.town/v/jxnblk/resrv to ensure your component uses the same version as this library (currently react@18.3.1). HTML Root Hydration To render a component that includes a <head> and <body> tag, pass root: true to the third options argument: function App ({ script }) { return ( <body> <h1>Hello</h1> {script} </body> ); } export default resrv(App, import.meta.url, { root: true }); Inspired by https://www.val.town/v/stevekrouse/react_http