docs/templates/landing.html (10450B)
1 {#- 랜딩. base.html을 상속하지 않는 독립 문서다 — 문서 크롬 없이 자체 구조를
2 가진다: 고정 반투명 내비 / 히어로 / 벤토 그리드 / 푸터.
3 브랜드는 이름 그대로 squeeze — 카피와 연출이 "쥐어짜기"를 말한다.
4 테마는 docs와 같은 계약: data-theme을 템플릿이 쓰고, localStorage("theme",
5 docs와 같은 키)가 프리페인트 스크립트로 덮는다. 그래서 문서에서 고른 테마가
6 랜딩에도 그대로 따라온다. 카피는 전부 extra에 있고(양어 키 1:1), 이 파일은
7 구조만 안다. #}
8 {%- set ko = page.language == "ko" %}
9 {%- set home = site.base_path ~ ("/ko/" if ko else "/") %}
10 <!doctype html>
11 <html lang="{{ page.language }}" data-theme="dark">
12 <head>
13 <meta charset="utf-8">
14 <meta name="viewport" content="width=device-width, initial-scale=1">
15 <title>{{ site.title }} — {{ page.description }}</title>
16 <meta name="description" content="{{ page.description }}">
17 <link rel="canonical" href="{{ page.permalink }}">
18 {%- if site.feed %}
19 <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.feed }}">
20 {%- endif %}
21 <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="{{ asset("images/favicon-dark.png") }}">
22 <link rel="icon" type="image/png" href="{{ asset("images/favicon.png") }}">
23 <link rel="apple-touch-icon" href="{{ asset("images/apple-touch-icon.png") }}">
24 {%- for lang in page.translations %}
25 <link rel="alternate" hreflang="{{ lang.code }}" href="{{ site.origin }}{{ lang.url }}">
26 {%- endfor %}
27 <meta property="og:type" content="website">
28 <meta property="og:site_name" content="{{ site.title }}">
29 <meta property="og:title" content="{{ page.title }}">
30 <meta property="og:url" content="{{ page.permalink }}">
31 <meta property="og:locale" content="{{ "ko_KR" if ko else "en_US" }}">
32 <meta property="og:description" content="{{ page.description }}">
33 <meta name="twitter:card" content="summary">
34 <link rel="stylesheet" href="{{ asset("css/landing.css") }}">
35 <script>
36 /* 첫 페인트 전에 저장된 테마를 얹는다. base.html과 같은 키·같은 이유. */
37 (function(){try{var t=localStorage.getItem("theme");if(t)document.documentElement.dataset.theme=t}catch(e){}})();
38 </script>
39 <script src="{{ asset("js/motion.js") }}" defer></script>
40 <script src="{{ asset("js/landing.js") }}" defer></script>
41 </head>
42 <body>
43 <a class="skip" href="#main">{{ t("skip_to_content") }}</a>
44
45 <header class="nav">
46 <div class="nav-in">
47 <a class="mark" href="{{ home }}">
48 <img src="{{ asset("images/logo.png") }}" alt="" width="121" height="120">
49 <span>{{ site.title }}</span>
50 </a>
51 <nav class="nav-links">
52 <a href="{{ home }}start/">{{ t("documentation") }}</a>
53 <a href="{{ home }}benchmark/">{{ page.extra.foot_benchmark }}</a>
54 {%- for lang in page.translations %}
55 <a href="{{ lang.url }}" hreflang="{{ lang.code }}">{{ lang.name }}</a>
56 {%- endfor %}
57 <a class="nav-icon" href="https://github.com/debuman/sqzass" aria-label="GitHub" title="GitHub">
58 <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
59 </a>
60 <button class="nav-icon theme-toggle" type="button" aria-label="{{ t("theme") }}" title="{{ t("theme") }}">
61 <svg class="i-sun" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
62 <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
63 </svg>
64 <svg class="i-moon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
65 <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>
66 </svg>
67 </button>
68 </nav>
69 </div>
70 </header>
71
72 <main id="main">
73 <section class="hero">
74 <div class="blob" aria-hidden="true"></div>
75 <div class="inner">
76 <p class="kicker" data-reveal>{{ page.extra.hero_kicker }}</p>
77 <h1 class="display" data-reveal>{{ page.extra.hero_title_a }}<br><em data-squeeze>{{ page.extra.hero_title_b }}</em></h1>
78 <p class="sub" data-reveal>{{ page.extra.hero_sub }}</p>
79 <p class="cta" data-reveal>
80 <a class="btn btn-primary" href="{{ home }}start/">{{ page.extra.cta_start }}</a>
81 <a class="btn btn-ghost" href="https://github.com/debuman/sqzass">{{ page.extra.cta_github }}</a>
82 </p>
83 {#- 제일 중요한 것: 설치 명령. CTA 바로 아래에 크게 둔다.
84
85 채널 전환은 radio + CSS만으로 한다. JS 없이도 세 명령이 전부 DOM에 있고
86 선택이 동작한다 — 이 페이지에서 가장 중요한 내용이 스크립트 로딩에
87 기대면 안 된다. radio를 쓴 건 접근성 때문이기도 하다: 스크린리더가
88 "curl, 라디오 버튼, 선택됨, 3개 중 1"로 읽는 게 이 UI의 실제 의미다. #}
89 <fieldset class="install" data-reveal>
90 <legend class="sr-only">{{ page.extra.install_pick }}</legend>
91 <div class="pick-tabs">
92 {#- JS가 움직이는 표시자. 스크립트가 없으면 라벨 자신의 배경이 선택을
93 나타내고 이건 숨어 있다 — 선택 상태가 JS에 기대면 안 된다. #}
94 <span class="pick-marker" aria-hidden="true"></span>
95 {%- for m in page.extra.install %}
96 <input class="pick-in" type="radio" name="install-channel" id="inst-{{ loop.index }}"{% if loop.first %} checked{% endif %}>
97 <label class="pick-tab" for="inst-{{ loop.index }}">{{ m.label }}</label>
98 {%- endfor %}
99 </div>
100 <div class="pick-panels">
101 {%- for m in page.extra.install %}
102 {%- set cmd = m.cmd if m.cmd else "curl -fsSL " ~ site.origin ~ site.base_path ~ "/install.sh | sh" %}
103 <div class="pick-panel">
104 <code>{{ cmd }}</code>
105 <button class="inst-copy" type="button" data-copy-text="{{ cmd }}"
106 aria-label="{{ t("copy") }}" data-copied="{{ t("copied") }}">
107 <svg class="i-copy" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
108 <svg class="i-check" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
109 </button>
110 </div>
111 {%- endfor %}
112 </div>
113 </fieldset>
114 {#- 에이전트용 프롬프트. 설치 명령과 나란히 놓지 않고 카드 밖에 따로 둔다 —
115 붙여 넣을 곳이 셸이 아니라 다른 도구라, 같은 탭에 섞으면 어느 쪽이
116 어디로 가는 것인지 흐려진다. #}
117 <p class="install-note" data-reveal>{{ page.extra.install_note }}</p>
118 <p class="install-agent" data-reveal>
119 <button class="agent-copy" type="button"
120 data-copy-text="{{ page.extra.install_prompt }}"
121 data-copied="{{ t("copied") }}">
122 <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
123 <span class="copy-label">{{ page.extra.install_prompt_label }}</span>
124 </button>
125 </p>
126 <div class="lede" data-reveal>
127 {{ page.content | safe }}
128 </div>
129 </div>
130 </section>
131
132 <section class="bento-wrap" aria-label="{{ page.extra.bento_label }}">
133 <div class="inner">
134 <div class="bento">
135
136 <article class="tile t-bench" data-reveal>
137 <h2>{{ page.extra.bench_title }}</h2>
138 <p class="note">{{ page.extra.bench_note }}</p>
139 {%- for row in page.extra.bench %}
140 <div class="row">
141 <h3>{{ row.label }}</h3>
142 <div class="meas us">
143 <span class="who">sqzass</span>
144 <svg class="track" aria-hidden="true" preserveAspectRatio="none">
145 <rect class="fill" data-bar width="{{ row.us_w }}" height="100%" rx="3"></rect>
146 </svg>
147 <span class="val">{{ row.us_ms }} ms</span>
148 </div>
149 <div class="meas">
150 <span class="who">Hugo</span>
151 <svg class="track" aria-hidden="true" preserveAspectRatio="none">
152 <rect class="fill" data-bar width="{{ row.them_w }}" height="100%" rx="3"></rect>
153 </svg>
154 <span class="val">{{ row.them_ms }} ms</span>
155 </div>
156 </div>
157 {%- endfor %}
158 <p class="tile-link"><a href="{{ home }}benchmark/">{{ page.extra.bench_more }}</a></p>
159 </article>
160
161 <article class="tile t-zero" data-reveal>
162 <p class="zero-num">0</p>
163 <p class="note">{{ page.extra.zero_label }}</p>
164 </article>
165
166 {%- for f in page.extra.features %}
167 <article class="tile{% if loop.last %} t-wide{% endif %}" data-reveal>
168 <h2>{{ f.title }}</h2>
169 <p class="note">{{ f.body }}</p>
170 </article>
171 {%- endfor %}
172
173 </div>
174 </div>
175 </section>
176
177 </main>
178
179 {%- include "partials/colophon.html" %}
180 </body>
181 </html>