@jtakeit/astro 0.1.0

package/template/src/components/Hero.astro

@@ -0,0 +1,66 @@
+---
+/**
+ * The first screen's words.
+ *
+ * Its own component because it is rendered in two places — inside `HeroField`
+ * when a palette has been chosen, and in a plain section when one has not — and
+ * duplicating it would mean one of the two losing an annotation the day
+ * somebody edits the other. Astro's frontmatter is TypeScript rather than JSX,
+ * so a local variable holding the markup is not an option; a component is.
+ */
+import { block, flPath, picture, HOME } from '../copy/{{LOCALE}}';
+import Shot from './Shot.astro';
+
+/*
+ * The hero's photograph, where the document has one.
+ *
+ * It is a field rather than a file written into this component for the same
+ * reason the heading is: the owner can change it. `picture()` gives the slot,
+ * its words and its annotation together — and the annotation is what makes the
+ * picture tappable, which is the whole of "every photograph on the page is
+ * either a gallery item or a field of its own".
+ *
+ * Rendered after the words and in its own element, so a design pass can put it
+ * anywhere — beside them, behind them, or nowhere — without touching what it is.
+ */
+const hero = block('hero');
+const shot = picture(hero.of, hero.at, 'image');
+---
+
+<div class="hero__inner">
+  {HOME.hero.eyebrow && (
+    <p class="eyebrow" data-jtk-path={flPath('hero', 'eyebrow')}>{HOME.hero.eyebrow}</p>
+  )}
+  {/* Guarded like everything else around it, and it is the one that was not.
+      `title` is `required: true` in the catalogue, so a real page always has
+      its h1; the only document where this is empty is the untouched scaffold,
+      where an empty <h1> is worth nothing to a reader and made `fl-catalogue`
+      fail on a project nobody had edited yet. */}
+  {HOME.hero.heading && (
+    <h1 data-jtk-path={flPath('hero', 'title')}>{HOME.hero.heading}</h1>
+  )}
+  {HOME.hero.lead && (
+    <p class="lead" data-jtk-path={flPath('hero', 'lead')}>{HOME.hero.lead}</p>
+  )}
+  {HOME.hero.cta && (
+    <p class="actions">
+      <a class="btn" href={HOME.hero.ctaHref} data-jtk-path={flPath('hero', 'cta_label')}>
+        {HOME.hero.cta}
+      </a>
+    </p>
+  )}
+
+  {/* The page's largest picture, so it is the one loaded eagerly — one per
+      page, never two. */}
+  {shot.name && (
+    <Shot
+      name={shot.name}
+      alt={shot.alt}
+      path={shot.path}
+      class="hero__shot"
+      eager
+      width={1200}
+      sizes="(min-width: 62rem) 50vw, 92vw"
+    />
+  )}
+</div>

package/template/src/components/LeadForm.astro

