93 lines
4.3 KiB
HTML
93 lines
4.3 KiB
HTML
|
{#
|
||
|
|
Keep In Touch — newsletter / contact capture admonition.
|
||
|
|
|
||
|
|
Rendered above the comments section on every page (included from
|
||
|
|
partials/comments.html). Lets a visitor leave a WhatsApp number and/or
|
||
|
|
email to get updates. Each field submits independently; once both are
|
||
|
|
present the widget asks for their name. Submissions POST as JSON to the
|
||
|
|
endpoint configured in zensical.toml under [project.extra.keep_in_touch].
|
||
|
|
|
||
|
|
Config (zensical.toml):
|
||
|
|
[project.extra.keep_in_touch]
|
||
|
|
endpoint = "https://subscribe.krystl.org/api/subscribe"
|
||
|
|
enabled = true
|
||
|
|
|
||
|
|
The endpoint is also exposed to JS as window.TOA_KEEP_IN_TOUCH_ENDPOINT
|
||
|
|
via overrides/main.html. Styling lives in docs/stylesheets/extra.css
|
||
|
|
(.toa-kit-*), behaviour in docs/javascripts/extra.js (Keep-In-Touch IIFE).
|
||
|
|
#}
|
||
|
|
{% if config.extra.keep_in_touch and config.extra.keep_in_touch.enabled != false %}
|
||
|
|
<section class="toa-kit gp-reveal"
|
||
|
|
data-endpoint="{{ config.extra.keep_in_touch.endpoint | default('') }}"
|
||
|
|
aria-labelledby="toa-kit-title">
|
||
|
|
<div class="toa-kit__inner">
|
||
|
|
<div class="toa-kit__glow" aria-hidden="true"></div>
|
||
|
|
|
||
|
|
<header class="toa-kit__header">
|
||
|
|
<span class="toa-kit__icon" aria-hidden="true">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
viewBox="0 0 24 24" class="lucide">
|
||
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||
|
|
<path d="m22 6-10 7L2 6"></path>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<div class="toa-kit__heading">
|
||
|
|
<h2 id="toa-kit-title" class="toa-kit__titletext">Keep In Touch</h2>
|
||
|
|
<p class="toa-kit__sub">Leave your WhatsApp or email to get updates on the journey.</p>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<form class="toa-kit__form" novalidate>
|
||
|
|
{# WhatsApp #}
|
||
|
|
<label class="toa-kit__field" data-kind="whatsapp">
|
||
|
|
<span class="toa-kit__fieldicon" aria-hidden="true">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
viewBox="0 0 24 24" class="lucide">
|
||
|
|
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<input type="tel" class="toa-kit__input" name="whatsapp"
|
||
|
|
inputmode="tel" autocomplete="tel"
|
||
|
|
placeholder="WhatsApp number" aria-label="WhatsApp number">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
{# Email #}
|
||
|
|
<label class="toa-kit__field" data-kind="email">
|
||
|
|
<span class="toa-kit__fieldicon" aria-hidden="true">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
viewBox="0 0 24 24" class="lucide">
|
||
|
|
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
|
||
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<input type="email" class="toa-kit__input" name="email"
|
||
|
|
inputmode="email" autocomplete="email"
|
||
|
|
placeholder="Email address" aria-label="Email address">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
{# Name — revealed after both whatsapp + email are captured #}
|
||
|
|
<label class="toa-kit__field toa-kit__field--name" data-kind="name" hidden>
|
||
|
|
<span class="toa-kit__fieldicon" aria-hidden="true">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
viewBox="0 0 24 24" class="lucide">
|
||
|
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
|
||
|
|
<circle cx="12" cy="7" r="4"></circle>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<input type="text" class="toa-kit__input" name="name"
|
||
|
|
autocomplete="name"
|
||
|
|
placeholder="Your name (optional)" aria-label="Your name">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<button type="submit" class="toa-kit__send">Send</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<p class="toa-kit__notice" role="status" aria-live="polite" hidden></p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{% endif %}
|