quill/val Public Public: anyone can read this; nobody can change it.

/**

 * val — a small app with real data.

 *

 * Notes live in a SQLite file under FORGE_APP_DATA. Production and each

 * preview get their own directory, so a preview starts with production's

 * notes and never writes back to them.

 */

import { Database } from "bun:sqlite";

import { mkdirSync } from "node:fs";

import { join } from "node:path";

const dataDir = process.env.FORGE_APP_DATA ?? "./data";

mkdirSync(dataDir, { recursive: true });

const db = new Database(join(dataDir, "app.db"));

db.exec("PRAGMA journal_mode = WAL");

db.exec(

  "CREATE TABLE IF NOT EXISTS note (id INTEGER PRIMARY KEY, body TEXT NOT NULL, created_at TEXT NOT NULL DEFAULT (datetime('now')))",

);

const env = process.env.FORGE_APP_ENV ?? "local";

const pull = process.env.FORGE_APP_PULL;

const commit = (process.env.FORGE_APP_COMMIT ?? "").slice(0, 7);

const escape = (s: string): string =>

  s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);

// The security floor every response stands on. Scripts and styles come from

// this origin (inline styles allowed, inline scripts not), nothing frames us,

// browsers never guess a content type, and referrers stay on this site.

// The app's public address is what the forge told us, never the socket's.

const publicOrigin = new URL(process.env.FORGE_APP_URL ?? "http://localhost").origin;

const SECURITY = {

  "content-security-policy":

    "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none'; base-uri 'none'; form-action 'self'",

  "x-content-type-options": "nosniff",

  "referrer-policy": "strict-origin-when-cross-origin",

  "permissions-policy": "camera=(), microphone=(), geolocation=()",

  // Once served over https, always: browsers remember for a year.

  ...(publicOrigin.startsWith("https:")

    ? { "strict-transport-security": "max-age=31536000" }

    : {}),

};

const html = (body: string, status = 200): Response =>

  new Response(body, { status, headers: { "content-type": "text/html; charset=utf-8", ...SECURITY } });

// A browser on another site can make a person's browser POST here; it cannot

// make that request look same-origin. Browsers say where a request came from

// (Sec-Fetch-Site, or Origin); a request that names another site is refused.

const sameOrigin = (request: Request): boolean => {

  const site = request.headers.get("sec-fetch-site");

  if (site !== null) return site === "same-origin" || site === "none";

  const origin = request.headers.get("origin");

  return origin === null || origin === publicOrigin;

};

// A request body is read up to a cap and no further, counting the bytes as

// they arrive. A declared Content-Length is a claim: a chunked request has

// none, and a lie is free. Undefined means "too large" — refuse it. Past the

// cap the rest is drained and dropped so the connection stays usable for

// the next request; past eight times the cap it is cut off instead.

const BODY_MAX = 64 * 1024;

async function readBody(request: Request, max = BODY_MAX): Promise<Uint8Array | undefined> {

  const reader = request.body?.getReader();

  if (reader === undefined) return new Uint8Array();

  const parts: Uint8Array[] = [];

  let size = 0;

  for (;;) {

    const { done, value } = await reader.read();

    if (done) break;

    size += value.byteLength;

    if (size > max) {

      for (;;) {

        const next = await reader.read();

        if (next.done) return undefined;

        size += next.value.byteLength;

        if (size > max * 8) {

          await reader.cancel();

          return undefined;

        }

      }

    }

    parts.push(value);

  }

  const body = new Uint8Array(size);

  let at = 0;

  for (const part of parts) {

    body.set(part, at);

    at += part.byteLength;

  }

  return body;

}

// The form fields of a capped body, decoded the way the browser sent them

// (a plain form or a multipart one), by handing the bytes back to a Request.

