Search
classless_css
@thierryc
Utilities for Classless CSS Forked from Paul Kinlan's Classless CSS Demo Usage For projects that should be pretty in an unopinionated way import { randomStyle } from "https://esm.town/v/stevekrouse/classless_css";
export default async function(req: Request): Promise<Response> {
return new Response(`<h1>Welcome to Val Town!</h1>${randomStyle}`, {
headers: {
"Content-Type": "text/html",
},
});
}
HTTP (deprecated)
# Utilities for Classless CSS
Forked from [Paul Kinlan's Classless CSS Demo](https://classless-css-demo.deno.dev)
## Usage
For projects that should be pretty in an unopinionated way
```ts
export default async function(req: Request): Promise<Response> {
delete frameworks[""];
function absolutePath(url: string) {
if (url.startsWith("http")) return url;
else return `https://classless-css-demo.deno.dev` + url;
caniuse_notifier
@stevekrouse
@jsxImportSource npm:react
Cron
/** @jsxImportSource npm:react **/
const updatedKey = "caniuse-updated-at";
const dataKey = "caniuse-data";
function Feature({ feature }: any) {
const links = feature.links ?? [];
return (
<h2>{feature.title}</h2>
<p>{feature.description}</p>
<p>Full support: {feature.usage_perc_y}%</p>
{feature.usage_perc_a > 0 ? <p>Partial support: {feature.usage_perc_a}%</p> : null}
passkeys_demo
@stevekrouse
Passkeys Demo Passkeys are pretty neat! I wanted to get a demo working in Val Town so I ported over https://github.com/maximousblk/passkeys-demo. One challenge was that the original extensively uses DenoKV store with compound keys and values. I created @stevekrouse/DenoSyntheticKV as a replacement for DenoKV. It uses SuperJSON to encode the keys and values. You can find the client-side script for the main page here: @stevekrouse/passkey_script
HTTP (deprecated)
# Passkeys Demo
Passkeys are pretty neat! I wanted to get a demo working in Val Town so I ported over https://github.com/maximousblk/passkeys-demo.
One challenge was that the original extensively uses DenoKV store with compound keys and values. I created @stevekrouse/DenoSyntheticKV as a replacement for DenoKV. It uses SuperJSON to encode the keys and values.
You can find the client-side script for the main page here: @stevekrouse/passkey_script
/** @jsxImportSource npm:hono@3/jsx */
generateAuthenticationOptions,
generateRegistrationOptions,
verifyAuthenticationResponse,
verifyRegistrationResponse,
} from "https://deno.land/x/simplewebauthn@v10.0.0/deno/server.ts";
lastloginHono
@pomdtr
See @pomdtr/lastlogin for more informations about the middleware Example /** @jsxImportSource npm:hono@3/jsx */
import { lastlogin } from "https://esm.town/v/pomdtr/lastloginHono";
import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail"
import { Hono } from "npm:hono";
const app = new Hono();
const lastloginMiddleware = lastlogin({
verifyEmail: verifyUserEmail
});
// required for the auth pages to work
app.use("/auth/*", lastloginMiddleware);
// this page is public
app.get("/", async (c) => {
return c.html(
<div>
There is a secret message for you if you{" "}<a href="/secret">login</a>
</div>,
);
});
// this page requires the user to signup
app.get("/secret", lastloginMiddleware, async (c) => {
const email = c.req.header("X-User-Email");
return c.html(
<div>
I think {email} is a really silly email address, actually.
</div>,
);
});
export default app.fetch;
Script
See @pomdtr/lastlogin for more informations about the middleware
## Example
```ts
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
const lastloginMiddleware = lastlogin({
verifyEmail: verifyUserEmail
export function lastlogin(options?: LastLoginOptions): MiddlewareHandler {
return async (c, next) => {
return lastlogin2(next, options)(c.req.raw);
solidExample
@rayman
@jsxImportSource https://esm.sh/solid-jsx
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/solid-jsx */
function StlViewer() {
return (
<StlViewer
url="http://www.example.com/example-url.stl"
width={400}
height={400}
modelColor="#B92C2C"
backgroundColor="#EAEAEA"
rotate={true}
zhangxiaoke
@byteray
// This approach will create a personal card using React and Lucide React icons.
HTTP
// This approach will create a personal card using React and Lucide React icons.
// We'll use ESM imports for React and Lucide icons.
// The card will be responsive and styled using Tailwind CSS classes.
/** @jsxImportSource https://esm.sh/react */
function PersonalCard() {
return (
<div className="flex justify-center items-center min-h-screen bg-gray-100 p-4">
<div className="bg-white shadow-2xl rounded-xl max-w-md w-full overflow-hidden">
<div className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
<div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
calorieapp
@stevekrouse
@jsxImportSource npm:hono/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono/jsx */
await sqlite.execute(`
CREATE TABLE IF NOT EXISTS food_entries2 (
id INTEGER PRIMARY KEY AUTOINCREMENT,
food TEXT,
calories INTEGER,
date TEXT
const app = new Hono();
app.get("/", async (c) => {
const today = new Date().toISOString().slice(0, 10);
valle_tmp_59257570592856375817499399720445
@janpaul123
// This val serves a HTML page that contains a Wordle game with custom CSS for a fun, colorful style
HTTP (deprecated)
// This val serves a HTML page that contains a Wordle game with custom CSS for a fun, colorful style
// Import dependencies
const app = new Hono();
app.get("/", async (c) => {
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
lalala
@gtalens
An interactive, runnable TypeScript val by gtalens
Script
import process from "node:process";
export let lalala = process.env.testSecret;
vueExample
@maxm
@jsxImportSource https://esm.sh/vue
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/vue */
import { renderToString } from "npm:vue/server-renderer";
export const vueExample = async () =>
new Response(await renderToString(<div>Test {1 + 1}</div>), {
headers: {
"Content-Type": "text/html",
aqi
@axelav
An interactive, runnable TypeScript val by axelav
Cron
export let aqi = async () => {
let res = await fetchJSON(
"https://api.openaq.org/v2/latest?" +
new URLSearchParams({
limit: "10",
page: "1",
coordinates: "40.666758,-73.967150",
offset: "0",
sort: "desc",
radius: "100000",
chat
@ryoid
An interactive, runnable TypeScript val by ryoid
Script
export let chat = (async () => {
const data = 123;
return data;
browserbaseUtils
@charlypoly
An interactive, runnable TypeScript val by charlypoly
Script
export interface LoadPageOptions {
textContent: boolean;
export async function loadPageContent(url: string, options: LoadPageOptions = { textContent: false }) {
const browser = await puppeteer.connect({
browserWSEndpoint: `wss://connect.browserbase.com?apiKey=${Deno.env.get("BROWSERBASE_API_KEY")}`,
const pages = await browser.pages();
const page = pages[0];
await page.goto(url);
let html = await page.content();
if (options.textContent) {
frostNotifyCron
@chet
An interactive, runnable TypeScript val by chet
Cron
import { frostNotify } from "https://esm.town/v/chet/frostNotify";
import process from "node:process";
export async function frostNotifyCron(interval: Interval) {
await frostNotify("Fair Oaks, CA");
bioFeeler
@o_sv
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
const PASSWORD_HASH = "75699634e8d0a66d4c9e0c8f4a5a4e02c3a1d0a13b3a5e9c7b3a1d0a13b3a5e9c";
function App() {
const [view, setView] = useState("home");
const [bio, setBio] = useState("");
const [ratings, setRatings] = useState({
authenticity: 0,
humor: 0,
clarity: 0,
positivity: 0,