templates/project.html (6619B)
1 {#- 프로젝트 한 장. 두 등급뿐이다: 랜딩이거나 브리프거나. 중간 등급을 만들면
2 어느 프로젝트가 어디에 속하는지 매번 새로 판단해야 한다.
3
4 등급은 `tier` 가 정하지만 블록의 유무는 데이터가 정한다 — features 가 []
5 면 그 섹션이 없다. 빈 배열이 이미 "없음"이라 플래그를 따로 두지 않는다.
6
7 별 개수는 tools/stars.py 가 front matter 에 구워 둔 값이다. 렌더 중에
8 네트워크를 부르면 재현되는 빌드가 아니게 되고, 브라우저에서 부르면 익명
9 API 한도(IP 당 60/시간)에 걸린다. 0 이어도 보여 준다 — 그게 사실이고,
10 없는 항목만 숫자가 빠지면 줄이 어긋난다. #}
11 {% extends "base.html" %}
12 {% from "partials/icons.html" import i_out, i_arrow %}
13 {% from "partials/lang.html" import lang_switch %}
14
15 {% block content %}
16 <div class="{{ "wrap" if page.extra.tier == "landing" else "wrap wrap-read" }} project" data-tier="{{ page.extra.tier }}"
17 {%- if page.extra.accent %} style="--accent: {{ page.extra.accent }}"{% endif %}>
18
19 {%- if page.section %}
20 <a class="back" href="{{ page.section.url }}">
21 <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H6M11 6l-6 6 6 6"/></svg>
22 <span>{{ page.section.title }}</span>
23 </a>
24 {%- endif %}
25
26 <header class="hero">
27 <div class="hero-main">
28 {%- if page.extra.eyebrow %}
29 <p class="eyebrow">{{ page.extra.eyebrow }}</p>
30 {%- endif %}
31 {#- 이름 옆의 작은 마크가 명패의 시작이다. 없으면 이름만 선다. #}
32 <h1 class="hero-name">
33 {%- if page.extra.mark %}<span class="chip-mark" style="--mark-src: url('/{{ page.extra.mark }}')" aria-hidden="true"></span>
34 {%- elif page.extra.logo %}<span class="chip-mark" aria-hidden="true"><img src="{{ asset(page.extra.logo) }}" alt=""></span>
35 {%- endif %}
36 <span>{{ page.title }}</span>
37 </h1>
38 {%- if page.extra.tagline %}
39 <p class="hero-tagline">{{ page.extra.tagline }}</p>
40 {%- endif %}
41
42 <ul class="badges">
43 {%- if page.extra.lang %}<li>{{ page.extra.lang }}</li>{% endif %}
44 {%- if page.extra.license %}<li>{{ page.extra.license }}</li>{% endif %}
45 {%- if page.extra.version %}<li>{{ page.extra.version }}</li>{% endif %}
46 {%- if page.extra.platform %}<li>{{ page.extra.platform }}</li>{% endif %}
47 {%- if page.extra.repo %}<li class="stars">{{ page.extra.stars }} ★</li>{% endif %}
48 </ul>
49
50 {{ lang_switch(page) }}
51
52 {%- if page.extra.actions %}
53 <div class="btn-row">
54 {%- for a in page.extra.actions %}
55 <a class="btn btn-{{ a.style }}" href="{{ a.url }}"{% if a.url is startingwith "http" %} target="_blank" rel="noopener noreferrer"{% endif %}>
56 <span>{{ a.label }}</span>{{ i_out() }}
57 </a>
58 {%- endfor %}
59 </div>
60 {%- endif %}
61 </div>
62
63 {#- 옆칸은 규격이 하나다. 마크 → 로고 → "그림 없음". 좁은 화면에서는 지우지
64 않고 위로 올린다 — 지우면 그 프로젝트만 그림이 없는 것처럼 보인다. #}
65 <div class="hero-aside" aria-hidden="true">
66 {%- if page.extra.mark %}
67 <span class="medallion medallion-mark" style="--mark-src: url('/{{ page.extra.mark }}')"></span>
68 {%- elif page.extra.logo %}
69 <span class="medallion"><img src="{{ asset(page.extra.logo) }}" alt="" loading="eager" decoding="async"></span>
70 {%- else %}
71 <span class="medallion"><span class="noimg"></span></span>
72 {%- endif %}
73 </div>
74 </header>
75
76 {%- if page.extra.facts %}
77 <section class="facts">
78 {%- for f in page.extra.facts %}
79 <div class="fact">
80 <span class="fact-value">{{ f.value }}</span>
81 <span class="fact-label">{{ f.label }}</span>
82 </div>
83 {%- endfor %}
84 </section>
85 {%- endif %}
86
87 {%- if page.content %}
88 <div class="prose">{{ page.content | safe }}</div>
89 {%- endif %}
90
91 {%- if page.extra.features %}
92 <section class="block">
93 <header class="block-head">
94 {%- if page.extra.features_eyebrow %}<p class="eyebrow">{{ page.extra.features_eyebrow }}</p>{% endif %}
95 {%- if page.extra.features_title %}<h2 class="block-title">{{ page.extra.features_title }}</h2>{% endif %}
96 {%- if page.extra.features_intro %}<p class="block-intro">{{ page.extra.features_intro }}</p>{% endif %}
97 </header>
98 <div class="lattice">
99 {%- for f in page.extra.features %}
100 <article class="cell">
101 {#- 번호는 저자가 적지 않는다. 순서가 곧 번호이므로 루프가 만든다. #}
102 <span class="cell-index" aria-hidden="true">{% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
103 <h3 class="cell-title">{{ f.title }}</h3>
104 <p class="cell-desc">{{ f.desc }}</p>
105 </article>
106 {%- endfor %}
107 </div>
108 </section>
109 {%- endif %}
110
111 {%- if page.extra.session_lines %}
112 <section class="block">
113 <header class="block-head">
114 {%- if page.extra.session_eyebrow %}<p class="eyebrow">{{ page.extra.session_eyebrow }}</p>{% endif %}
115 {%- if page.extra.session_title %}<h2 class="block-title">{{ page.extra.session_title }}</h2>{% endif %}
116 </header>
117 <div class="term">
118 <div class="term-bar">
119 <span class="term-dots" aria-hidden="true"><i></i><i></i><i></i></span>
120 <span class="term-name">{{ page.extra.session_shell }}</span>
121 </div>
122 <pre class="term-body"><code>{%- for l in page.extra.session_lines %}
123 <span class="term-{{ l.kind }}">{{ l.text }}</span>
124 {%- endfor %}</code></pre>
125 </div>
126 {%- if page.extra.session_caption %}
127 <p class="term-caption">{{ page.extra.session_caption }}</p>
128 {%- endif %}
129 </section>
130 {%- endif %}
131
132 {%- if page.extra.cta_title %}
133 <section class="cta">
134 <div class="cta-inner">
135 <h2 class="cta-title">{{ page.extra.cta_title }}</h2>
136 {%- if page.extra.cta_text %}<p class="cta-text">{{ page.extra.cta_text }}</p>{% endif %}
137 {%- if page.extra.cta_actions %}
138 <div class="btn-row">
139 {%- for a in page.extra.cta_actions %}
140 <a class="btn btn-{{ a.style }}" href="{{ a.url }}"{% if a.url is startingwith "http" %} target="_blank" rel="noopener noreferrer"{% endif %}>
141 <span>{{ a.label }}</span>{{ i_arrow() }}
142 </a>
143 {%- endfor %}
144 </div>
145 {%- endif %}
146 </div>
147 </section>
148 {%- endif %}
149 </div>
150 {% endblock %}