const MESSAGE_STORAGE_KEY = new URL(import.meta.url).pathname.split("/").at(-1) + "_user_messages"; // Shared HTML components function getPageHeader(pageTitle: string) { return ` ${pageTitle} - Val Town Example

${pageTitle}

`; } function getPageFooter() { return ` `; } // Page handlers async function handleHomePage() { const { blob } = await import("https://esm.town/v/std/blob"); const userMessages = await blob.getJSON(MESSAGE_STORAGE_KEY) || []; return new Response( ` ${getPageHeader("Welcome to Val Town")}

This page is rendered using native Request handling.

Current time: ${new Date().toLocaleString()}

Leave a Message

User Messages

${msg}

API Test Links

${getPageFooter()} `, { headers: { "Content-Type": "text/html" }, }, ); } function handleAboutPage() { return new Response( ` ${getPageHeader("About Us")}

This is an example website created to demonstrate Val Town's capabilities.

It showcases basic routing, form handling, and data storage using Val Town's features.

${getPageFooter()} `, { headers: { "Content-Type": "text/html" }, }, ); } function handleContactPage() { return new Response( ` ${getPageHeader("Contact Us")}

Get in touch with us using the information below:

Email: example@valtown.com
Phone: (123) 456-7890
Twitter: @valtownexample

${getPageFooter()} `, { headers: { "Content-Type": "text/html" }, }, ); } function handleLocationPage() { return new Response( ` ${getPageHeader("Our Location")}

We're located in the cloud, accessible from anywhere in the world!

Virtual Address: 123 Val Town Street, Internet City, Web 12345

${getPageFooter()} `, { headers: { "Content-Type": "text/html" }, }, ); } function handleHelpPage() { return new Response( ` ${getPageHeader("Help / FAQ")}

Frequently Asked Questions

What is Val Town?

Val Town is a platform for creating and sharing JavaScript functions and applications.
How do I create a new val?

You can create a new val by clicking the "New Val" button in your Val Town dashboard.
Can I use external libraries?

Yes, you can import external libraries using ESM imports in your vals.

${getPageFooter()} `, { headers: { "Content-Type": "text/html" }, }, ); } async function handleMessageSubmission(request: Request) { const { blob } = await import("https://esm.town/v/std/blob"); const formData = await request.formData(); const userMessage = formData.get("message") as string; if (userMessage) { const existingMessages = await blob.getJSON(MESSAGE_STORAGE_KEY) || []; existingMessages.push(userMessage); await blob.setJSON(MESSAGE_STORAGE_KEY, existingMessages); } return new Response(null, { status: 302, headers: { Location: "/" }, }); } function handleTimeApi() { return new Response(JSON.stringify({ currentTime: new Date().toISOString() }), { headers: { "Content-Type": "application/json" }, }); } async function handleMessagesApi() { const { blob } = await import("https://esm.town/v/std/blob"); const userMessages = await blob.getJSON(MESSAGE_STORAGE_KEY) || []; return new Response(JSON.stringify(userMessages), { headers: { "Content-Type": "application/json" }, }); } function handleNotFoundPage() { return new Response( ` ${getPageHeader("404 Not Found")}

The page you're looking for doesn't exist.

Go back to homepage

${getPageFooter()} `, { status: 404, headers: { "Content-Type": "text/html" }, }, ); } export default async function handleRequest(request: Request): Promise { const url = new URL(request.url); const path = url.pathname; try { switch (path) { case "/": return await handleHomePage(); case "/about": return handleAboutPage(); case "/contact": return handleContactPage(); case "/location": return handleLocationPage(); case "/help": return handleHelpPage(); case "/submit": if (request.method === "POST") { return await handleMessageSubmission(request); } break; case "/api/time": return handleTimeApi(); case "/api/messages": return await handleMessagesApi(); } return handleNotFoundPage(); } catch (error) { console.error(`An error occurred: ${error}`); return new Response("An unexpected error occurred", { status: 500 }); } }

${pageTitle}

Leave a Message

User Messages

API Test Links

Frequently Asked Questions

What is Val Town?

How do I create a new val?

Can I use external libraries?

zARCHIVE_html_Pages