Skip to content

Commit 9062175

Browse files
omachalaOndrej Machala
andauthored
chore: release (#26)
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 the packages will be published to npm automatically. 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 - 1e8dfe3: Add `heroshot/virtual` TypeScript types for virtual module imports --------- Co-authored-by: Ondrej Machala <[email protected]>
1 parent 1e8dfe3 commit 9062175

File tree

1 file changed

+26
-76
lines changed

1 file changed

+26
-76
lines changed

README.md

Lines changed: 26 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -18,46 +18,32 @@ The manual fix is tedious: open browser, navigate, log in, screenshot, crop, sav
1818

1919
**Heroshot fixes this.** Define your screenshots once - point and click, no CSS selectors - and regenerate them with one command whenever you need.
2020

21+
```bash
22+
npx heroshot
23+
```
24+
25+
First run opens a browser with a visual picker. Click what you want, name it, done. Screenshots land in `heroshots/`, config saves to `.heroshot/config.json`. Next run regenerates everything headlessly.
26+
2127
<table align="center">
2228
<tr>
23-
<th></th>
24-
<th>Light</th>
25-
<th>Dark</th>
26-
</tr>
27-
<tr>
28-
<th>Desktop</th>
2929
<td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-desktop-light.png?raw=true" alt="Desktop Light"></td>
3030
<td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-desktop-dark.png?raw=true" alt="Desktop Dark"></td>
3131
</tr>
3232
<tr>
33-
<th>Tablet</th>
3433
<td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-tablet-light.png?raw=true" alt="Tablet Light"></td>
3534
<td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-tablet-dark.png?raw=true" alt="Tablet Dark"></td>
3635
</tr>
3736
<tr>
38-
<th>Mobile</th>
3937
<td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-mobile-light.png?raw=true" alt="Mobile Light"></td>
4038
<td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-mobile-dark.png?raw=true" alt="Mobile Dark"></td>
4139
</tr>
4240
</table>
4341

4442
<p align="center"><em>6 screenshots from one config entry - always in sync with the live site.</em></p>
4543

46-
## Get Started
47-
48-
```bash
49-
npx heroshot
50-
```
51-
52-
First run opens a browser with a visual picker. Click what you want, name it, done. Screenshots land in `heroshots/`, config saves to `.heroshot/config.json`. Next run regenerates everything headlessly.
53-
5444
## Use in Your Docs
5545

56-
**VitePress**
57-
58-
```bash
59-
npm install heroshot
60-
```
46+
**VitePress** · [Full guide](https://heroshot.sh/docs/integrations/vitepress)
6147

6248
```ts
6349
// .vitepress/config.ts
@@ -66,30 +52,26 @@ export default defineConfig({ vite: { plugins: [heroshot()] } });
6652
```
6753

6854
```vue
55+
<script setup>
56+
import { Heroshot } from 'heroshot/vue';
57+
</script>
58+
6959
<Heroshot name="dashboard" alt="Dashboard" />
7060
```
7161

72-
**Docusaurus**
73-
74-
```bash
75-
npm install heroshot
76-
```
62+
**Docusaurus** · [Full guide](https://heroshot.sh/docs/integrations/docusaurus)
7763

7864
```js
7965
// docusaurus.config.js
8066
plugins: [['heroshot/plugins/docusaurus', {}]];
8167
```
8268

83-
```mdx
69+
```tsx
8470
import { Heroshot } from 'heroshot/docusaurus';
85-
<Heroshot name="dashboard" alt="Dashboard" />
71+
<Heroshot name="dashboard" alt="Dashboard" />;
8672
```
8773

88-
**MkDocs**
89-
90-
```bash
91-
pip install heroshot
92-
```
74+
**MkDocs** · [Full guide](https://heroshot.sh/docs/integrations/mkdocs)
9375

9476
```yaml
9577
# mkdocs.yml
@@ -104,53 +86,21 @@ plugins:
10486

10587
One component/macro, all variants - light/dark mode switches automatically, responsive sizes via srcset.
10688

107-
## Automated Updates
108-
109-
Keep screenshots always current by running heroshot in CI. Quick setup:
110-
111-
```bash
112-
# Get your session key (for authenticated sites)
113-
npx heroshot session-key
114-
115-
# Add to GitHub secrets
116-
gh secret set HEROSHOT_SESSION_KEY
117-
```
118-
119-
Then create `.github/workflows/heroshot.yml`:
120-
121-
```yaml
122-
name: Update Screenshots
123-
124-
on:
125-
workflow_dispatch:
126-
127-
jobs:
128-
screenshots:
129-
runs-on: ubuntu-latest
130-
steps:
131-
- uses: actions/checkout@v4
132-
- uses: actions/setup-node@v4
133-
with:
134-
node-version: 20
135-
- run: npx heroshot
136-
env:
137-
HEROSHOT_SESSION_KEY: ${{ secrets.HEROSHOT_SESSION_KEY }}
138-
- run: |
139-
git config user.name "github-actions[bot]"
140-
git config user.email "github-actions[bot]@users.noreply.github.com"
141-
git add heroshots/
142-
git diff --staged --quiet || git commit -m "chore: update screenshots" && git push
143-
```
144-
145-
Go to Actions → Update Screenshots → Run workflow. Done.
89+
## Learn More
14690

147-
For more options (scheduled runs, PR creation, debugging), see the [full CI guide](https://heroshot.sh/docs/guide/automated-updates).
91+
| | |
92+
| ------------------- | --------------------------------------------------------------------- |
93+
| **Documentation** | [heroshot.sh](https://heroshot.sh) |
94+
| **Getting Started** | [Quick start guide](https://heroshot.sh/docs/getting-started) |
95+
| **Configuration** | [Config options](https://heroshot.sh/docs/config) |
96+
| **CI/CD Setup** | [Automated updates](https://heroshot.sh/docs/guide/automated-updates) |
97+
| **CLI Reference** | [All commands & flags](https://heroshot.sh/docs/cli) |
14898

149-
## Learn More
99+
## Contributing
150100

151-
**Docs:** [heroshot.sh](https://heroshot.sh)
101+
This is a community project aiming to solve screenshot automation end-to-end and any feedback is valuable. Open an [issue](https://github.com/omachala/heroshot/issues) for bugs, questions, or feature requests. Pull requests are more than welcome.
152102

153-
**Status:** Early alpha. [See releases](https://github.com/omachala/heroshot/releases) for current version.
103+
If you like it, give the repo a ⭐
154104

155105
## License
156106

0 commit comments

Comments
 (0)