wren/lost-property Public Public: anyone can read this; nobody can change it.

/** The two pages: the entrance (catalogue and intake form) and a case. */

import { escape } from "./html.ts";

import { catalogueNumber, conditionOf, vitrineOf, VITRINES } from "./museum.ts";

import type { Item, ItemWithCount, Note } from "./db.ts";

function layout(env: string, commit: string, body: string): string {

  return `<!doctype html>

<meta charset="utf-8">

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

<title>lost-property</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; }

  textarea, input[type=text] { width: 100%; box-sizing: border-box; padding: .6rem .8rem; font: inherit;

         border: 1px solid #8884; border-radius: .5rem; }

  button { margin-top: .6rem; padding: .7rem 1.2rem; font: inherit; border: 0; border-radius: .5rem;

           background: #111; color: white; min-height: 44px; }

  a { color: inherit; }

  ul.catalogue { padding: 0; }

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

  .tag { display: inline-block; font-size: .75rem; opacity: .7; border: 1px solid #8886; border-radius: 999px;

         padding: .05rem .5rem; margin: .3rem .4rem 0 0; }

  .plaque { border: 1px solid #8886; border-radius: .5rem; padding: 1rem 1.2rem; margin: 1.5rem 0; }

  .plaque .catalogue-number { font-size: .8rem; opacity: .7; letter-spacing: .05em; text-transform: uppercase; }

  .plaque h2 { margin: .2rem 0 .8rem; }

  .plaque dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; font-size: .9rem; opacity: .85; margin: 0; }

  .plaque dt { font-weight: 600; }

  .plaque dd { margin: 0; }

  .note { padding: .6rem 0; border-top: 1px solid #8883; }

  .note .kind { font-weight: 600; font-size: .85rem; }

  small { opacity: .6; }

  fieldset { border: 0; padding: 0; margin: 1rem 0 .8rem; display: flex; gap: 1rem; flex-wrap: wrap; }

  label.option { display: flex; align-items: center; gap: .4rem; min-height: 44px; }

</style>

${body}

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

`;

}

export function renderHome(items: ItemWithCount[], env: string, commit: string): string {

  const rows = items

    .map((item) => {

      const vitrine = vitrineOf(item.description);

      const short = item.description.length > 80 ? item.description.slice(0, 80) + "…" : item.description;

      return `<li class="case">

  <a href="/items/${item.id}">${escape(short)}</a><br>

  <span class="tag">${escape(catalogueNumber(item.id, item.created_at))}</span><span class="tag">${escape(VITRINES[vitrine]!)}</span>

  <br><small>${item.note_count} note${item.note_count === 1 ? "" : "s"} · accessioned ${escape(item.created_at)}</small>

</li>`;

    })

    .join("");

  return layout(

    env,

    commit,

    `<h1>lost-property</h1>

<p>A museum of lost things. Describe what you lost; the museum accessions it — a catalogue number, a vitrine, a plaque written in the flat voice of a museum label. Other visitors can leave a note on any case: that they saw one like it, or that they have the other half.</p>

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

  <label for="description">Describe what you lost</label>

  <textarea id="description" name="description" rows="3" maxlength="500" required

    placeholder="A single brown leather glove, left hand, found beneath a train seat."></textarea>

  <button>Accession it</button>

</form>

<ul class="catalogue">${rows || `<li class="case"><small>Nothing accessioned yet.</small></li>`}</ul>`,

  );

}

export function renderCase(item: Item, notes: Note[], env: string, commit: string): string {

  const vitrineIndex = vitrineOf(item.description);

  const noteRows = notes

    .map(

      (n) => `<div class="note">

  <span class="kind">${n.kind === "match" ? "Has the other half" : "Saw one like it"}</span>

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

  <small>${escape(n.created_at)}</small>

</div>`,

    )

    .join("");

  return layout(

    env,

    commit,

    `<p><a href="/">&larr; lost-property</a></p>

<article class="plaque">

  <p class="catalogue-number">${escape(catalogueNumber(item.id, item.created_at))} · Vitrine ${vitrineIndex + 1}</p>

  <h2>${escape(VITRINES[vitrineIndex]!)}</h2>

  <p>${escape(item.description)}</p>

  <dl>

    <dt>Accessioned</dt><dd>${escape(item.created_at)}</dd>

    <dt>Condition</dt><dd>${escape(conditionOf(item.id))}</dd>

  </dl>

</article>

<h3>Notes</h3>

${noteRows || `<p><small>No notes yet.</small></p>`}

<form method="post" action="/items/${item.id}/notes">

  <fieldset>

    <label class="option"><input type="radio" name="kind" value="sighting" checked required> I saw one like it</label>

    <label class="option"><input type="radio" name="kind" value="match" required> I have the other half</label>

  </fieldset>

  <input type="text" name="body" maxlength="500" required placeholder="Where, when, or how to get in touch">

  <button>Leave a note</button>

</form>`,

  );

}