@@ -0,0 +1,347 @@
+---
+/**
+ * The lead form.
+ *
+ * It is a real `<form method="post">` first and an in-place submission second:
+ * with JavaScript off the browser posts to the same endpoint and the function
+ * answers with a plain page. The script only spares a working browser the
+ * navigation.
+ *
+ * `novalidate` because the messages are ours, in the client's language, rather
+ * than the browser's in the browser's. Every rule enforced here is enforced
+ * again by the platform behind /api/lead — the endpoint is public and the browser's
+ * checks are a convenience, not a gate.
+ */
+import { FORM, flPath } from '../copy/{{LOCALE}}';
+import { under } from '../lib/under';
+import { BLOCKS, LOCALE, words, type Field } from '../content/blocks';
+
+/**
+ * The site's own questions, from the catalogue (`asks` on the block that
+ * collects). Declared once in blocks.ts and drawn here, so the control on
+ * the page and the label in the owner's inbox are the same declaration —
+ * see the comment on `asks` in blocks.ts for what the platform holds the
+ * form to.
+ */
+const asks: Field[] = BLOCKS.find((block) => block.type === 'cta_banner')?.asks ?? [];
+
+/** The `<input type>` a visitor types this kind into. */
+function inputType(kind: Field['kind']): string {
+  switch (kind) {
+    case 'number': return 'number';
+    case 'tel': return 'tel';
+    case 'email': return 'email';
+    case 'url': return 'url';
+    case 'date': return 'date';
+    case 'time_of_day': return 'time';
+    default: return 'text';
+  }
+}
+
+/**
+ * ── every annotated element is guarded, and this file forgot ────────────────
+ *
+ * `Blocks.astro` wraps each `data-jtk-path` element in a test that its value is
+ * not empty, and where a block carries the form it hands `title`, `lead` and
+ * `cta_label` to this component instead — see `!carriesForm` there. The
+ * responsibility moved and the guard did not, so this file annotated seven
+ * elements whose values were empty.
+ *
+ * That is what `fl-catalogue` calls "on the page and not in the catalogue": it
+ * excuses a field the document leaves empty, on the ground that an empty field
+ * renders nothing. Here it rendered an empty element with a tap target on it,
+ * and a freshly scaffolded project therefore failed its own check before
+ * anybody had written a word.
+ */
+
+---
+
+<form
+  class="lead"
+  method="post"
+  action={under('/api/lead')}
+  novalidate
+  data-lead-form
+  data-success={FORM.success}
+  data-error={FORM.error}
+  data-sending={FORM.sending}
+>
+  <div class="lead__head">
+    {FORM.title && (
+      <h2 class="lead__title" data-jtk-path={flPath('cta_banner', 'title')}>{FORM.title}</h2>
+    )}
+    {FORM.lead && (
+      <p class="lead__lead" data-jtk-path={flPath('cta_banner', 'lead')}>{FORM.lead}</p>
+    )}
+  </div>
+
+  <div class="field">
+    <label class="field__label" for="lead-name">
+      {FORM.name && <span data-jtk-path={flPath('cta_banner', 'name_label')}>{FORM.name}</span>}{' '}
+      <span aria-hidden="true">*</span>
+    </label>
+    <input
+      class="field__input"
+      id="lead-name"
+      name="name"
+      type="text"
+      autocomplete="name"
+      required
+      maxlength="120"
+      data-message={FORM.invalidName}
+    />
+    <p class="field__error" data-error-for="name" hidden></p>
+  </div>
+
+  <div class="field">
+    <label class="field__label" for="lead-contact">
+      {FORM.contact && (
+        <span data-jtk-path={flPath('cta_banner', 'contact_label')}>{FORM.contact}</span>
+      )}{' '}
+      <span aria-hidden="true">*</span>
+    </label>
+    <input
+      class="field__input"
+      id="lead-contact"
+      name="contact"
+      type="text"
+      inputmode="tel"
+      autocomplete="tel"
+      required
+      maxlength="120"
+      data-message={FORM.invalidContact}
+    />
+    <p class="field__error" data-error-for="contact" hidden></p>
+  </div>
+
+  <div class="field">
+    <label class="field__label" for="lead-message">
+      {FORM.message && (
+        <span data-jtk-path={flPath('cta_banner', 'message_label')}>{FORM.message}</span>
+      )}
+    </label>
+    <textarea
+      class="field__input field__input--area"
+      id="lead-message"
+      name="message"
+      rows="4"
+      maxlength="2000"></textarea>
+  </div>
+
+  {asks.map((ask) => (
+    <div class="field">
+      {/* The words are the catalogue's, not the document's: fixed, so the
+          check knows they belong to the declaration and not to nobody. */}
+      <label class="field__label" for={`lead-${ask.key}`} data-jtk-fixed>
+        {words(ask.label, LOCALE)}
+        {ask.required && (
+          <>
+            {' '}
+            <span aria-hidden="true">*</span>
+          </>
+        )}
+      </label>
+      {ask.kind === 'textarea' ? (
+        <textarea
+          class="field__input field__input--area"
+          id={`lead-${ask.key}`}
+          name={ask.key}
+          rows="3"
+          required={ask.required}
+          maxlength={ask.max}></textarea>
+      ) : ask.kind === 'select' ? (
+        <select class="field__input" id={`lead-${ask.key}`} name={ask.key} required={ask.required}>
+          <option value=""></option>
+          {(ask.options ?? []).map((option) => (
+            <option value={option} data-jtk-fixed>{words(ask.option_labels?.[option], LOCALE) || option}</option>
+          ))}
+        </select>
+      ) : ask.kind === 'bool' ? (
+        <input class="field__check" id={`lead-${ask.key}`} name={ask.key} type="checkbox" value="yes" />
+      ) : (
+        <input
+          class="field__input"
+          id={`lead-${ask.key}`}
+          name={ask.key}
+          type={inputType(ask.kind)}
+          required={ask.required}
+          maxlength={ask.max}
+          min={ask.kind === 'number' ? ask.min : undefined}
+          max={ask.kind === 'number' ? ask.max : undefined}
+        />
+      )}
+    </div>
+  ))}
+
+  {/*
+    Bots fill everything; people never see this. Kept out of the tab order and
+    out of the accessibility tree rather than hidden with `display: none`, which
+    some bots detect.
+  */}
+  <div class="trap" aria-hidden="true" data-jtk-fixed>
+    <label for="lead-website">Website</label>
+    <input id="lead-website" name="website" type="text" tabindex="-1" autocomplete="off" />
+  </div>
+
+  {FORM.requiredNote && (
+    <p class="lead__legal" data-jtk-path={flPath('cta_banner', 'required_note')}>
+      {FORM.requiredNote}
+    </p>
+  )}
+
+  <div class="lead__foot">
+    <button class="btn" type="submit" data-submit>
+      {FORM.submit && (
+        <span data-submit-label data-jtk-path={flPath('cta_banner', 'cta_label')}>{FORM.submit}</span>
+      )}
+    </button>
+    <p class="lead__status" role="status" data-status></p>
+  </div>
+</form>
+
+<style>
+  .lead {
+    display: grid;
+    gap: 1.25rem;
+    max-inline-size: 34rem;
+  }
+
+  .field {
+    display: grid;
+    gap: 0.375rem;
+  }
+
+  .field__label {
+    font-size: 0.875rem;
+  }
+
+  .field__input {
+    inline-size: 100%;
+    padding: 0.75rem 0.875rem;
+    font: inherit;
+    color: inherit;
+    background: var(--paper-deep, #f2efea);
+    border: 1px solid var(--line, #d9d4cc);
+    border-radius: var(--r-2, 8px);
+  }
+
+  .field__input--area {
+    resize: vertical;
+  }
+
+  .field__error {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--danger, #b3261e);
+  }
+
+  /* Off-screen rather than display:none — see the comment on the honeypot. */
+  .trap {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .lead__foot {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .lead__status {
+    margin: 0;
+    font-size: 0.875rem;
+  }
+
+  .lead[data-state='error'] .lead__status {
+    color: var(--danger, #b3261e);
+  }
+</style>
+
+<script>
+  // Progressive enhancement only. Every branch here has a working no-JS
+  // equivalent: without this file the browser posts the form and the function
+  // answers with a page.
+  const form = document.querySelector<HTMLFormElement>('[data-lead-form]');
+
+  if (form) {
+    const status = form.querySelector<HTMLElement>('[data-status]')!;
+    const button = form.querySelector<HTMLButtonElement>('[data-submit]')!;
+    const label = form.querySelector<HTMLElement>('[data-submit-label]')!;
+    const original = label.textContent ?? '';
+
+    const showError = (field: string, message: string) => {
+      const el = form.querySelector<HTMLElement>(`[data-error-for="${field}"]`);
+      if (!el) return;
+      el.textContent = message;
+      el.hidden = !message;
+    };
+
+    const clearErrors = () => {
+      form.querySelectorAll<HTMLElement>('[data-error-for]').forEach((el) => {
+        el.textContent = '';
+        el.hidden = true;
+      });
+    };
+
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      clearErrors();
+      status.textContent = '';
+      form.removeAttribute('data-state');
+
+      const data = new FormData(form);
+      const required = ['name', 'contact'] as const;
+      let ok = true;
+
+      for (const field of required) {
+        const input = form.elements.namedItem(field) as HTMLInputElement | null;
+        if (!input?.value.trim()) {
+          showError(field, input?.dataset.message ?? '');
+          ok = false;
+        }
+      }
+      if (!ok) return;
+
+      button.disabled = true;
+      label.textContent = form.dataset.sending ?? original;
+
+      try {
+        const response = await fetch(form.action, {
+          method: 'POST',
+          headers: { accept: 'application/json' },
+          body: data,
+        });
+        const body = (await response.json()) as { ok?: boolean; error?: string; message?: string; demo?: boolean };
+
+        if (response.ok && body.ok) {
+          form.reset();
+          status.textContent = form.dataset.success ?? '';
+          // Preview only: the bot is not connected, so nothing was delivered.
+          // Visible to us, meaningless to a visitor. It disappears in production.
+          if (body.demo) status.textContent += ' ⚠︎';
+        } else if (body.error === 'anonymous' || body.error === 'unreachable') {
+          // The platform refuses by name — no name, no way back to the sender —
+          // and the sentence for each is the one the field already carries.
+          const at = body.error === 'anonymous' ? 'name' : 'contact';
+          const input = form.elements.namedItem(at) as HTMLInputElement | null;
+          showError(at, input?.dataset.message ?? '');
+          input?.focus();
+        } else {
+          form.setAttribute('data-state', 'error');
+          status.textContent = body.message ?? form.dataset.error ?? '';
+        }
+      } catch {
+        form.setAttribute('data-state', 'error');
+        status.textContent = form.dataset.error ?? '';
+      } finally {
+        button.disabled = false;
+        label.textContent = original;
+      }
+    });
+  }
+</script>

package/template/src/components/OpeningHours.astro

@@ -0,0 +1,69 @@
+---
+/**
+ * The business's opening hours, read from the module's settings.
+ *
+ * The owner keeps the hours in the panel, under the diary; publish writes
+ * that document to `jtk/bookings.json`. This is the one place a page should
+ * take its hours from — a block that types them again as text is a second
+ * copy, and the platform's judge advises against it (JTK_W_MODULE_TWIN).
+ *
+ * A repository nobody has published yet has no `jtk/bookings.json`, so the
+ * file is read through a glob rather than imported: absent, the component
+ * draws nothing and the build goes on.
+ */
+interface Row {
+  day: string;
+  opens: string;
+  closes: string;
+}
+interface Props {
+  locale: 'uk' | 'de' | 'en';
+  /** The heading over the list; empty draws none. */
+  title?: string;
+}
+const { locale, title = '' } = Astro.props;
+
+const files = import.meta.glob<{ blocks?: { hours?: Row[] }[] }>('/jtk/bookings.json', {
+  eager: true,
+  import: 'default',
+});
+const settings = Object.values(files)[0];
+const rows: Row[] = settings?.blocks?.[0]?.hours ?? [];
+
+const ORDER = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+const DAYS: Record<Props['locale'], Record<string, string>> = {
+  uk: { monday: 'Понеділок', tuesday: 'Вівторок', wednesday: 'Середа', thursday: 'Четвер', friday: 'Пʼятниця', saturday: 'Субота', sunday: 'Неділя' },
+  de: { monday: 'Montag', tuesday: 'Dienstag', wednesday: 'Mittwoch', thursday: 'Donnerstag', friday: 'Freitag', saturday: 'Samstag', sunday: 'Sonntag' },
+  en: { monday: 'Monday', tuesday: 'Tuesday', wednesday: 'Wednesday', thursday: 'Thursday', friday: 'Friday', saturday: 'Saturday', sunday: 'Sunday' },
+};
+const CLOSED: Record<Props['locale'], string> = { uk: 'зачинено', de: 'geschlossen', en: 'closed' };
+
+// One line per day, in the week's order; a day with two rows — a break —
+// is two stretches on one line; a day with none is closed.
+const week = ORDER.map((day) => ({
+  day,
+  label: DAYS[locale][day],
+  stretches: rows.filter((row) => row.day === day).map((row) => `${row.opens}–${row.closes}`),
+}));
+---
+{rows.length > 0 && (
+  <section class="hours">
+    {title && <h2 class="hours__title">{title}</h2>}
+    <dl class="hours__list">
+      {week.map((one) => (
+        <div class="hours__row" data-day={one.day}>
+          <dt class="hours__day">{one.label}</dt>
+          <dd class="hours__time">{one.stretches.length === 0 ? CLOSED[locale] : one.stretches.join(', ')}</dd>
+        </div>
+      ))}
+    </dl>
+  </section>
+)}
+
+<style>
+  /* Legible and nothing more: the site's own type and rules go here. */
+  .hours__list { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.25rem; margin: 0; }
+  .hours__row { display: contents; }
+  .hours__day { margin: 0; }
+  .hours__time { margin: 0; font-variant-numeric: tabular-nums; }
+</style>

package/template/src/components/Pile.astro

@@ -0,0 +1,185 @@
+---
+/**
+ * A pile: several photographs laid over each other, each a little off square.
+ *
+ * ── why this is a component ─────────────────────────────────────────────────
+ *
+ * A pile is four numbers per card and it goes wrong in five predictable places,
+ * every one of which was found in a shipped site built by hand:
+ *
+ *   · the rotated card whose corner leaves the viewport, so the whole page
+ *     scrolls sideways on a phone — the fault `fl-check` fails a build for;
+ *   · five overlapping photographs at 390px, which is mush;
+ *   · four alt texts read out in a row for what is visually one thing;
+ *   · the largest picture in the pile not marked as the page's LCP image;
+ *   · angles typed by hand, which come out the same in every project, or drawn
+ *     at random, which come out different on every rebuild.
+ *
+ * So the arrangement is here and the pictures are yours. Children are laid into
+ * a 12×12 grid by their order — the first is at the back, the last is on top —
+ * and each gets its place and its tilt from that position. Anything can be a
+ * child: a `<Shot>`, a badge, a card, their own mark.
+ *
+ *   <Pile>
+ *     <Shot name="room" />
+ *     <Shot name="work" eager />
+ *     <Shot name="hands" decorative />
+ *     <p class="badge">под ключ</p>
+ *   </Pile>
+ *
+ * ── what it is for ─────────────────────────────────────────────────────────
+ *
+ * `portrait-led` fails on a weak portrait, which on the outbound track is
+ * common: a scraped feed often has no single frame that can carry a screen. A
+ * pile is the answer — four frames share the work, so none of them has to be
+ * the one good photograph nobody has.
+ *
+ * It is the *hand* of the page, and it works by contrast: everything under it
+ * is set square. See references/shapes.md — if everything tilts, nothing does.
+ */
+
+interface Props {
+  /**
+   * The pile's own frame. Rows are a twelfth of it each, so this is what
+   * decides how tall the cards are — not the pictures inside them.
+   */
+  ratio?: string;
+  /**
+   * Multiplies every card's tilt. 0 lays the pile out square, which is a real
+   * choice — the overlap alone is often enough.
+   */
+  tilt?: number;
+  class?: string;
+}
+
+const { ratio = '4 / 3', tilt, class: className } = Astro.props;
+---
+
+<div
+  class:list={['pile', className]}
+  style={[`aspect-ratio:${ratio}`, tilt !== undefined ? `--pile-tilt:${tilt}` : '']
+    .filter(Boolean)
+    .join(';')}
+>
+  <slot />
+</div>
+
+<style>
+  /*
+   * A 12×12 grid with definite rows, so a card's height comes from the pile
+   * rather than from the picture in it. That is what makes the arrangement hold
+   * whatever photographs it is given — a feed arrives in every orientation, and
+   * a pile sized by its contents is a pile that reflows differently per client.
+   */
+  .pile {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: repeat(12, 1fr);
+    inline-size: 100%;
+  }
+
+  /*
+   * Order is depth: the first child is at the back. It is the one mental model
+   * that survives somebody editing this six months from now, and it costs one
+   * declaration.
+   *
+   * Every child selector here is `:global`, and it has to be. Slotted children
+   * belong to the page that wrote them, not to this component, so a plain
+   * `.pile > *` compiles to a scope attribute they do not carry and the whole
+   * arrangement silently does nothing — the cards land in auto-placed cells and
+   * the pile looks like a small broken grid. It cost an afternoon once.
+   */
+  .pile > :global(*) {
+    margin: 0;
+    block-size: 100%;
+    min-inline-size: 0;
+    rotate: calc(var(--tilt, 4deg) * var(--pile-n, 0) * var(--pile-tilt, 1));
+  }
+
+  /*
+   * The arrangement. Five places, because a sixth card is a collage rather than
+   * a pile and stops reading as one thing.
+   *
+   * Nothing reaches the outer column on both sides at once, which is what keeps
+   * a rotated corner inside the box. Move a card by overriding its grid-area and
+   * --pile-n from the page; that is a design decision, not a fork of this file.
+   */
+  .pile > :global(:nth-child(1)) {
+    grid-area: 2 / 1 / 9 / 6;
+    --pile-n: -1;
+    z-index: 1;
+  }
+
+  .pile > :global(:nth-child(2)) {
+    grid-area: 1 / 6 / 7 / 12;
+    --pile-n: 0.9;
+    z-index: 2;
+  }
+
+  .pile > :global(:nth-child(3)) {
+    grid-area: 6 / 3 / 13 / 8;
+    --pile-n: 1.2;
+    z-index: 3;
+  }
+
+  .pile > :global(:nth-child(4)) {
+    grid-area: 5 / 8 / 12 / 13;
+    --pile-n: -0.8;
+    z-index: 4;
+  }
+
+  /* The small one — a badge, a mark, a phone. It carries the biggest angle
+     because a small object can. */
+  .pile > :global(:nth-child(5)) {
+    grid-area: 8 / 1 / 12 / 4;
+    --pile-n: 1.7;
+    z-index: 5;
+  }
+
+  /*
+   * The pile sizes its children, so a <Shot> inside one fills the cell it was
+   * given rather than keeping its own proportions. This reaches into that
+   * component on purpose: a layout component that cannot size what it lays out
+   * is a layout component that only works on one set of photographs.
+   */
+  .pile :global(.shot),
+  .pile :global(.shot__frame),
+  .pile :global(.shot--natural img) {
+    block-size: 100%;
+  }
+
+  .pile :global(.shot--natural img) {
+    object-fit: var(--shot-fit, cover);
+  }
+
+  /*
+   * On a phone a pile is mush.
+   *
+   * Five overlapping photographs at 390px is four thumbnails and an argument.
+   * So the overlap goes and the tilt stays: two columns, square-ish cells, half
+   * the angle — enough that the hand is still visible, little enough that the
+   * corners stay inside a narrow screen.
+   *
+   * The fifth card is dropped rather than shrunk. It is the small one, it was
+   * decoration in a composition that no longer exists, and a 90px cell is worse
+   * than nothing.
+   */
+  @media (max-width: 700px) {
+    .pile {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: none;
+      gap: 0.75rem;
+      aspect-ratio: auto !important;
+    }
+
+    .pile > :global(*) {
+      grid-area: auto !important;
+      aspect-ratio: 4 / 5;
+      rotate: calc(var(--tilt, 4deg) * var(--pile-n, 0) * var(--pile-tilt, 1) * 0.5);
+    }
+
+    .pile > :global(:nth-child(n + 5)) {
+      display: none;
+    }
+  }
+</style>