Skip to content

Commit c00e4f6

Browse files
mokuwakiclaude
andcommitted
Fix LP-to-docs 404 by prepending basePath to internal links, and update docs content
Internal links in OpenSourceCTA and Footer used plain <a> tags without the Next.js basePath prefix, causing 404s on GitHub Pages where the base path is /rollberry-docs. Also updates documentation content for accuracy and adds multi-page capture docs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent fc10da8 commit c00e4f6

10 files changed

Lines changed: 317 additions & 614 deletions

File tree

content/docs/getting-started/introduction.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Rollberry is a command-line tool that captures full-page scrolling videos of web
1111
Under the hood, Rollberry launches a real Chromium browser via [Playwright](https://playwright.dev/), navigates to your target URL, and records the viewport as it scrolls through the page. This means every CSS animation, lazy-loaded image, and dynamic element is captured exactly as a real user would see it.
1212

1313
```bash
14-
npx rollberry capture https://example.com
14+
rollberry capture https://example.com
1515
```
1616

1717
That single command produces a polished MP4 video of the full page in seconds.
@@ -45,13 +45,14 @@ A scrolling video provides a faithful representation of the user experience that
4545

4646
- **Zero install** — Run directly with `npx`, no global installation required
4747
- **Real browser rendering** — Uses Playwright with Chromium for pixel-perfect captures
48+
- **Multi-page capture** — Stitch multiple URLs into one video sequentially
4849
- **Localhost support** — Capture local development servers with automatic retry logic
4950
- **Custom viewport** — Set any resolution to match your target devices
5051
- **Smooth scrolling** — Configurable scroll speed and duration
5152
- **FPS control** — Adjust frame rate for quality vs. file size trade-offs
5253
- **Wait conditions** — Wait for specific selectors or a fixed delay before capturing
5354
- **Hide overlays** — Remove cookie banners, sticky headers, and other floating elements
54-
- **Debug mode** — Save individual frames as PNGs for inspection
55+
- **Debug frames** — Save individual frames as PNGs for inspection
5556
- **Structured logs** — JSONL output for programmatic processing
5657
- **MP4 output** — Industry-standard video format that plays everywhere
5758

@@ -64,7 +65,7 @@ Rollberry follows a straightforward capture pipeline:
6465
3. **Prepare** — Optional wait conditions are applied (timers, selector visibility, overlay hiding)
6566
4. **Capture** — The viewport is recorded as the page scrolls from top to bottom
6667
5. **Encode** — Captured frames are assembled into an MP4 video file
67-
6. **Output** — The video and metadata are saved to the output directory
68+
6. **Output** — The video and metadata are saved to `rollberry.mp4` by default
6869

6970
The entire process is automated and typically completes in under 30 seconds for most pages.
7071

content/docs/getting-started/quick-start.mdx

Lines changed: 46 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,137 +9,130 @@ order: 2
99
The simplest Rollberry command takes just a URL:
1010

1111
```bash
12-
npx rollberry capture https://example.com
12+
rollberry capture https://example.com
1313
```
1414

1515
This will:
1616

17-
1. Launch a headless Chromium browser
18-
2. Navigate to `https://example.com`
19-
3. Wait 1 second for the page to settle
20-
4. Scroll from top to bottom over 5 seconds
21-
5. Save an MP4 video to `./rollberry-output/`
17+
1. Launch a headless Chromium browser.
18+
2. Navigate to `https://example.com`.
19+
3. Wait for the page to load.
20+
4. Automatically calculate the scroll duration based on page height (approx. 800px per second).
21+
5. Scroll from top to bottom at 60 FPS.
22+
6. Save an MP4 video to `./rollberry.mp4`.
2223

23-
The output directory will contain the video file along with a `manifest.json` describing the capture.
24+
Rollberry also generates sidecar files: `rollberry.manifest.json` (metadata) and `rollberry.log.jsonl` (detailed logs).
2425

2526
## Viewing the output
2627

27-
After the capture completes, open the output directory to find your video:
28+
After the capture completes, you will see your video file in the current directory:
2829

2930
```bash
30-
ls ./rollberry-output/
31+
ls rollberry.*
3132
```
3233

33-
You will see output similar to:
34+
You will see:
3435

3536
```
36-
capture-2026-03-19T10-30-00.mp4
37-
manifest.json
37+
rollberry.mp4
38+
rollberry.manifest.json
39+
rollberry.log.jsonl
3840
```
3941

4042
Open the MP4 file with any video player, or drag it into a browser window to preview.
4143

4244
## Customizing the viewport
4345

44-
By default, Rollberry captures at 1280x720 pixels. To capture at a different resolution, use the `--viewport` flag:
46+
By default, Rollberry captures at 1440x900 pixels. To capture at a different resolution, use the `--viewport` flag:
4547

4648
```bash
4749
# Desktop full HD
48-
npx rollberry capture https://example.com --viewport 1920x1080
50+
rollberry capture https://example.com --viewport 1920x1080
4951

5052
# Mobile viewport (iPhone-like)
51-
npx rollberry capture https://example.com --viewport 390x844
53+
rollberry capture https://example.com --viewport 390x844
5254

5355
# Tablet viewport (iPad-like)
54-
npx rollberry capture https://example.com --viewport 768x1024
56+
rollberry capture https://example.com --viewport 768x1024
5557
```
5658

5759
The viewport format is `WIDTHxHEIGHT` in pixels.
5860

5961
## Adjusting scroll duration
6062

61-
The `--duration` flag controls how long the scroll takes in seconds. A longer duration produces a slower, smoother scroll:
63+
By default, Rollberry uses `auto` duration. You can force a fixed duration (in seconds) using the `--duration` flag:
6264

6365
```bash
6466
# Quick 3-second scroll
65-
npx rollberry capture https://example.com --duration 3
67+
rollberry capture https://example.com --duration 3
6668

6769
# Slow, detailed 15-second scroll
68-
npx rollberry capture https://example.com --duration 15
70+
rollberry capture https://example.com --duration 15
6971
```
7072

71-
For very long pages, you may want to increase the duration to avoid scrolling too quickly.
73+
## Specifying the output path
7274

73-
## Specifying the output directory
74-
75-
By default, output goes to `./rollberry-output`. Use `--output` (or `-o`) to change this:
75+
Use `--out` to change the output file path:
7676

7777
```bash
78-
npx rollberry capture https://example.com -o ./my-captures
78+
rollberry capture https://example.com --out ./captures/homepage.mp4
7979
```
8080

8181
## Practical examples
8282

83-
Here are a few real-world usage patterns to get you started:
83+
Here are a few real-world usage patterns:
8484

8585
**Capture a landing page at full HD:**
8686

8787
```bash
88-
npx rollberry capture https://your-site.com \
88+
rollberry capture https://your-site.com \
8989
--viewport 1920x1080 \
9090
--duration 8
9191
```
9292

9393
**Capture a mobile view with cookie banner hidden:**
9494

9595
```bash
96-
npx rollberry capture https://your-site.com \
96+
rollberry capture https://your-site.com \
9797
--viewport 390x844 \
98-
--hide-selectors ".cookie-banner, .consent-dialog"
98+
--hide-selector ".cookie-banner" \
99+
--hide-selector ".consent-dialog"
99100
```
100101

101102
**Capture a local development server:**
102103

103104
```bash
104-
npx rollberry capture http://localhost:3000 \
105-
--wait 2000 \
105+
rollberry capture http://localhost:3000 \
106+
--wait-for ms:2000 \
106107
--duration 10
107108
```
108109

109110
**Wait for a specific element before capturing:**
110111

111112
```bash
112-
npx rollberry capture https://your-site.com \
113-
--wait-for-selector ".hero-image" \
113+
rollberry capture https://your-site.com \
114+
--wait-for "selector:#hero-image" \
114115
--duration 6
115116
```
116117

117-
## What happens during a capture
118+
## Terminal output
118119

119120
When you run a capture, Rollberry provides progress output in your terminal:
120121

121122
```
122-
Rollberry v0.1.3
123-
Capturing: https://example.com
124-
Viewport: 1280x720
125-
Duration: 5s
126-
FPS: 30
127-
128-
[1/4] Launching browser...
129-
[2/4] Navigating to page...
130-
[3/4] Scrolling and capturing...
131-
[4/4] Encoding video...
132-
133-
Done! Output saved to ./rollberry-output/capture-2026-03-19T10-30-00.mp4
134-
```
123+
rollberry capture https://example.com
135124
136-
If anything goes wrong, Rollberry will display a clear error message. For help debugging issues, see the [Debugging](/docs/guides/debugging) guide.
125+
[1/3] Launching browser...
126+
[2/3] Navigating to page...
127+
[3/3] Scrolling and capturing...
128+
[########################################] 100%
137129
138-
## Next steps
130+
/Users/you/project/rollberry.mp4
139131
140-
Now that you know the basics, explore these topics:
132+
Capture complete: rollberry.mp4
133+
Duration: 5.2s (312 frames at 60fps)
134+
File size: 1.4 MB
135+
Manifest: rollberry.manifest.json
136+
```
141137

142-
- [CLI Options Reference](/docs/reference/cli-options) — Full list of all available flags
143-
- [Capturing Multiple Pages](/docs/guides/multi-page) — Batch capture workflows
144-
- [Localhost Captures](/docs/guides/localhost) — Capture local dev servers
145-
- [Hiding Overlays](/docs/guides/hiding-overlays) — Remove cookie banners and sticky elements
138+
If anything goes wrong, Rollberry will display a clear error message. For help debugging issues, see the [Debugging](/docs/guides/debugging) guide.

0 commit comments

Comments
 (0)