Alex Dunmow a66113fce0 feat(editorial): Wave A theme lane (WO-TF-017) — personal essayist
Deliver the full Wave A contract for the editorial theme (personal
essayist / independent newsletter persona).

- 49 mandatory builtin overrides in templates/overrides/editorial/,
  re-skinned from the frozen builtins: hairline rules, small-caps labels,
  drop caps, narrow reading measure, oxblood accent. All content fields,
  provider fields, custom tags ({% img %}/{% form %}/{% signup_form %}),
  hx wiring, navbar drawer JS and auth/contact form wiring preserved
  verbatim; legacy button/card field reads reconciled (link/style/label,
  media/text).
- 7 page templates (default, full-width, landing, article, blog-index,
  contact, auth); article is the reading centrepiece with drop-cap opener,
  marginalia rail and a CSS-only reading-progress underline. All set the
  html.dark class and route body font through var(--font-body).
- Block rework: masthead/byline/pullquote/section_label/colophon deleted
  (now overrides of navbar/post-metadata/quote/divider/footer). Persona
  blocks: dropcap_intro, marginalia, reading_list, field_notes.
- 4 presets, all mode "both", book-paper light + sepia-on-charcoal dark.
- Bundled Playfair Display + Source Serif 4 (OFL, latin subset) in
  assets/fonts with license record; fonts.json populated; every
  font-family via var(--font-heading|body|mono, fallback).
- Themed email-safe wrapper (tables, inline styles, literal fonts).
- Master pages + seed demo site (home, about, blog with 3 essays,
  contact with form + data table + row_inserted email-admins workflow,
  login) in essayist voice.
- required_icon_packs=["lucide"]; RECOMMENDED_FONTS/ICONS updated.

Motion tier: CSS-first (progress underline, marginalia fade-in;
prefers-reduced-motion honored). Verified: make + ninja plugin verify +
check-safety all exit 0. Visual quality UNVERIFIED until Wave B.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 11:22:07 +08:00

44 lines
3.8 KiB
Plaintext

{# contact-form override — editorial enquiry form. ALL form wiring preserved verbatim from builtin: bid, {% form %} action/hx attrs, honeypot, field loop, form.submitted/errors, submit target. Only inputs restyled to hairline editorial fields. #}
{% with bid=_block_id|default:context.blockId %}
<section data-block-override="editorial:contact-form" id="contact-form-{{ bid }}" class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
<div class="mx-auto max-w-2xl px-4">
{% if form.submitted %}
<div class="editorial-panel bg-card p-10 text-center">
<div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full text-[hsl(var(--accent))]" style="box-shadow:inset 0 0 0 1px hsl(var(--accent));">::lucide:check:lg::</div>
<p class="text-lg italic" style="font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif);">{{ form.message|default:successMessage|default:"Thank you. Your table request has been received." }}</p>
</div>
{% else %}
<div class="text-center">
{% if heading %}<h2 class="editorial-caps text-3xl md:text-4xl" style="font-family:var(--font-heading, 'Playfair Display', Georgia, serif);color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
{% if description %}<p class="mt-3 text-lg italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Source Serif 4', 'Source Serif Pro', Georgia, serif);">{{ description }}</p>{% endif %}
<span class="editorial-rule w-16 mx-auto mt-5 mb-2 block" aria-hidden="true"></span>
</div>
{% if form.errors._form %}<div class="mt-6 border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">{{ form.errors._form }}</div>{% endif %}
{% with formAction="/api/blocks/"|add:bid|add:"/submit" formTarget="#contact-form-"|add:bid %}
{% form action=formAction hx_target=formTarget hx_swap="outerHTML" class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2" %}
{% for field in fields %}
<div class="{% if field.width == "half" %}sm:col-span-1{% else %}sm:col-span-2{% endif %}">
{% if field.label %}<label for="cf-{{ bid }}-{{ field.name }}" class="editorial-caps text-muted-foreground mb-1.5 block text-xs">{{ field.label }}{% if field.required %} <span class="text-destructive">*</span>{% endif %}</label>{% endif %}
{% if field.type == "textarea" %}
<textarea id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" rows="5"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="editorial-input"></textarea>
{% elif field.type == "select" %}
<select id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}"{% if field.required %} required{% endif %} class="editorial-input">
{% if field.placeholder %}<option value="">{{ field.placeholder }}</option>{% endif %}
{% for opt in field.options %}<option value="{{ opt.value }}">{{ opt.label|default:opt.value }}</option>{% endfor %}
</select>
{% else %}
<input id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" type="{{ field.type|default:"text" }}"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="editorial-input">
{% endif %}
</div>
{% endfor %}
<div class="hidden" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
<div class="sm:col-span-2 flex justify-center">
<button type="submit" class="editorial-button inline-flex items-center justify-center">{{ submitLabel|default:"Request a table" }}</button>
</div>
{% endform %}
{% endwith %}
{% endif %}
</div>
</section>
{% endwith %}