{#- Projects. 이 사이트에서 가장 많은 것을 말하는 페이지다.

    목록이 아니라 갤러리다. 위에 액자 몇 점, 그 아래 갈래마다 가운데 정렬
    타일 벽. 행과 구분선이 아니라 타일과 여백이 나눈다.

    카탈로그는 이 페이지의 [extra] 에 산다. 목록(PageRefCtx)은 title·
    description·url·weight·date 만 실어 오므로 언어 배지와 링크는 거기서 나올
    수 없다. 대신 모든 url 이 실제 페이지를 가리켜야 하고 CI 가 그걸 검사한다.

    스키마는 총체적이다. 없는 값은 "" 나 [] 이고 키를 빼지 않는다. #}
{% extends "base.html" %}
{% from "partials/icons.html" import i_site, i_repo %}

{% block content %}
<div class="wrap">
  <header class="page-head">
    <h1 class="page-title">{{ page.title }}</h1>
    {%- if page.description %}
    <p class="page-lede">{{ page.description }}</p>
    {%- endif %}
  </header>

  <div class="fence" aria-hidden="true">+++</div>

  {%- if page.content %}
  <div class="prose prose-intro">{{ page.content | safe }}</div>
  {%- endif %}

  {#- 골라 둔 것. 액자에는 테두리가 없고 그림에만 있다. #}
  {%- if page.extra.featured %}
  <section class="frames" aria-label="{{ t("selected") }}">
    {%- for p in page.extra.featured %}
    <article class="frame">
      <a class="frame-media" href="{{ p.url }}" aria-hidden="true" tabindex="-1">
        {%- if p.cover %}
        <img src="{{ asset(p.cover) }}" alt="" loading="lazy" decoding="async">
        {%- elif p.mark %}
        <span class="frame-mark" style="--mark-src: url('/{{ p.mark }}')"></span>
        {%- else %}
        {#- 아직 그림이 없는 자리. 회색으로 때우지 않고 비었다고 말한다. #}
        <span class="noimg"></span>
        {%- endif %}
      </a>
      <h2 class="frame-title">
        {%- if p.mark %}<span class="chip-mark" style="--mark-src: url('/{{ p.mark }}')" aria-hidden="true"></span>{% endif %}
        <a href="{{ p.url }}">{{ p.name }}</a>
      </h2>
      <p class="frame-blurb">{{ p.blurb }}</p>
      <div class="frame-meta">
        <span class="lang">{{ p.lang }}</span>
        {%- if p.repo %}
        <span class="lang stars">{{ p.stars }} ★</span>
        {%- endif %}
        {%- if p.site %}
        <a href="{{ p.site }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("website") }}" data-tooltip="{{ t("website") }}">{{ i_site() }}</a>
        {%- endif %}
        {%- if p.repo %}
        <a href="{{ p.repo }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("source") }}" data-tooltip="{{ t("source") }}">{{ i_repo() }}</a>
        {%- endif %}
      </div>
    </article>
    {%- endfor %}
  </section>
  {%- endif %}

  {#- 갈래별 타일 벽. 순서는 TOML 에 적힌 그대로다 — taxonomy 가 없는 대신
      분류가 곧 저자의 편집 결정이 된다. #}
  {%- for g in page.extra.group %}
  <section id="{{ g.id }}">
    <header class="room-head">
      <h2>{{ g.label }}</h2>
      <span class="room-rule" aria-hidden="true"></span>
    </header>
    {%- if g.note %}
    <p class="room-head-sub">{{ g.note }}</p>
    {%- endif %}

    <div class="tiles">
      {%- for p in g.item %}
      <article class="tile">
        <h3 class="tile-title">
          {%- if p.mark %}<span class="chip-mark" style="--mark-src: url('/{{ p.mark }}')" aria-hidden="true"></span>{% endif %}
          <a class="tile-link" href="{{ p.url }}">{{ p.name }}</a>
        </h3>
        <p class="tile-blurb">{{ p.blurb }}</p>
        <p class="tile-meta">
          <span class="lang">{{ p.lang }}</span>
          {%- if p.repo %}
          <span class="stars">{{ p.stars }} ★</span>
          {%- endif %}
        </p>
        <p class="tile-links">
          {%- if p.site %}
          <a href="{{ p.site }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("website") }}" data-tooltip="{{ t("website") }}">{{ i_site() }}</a>
          {%- endif %}
          {%- if p.repo %}
          <a href="{{ p.repo }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("source") }}" data-tooltip="{{ t("source") }}">{{ i_repo() }}</a>
          {%- endif %}
        </p>
      </article>
      {%- endfor %}
    </div>
  </section>
  {%- endfor %}
</div>
{% endblock %}