116 lines
4.9 KiB
Django/Jinja
116 lines
4.9 KiB
Django/Jinja
{# Level-aware project About — rendered when about.json declares kind="project".
|
|
Context: `about` (view-model), `lang`, `texts`.
|
|
|
|
Uses the ontoref `.doc-*` document chrome (styles/custom.css) so the SSR site
|
|
matches outreach/web. GENERIC over a block vocabulary: a section is
|
|
{ key, title, blocks }, each block a typed primitive (prose | timeline |
|
|
cards | links | graph | kv). New SECTIONS of an existing block type are
|
|
projector-only changes (gen-about-pages.nu); only a brand-new block TYPE
|
|
touches this template. Path/href values are `| safe` (trusted contract
|
|
values, not user input). Bilingual fields indexed by `lang`. #}
|
|
<div class="about-doc">
|
|
<div class="doc-wrap">
|
|
|
|
<header class="doc-head">
|
|
<p class="doc-eyebrow">{{ about.level_id }}</p>
|
|
<h1>{% if lang == "es" %}Acerca de{% else %}About{% endif %} {{ about.level_id }}</h1>
|
|
{% if about.hero and about.hero[lang] %}
|
|
<p class="doc-lead">{{ about.hero[lang] }}</p>
|
|
{% endif %}
|
|
</header>
|
|
|
|
{% set about_img = "ontoref-about-es" if lang == "es" else "ontoref-about-en" %}
|
|
<picture>
|
|
<source srcset="/images/{{ about_img }}.avif" type="image/avif">
|
|
<source srcset="/images/{{ about_img }}.webp" type="image/webp">
|
|
<img src="/images/{{ about_img }}.webp"
|
|
alt="{% if lang == 'es' %}Acerca de{% else %}About{% endif %} {{ about.level_id }}"
|
|
width="1536" height="1024" loading="lazy"
|
|
style="display:block;margin:1.5rem auto 0;max-width:48rem;width:100%;height:auto;border-radius:.5rem" />
|
|
</picture>
|
|
|
|
{% if about.sections | length > 1 %}
|
|
<nav class="doc-toc">
|
|
<p>{% if lang == "es" %}Secciones{% else %}Sections{% endif %}</p>
|
|
<ul>
|
|
{% for section in about.sections %}
|
|
<li><a href="#{{ section.key }}">{{ section.title[lang] }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
{% for section in about.sections %}
|
|
<section class="doc-section" id="{{ section.key }}">
|
|
<h2>{{ section.title[lang] }}</h2>
|
|
|
|
{% for block in section.blocks %}
|
|
|
|
{% if block.type == "prose" %}
|
|
<div class="doc-prose">{{ (block.html_es if lang == "es" and block.html_es else block.html) | safe }}</div>
|
|
|
|
{% elif block.type == "timeline" %}
|
|
{% if block.started %}
|
|
<p class="doc-mono" style="margin:0 0 .75rem">{% if lang == "es" %}Desde{% else %}Started{% endif %} {{ block.started }}</p>
|
|
{% endif %}
|
|
<ul class="doc-list">
|
|
{% for m in block.items %}
|
|
<li>
|
|
<span class="doc-mono">{{ m.date }}</span>
|
|
<span>{{ m.text[lang] }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
{% elif block.type == "cards" %}
|
|
{% for grp in block.groups %}
|
|
{% if grp.label %}<h3 class="doc-idx-h">{{ grp.label }} <span class="doc-count">({{ grp.items | length }})</span></h3>{% endif %}
|
|
<ul class="doc-cards">
|
|
{% for n in grp.items %}
|
|
{% set card_body = n.body_es if lang == "es" and n.body_es else n.body %}
|
|
<li>
|
|
<p class="doc-card-title">{{ n.title_es if lang == "es" and n.title_es else n.title }}{% if n.meta %} <span class="doc-card-meta">· {{ n.meta }}</span>{% endif %}</p>
|
|
{% if card_body %}<p class="doc-card-body">{{ card_body }}</p>{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endfor %}
|
|
|
|
{% elif block.type == "links" %}
|
|
{% for grp in block.groups %}
|
|
{% if grp.label %}<h3 class="doc-idx-h">{{ grp.label }} <span class="doc-count">({{ grp.items | length }})</span></h3>{% endif %}
|
|
<ul class="doc-idx-list">
|
|
{% for i in grp.items %}
|
|
<li>
|
|
<a href="{{ i.href | safe }}">{% if i.code %}<span class="doc-mono">{{ i.code }}</span> {% endif %}{{ i.text }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endfor %}
|
|
{% if block.browse and block.browse.href %}
|
|
<a href="{{ block.browse.href | safe }}" class="doc-btn">{{ block.browse.label[lang] }} →</a>
|
|
{% endif %}
|
|
|
|
{% elif block.type == "graph" %}
|
|
{% if block.svg %}<div class="doc-graph">{{ block.svg | safe }}</div>{% endif %}
|
|
{% if block.live and block.live.href %}
|
|
<a href="{{ (block.live.href_es if lang == "es" and block.live.href_es else block.live.href) | safe }}" class="doc-btn">↗ {{ block.live.label[lang] }}</a>
|
|
{% endif %}
|
|
|
|
{% elif block.type == "kv" %}
|
|
<table class="doc-kv"><tbody>
|
|
{% for r in block.rows %}
|
|
<tr><td>{{ r.k_es if lang == "es" and r.k_es else r.k }}</td><td>{{ r.v_es if lang == "es" and r.v_es else r.v }}</td></tr>
|
|
{% endfor %}
|
|
</tbody></table>
|
|
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{% include "partials/image-zoom.j2" %}
|