templates/projects.html (4401B)
1 {#- Projects. 이 사이트에서 가장 많은 것을 말하는 페이지다.
2
3 목록이 아니라 갤러리다. 위에 액자 몇 점, 그 아래 갈래마다 가운데 정렬
4 타일 벽. 행과 구분선이 아니라 타일과 여백이 나눈다.
5
6 카탈로그는 이 페이지의 [extra] 에 산다. 목록(PageRefCtx)은 title·
7 description·url·weight·date 만 실어 오므로 언어 배지와 링크는 거기서 나올
8 수 없다. 대신 모든 url 이 실제 페이지를 가리켜야 하고 CI 가 그걸 검사한다.
9
10 스키마는 총체적이다. 없는 값은 "" 나 [] 이고 키를 빼지 않는다. #}
11 {% extends "base.html" %}
12 {% from "partials/icons.html" import i_site, i_repo %}
13
14 {% block content %}
15 <div class="wrap">
16 <header class="page-head">
17 <h1 class="page-title">{{ page.title }}</h1>
18 {%- if page.description %}
19 <p class="page-lede">{{ page.description }}</p>
20 {%- endif %}
21 </header>
22
23 <div class="fence" aria-hidden="true">+++</div>
24
25 {%- if page.content %}
26 <div class="prose prose-intro">{{ page.content | safe }}</div>
27 {%- endif %}
28
29 {#- 골라 둔 것. 액자에는 테두리가 없고 그림에만 있다. #}
30 {%- if page.extra.featured %}
31 <section class="frames" aria-label="{{ t("selected") }}">
32 {%- for p in page.extra.featured %}
33 <article class="frame">
34 <a class="frame-media" href="{{ p.url }}" aria-hidden="true" tabindex="-1">
35 {%- if p.cover %}
36 <img src="{{ asset(p.cover) }}" alt="" loading="lazy" decoding="async">
37 {%- elif p.mark %}
38 <span class="frame-mark" style="--mark-src: url('/{{ p.mark }}')"></span>
39 {%- else %}
40 {#- 아직 그림이 없는 자리. 회색으로 때우지 않고 비었다고 말한다. #}
41 <span class="noimg"></span>
42 {%- endif %}
43 </a>
44 <h2 class="frame-title">
45 {%- if p.mark %}<span class="chip-mark" style="--mark-src: url('/{{ p.mark }}')" aria-hidden="true"></span>{% endif %}
46 <a href="{{ p.url }}">{{ p.name }}</a>
47 </h2>
48 <p class="frame-blurb">{{ p.blurb }}</p>
49 <div class="frame-meta">
50 <span class="lang">{{ p.lang }}</span>
51 {%- if p.repo %}
52 <span class="lang stars">{{ p.stars }} ★</span>
53 {%- endif %}
54 {%- if p.site %}
55 <a href="{{ p.site }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("website") }}" data-tooltip="{{ t("website") }}">{{ i_site() }}</a>
56 {%- endif %}
57 {%- if p.repo %}
58 <a href="{{ p.repo }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("source") }}" data-tooltip="{{ t("source") }}">{{ i_repo() }}</a>
59 {%- endif %}
60 </div>
61 </article>
62 {%- endfor %}
63 </section>
64 {%- endif %}
65
66 {#- 갈래별 타일 벽. 순서는 TOML 에 적힌 그대로다 — taxonomy 가 없는 대신
67 분류가 곧 저자의 편집 결정이 된다. #}
68 {%- for g in page.extra.group %}
69 <section id="{{ g.id }}">
70 <header class="room-head">
71 <h2>{{ g.label }}</h2>
72 <span class="room-rule" aria-hidden="true"></span>
73 </header>
74 {%- if g.note %}
75 <p class="room-head-sub">{{ g.note }}</p>
76 {%- endif %}
77
78 <div class="tiles">
79 {%- for p in g.item %}
80 <article class="tile">
81 <h3 class="tile-title">
82 {%- if p.mark %}<span class="chip-mark" style="--mark-src: url('/{{ p.mark }}')" aria-hidden="true"></span>{% endif %}
83 <a class="tile-link" href="{{ p.url }}">{{ p.name }}</a>
84 </h3>
85 <p class="tile-blurb">{{ p.blurb }}</p>
86 <p class="tile-meta">
87 <span class="lang">{{ p.lang }}</span>
88 {%- if p.repo %}
89 <span class="stars">{{ p.stars }} ★</span>
90 {%- endif %}
91 </p>
92 <p class="tile-links">
93 {%- if p.site %}
94 <a href="{{ p.site }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("website") }}" data-tooltip="{{ t("website") }}">{{ i_site() }}</a>
95 {%- endif %}
96 {%- if p.repo %}
97 <a href="{{ p.repo }}" target="_blank" rel="noopener noreferrer" aria-label="{{ p.name }} — {{ t("source") }}" data-tooltip="{{ t("source") }}">{{ i_repo() }}</a>
98 {%- endif %}
99 </p>
100 </article>
101 {%- endfor %}
102 </div>
103 </section>
104 {%- endfor %}
105 </div>
106 {% endblock %}