{#- 홈. 첫 화면은 문턱이다 — 마크와 한 문장만 두고, 나머지는 스크롤 뒤에 있다.

    루트의 page.children 은 최상위 섹션들이라 글 목록이 여기 없다. 대신
    site.sections 를 돌면서 URL 로 갈래를 찾는다. 테스트나 필터를 쓰지 않고
    문자열을 비교하는 이유는 그 URL 을 만드는 규칙이 이미 home 에 있어서다.

    카피는 전부 [extra] 에 있고 이 파일은 구조만 안다. #}
{% extends "base.html" %}
{% from "partials/ledger.html" import ledger %}

{% block content %}
{%- set ko = page.language == "ko" %}
{%- set home = site.base_path ~ ("/ko/" if ko else "/") %}

<section class="hero-home">
  <div class="wrap">
    <span class="hero-mark" data-rise aria-hidden="true"></span>
    <h1 class="statement" data-rise="1">{{ page.extra.hero_title }}</h1>
    {%- if page.extra.hero_sub %}
    <p class="statement-sub" data-rise="2">{{ page.extra.hero_sub }}</p>
    {%- endif %}
    <a class="door" href="{{ home }}about/" data-rise="3">{{ page.extra.hero_door }}</a>
  </div>
</section>

{#- 글. 맨 위 한 편은 크게, 나머지는 원장으로. 같은 자료를 두 크기로 보여 줄
    뿐이라 두 곳을 따로 관리하지 않는다. #}
{%- for s in site.sections %}
{%- if s.url == home ~ "posts/" and s.pages %}
<section class="room wrap">
  {%- for p in s.pages %}
  {%- if loop.first %}
  <a class="feature" href="{{ p.url }}">
    {#- 미리보기가 있으면 액자가 먼저 선다. poster 만 먼저 오고 영상은 preload="none"
        이라, 손이 닿기 전에는 한 바이트도 안 받는다. 재생은 ui.js 가 건다. #}
    {%- for m in page.extra.preview %}
    {%- if m.url == p.url %}
    <video class="feature-media" poster="{{ asset(m.poster) }}" src="{{ asset(m.video) }}"
           width="960" height="540" muted loop playsinline preload="none"
           aria-hidden="true" tabindex="-1"></video>
    {%- endif %}
    {%- endfor %}
    {#- 이름표. 액자 안에서 그림 옆에 붙는다 — 미술관에서 작품에 딸린 라벨과
        같은 관계라, 따로 떼면 둘이 다른 물건이 된다. #}
    <div class="feature-label">
      {%- if p.date %}
      <time class="feature-date" datetime="{{ p.date.date }}">{{ p.date.year }}.{% if p.date.month < 10 %}0{% endif %}{{ p.date.month }}.{% if p.date.day < 10 %}0{% endif %}{{ p.date.day }}</time>
      {%- endif %}
      <h3 class="feature-title">{{ p.title }}</h3>
      {%- if p.description %}
      <p class="feature-desc">{{ p.description }}</p>
      {%- endif %}
      {#- 네 번째 줄. 카드가 링크라는 건 커서가 알려 주지만, 글 덩이에 아래 끝이
          있어야 라벨이 반쪽 안에 떠 있지 않고 앉는다. #}
      <span class="feature-cta">{{ t("read_post") }}</span>
    </div>
  </a>
  {%- endif %}
  {%- endfor %}

  {#- 갈래 이름과 그 갈래로 가는 문이 한 줄에 선다. 사이의 헤어라인이 둘을 같은
      줄의 양끝으로 묶는다.

      맨 위 글이 이 줄보다 **앞에** 온다. 그 한 편은 갈래의 목록이 아니라 지금
      내놓는 것이고, 머리는 그 뒤에 이어지는 목록의 머리다. 카드를 머리 아래
      첫 항목으로 두면 "Writing 의 첫 줄"로 읽히는데, 크기가 다른 첫 줄이다. #}
  <header class="room-head">
    <h2>{{ t("writing") }}</h2>
    <span class="room-rule" aria-hidden="true"></span>
    <a class="room-door" href="{{ s.url }}">{{ t("all_posts") }}</a>
  </header>

  {#- 맨 위 한 편은 위에서 카드로 냈으므로 건너뛴다. 최대 세 줄 — 그 이상은
      Posts 페이지가 받는다. #}
  {{ ledger(s.pages, 3, false, 1, page.language) }}
</section>
{%- endif %}
{%- endfor %}

{#- 프로젝트. 여기서는 이름과 한 줄만 낸다 — 배지와 링크는 목록이 실어 오지
    않는 값이라, 홈에 두려면 카탈로그를 한 번 더 적어야 한다. 그건 두 곳이
    어긋날 자리를 만드는 일이고, 그 값이 궁금해진 사람은 Projects 로 간다. #}
{%- for s in site.sections %}
{%- if s.url == home ~ "projects/" and s.pages %}
<section class="room wrap">
  <header class="room-head">
    <h2>{{ s.title }}</h2>
    <span class="room-rule" aria-hidden="true"></span>
    <a class="room-door" href="{{ s.url }}">{{ t("all_projects") }}</a>
  </header>
  {#- 모자이크. 첫 장이 크고 나머지 셋이 옆에 쌓인다 — 대칭 격자는 여섯 개가
      다 같은 무게라고 말하는데, 갈래에는 앞에 세울 것이 있다.
      그림은 카탈로그가 준다. 목록은 이름과 설명만 준다. #}
  <div class="mosaic">
    {%- for m in page.extra.mosaic %}
    {%- for p in s.pages %}
    {%- if p.url == m.url %}
    <a class="mtile" href="{{ p.url }}" style="--tint: {{ m.accent }}">
      <span class="mtile-art" aria-hidden="true">
        {%- if m.cover %}
        <img src="{{ asset(m.cover) }}" alt="" loading="lazy" decoding="async">
        {%- elif m.mark %}
        <span class="mtile-mark" style="--mark-src: url('/{{ m.mark }}')"></span>
        {%- endif %}
      </span>
      <span class="mtile-body">
        <span class="mtile-title">{{ p.title }}</span>
        {%- if p.description %}
        <span class="mtile-blurb">{{ p.description }}</span>
        {%- endif %}
        {#- 별 개수는 stars.py 가 카탈로그에 구워 둔 값이다. 0 이어도 낸다. #}
        {%- if m.repo %}
        <span class="mtile-stars stars">{{ m.stars }} ★</span>
        {%- endif %}
      </span>
    </a>
    {%- endif %}
    {%- endfor %}
    {%- endfor %}
  </div>
</section>
{%- endif %}
{%- endfor %}
{% endblock %}