Search

fetchFigmaFile

@rodrigotello

An interactive, runnable TypeScript val by rodrigotello

Script

import { fetch } from "https://esm.town/v/std/fetch";

export async function fetchFigmaFile(apiToken, fileKey) {

const url = `https://api.figma.com/v1/files/${fileKey}`;

const response = await fetch(url, {

adventofcode2015

@gueejla

@jsxImportSource https://esm.sh/react

HTTP

import { sillyCSS } from "https://esm.town/v/gueejla/sillyCSS";

function day1() {

const solution = "uhhh come back soon pls";

return solution;

function App() {

const urlParams = new URL(window.location.toLocaleString()).searchParams;

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

client();

function server(req: Request): Promise<Response> {

return new Response(

rimeExampleUI

@stevekrouse

// https://stevekrouse-rimeExampleUI.express.val.run

Express (deprecated)

import { rimeExample } from "https://esm.town/v/stevekrouse/rimeExample";

// https://stevekrouse-rimeExampleUI.express.val.run

export function rimeExampleUI(req, res) {

res.send(

`<audio controls src="data:audio/ogg;base64,${rimeExample.audioContent}" />`,

auth_middleware

@pomdtr

Authentication middleware Guards your public http vals behind a login page. This val use a json web token stored as an http-only cookie to persist authentication. Usage Set an AUTH_SECRET_KEY env variable (used to sign/verify jwt tokens) to a random string . Then use an API token to authenticate. import { auth } from "https://esm.town/v/pomdtr/auth_middleware"; async function handler(req: Request): Promise<Response> { return new Response("You are authenticated!"); } export default auth(handler); See @pomdtr/test_auth for an example ⚠️ Make sure to only provides your api token to vals you trust (i.e. your own), as it gives access to your whole account.

1 4 3

Script

import { auth } from "https://esm.town/v/pomdtr/auth_middleware";

async function handler(req: Request): Promise<Response> {

return new Response("You are authenticated!");

</html>`;

export function redirect(location: string): Response {

return new Response(null, {

username: string;

async function fetchUser(token: string): Promise<User> {

const resp = await fetch("https://api.val.town/v1/me", {

return resp.json();

async function isCurrentUser(userID: string) {

const currentUser = await fetchUser(Deno.env.get("valtown"));

return userID == currentUser.id;

function signout() {

const res = redirect("/");

return res;

export function auth(handler) {

const secretKey = Deno.env.get("AUTH_SECRET_KEY");

createVolumeAndPriceBoostForSolanaToken

@fybnonsol

@jsxImportSource https://esm.sh/react@18.2.0

Script

// Wallet Connection Hook

function usePhantomWallet() {

const [wallet, setWallet] = useState(null);

// Main Application Component

function TokenBoostApp() {

const { wallet, connected, connectWallet, disconnectWallet } = usePhantomWallet();

// Client-side rendering

function client() {

createRoot(document.getElementById("root")).render(<TokenBoostApp />);

// Server-side handler

export default async function server(request: Request): Promise<Response> {

if (request.method === 'POST') {

greenPeafowl

@ravvi_kumar

// just like functions, effects themselves are just values

Script

return 42;

const asyncProgram = Effect.promise(() => Promise.resolve(42));

// just like functions, effects themselves are just values

// they don't do anything until you 'run' them

// console.log(sucessfulProgram);

// Effect.runPromise(failedProgram).catch((error) => {

// console.log("runPromise error", error);

// as an alternative to simply throwing the error, the run*Exit functions

// provide a `Exit` type that represents either a success or a number of possible failure types

// const exit = Effect.runSyncExit(failedProgram);

blob_admin

@stevekrouse1

Blob Admin This is a lightweight Blob Admin interface to view and debug your Blob data. Versions 0-17 of this val were done with Hono and server-rendering. Versions 18+ were generated with Townie and use client-side React. To use this val, fork it to your account. Authentication is handled by @stevekrouse/lastlogin, so only the owner of the val will be able to see and edit their own blobs.

HTTP

content: string;

function Tooltip({ children, content }: TooltipProps) {

const [isVisible, setIsVisible] = useState(false);

</div>

function formatBytes(bytes: number, decimals = 2) {

if (bytes === 0) return "0 Bytes";

return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];

function copyToClipboard(text: string) {

navigator.clipboard.writeText(text).then(() => {

console.error("Failed to copy text: ", err);

function ActionMenu({ blob, onDownload, onRename, onDelete, onMoveToPublic, onMoveOutOfPublic }) {

const [isOpen, setIsOpen] = useState(false);

useEffect(() => {

function handleClickOutside(event) {

if (menuRef.current && !menuRef.current.contains(event.target)) {

</div>

function BlobItem({ blob, onSelect, isSelected, onDownload, onRename, onDelete, onMoveToPublic, onMoveOutOfPublic }) {

const [isLoading, setIsLoading] = useState(false);

lastModified: string;

function App({ initialEmail, initialProfile }) {

const encodeKey = (key: string) => encodeURIComponent(key);

</div>

function client() {

const initialEmail = document.getElementById("root").getAttribute("data-email");

eeee_fork

@johndevor

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function HelloWorld() {

return (

</div>

function client() {

createRoot(document.getElementById("root")).render(<HelloWorld />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request) {

return new Response(`

generated_val_1739386568612

@dcm31

An interactive, runnable TypeScript val by dcm31

HTTP

export default function(request: Request): Response {

const url = new URL(request.url);

return new Response(`Hello from ${url.href}! This is a boilerplate Val.`);

web_9rLrcqLIFi

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_9rLrcqLIFi(req) {

return new Response(`<!DOCTYPE html>

<html>

valle_tmp_6558189023937331447348397779094

@janpaul123

// Serve main page with stories

HTTP

import { faker } from "npm:@faker-js/faker";

const SAMPLE_STORIES_KEY = "hn_sample_stories";

async function initializeSampleStories() {

const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);

if (!existingStories) {

onValenceReply

@kognise

An interactive, runnable TypeScript val by kognise

Script

import { mail } from "https://esm.town/v/kognise/mail";

import { addValenceDatapoint } from "https://esm.town/v/kognise/addValenceDatapoint";

export async function onValenceReply(email) {

const firstNumber = parseInt(email.text.trim(), 10)

try {

whoIsHiring

@lowlu

WIP Searcher for HN whos hiring posts HonoJs doesn't support render for async components so the style is off for the home page. And the state changes don't register in html rendering so thinking of using react instead.

HTTP

import About from "https://esm.town/v/vawogbemi/whoIsHiringAbout";

function App() {

const tabs = { "/": "Home", "/about": "About" };

: <About />}

function ServerApp() {

return (

hydrateRoot(document.getElementById("root"), <App />);

export default async function(req: Request): Promise<Response> {

const url = new URL(req.url);