Search
multirouteHono
@iamseeley
🌐 Multi-Route Website with Hono
HTTP (deprecated)
🌐 Multi-Route Website with Hono
* @title Multi-Route Website with Hono in Val Town
* @description Create a personal portfolio website with multiple pages using Hono framework and JSX.
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
// JSX renderer middleware
app.use('*', jsxRenderer(({ children }) => {
return html`
<html lang="en">
<head>
duckdbExample
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
export let duckdbExample = (async () => {
async function createWorker(url: string) {
const workerScript = await fetch(url);
const workerURL = URL.createObjectURL(await workerScript.blob());
return new Worker(workerURL, { type: "module" });
const duckdb = await import(
"https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.17.0/+esm"
const bundles = duckdb.getJsDelivrBundles();
const bundle = await duckdb.selectBundle(bundles);
const logger = new duckdb.ConsoleLogger();
vueExample
@stevekrouse
@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",
hootsuiteNasa
@stevekrouse
This uses the now-deprecated express handler. Comment on this val if you'd like me to update it. Or send me a PR :)
Script
This uses the now-deprecated express handler. Comment on this val if you'd like me to update it. Or send me a PR :)
export async function hootsuiteNasa(req: express.Request, res: express.Response) {
const NASA_ROOT = "https://images-api.nasa.gov";
const alphaNumericSpaces = new RegExp("^[a-zA-Z0-9\\s-_]+$");
const acceptableRedirectUri = new RegExp(
"^https:\/\/api-auth.hootsuite.com\/app-directory\/apps\/[0-9]+\/oauth2\/callback$",
if (req.path === "/v1/media") {
var data = [];
var query = req.query.query || "africa";
if (!alphaNumericSpaces.test(query)) { // special chars in search
promptSampleTemplatesPipeline
@webup
An interactive, runnable TypeScript val by webup
Script
export const promptSampleTemplatesPipeline = (async () => {
const { PromptTemplate, PipelinePromptTemplate } = await import(
"npm:langchain/prompts"
const fullPrompt = PromptTemplate.fromTemplate(`{introduction}
{example}
{start}`);
const introductionPrompt = PromptTemplate.fromTemplate(
`You are impersonating {person}.`,
const examplePrompt = PromptTemplate.fromTemplate(
`Here's an example of an interaction:
password_auth
@pomdtr
Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Demo See @pomdtr/password_auth_test Usage import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: (password) => password == Deno.env.get("VAL_PASSWORD") }); If you want to use an api token to authenticate: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: verifyToken }); TODO [x] allow to authenticate using a val town token [ ] add a way to send an email to ask a password from the val owner [ ] automatically extend the session [ ] automatically remove expired sessions FAQ How to sign out ? Navigate to <your-site>/signout .
Script
# Password Auth Middleware
Protect your vals behind a password. Use session cookies to persist authentication.
## Demo
See @pomdtr/password_auth_test
## Usage
type Session = {
id: string;
expiresAt: number;
async function createSessionTable(tableName: string) {
todo_list
@abzwpspcgen
// Forked from @tmcw.todo_list
Script
let { todos } = await import("https://esm.town/v/tmcw/todos?v=354");
export let todo_list = (async (req, res) => {
const { default: htm } = await import("npm:htm");
const { default: vhtml } = await import("npm:vhtml");
const html = htm.bind(vhtml);
const renderTodo = (todo) => {
return html`<li data-id=${todo.id}>
<label>
<input hx-delete="/" hx-target="[data-id='${todo.id}']" hx-swap="delete" style='display:inline;margin-right:0.5rem;' type='checkbox' name="id" value=${todo.id} />
${todo.name}
parseHTML
@rym
An interactive, runnable TypeScript val by rym
Script
export const parseHTML = async (
html: string,
process: (document) => Promise<any>
console.log("pre import");
const { DOMParser } = await import(
"https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm.ts"
console.log("pre-parse");
const document = new DOMParser().parseFromString(html, "text/html");
console.log("pre-process");
return await process(document);
handler
@maxjoygit
Hono Here's an example using the Hono server library with the Web API . It works great! Server examples Hono Peko Itty Router Nhttp
HTTP (deprecated)
# Hono
Here's an example using the [Hono](https://hono.dev/) server library with the [Web API](https://docs.val.town/api/web). It works great!
### Server examples
- [Hono](https://www.val.town/v/tmcw.honoExample)
- [Peko](https://www.val.town/v/tmcw.pekoExample)
- [Itty Router](https://www.val.town/v/tmcw.ittyRouterExample)
// src/index.ts
const app = new Hono();
app.get("/", (c) => c.text("Hello Lagon!"));
app.get("/test", (c) => c.text("Hello Lagon test!"));
g_catalog
@nukeop
An interactive, runnable TypeScript val by nukeop
Script
import { fourchan_catalog } from "https://esm.town/v/nukeop/fourchan_catalog";
export let g_catalog = fourchan_catalog("g");
chimes
@colinespinas
An interactive, runnable TypeScript val by colinespinas
Script
export let chimes = () => [
name: "ATW Security",
compatibility: true,
name: "Bticino",
compatibility: true,
name: "Byron",
compatibility: false,
name: "Carlon",
compatibility: true,
name: "Chacon",
hello
@rhi
An interactive, runnable TypeScript val by rhi
Script
import { param } from "https://esm.town/v/rhi/param";
export let hello = "Hello there, missing link " + param;
ffmpegRepro1
@vlad
An interactive, runnable TypeScript val by vlad
Script
export const ffmpegRepro1 = (async () => {
const _ = await import("npm:@ffmpeg/core");
const { createFFmpeg, fetchFile } = await import("npm:@ffmpeg/ffmpeg");
const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();
discordWebhook
@stevekrouse
Send a Discord message Send a message to a Discord channel from Val Town. It's useful for notifying your team or community when someone interesting happens, like a user signup, Stripe payment, mention on social media, etc. import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
await discordWebhook({
url: Deno.env.get("engDiscord"),
content: "Hi from val town!",
});
Example val: https://www.val.town/v/stevekrouse.discordWebhookEx Setup 1. Create a Discord Webhook Follow the instructions here: https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks It really only takes 2 minutes. 2. Copy webhook URL Paste it into your secrets as discordWebhook . 3. Send a message! import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
await discordWebhook({
url: Deno.env.get("engDiscord"),
content: "Hi from val town!",
}); Example val: https://www.val.town/v/stevekrouse.discordWebhookEx
Script
# Send a Discord message
Send a message to a Discord channel from Val Town. It's useful for notifying your team or community when someone interesting happens, like a user signup, Stripe payment, mention on social media, etc.
```ts
await discordWebhook({
url: Deno.env.get("engDiscord"),
content: "Hi from val town!",
export const discordWebhook = async ({
url,
content,
url: string;
