executable-stories-demo 0.1.10 → 0.1.12
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "executable-stories-demo",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"description": "Publish Astro product demo sites from executable stories runs",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"executable-stories-demo": "./bin/executable-stories-demo.js"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"executable-stories-formatters": "0.11.
|
|
26
|
+
"executable-stories-formatters": "0.11.3"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/node": "^25.6.0",
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Product Demo
|
|
3
|
+
description: Generated demo site from executable stories.
|
|
4
|
+
template: splash
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<div class="demo-landing not-content" data-template="splash">
|
|
8
|
+
|
|
9
|
+
<section class="demo-hero">
|
|
10
|
+
<span class="demo-hero__eyebrow">Product demo</span>
|
|
11
|
+
<h1 class="demo-hero__title">Product Demo</h1>
|
|
12
|
+
<p class="demo-hero__tagline">Your Playwright runs, published as a product demo. Run the build command below to populate this page.</p>
|
|
13
|
+
<a class="demo-hero__cta" href="/">Get started</a>
|
|
14
|
+
</section>
|
|
15
|
+
|
|
16
|
+
<section class="demo-section">
|
|
17
|
+
<h2 class="demo-section-heading">Next step</h2>
|
|
18
|
+
<div class="demo-empty">
|
|
19
|
+
Generate story pages with <code>executable-stories-demo build --input reports/raw-run.json --site .</code>
|
|
20
|
+
</div>
|
|
21
|
+
</section>
|
|
22
|
+
|
|
23
|
+
</div>
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Themes
|
|
3
|
+
description: Six built-in themes for executable-stories-demo. Pick one in demo.config.json.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Each theme is a single CSS file that swaps the `--demo-*` design tokens. To
|
|
7
|
+
switch, edit `demo.config.json`:
|
|
8
|
+
|
|
9
|
+
```json
|
|
10
|
+
{
|
|
11
|
+
"theme": "default"
|
|
12
|
+
}
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Then rebuild (`executable-stories-demo build`). Only one theme is active per
|
|
16
|
+
site; this page previews each palette so you can choose without scaffolding
|
|
17
|
+
six sites.
|
|
18
|
+
|
|
19
|
+
<style>{`
|
|
20
|
+
.theme-grid {
|
|
21
|
+
display: grid;
|
|
22
|
+
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
|
23
|
+
gap: 1.5rem;
|
|
24
|
+
margin-block: 2rem;
|
|
25
|
+
padding: 0;
|
|
26
|
+
list-style: none;
|
|
27
|
+
}
|
|
28
|
+
.theme-grid li { margin: 0; max-width: none; }
|
|
29
|
+
.theme-card {
|
|
30
|
+
border: 1px solid var(--sl-color-gray-5, #e5e7eb);
|
|
31
|
+
border-radius: 10px;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
display: grid;
|
|
34
|
+
grid-template-rows: auto auto auto;
|
|
35
|
+
}
|
|
36
|
+
.theme-card__sample {
|
|
37
|
+
padding: 1.5rem 1.25rem;
|
|
38
|
+
min-height: 6.5rem;
|
|
39
|
+
display: grid;
|
|
40
|
+
align-content: center;
|
|
41
|
+
gap: 0.35rem;
|
|
42
|
+
}
|
|
43
|
+
.theme-card__name {
|
|
44
|
+
font-size: 1.6rem;
|
|
45
|
+
font-weight: 700;
|
|
46
|
+
letter-spacing: -0.02em;
|
|
47
|
+
margin: 0;
|
|
48
|
+
}
|
|
49
|
+
.theme-card__voice {
|
|
50
|
+
font-size: 0.85rem;
|
|
51
|
+
margin: 0;
|
|
52
|
+
opacity: 0.75;
|
|
53
|
+
}
|
|
54
|
+
.theme-card__swatches {
|
|
55
|
+
display: grid;
|
|
56
|
+
grid-template-columns: repeat(4, 1fr);
|
|
57
|
+
gap: 1px;
|
|
58
|
+
background: rgba(0,0,0,0.08);
|
|
59
|
+
}
|
|
60
|
+
.theme-card__swatch {
|
|
61
|
+
aspect-ratio: 4 / 3;
|
|
62
|
+
display: grid;
|
|
63
|
+
align-content: end;
|
|
64
|
+
padding: 0.4rem 0.5rem;
|
|
65
|
+
font-family: ui-monospace, "SF Mono", monospace;
|
|
66
|
+
font-size: 0.65rem;
|
|
67
|
+
letter-spacing: 0.04em;
|
|
68
|
+
}
|
|
69
|
+
.theme-card__meta {
|
|
70
|
+
padding: 0.85rem 1.25rem;
|
|
71
|
+
font-family: ui-monospace, "SF Mono", monospace;
|
|
72
|
+
font-size: 0.78rem;
|
|
73
|
+
background: var(--sl-color-bg-nav, #fafafa);
|
|
74
|
+
color: var(--sl-color-text-accent);
|
|
75
|
+
}
|
|
76
|
+
.theme-card__meta b { font-weight: 600; }
|
|
77
|
+
`}</style>
|
|
78
|
+
|
|
79
|
+
<ul class="theme-grid">
|
|
80
|
+
|
|
81
|
+
<li>
|
|
82
|
+
<article class="theme-card">
|
|
83
|
+
<div class="theme-card__sample" style="background: oklch(0.985 0.012 85); color: oklch(0.18 0.015 60); font-family: 'Literata', Georgia, serif;">
|
|
84
|
+
<h3 class="theme-card__name">default</h3>
|
|
85
|
+
<p class="theme-card__voice">Editorial warmth. Magazine-leaning serif display, bottle-green accent.</p>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="theme-card__swatches">
|
|
88
|
+
<div class="theme-card__swatch" style="background: oklch(0.985 0.012 85); color: oklch(0.18 0.015 60);">bg</div>
|
|
89
|
+
<div class="theme-card__swatch" style="background: oklch(0.965 0.018 85); color: oklch(0.18 0.015 60);">surf</div>
|
|
90
|
+
<div class="theme-card__swatch" style="background: oklch(0.42 0.12 150); color: white;">accent</div>
|
|
91
|
+
<div class="theme-card__swatch" style="background: oklch(0.18 0.015 60); color: oklch(0.985 0.012 85);">ink</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="theme-card__meta"><b>theme:</b> "default" — Literata + Work Sans</div>
|
|
94
|
+
</article>
|
|
95
|
+
</li>
|
|
96
|
+
|
|
97
|
+
<li>
|
|
98
|
+
<article class="theme-card">
|
|
99
|
+
<div class="theme-card__sample" style="background: oklch(0.99 0.005 245); color: oklch(0.20 0.025 260); font-family: Archivo, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.025em;">
|
|
100
|
+
<h3 class="theme-card__name">corporate</h3>
|
|
101
|
+
<p class="theme-card__voice" style="font-weight: 400; letter-spacing: 0;">Institutional grotesk. High density, sharp 1-px borders, steel-blue accent.</p>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="theme-card__swatches">
|
|
104
|
+
<div class="theme-card__swatch" style="background: oklch(0.99 0.005 245); color: oklch(0.20 0.025 260);">bg</div>
|
|
105
|
+
<div class="theme-card__swatch" style="background: oklch(0.975 0.008 245); color: oklch(0.20 0.025 260);">surf</div>
|
|
106
|
+
<div class="theme-card__swatch" style="background: oklch(0.38 0.14 255); color: white;">accent</div>
|
|
107
|
+
<div class="theme-card__swatch" style="background: oklch(0.20 0.025 260); color: oklch(0.99 0.005 245);">ink</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="theme-card__meta"><b>theme:</b> "corporate" — Archivo only · forced light</div>
|
|
110
|
+
</article>
|
|
111
|
+
</li>
|
|
112
|
+
|
|
113
|
+
<li>
|
|
114
|
+
<article class="theme-card">
|
|
115
|
+
<div class="theme-card__sample" style="background: oklch(0.96 0.045 88); color: oklch(0.22 0.04 20); font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800;">
|
|
116
|
+
<h3 class="theme-card__name">playful</h3>
|
|
117
|
+
<p class="theme-card__voice" style="font-weight: 500;">Risograph poster. Persimmon + inky-blue spots, hard-shadow CTAs.</p>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="theme-card__swatches">
|
|
120
|
+
<div class="theme-card__swatch" style="background: oklch(0.96 0.045 88); color: oklch(0.22 0.04 20);">bg</div>
|
|
121
|
+
<div class="theme-card__swatch" style="background: oklch(0.93 0.055 88); color: oklch(0.22 0.04 20);">surf</div>
|
|
122
|
+
<div class="theme-card__swatch" style="background: oklch(0.64 0.22 30); color: white;">accent</div>
|
|
123
|
+
<div class="theme-card__swatch" style="background: oklch(0.40 0.18 265); color: white;">spot</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="theme-card__meta"><b>theme:</b> "playful" — Bricolage + Figtree · forced light</div>
|
|
126
|
+
</article>
|
|
127
|
+
</li>
|
|
128
|
+
|
|
129
|
+
<li>
|
|
130
|
+
<article class="theme-card">
|
|
131
|
+
<div class="theme-card__sample" style="background: oklch(0.15 0.02 150); color: oklch(0.84 0.17 140); font-family: 'VT323', 'JetBrains Mono', monospace; text-shadow: 0 0 12px rgba(132,210,82,0.4);">
|
|
132
|
+
<h3 class="theme-card__name" style="font-weight: 400;">terminal_</h3>
|
|
133
|
+
<p class="theme-card__voice" style="font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;">Phosphor CRT. Near-black bg, blinking cursor on the hero title.</p>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="theme-card__swatches">
|
|
136
|
+
<div class="theme-card__swatch" style="background: oklch(0.15 0.02 150); color: oklch(0.84 0.17 140);">bg</div>
|
|
137
|
+
<div class="theme-card__swatch" style="background: oklch(0.19 0.025 150); color: oklch(0.84 0.17 140);">surf</div>
|
|
138
|
+
<div class="theme-card__swatch" style="background: oklch(0.82 0.18 90); color: oklch(0.15 0.02 150);">accent</div>
|
|
139
|
+
<div class="theme-card__swatch" style="background: oklch(0.84 0.17 140); color: oklch(0.15 0.02 150);">ink</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="theme-card__meta"><b>theme:</b> "terminal" — VT323 + JetBrains Mono · forced dark</div>
|
|
142
|
+
</article>
|
|
143
|
+
</li>
|
|
144
|
+
|
|
145
|
+
<li>
|
|
146
|
+
<article class="theme-card">
|
|
147
|
+
<div class="theme-card__sample" style="background: oklch(0.16 0.012 250); color: oklch(0.93 0.01 240); font-family: 'Funnel Sans', system-ui, sans-serif; font-weight: 600; background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 2rem 2rem;">
|
|
148
|
+
<h3 class="theme-card__name">dashboard</h3>
|
|
149
|
+
<p class="theme-card__voice" style="font-weight: 400;">Ops room. Slate surfaces, teal accent, status pills, faint grid backdrop.</p>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="theme-card__swatches">
|
|
152
|
+
<div class="theme-card__swatch" style="background: oklch(0.16 0.012 250); color: oklch(0.93 0.01 240);">bg</div>
|
|
153
|
+
<div class="theme-card__swatch" style="background: oklch(0.20 0.014 250); color: oklch(0.93 0.01 240);">surf</div>
|
|
154
|
+
<div class="theme-card__swatch" style="background: oklch(0.76 0.14 195); color: oklch(0.15 0.015 250);">accent</div>
|
|
155
|
+
<div class="theme-card__swatch" style="background: oklch(0.76 0.17 145); color: oklch(0.15 0.015 250);">pass</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="theme-card__meta"><b>theme:</b> "dashboard" — Funnel Sans + JetBrains Mono · forced dark</div>
|
|
158
|
+
</article>
|
|
159
|
+
</li>
|
|
160
|
+
|
|
161
|
+
<li>
|
|
162
|
+
<article class="theme-card">
|
|
163
|
+
<div class="theme-card__sample" style="background: oklch(0.985 0 0); color: oklch(0.14 0 0); font-family: 'Albert Sans', system-ui, sans-serif; font-weight: 300; letter-spacing: -0.035em;">
|
|
164
|
+
<h3 class="theme-card__name" style="font-weight: 300;">minimal</h3>
|
|
165
|
+
<p class="theme-card__voice" style="font-weight: 300; letter-spacing: 0;">Aggressive restraint. 300/700 weight contrast, single oxidised-orange dot.</p>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="theme-card__swatches">
|
|
168
|
+
<div class="theme-card__swatch" style="background: oklch(0.985 0 0); color: oklch(0.14 0 0);">bg</div>
|
|
169
|
+
<div class="theme-card__swatch" style="background: oklch(0.94 0.04 35); color: oklch(0.30 0.14 35);">accent-low</div>
|
|
170
|
+
<div class="theme-card__swatch" style="background: oklch(0.56 0.18 35); color: white;">accent</div>
|
|
171
|
+
<div class="theme-card__swatch" style="background: oklch(0.14 0 0); color: oklch(0.985 0 0);">ink</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="theme-card__meta"><b>theme:</b> "minimal" — Albert Sans only · forced light</div>
|
|
174
|
+
</article>
|
|
175
|
+
</li>
|
|
176
|
+
|
|
177
|
+
</ul>
|
|
178
|
+
|
|
179
|
+
## Choosing a theme
|
|
180
|
+
|
|
181
|
+
Use the table to pick by audience and tone:
|
|
182
|
+
|
|
183
|
+
| Theme | Best for | Light/Dark |
|
|
184
|
+
|---|---|---|
|
|
185
|
+
| `default` | Developer relations, content-heavy product pages | Adaptive |
|
|
186
|
+
| `corporate` | Enterprise sales decks, compliance documentation | Light only |
|
|
187
|
+
| `playful` | Consumer products, design-tool demos, launch sites | Light only |
|
|
188
|
+
| `terminal` | DevTools, CLIs, infrastructure products | Dark only |
|
|
189
|
+
| `dashboard` | Observability, analytics, ops platforms | Dark only |
|
|
190
|
+
| `minimal` | Brand-led product pages where the work speaks for itself | Light only |
|