pike/glyph Public Public: anyone can read this; nobody can change it.

/**

 * The page, rendered on the server: the first paint is complete HTML, and

 * `static/live.js` keeps the notes fresh afterwards. When a second page

 * arrives, move `layout` to `src/pages/layout.ts` and give each page a file.

 */

import { canDelete, type Note } from "./actions.ts";

import {

  commit,

  description,

  env,

  publicOrigin,

  ssh,

  title,

  where,

} from "./env.ts";

import { asset, escape } from "./http.ts";

import { token, tokensHref } from "./tokens.ts";

import type { Who } from "./who.ts";

/**

 * The frame every page shares: the tokens and the look, who you are, and

 * what a link to the page says when it is shared — a title, a sentence

 * and the address, for Open Graph and the card a chat app unfurls.

 */

export function layout(body: string, who: Who, path = "/"): string {

  const door =

    who.role === "anon"

      ? `<a class="button button-quiet" href="/__forge/signin?to=/">Sign in</a>`

      : `<span class="you"><b>${escape(who.name)}</b>${who.role === "admin" ? " · admin" : ""}</span>

        <a class="button button-quiet" href="/__forge/signout">Sign out</a>`;

  return `<!doctype html>

<html lang="en">

<meta charset="utf-8">

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

<meta name="color-scheme" content="light dark">

<meta name="theme-color" content="${token("color-bg")}" media="(prefers-color-scheme: light)">

<meta name="theme-color" content="${token("color-bg", "dark")}" media="(prefers-color-scheme: dark)">

<link rel="icon" href="data:,">

<title>${escape(title)}</title>

<meta name="description" content="${escape(description)}">

<meta property="og:type" content="website">

<meta property="og:site_name" content="${escape(title)}">

<meta property="og:title" content="${escape(title)}">

<meta property="og:description" content="${escape(description)}">

<meta property="og:url" content="${escape(publicOrigin + path)}">

<meta name="twitter:card" content="summary">

<meta name="twitter:title" content="${escape(title)}">

<meta name="twitter:description" content="${escape(description)}">

<link rel="stylesheet" href="${tokensHref}">

<link rel="stylesheet" href="${asset("app.css")}">

<script type="module" src="${asset("live.js")}"></script>

<body>

<div class="page">

  <header class="head">

    <div>

      <h1>${escape(title)}</h1>

      <p class="muted">${escape(description)}</p>

    </div>

    <nav class="row">

      <span class="pill" data-env="${escape(env)}">${escape(where)}</span>${commit ? `<span class="muted mono">${escape(commit)}</span>` : ""}

      ${door}

    </nav>

  </header>

  <main>${body}</main>

  <footer class="muted">

    ${ssh === undefined ? "" : `<p>Terminal: <code>${escape(ssh)}</code></p>`}

    <p>Also at <a href="/api/notes">/api/notes</a> (<a href="/openapi.json">described</a>) and <code>POST /mcp</code>, with the same rules.</p>

    <p>Something wrong? <a href="/__forge/report">Report a problem</a>, no account needed.</p>

  </footer>

</div>

</body>

</html>

`;

}

export function home(input: {

  who: Who;

  notes: readonly Note[];

  notice?: string | undefined;

}): string {

  const { who, notes, notice } = input;

  const composer =

    who.role === "anon"

      ? `<p class="muted">Reading as a guest. <a href="/__forge/signin?to=/">Sign in</a> to add a note.</p>`

      : `<form class="row" method="post" action="/notes">

        <input class="input" name="body" placeholder="Write a note" aria-label="New note" required maxlength="500" autocomplete="off" autofocus>

        <button class="button">Add</button>

      </form>`;

  const list =

    notes.length === 0

      ? `<p class="empty">No notes yet. Notes written here stay in ${escape(where)} data.</p>`

      : `<ul class="list">${notes.map((note) => item(note, who)).join("")}</ul>`;

  return layout(

    `<section class="card">${composer}</section>

  <section id="notes" data-live="note.added note.removed">${list}</section>

  ${notice === undefined ? "" : `<p class="toast" role="status">${escape(notice)}</p>`}`,

    who,

  );

}

const item = (note: Note, who: Who): string => `<li class="note">

  <div>

    <p>${escape(note.body)}</p>

    <small class="muted">${escape(note.author_name)} · <time datetime="${escape(note.created_at)}">${ago(note.created_at)}</time></small>

  </div>

  ${

    canDelete(who, note)

      ? `<form method="post" action="/notes/${note.id}/delete"><button class="button button-quiet" aria-label="Remove this note">Remove</button></form>`

      : ""

  }

</li>`;

const ago = (iso: string): string => {

  const s = Math.max(0, (Date.now() - Date.parse(iso)) / 1000);

  if (s < 60) return "just now";

  if (s < 3600) return `${Math.floor(s / 60)}m ago`;

  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;

  return new Date(iso).toLocaleDateString("en", {

    month: "short",

    day: "numeric",

  });

};