@zeropress/build-pages 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,6 @@
1
+ <section class="shell not-found">
2
+ <p class="eyebrow">404</p>
3
+ <h1>Page not found</h1>
4
+ <p class="lede">The page you are looking for is not part of the current documentation build.</p>
5
+ <a class="button-link" href="/">Return home</a>
6
+ </section>
@@ -0,0 +1,569 @@
1
+ :root {
2
+ color-scheme: light dark;
3
+ --bg: #f8fafc;
4
+ --surface: #ffffff;
5
+ --ink: #101828;
6
+ --muted: #667085;
7
+ --line: #d0d5dd;
8
+ --accent: #2563eb;
9
+ --accent-soft: #dbeafe;
10
+ --code-bg: #f2f4f7;
11
+ --header-bg: rgba(248, 250, 252, 0.92);
12
+ --prose-ink: #344054;
13
+ --pre-bg: #101828;
14
+ --pre-ink: #f8fafc;
15
+ --button-ink: #ffffff;
16
+ --alert-note: #2563eb;
17
+ --alert-tip: #059669;
18
+ --alert-important: #7c3aed;
19
+ --alert-warning: #d97706;
20
+ --alert-caution: #dc2626;
21
+ --radius: 8px;
22
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
23
+ }
24
+
25
+ @media (prefers-color-scheme: dark) {
26
+ :root {
27
+ color-scheme: dark;
28
+ --bg: #111316;
29
+ --surface: #1b1f24;
30
+ --ink: #f3f5f7;
31
+ --muted: #a7b0bb;
32
+ --line: #363d46;
33
+ --accent: #5eead4;
34
+ --accent-soft: rgba(94, 234, 212, 0.14);
35
+ --code-bg: #252b32;
36
+ --header-bg: rgba(17, 19, 22, 0.92);
37
+ --prose-ink: #d9e0e7;
38
+ --pre-bg: #080b0f;
39
+ --pre-ink: #f5f7fa;
40
+ --button-ink: #08110f;
41
+ --alert-note: #60a5fa;
42
+ --alert-tip: #34d399;
43
+ --alert-important: #a78bfa;
44
+ --alert-warning: #fbbf24;
45
+ --alert-caution: #f87171;
46
+ }
47
+ }
48
+
49
+ * {
50
+ box-sizing: border-box;
51
+ }
52
+
53
+ body {
54
+ margin: 0;
55
+ background: var(--bg);
56
+ color: var(--ink);
57
+ line-height: 1.6;
58
+ }
59
+
60
+ a {
61
+ color: var(--accent);
62
+ }
63
+
64
+ .skip-link {
65
+ position: absolute;
66
+ left: 1rem;
67
+ top: 1rem;
68
+ transform: translateY(-200%);
69
+ background: var(--ink);
70
+ color: var(--bg);
71
+ padding: 0.5rem 0.75rem;
72
+ border-radius: 6px;
73
+ z-index: 10;
74
+ }
75
+
76
+ .skip-link:focus {
77
+ transform: translateY(0);
78
+ }
79
+
80
+ .shell {
81
+ width: min(1120px, calc(100% - 2rem));
82
+ margin: 0 auto;
83
+ }
84
+
85
+ .site-header {
86
+ background: var(--header-bg);
87
+ border-bottom: 1px solid var(--line);
88
+ position: sticky;
89
+ top: 0;
90
+ z-index: 5;
91
+ backdrop-filter: blur(12px);
92
+ }
93
+
94
+ .site-header__inner {
95
+ min-height: 4rem;
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: space-between;
99
+ gap: 1.5rem;
100
+ }
101
+
102
+ .brand {
103
+ color: var(--ink);
104
+ font-weight: 750;
105
+ text-decoration: none;
106
+ }
107
+
108
+ .site-nav ul {
109
+ list-style: none;
110
+ margin: 0;
111
+ padding: 0;
112
+ }
113
+
114
+ .site-nav ul {
115
+ display: flex;
116
+ flex-wrap: wrap;
117
+ gap: 0.25rem 1rem;
118
+ justify-content: flex-end;
119
+ }
120
+
121
+ .site-nav a {
122
+ color: var(--muted);
123
+ text-decoration: none;
124
+ font-size: 0.94rem;
125
+ font-weight: 600;
126
+ }
127
+
128
+ .site-nav a:hover {
129
+ color: var(--accent);
130
+ }
131
+
132
+ .hero {
133
+ background: var(--surface);
134
+ border-bottom: 1px solid var(--line);
135
+ }
136
+
137
+ .hero__inner {
138
+ padding: 2rem 0 4rem;
139
+ }
140
+
141
+ .eyebrow {
142
+ margin: 0 0 0.75rem;
143
+ color: var(--accent);
144
+ font-size: 0.78rem;
145
+ font-weight: 750;
146
+ letter-spacing: 0;
147
+ text-transform: uppercase;
148
+ }
149
+
150
+ h1,
151
+ h2,
152
+ h3 {
153
+ line-height: 1.2;
154
+ }
155
+
156
+ h1 {
157
+ margin: 0;
158
+ font-size: clamp(2.25rem, 6vw, 3.5rem);
159
+ max-width: 12ch;
160
+ }
161
+
162
+ .lede {
163
+ color: var(--muted);
164
+ font-size: 1.1rem;
165
+ max-width: 68ch;
166
+ }
167
+
168
+ .docs-grid {
169
+ display: grid;
170
+ grid-template-columns: repeat(4, minmax(0, 1fr));
171
+ gap: 1rem;
172
+ padding: 2rem 0 4rem;
173
+ }
174
+
175
+ .docs-card {
176
+ min-height: 13rem;
177
+ display: flex;
178
+ flex-direction: column;
179
+ gap: 0.75rem;
180
+ padding: 1.25rem;
181
+ background: var(--surface);
182
+ border: 1px solid var(--line);
183
+ border-radius: var(--radius);
184
+ color: var(--ink);
185
+ text-decoration: none;
186
+ }
187
+
188
+ .docs-card:hover {
189
+ border-color: var(--accent);
190
+ }
191
+
192
+ .docs-card__kicker {
193
+ color: var(--accent);
194
+ font-size: 0.8rem;
195
+ font-weight: 750;
196
+ }
197
+
198
+ .docs-card strong {
199
+ font-size: 1.15rem;
200
+ }
201
+
202
+ .docs-card span:last-child {
203
+ color: var(--muted);
204
+ }
205
+
206
+ .doc-layout {
207
+ display: grid;
208
+ grid-template-columns: minmax(0, 1fr);
209
+ gap: 2.75rem;
210
+ padding: 3rem 0 5rem;
211
+ }
212
+
213
+ .doc-layout--with-toc {
214
+ grid-template-columns: minmax(0, 1fr) 14rem;
215
+ }
216
+
217
+ .doc-content {
218
+ min-width: 0;
219
+ }
220
+
221
+ .doc-header {
222
+ padding-bottom: 1.5rem;
223
+ border-bottom: 1px solid var(--line);
224
+ margin-bottom: 2rem;
225
+ }
226
+
227
+ .doc-header h1 {
228
+ max-width: 18ch;
229
+ font-size: clamp(2rem, 4vw, 2.5rem);
230
+ }
231
+
232
+ .npm-links {
233
+ display: grid;
234
+ grid-template-columns: repeat(3, minmax(0, 1fr));
235
+ gap: 0.75rem;
236
+ margin: 0 0 2rem;
237
+ }
238
+
239
+ .npm-link-card {
240
+ display: flex;
241
+ min-height: 8rem;
242
+ flex-direction: column;
243
+ gap: 0.45rem;
244
+ padding: 1rem;
245
+ border: 1px solid var(--line);
246
+ border-radius: var(--radius);
247
+ background: var(--surface);
248
+ color: var(--ink);
249
+ text-decoration: none;
250
+ }
251
+
252
+ .npm-link-card:hover {
253
+ border-color: var(--accent);
254
+ }
255
+
256
+ .npm-link-card span {
257
+ color: var(--accent);
258
+ font-size: 0.78rem;
259
+ font-weight: 750;
260
+ text-transform: uppercase;
261
+ }
262
+
263
+ .npm-link-card strong {
264
+ font-size: 1.05rem;
265
+ }
266
+
267
+ .npm-link-card small {
268
+ color: var(--muted);
269
+ font-size: 0.9rem;
270
+ line-height: 1.45;
271
+ }
272
+
273
+ .doc-toc {
274
+ position: sticky;
275
+ top: 5.5rem;
276
+ align-self: start;
277
+ max-height: calc(100vh - 7rem);
278
+ overflow: auto;
279
+ padding-left: 1rem;
280
+ border-left: 1px solid var(--line);
281
+ }
282
+
283
+ .doc-toc__title {
284
+ margin: 0 0 0.75rem;
285
+ color: var(--ink);
286
+ font-size: 0.8rem;
287
+ font-weight: 750;
288
+ }
289
+
290
+ .doc-toc ol {
291
+ list-style: none;
292
+ margin: 0;
293
+ padding: 0;
294
+ }
295
+
296
+ .doc-toc__item + .doc-toc__item {
297
+ margin-top: 0.5rem;
298
+ }
299
+
300
+ .doc-toc__item--level-3 {
301
+ padding-left: 0.85rem;
302
+ }
303
+
304
+ .doc-toc__item--level-4 {
305
+ padding-left: 1.7rem;
306
+ }
307
+
308
+ .doc-toc a {
309
+ color: var(--muted);
310
+ text-decoration: none;
311
+ font-size: 0.88rem;
312
+ line-height: 1.35;
313
+ }
314
+
315
+ .doc-toc a:hover {
316
+ color: var(--accent);
317
+ }
318
+
319
+ .prose {
320
+ max-width: 78ch;
321
+ color: var(--prose-ink);
322
+ }
323
+
324
+ .prose h1 {
325
+ display: none;
326
+ }
327
+
328
+ .prose h2 {
329
+ margin-top: 2.25rem;
330
+ color: var(--ink);
331
+ font-size: 1.6rem;
332
+ padding-bottom: 0.5rem;
333
+ border-bottom: 1px solid var(--line);
334
+ }
335
+
336
+ .prose h3 {
337
+ margin-top: 1.75rem;
338
+ color: var(--ink);
339
+ }
340
+
341
+ .prose p,
342
+ .prose li {
343
+ font-size: 1rem;
344
+ }
345
+
346
+ .prose ul,
347
+ .prose ol {
348
+ padding-left: 1.45rem;
349
+ }
350
+
351
+ .prose li + li {
352
+ margin-top: 0.35rem;
353
+ }
354
+
355
+ .prose code {
356
+ background: var(--code-bg);
357
+ border-radius: 4px;
358
+ padding: 0.1rem 0.3rem;
359
+ font-size: 0.92em;
360
+ }
361
+
362
+ .prose pre {
363
+ overflow: auto;
364
+ padding: 1rem;
365
+ background: var(--pre-bg);
366
+ color: var(--pre-ink);
367
+ border-radius: var(--radius);
368
+ }
369
+
370
+ .prose pre code {
371
+ background: transparent;
372
+ padding: 0;
373
+ }
374
+
375
+ .prose table {
376
+ display: block;
377
+ width: 100%;
378
+ overflow-x: auto;
379
+ margin: 1.5rem 0;
380
+ border-collapse: collapse;
381
+ font-size: 0.94rem;
382
+ }
383
+
384
+ .prose th,
385
+ .prose td {
386
+ padding: 0.65rem 0.75rem;
387
+ border: 1px solid var(--line);
388
+ text-align: left;
389
+ vertical-align: top;
390
+ }
391
+
392
+ .prose th {
393
+ background: var(--code-bg);
394
+ color: var(--ink);
395
+ font-weight: 750;
396
+ }
397
+
398
+ .prose blockquote {
399
+ margin: 1.5rem 0;
400
+ padding: 0.75rem 1rem;
401
+ border-left: 4px solid var(--accent);
402
+ background: var(--accent-soft);
403
+ color: var(--ink);
404
+ }
405
+
406
+ .prose .contains-task-list {
407
+ padding-left: 0;
408
+ list-style: none;
409
+ }
410
+
411
+ .prose .task-list-item {
412
+ display: flex;
413
+ align-items: flex-start;
414
+ gap: 0.55rem;
415
+ }
416
+
417
+ .prose .task-list-item-checkbox {
418
+ width: 1rem;
419
+ height: 1rem;
420
+ margin: 0.32rem 0 0;
421
+ accent-color: var(--accent);
422
+ }
423
+
424
+ .prose .zp-alert {
425
+ margin: 1.5rem 0;
426
+ padding: 0.9rem 1rem;
427
+ border-left: 4px solid var(--alert-note);
428
+ border-radius: 0 var(--radius) var(--radius) 0;
429
+ background: color-mix(in srgb, var(--alert-note) 12%, transparent);
430
+ color: var(--ink);
431
+ }
432
+
433
+ .prose .zp-alert--tip {
434
+ border-left-color: var(--alert-tip);
435
+ background: color-mix(in srgb, var(--alert-tip) 12%, transparent);
436
+ }
437
+
438
+ .prose .zp-alert--important {
439
+ border-left-color: var(--alert-important);
440
+ background: color-mix(in srgb, var(--alert-important) 12%, transparent);
441
+ }
442
+
443
+ .prose .zp-alert--warning {
444
+ border-left-color: var(--alert-warning);
445
+ background: color-mix(in srgb, var(--alert-warning) 14%, transparent);
446
+ }
447
+
448
+ .prose .zp-alert--caution {
449
+ border-left-color: var(--alert-caution);
450
+ background: color-mix(in srgb, var(--alert-caution) 12%, transparent);
451
+ }
452
+
453
+ .prose .zp-alert__title {
454
+ margin: 0 0 0.45rem;
455
+ color: var(--ink);
456
+ font-weight: 800;
457
+ }
458
+
459
+ .prose .zp-alert > :last-child {
460
+ margin-bottom: 0;
461
+ }
462
+
463
+ .prose .zp-alert h2,
464
+ .prose .zp-alert h3,
465
+ .prose .zp-alert h4 {
466
+ margin-top: 1rem;
467
+ }
468
+
469
+ .doc-source {
470
+ max-width: 78ch;
471
+ margin-top: 3rem;
472
+ padding-top: 1.25rem;
473
+ border-top: 1px solid var(--line);
474
+ }
475
+
476
+ .doc-source a {
477
+ color: var(--muted);
478
+ font-size: 0.94rem;
479
+ font-weight: 700;
480
+ text-decoration: none;
481
+ }
482
+
483
+ .doc-source a:hover {
484
+ color: var(--accent);
485
+ text-decoration: underline;
486
+ }
487
+
488
+ .button-link {
489
+ display: inline-block;
490
+ margin-top: 1rem;
491
+ padding: 0.65rem 0.9rem;
492
+ border-radius: 6px;
493
+ background: var(--accent);
494
+ color: var(--button-ink);
495
+ text-decoration: none;
496
+ font-weight: 700;
497
+ }
498
+
499
+ .not-found {
500
+ padding: 5rem 0;
501
+ }
502
+
503
+ .site-footer {
504
+ border-top: 1px solid var(--line);
505
+ background: var(--surface);
506
+ }
507
+
508
+ .site-footer__inner {
509
+ min-height: 4.5rem;
510
+ display: flex;
511
+ align-items: center;
512
+ justify-content: space-between;
513
+ flex-wrap: wrap;
514
+ gap: 0.5rem 1.5rem;
515
+ }
516
+
517
+ .site-footer p {
518
+ margin: 0;
519
+ color: var(--muted);
520
+ font-size: 0.94rem;
521
+ }
522
+
523
+ .site-footer a {
524
+ font-weight: 700;
525
+ text-decoration: none;
526
+ }
527
+
528
+ .site-footer a:hover {
529
+ text-decoration: underline;
530
+ }
531
+
532
+ [id] {
533
+ scroll-margin-top: 100px;
534
+ }
535
+
536
+ h1, h2, h3, h4, h5, h6 {
537
+ -webkit-font-smoothing: antialiased;
538
+ }
539
+
540
+ @media (max-width: 860px) {
541
+ .site-header__inner {
542
+ align-items: flex-start;
543
+ flex-direction: column;
544
+ padding: 1rem 0;
545
+ }
546
+
547
+ .site-nav ul {
548
+ justify-content: flex-start;
549
+ }
550
+
551
+ .docs-grid,
552
+ .npm-links,
553
+ .doc-layout,
554
+ .doc-layout--with-toc {
555
+ grid-template-columns: 1fr;
556
+ }
557
+
558
+ .doc-toc {
559
+ position: static;
560
+ max-height: none;
561
+ padding: 1rem 0 0;
562
+ border-left: 0;
563
+ border-top: 1px solid var(--line);
564
+ }
565
+
566
+ [id] {
567
+ scroll-margin-top: 160px;
568
+ }
569
+ }
@@ -0,0 +1,20 @@
1
+ <section class="hero">
2
+ <div class="shell hero__inner">
3
+ <p class="eyebrow">Documentation</p>
4
+ <h1>{{site.title}}</h1>
5
+ <p class="lede">{{site.description}}</p>
6
+ </div>
7
+ </section>
8
+
9
+ <section class="shell docs-grid" aria-label="Documentation sections">
10
+ {{#for item in menus.primary.items}}
11
+ {{#if_eq item.url "/"}}
12
+ {{#else}}
13
+ <a class="docs-card" href="{{item.url}}">
14
+ <span class="docs-card__kicker">Section</span>
15
+ <strong>{{item.title}}</strong>
16
+ <span>Open this documentation section.</span>
17
+ </a>
18
+ {{/if_eq}}
19
+ {{/for}}
20
+ </section>
@@ -0,0 +1,37 @@
1
+ <html lang="{{site.locale}}">
2
+ <head>
3
+ <meta charset="utf-8">
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <title>{{meta.title}}</title>
6
+ <meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
7
+ <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
8
+ <link rel="stylesheet" href="/assets/style.css">
9
+ {{meta.head_tags}}
10
+ </head>
11
+ <body>
12
+ <a class="skip-link" href="#content">Skip to content</a>
13
+ <header class="site-header">
14
+ <div class="shell site-header__inner">
15
+ <a class="brand" href="/">{{site.title}}</a>
16
+ <nav class="site-nav" aria-label="Primary navigation">
17
+ {{menu:primary}}
18
+ </nav>
19
+ </div>
20
+ </header>
21
+ <main id="content">
22
+ {{slot:content}}
23
+ </main>
24
+ <footer class="site-footer">
25
+ <div class="shell site-footer__inner">
26
+ {{#if site.footer.copyright_text}}
27
+ <p>{{site.footer.copyright_text}}</p>
28
+ {{#else_if site.title}}
29
+ <p>{{site.title}}</p>
30
+ {{/if}}
31
+ {{#if site.footer.attribution.enabled}}
32
+ <p>Published with <a href="https://zeropress.app" target="_blank" rel="noreferrer noopener">ZeroPress</a>.</p>
33
+ {{/if}}
34
+ </div>
35
+ </footer>
36
+ </body>
37
+ </html>
@@ -0,0 +1,33 @@
1
+ <article class="shell doc-layout{{#if page.toc}} doc-layout--with-toc{{/if}}">
2
+ <div class="doc-content">
3
+ {{#if route.is_front_page}}
4
+ <div class="prose">
5
+ {{page.html}}
6
+ </div>
7
+ {{#else}}
8
+ <header class="doc-header">
9
+ <p class="eyebrow">Documentation</p>
10
+ <h1>{{page.title}}</h1>
11
+ {{#if page.excerpt}}<p class="lede">{{page.excerpt}}</p>{{/if}}
12
+ </header>
13
+ <div class="prose">
14
+ {{page.html}}
15
+ </div>
16
+ {{/if}}
17
+ {{#if page.meta.source_markdown_url}}
18
+ <footer class="doc-source">
19
+ <a href="{{page.meta.source_markdown_url}}">View this page as Markdown</a>
20
+ </footer>
21
+ {{/if}}
22
+ </div>
23
+ {{#if page.toc}}
24
+ <aside class="doc-toc" aria-label="Table of contents">
25
+ <p class="doc-toc__title">On this page</p>
26
+ <nav>
27
+ <ol>
28
+ {{#for item in page.toc}}<li class="doc-toc__item doc-toc__item--level-{{item.level}}"><a href="{{item.href}}">{{item.title}}</a></li>{{/for}}
29
+ </ol>
30
+ </nav>
31
+ </aside>
32
+ {{/if}}
33
+ </article>
@@ -0,0 +1,9 @@
1
+ <article class="shell doc-content">
2
+ <header class="doc-header">
3
+ <p class="eyebrow">Post</p>
4
+ <h1>{{post.title}}</h1>
5
+ </header>
6
+ <div class="prose">
7
+ {{post.html}}
8
+ </div>
9
+ </article>
@@ -0,0 +1,20 @@
1
+ {
2
+ "name": "ZeroPress Build Pages Docs",
3
+ "namespace": "zeropress",
4
+ "slug": "zeropress-docs",
5
+ "version": "0.5.0",
6
+ "license": "MIT",
7
+ "runtime": "0.5",
8
+ "description": "Bundled documentation theme for @zeropress/build-pages",
9
+ "features": {
10
+ "comments": false,
11
+ "newsletter": false,
12
+ "postIndex": false
13
+ },
14
+ "menuSlots": {
15
+ "primary": {
16
+ "title": "Primary navigation",
17
+ "description": "Top-level documentation navigation"
18
+ }
19
+ }
20
+ }