{# Composants Tera appelés depuis le markdown (Zola 0.23 a supprimé les
   shortcodes : le contenu des pages est templaté directement).

   Les captures suivent la langue : chaque appel passe celle de la page,
   `lang={lang}`, parce qu'un composant ne voit pas le contexte de l'appelant.
   Chaque image existe en JPEG XL (proposé d'abord) et en PNG (repli).

   Une langue sans dossier dans static/img/ retombe sur « en » : le portugais
   emprunte donc les captures anglaises tant que shots.mjs n'a pas fait sa
   passe. Le repli est écrit en dur parce qu'un composant ne voit pas `config`
   non plus, seulement ses propres paramètres. #}

{# Capture pleine page, format téléphone.
   {{<shot name="stats" alt="…" lang={lang} legende="…" />}} #}
{% component shot(name: string, alt: string, lang: string, legende: string = "") %}
{% if not get_image_metadata(path="static/img/" ~ lang ~ "/" ~ name ~ ".png", allow_missing=true) %}{% set lang = "en" %}{% endif %}
{% set meta = get_image_metadata(path="static/img/" ~ lang ~ "/" ~ name ~ ".png", allow_missing=true) %}
<figure class="shot">
  <picture>
    <source type="image/jxl" srcset="{{ get_url(path='img/' ~ lang ~ '/' ~ name ~ '.jxl') }}">
    <img src="{{ get_url(path='img/' ~ lang ~ '/' ~ name ~ '.png') }}" alt="{{ alt }}"
         {% if meta %}width="{{ meta.width }}" height="{{ meta.height }}"{% endif %} loading="lazy" decoding="async">
  </picture>
  {% if legende %}<figcaption>{{ legende }}</figcaption>{% endif %}
</figure>
{% endcomponent shot %}

{# Extrait recadré, posé dans le fil du texte.
   {{<extrait name="x-scopes" alt="…" lang={lang} legende="…" />}} #}
{% component extrait(name: string, alt: string, lang: string, legende: string = "") %}
{% if not get_image_metadata(path="static/img/" ~ lang ~ "/" ~ name ~ ".png", allow_missing=true) %}{% set lang = "en" %}{% endif %}
{% set meta = get_image_metadata(path="static/img/" ~ lang ~ "/" ~ name ~ ".png", allow_missing=true) %}
<figure class="extrait">
  <picture>
    <source type="image/jxl" srcset="{{ get_url(path='img/' ~ lang ~ '/' ~ name ~ '.jxl') }}">
    <img src="{{ get_url(path='img/' ~ lang ~ '/' ~ name ~ '.png') }}" alt="{{ alt }}"
         {% if meta %}width="{{ meta.width }}" height="{{ meta.height }}"{% endif %} loading="lazy" decoding="async">
  </picture>
  {% if legende %}<figcaption>{{ legende }}</figcaption>{% endif %}
</figure>
{% endcomponent extrait %}

{# Deux captures côte à côte (deux étapes, avant et après).
   {{<duo a="…" b="…" alt_a="…" alt_b="…" lang={lang} legende="…" />}} #}
{% component duo(a: string, b: string, alt_a: string, alt_b: string, lang: string, legende: string = "") %}
{% if not get_image_metadata(path="static/img/" ~ lang ~ "/" ~ a ~ ".png", allow_missing=true) %}{% set lang = "en" %}{% endif %}
{% set ma = get_image_metadata(path="static/img/" ~ lang ~ "/" ~ a ~ ".png", allow_missing=true) %}
{% set mb = get_image_metadata(path="static/img/" ~ lang ~ "/" ~ b ~ ".png", allow_missing=true) %}
<figure class="duo">
  <div>
    <picture>
      <source type="image/jxl" srcset="{{ get_url(path='img/' ~ lang ~ '/' ~ a ~ '.jxl') }}">
      <img src="{{ get_url(path='img/' ~ lang ~ '/' ~ a ~ '.png') }}" alt="{{ alt_a }}"
           {% if ma %}width="{{ ma.width }}" height="{{ ma.height }}"{% endif %} loading="lazy" decoding="async">
    </picture>
    <picture>
      <source type="image/jxl" srcset="{{ get_url(path='img/' ~ lang ~ '/' ~ b ~ '.jxl') }}">
      <img src="{{ get_url(path='img/' ~ lang ~ '/' ~ b ~ '.png') }}" alt="{{ alt_b }}"
           {% if mb %}width="{{ mb.width }}" height="{{ mb.height }}"{% endif %} loading="lazy" decoding="async">
    </picture>
  </div>
  {% if legende %}<figcaption>{{ legende }}</figcaption>{% endif %}
</figure>
{% endcomponent duo %}

{# Encadré d'aparté (règle, piège, rappel).
   {% <apart titre="…"> %} … {% </apart> %} #}
{% component apart(titre: string) %}
<aside class="apart">
  <p class="apart-t">{{ titre }}</p>
  {{ body }}
</aside>
{% endcomponent apart %}