Skip to content

Commit ab5ef54

Browse files
omachalagithub-actions[bot]Ondrej Machala
authored
chore: release (#5)
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## [email protected] ### Patch Changes - 4d2af1b: Fix CLI --version to read from package.json dynamically --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Ondrej Machala <[email protected]>
1 parent 10787d3 commit ab5ef54

File tree

12 files changed

+744
-22
lines changed

12 files changed

+744
-22
lines changed

‎.changeset/fix-cli-version.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ coverage
1010
ha-dashboard.png
1111
heroshots/
1212
toolbar/test-results/
13+
test-results/

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# heroshot
22

3+
## 0.0.6
4+
5+
### Patch Changes
6+
7+
- Add encrypted session support for CI environments (`HEROSHOT_SESSION_KEY` env var)
8+
- Add `heroshot session-key` command to print session key for CI setup
9+
- Add retina/device scale factor support (`browser.deviceScaleFactor` config)
10+
- Add VitePress documentation site
11+
- Change default output directory to `heroshots/`
12+
- Move config from `heroshot.json` to `.heroshot/config.json`
13+
- Fix CLI --version to read from package.json dynamically
14+
315
## 0.0.5
416

517
### Patch Changes

‎docs/public/__tests__/toolbar.html‎

Lines changed: 361 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,361 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Heroshot Toolbar Test Page</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
body {
14+
font-family: system-ui, sans-serif;
15+
padding: 40px;
16+
background: #f5f5f5;
17+
}
18+
h1 {
19+
margin-bottom: 20px;
20+
}
21+
h2 {
22+
margin: 30px 0 15px;
23+
color: #333;
24+
}
25+
26+
/* Test sections */
27+
.section {
28+
background: white;
29+
padding: 20px;
30+
margin-bottom: 20px;
31+
border-radius: 8px;
32+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
33+
}
34+
35+
/* Basic elements */
36+
.button {
37+
padding: 10px 20px;
38+
background: #3b82f6;
39+
color: white;
40+
border: none;
41+
border-radius: 4px;
42+
cursor: pointer;
43+
}
44+
.button:hover {
45+
background: #2563eb;
46+
}
47+
48+
.card {
49+
padding: 20px;
50+
background: #e5e7eb;
51+
border-radius: 8px;
52+
margin: 10px 0;
53+
}
54+
.card-title {
55+
font-weight: bold;
56+
margin-bottom: 8px;
57+
}
58+
.card-body {
59+
color: #666;
60+
}
61+
62+
/* Grid of items for nth-of-type testing */
63+
.grid {
64+
display: grid;
65+
grid-template-columns: repeat(3, 1fr);
66+
gap: 10px;
67+
}
68+
.grid-item {
69+
padding: 20px;
70+
background: #ddd6fe;
71+
border-radius: 4px;
72+
text-align: center;
73+
}
74+
75+
/* Nested elements */
76+
.nested-outer {
77+
padding: 20px;
78+
background: #fef3c7;
79+
border-radius: 8px;
80+
}
81+
.nested-inner {
82+
padding: 15px;
83+
background: #fde68a;
84+
border-radius: 6px;
85+
margin-top: 10px;
86+
}
87+
.nested-deep {
88+
padding: 10px;
89+
background: #fcd34d;
90+
border-radius: 4px;
91+
margin-top: 10px;
92+
}
93+
94+
/* Form elements */
95+
.form-group {
96+
margin-bottom: 15px;
97+
}
98+
.form-group label {
99+
display: block;
100+
margin-bottom: 5px;
101+
font-weight: 500;
102+
}
103+
.form-group input,
104+
.form-group textarea,
105+
.form-group select {
106+
width: 100%;
107+
padding: 8px 12px;
108+
border: 1px solid #d1d5db;
109+
border-radius: 4px;
110+
}
111+
112+
/* Table */
113+
table {
114+
width: 100%;
115+
border-collapse: collapse;
116+
}
117+
th,
118+
td {
119+
padding: 12px;
120+
text-align: left;
121+
border-bottom: 1px solid #e5e7eb;
122+
}
123+
th {
124+
background: #f9fafb;
125+
font-weight: 600;
126+
}
127+
tr:hover {
128+
background: #f9fafb;
129+
}
130+
131+
/* Navigation */
132+
.nav {
133+
display: flex;
134+
gap: 20px;
135+
padding: 15px;
136+
background: #1f2937;
137+
border-radius: 8px;
138+
}
139+
.nav-link {
140+
color: white;
141+
text-decoration: none;
142+
}
143+
.nav-link:hover {
144+
text-decoration: underline;
145+
}
146+
147+
/* Hero section */
148+
#hero {
149+
padding: 60px 40px;
150+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
151+
color: white;
152+
border-radius: 12px;
153+
text-align: center;
154+
}
155+
#hero h1 {
156+
font-size: 2.5rem;
157+
margin-bottom: 15px;
158+
}
159+
#hero p {
160+
font-size: 1.2rem;
161+
opacity: 0.9;
162+
}
163+
</style>
164+
</head>
165+
<body>
166+
<h1>Heroshot Toolbar E2E Test Page</h1>
167+
<p style="margin-bottom: 30px; color: #666">
168+
This page contains various elements for testing the toolbar's element picker and selector
169+
generation.
170+
</p>
171+
172+
<!-- Hero Section with ID -->
173+
<section id="hero" class="section">
174+
<h1>Hero Section</h1>
175+
<p>This section has an ID selector</p>
176+
<button class="button" style="margin-top: 20px">Call to Action</button>
177+
</section>
178+
179+
<!-- Basic Elements -->
180+
<section class="section">
181+
<h2>Basic Elements</h2>
182+
<button id="primary-btn" class="button">Primary Button</button>
183+
<button class="button" style="background: #10b981; margin-left: 10px">
184+
Secondary Button
185+
</button>
186+
<button class="button" style="background: #ef4444; margin-left: 10px">Danger Button</button>
187+
</section>
188+
189+
<!-- Cards -->
190+
<section class="section">
191+
<h2>Cards (same class, different instances)</h2>
192+
<div class="card">
193+
<div class="card-title">Card One</div>
194+
<div class="card-body">First card content</div>
195+
</div>
196+
<div class="card">
197+
<div class="card-title">Card Two</div>
198+
<div class="card-body">Second card content</div>
199+
</div>
200+
<div class="card">
201+
<div class="card-title">Card Three</div>
202+
<div class="card-body">Third card content</div>
203+
</div>
204+
</section>
205+
206+
<!-- Grid Items for nth-of-type -->
207+
<section class="section">
208+
<h2>Grid (for nth-of-type testing)</h2>
209+
<div class="grid">
210+
<div class="grid-item">Item 1</div>
211+
<div class="grid-item">Item 2</div>
212+
<div class="grid-item">Item 3</div>
213+
<div class="grid-item">Item 4</div>
214+
<div class="grid-item">Item 5</div>
215+
<div class="grid-item">Item 6</div>
216+
</div>
217+
</section>
218+
219+
<!-- Nested Elements -->
220+
<section class="section">
221+
<h2>Nested Elements</h2>
222+
<div class="nested-outer">
223+
Outer Level
224+
<div class="nested-inner">
225+
Inner Level
226+
<div class="nested-deep">Deep Level - Target Me!</div>
227+
</div>
228+
</div>
229+
</section>
230+
231+
<!-- Form Elements -->
232+
<section class="section">
233+
<h2>Form Elements</h2>
234+
<form id="test-form">
235+
<div class="form-group">
236+
<label for="username">Username</label>
237+
<input type="text" id="username" name="username" placeholder="Enter username" />
238+
</div>
239+
<div class="form-group">
240+
<label for="email">Email</label>
241+
<input type="email" id="email" name="email" placeholder="Enter email" />
242+
</div>
243+
<div class="form-group">
244+
<label for="message">Message</label>
245+
<textarea id="message" name="message" rows="3" placeholder="Enter message"></textarea>
246+
</div>
247+
<div class="form-group">
248+
<label for="country">Country</label>
249+
<select id="country" name="country">
250+
<option value="">Select country</option>
251+
<option value="us">United States</option>
252+
<option value="uk">United Kingdom</option>
253+
<option value="cz">Czech Republic</option>
254+
</select>
255+
</div>
256+
<button type="submit" class="button">Submit Form</button>
257+
</form>
258+
</section>
259+
260+
<!-- Table -->
261+
<section class="section">
262+
<h2>Table</h2>
263+
<table id="data-table">
264+
<thead>
265+
<tr>
266+
<th>Name</th>
267+
<th>Email</th>
268+
<th>Role</th>
269+
</tr>
270+
</thead>
271+
<tbody>
272+
<tr>
273+
<td>John Doe</td>
274+
<td>[email protected]</td>
275+
<td>Admin</td>
276+
</tr>
277+
<tr>
278+
<td>Jane Smith</td>
279+
<td>[email protected]</td>
280+
<td>Editor</td>
281+
</tr>
282+
<tr>
283+
<td>Bob Wilson</td>
284+
<td>[email protected]</td>
285+
<td>Viewer</td>
286+
</tr>
287+
</tbody>
288+
</table>
289+
</section>
290+
291+
<!-- Navigation -->
292+
<section class="section">
293+
<h2>Navigation</h2>
294+
<nav class="nav">
295+
<a href="#" class="nav-link">Home</a>
296+
<a href="#" class="nav-link">About</a>
297+
<a href="#" class="nav-link">Services</a>
298+
<a href="#" class="nav-link">Contact</a>
299+
</nav>
300+
</section>
301+
302+
<!-- Shadow DOM -->
303+
<section class="section">
304+
<h2>Shadow DOM Elements</h2>
305+
<p style="margin-bottom: 15px; color: #666">
306+
These elements are inside Shadow DOM - tests the >>> piercing selector
307+
</p>
308+
<div id="shadow-host-1"></div>
309+
<div id="shadow-host-2" style="margin-top: 15px"></div>
310+
</section>
311+
312+
<script>
313+
// Create Shadow DOM elements
314+
const host1 = document.getElementById('shadow-host-1');
315+
const shadow1 = host1.attachShadow({ mode: 'open' });
316+
shadow1.innerHTML = `
317+
<style>
318+
.shadow-card { padding: 20px; background: #e0f2fe; border-radius: 8px; border: 2px dashed #0ea5e9; }
319+
.shadow-title { font-weight: bold; color: #0369a1; margin-bottom: 8px; }
320+
.shadow-button { padding: 8px 16px; background: #0ea5e9; color: white; border: none; border-radius: 4px; cursor: pointer; }
321+
</style>
322+
<div class="shadow-card">
323+
<div class="shadow-title">Shadow DOM Card 1</div>
324+
<p>This content is inside shadow DOM</p>
325+
<button class="shadow-button">Shadow Button 1</button>
326+
</div>
327+
`;
328+
329+
const host2 = document.getElementById('shadow-host-2');
330+
const shadow2 = host2.attachShadow({ mode: 'open' });
331+
shadow2.innerHTML = `
332+
<style>
333+
.shadow-card { padding: 20px; background: #fce7f3; border-radius: 8px; border: 2px dashed #ec4899; }
334+
.shadow-title { font-weight: bold; color: #be185d; margin-bottom: 8px; }
335+
.shadow-button { padding: 8px 16px; background: #ec4899; color: white; border: none; border-radius: 4px; cursor: pointer; }
336+
.nested-shadow-host { margin-top: 15px; }
337+
</style>
338+
<div class="shadow-card">
339+
<div class="shadow-title">Shadow DOM Card 2 (with nested shadow)</div>
340+
<p>This has another shadow DOM inside</p>
341+
<button class="shadow-button">Shadow Button 2</button>
342+
<div class="nested-shadow-host" id="nested-shadow"></div>
343+
</div>
344+
`;
345+
346+
// Nested shadow DOM
347+
const nestedHost = shadow2.getElementById('nested-shadow');
348+
const nestedShadow = nestedHost.attachShadow({ mode: 'open' });
349+
nestedShadow.innerHTML = `
350+
<style>
351+
.deep-shadow { padding: 15px; background: #fdf4ff; border-radius: 6px; border: 2px dotted #a855f7; }
352+
.deep-button { padding: 6px 12px; background: #a855f7; color: white; border: none; border-radius: 4px; cursor: pointer; }
353+
</style>
354+
<div class="deep-shadow">
355+
<strong>Deeply Nested Shadow DOM</strong>
356+
<button class="deep-button">Deep Shadow Button</button>
357+
</div>
358+
`;
359+
</script>
360+
</body>
361+
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "heroshot",
3-
"version": "0.0.5",
3+
"version": "0.0.6",
44
"description": "Define your screenshots once, update them forever with one command",
55
"type": "module",
66
"author": "Ondrej Machala",

0 commit comments

Comments
 (0)