async function readForm(request: Request): Promise<FormData | undefined> {

  const body = await readBody(request);

  if (body === undefined) return undefined;

  return new Request(request.url, {

    method: "POST",

    headers: { "content-type": request.headers.get("content-type") ?? "" },

    body,

  }).formData();

}

function page(): string {

  const notes = db

    .query<{ id: number; body: string; created_at: string }, []>(

      "SELECT id, body, created_at FROM note ORDER BY id DESC LIMIT 100",

    )

    .all();

  const where =

    env === "preview" ? `preview of pull #${pull ?? "?"}` : env;

  return `<!doctype html>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>val</title>

<style>

  :root { color-scheme: light dark; font: 16px/1.5 system-ui, sans-serif; }

  body { max-width: 40rem; margin: 3rem auto; padding: 0 1rem; }

  .env { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem;

         background: ${env === "production" ? "#16a34a" : "#2563eb"}; color: white; }

  form { display: flex; gap: .5rem; margin: 1.5rem 0; }

  input { flex: 1; padding: .6rem .8rem; font: inherit; border: 1px solid #8884; border-radius: .5rem; }

  button { padding: .6rem 1rem; font: inherit; border: 0; border-radius: .5rem; background: #111; color: white; }

  li { padding: .5rem 0; border-top: 1px solid #8883; list-style: none; }

  small { opacity: .6; }

</style>

<h1>val</h1>

<p>Five attackers with the spike, five defenders, and abilities on cooldown. First to 13.</p>

<p><span class="env">${escape(where)}</span> <small>${commit ? "@ " + commit : ""}</small></p>

<form method="post" action="/notes">

  <input name="body" placeholder="Write a note" required maxlength="500" autofocus>

  <button>Add</button>

</form>

<ul>${notes

    .map((n) => `<li>${escape(n.body)} <small>${n.created_at}</small></li>`)

    .join("")}</ul>

<p><small>${notes.length === 0 ? "No notes yet. Notes written here stay in this environment's data." : `${notes.length} note${notes.length === 1 ? "" : "s"} in ${escape(where)} data.`}</small></p>

`;

}

export const server = Bun.serve({

  port: Number(process.env.PORT ?? 8080),

  hostname: process.env.HOST ?? "127.0.0.1",

  async fetch(request) {

    const url = new URL(request.url);

    if (request.method === "POST" && !sameOrigin(request))

      return new Response("forbidden", { status: 403 });

    if (request.method === "POST" && url.pathname === "/notes") {

      const form = await readForm(request);

      if (form === undefined)

        return new Response("too large", { status: 413, headers: SECURITY });

      const body = String(form.get("body") ?? "").trim().slice(0, 500);

      if (body) db.query("INSERT INTO note (body) VALUES (?1)").run(body);

      return Response.redirect("/", 303);

    }

    // HEAD is GET without the body: a health check sees the app up.

    if (url.pathname === "/" && (request.method === "GET" || request.method === "HEAD")) {

      const full = html(page());

      return request.method === "HEAD"

        ? new Response(null, { status: full.status, headers: full.headers })

        : full;

    }

    // Files under ./static are served as they are, cached for a year: name

    // them by content (app.3f2a9c.js) and a change is a new name, never a

    // stale cache. The path is confined to the directory.

    if (url.pathname.startsWith("/static/") && !url.pathname.includes("..")) {

      const file = Bun.file(join(import.meta.dir, "..", url.pathname.slice(1)));

      if (await file.exists())

        return new Response(file, {

          headers: { "cache-control": "public, max-age=31536000, immutable", ...SECURITY },

        });

    }

    return new Response("not found", { status: 404, headers: SECURITY });

  },

  // A bug answers with the floor and nothing else: never the runtime's own

  // error page, which carries source and paths, and never without the

  // headers. The detail goes to the log, where it belongs.

  error(error) {

    console.error(error);

    return html("<h1>Something went wrong</h1>", 500);

  },

});

console.log(`val listening on http://${server.hostname}:${server.port} (${env})`);