afterbefore 0.2.17 → 0.2.19

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.
Files changed (4) hide show
  1. package/README.md +34 -58
  2. package/dist/overlay/index.js +885 -855
  3. package/dist/overlay/index.js.map +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -3,15 +3,19 @@
3
3
  [![npm version](https://img.shields.io/npm/v/afterbefore?color=blue)](https://www.npmjs.com/package/afterbefore)
4
4
  [![npm downloads](https://img.shields.io/npm/dm/afterbefore)](https://www.npmjs.com/package/afterbefore)
5
5
 
6
- Screenshot capture for Next.js development. A floating overlay in your dev server — click to capture components, viewports, or full pages. No CLI. No Playwright. No second server.
6
+ Take screenshots of your Next.js app while you're building it. A small camera icon sits in the corner of your dev server — click it to capture a component, the current viewport, or the entire page. No browser extensions, no headless browsers, no extra setup.
7
7
 
8
- ## Setup
8
+ Screenshots are named after your current git branch and saved to your Desktop, so you can quickly share before/after comparisons in pull requests.
9
+
10
+ ## Install
9
11
 
10
12
  ```bash
11
13
  npm install afterbefore
12
14
  ```
13
15
 
14
- ### 1. Add the overlay to your root layout
16
+ Three things to add to your Next.js project:
17
+
18
+ **1. Drop the overlay into your root layout**
15
19
 
16
20
  ```tsx
17
21
  // app/layout.tsx
@@ -29,14 +33,14 @@ export default function RootLayout({ children }) {
29
33
  }
30
34
  ```
31
35
 
32
- ### 2. Create the API route
36
+ **2. Create the API route**
33
37
 
34
38
  ```ts
35
39
  // app/api/afterbefore/[...path]/route.ts
36
40
  export { GET, POST } from "afterbefore/server"
37
41
  ```
38
42
 
39
- ### 3. Wrap your Next.js config
43
+ **3. Wrap your Next.js config**
40
44
 
41
45
  ```ts
42
46
  // next.config.ts
@@ -47,9 +51,9 @@ export default withAfterBefore({
47
51
  })
48
52
  ```
49
53
 
50
- The config wrapper adds a dev-only rewrite from `/__afterbefore/*` to the API route. It does nothing in production.
54
+ That's it. Start your dev server and you'll see a camera icon in the corner.
51
55
 
52
- > **Next.js 16+ / Turbopack:** If `withAfterBefore` fails to import (`ERR_PACKAGE_PATH_NOT_EXPORTED`), you can inline the rewrite:
56
+ > **Next.js 16+ / Turbopack:** If `withAfterBefore` fails to import, you can add the rewrite manually:
53
57
  >
54
58
  > ```ts
55
59
  > rewrites: process.env.NODE_ENV === "development"
@@ -57,71 +61,43 @@ The config wrapper adds a dev-only rewrite from `/__afterbefore/*` to the API ro
57
61
  > : undefined,
58
62
  > ```
59
63
 
60
- ## Capture modes
61
-
62
- | Mode | Behavior |
63
- |------|----------|
64
- | **Component** | Hover to inspect elements — click to capture a specific component |
65
- | **Viewport** | Captures the visible browser area |
66
- | **Full Page** | Captures the entire document height |
67
-
68
- Screenshots are rendered from the DOM using [snapdom](https://github.com/nicorevin/snapdom), which captures exactly what you see — logged-in state, open modals, scroll position, form inputs — without needing a headless browser.
64
+ ## What you can capture
69
65
 
70
- ## Frame settings
66
+ - **Component** — hover over any element to highlight it, click to capture just that component
67
+ - **Viewport** — captures exactly what's visible in the browser
68
+ - **Full Page** — captures the entire scrollable page
71
69
 
72
- When using **Component** mode, you can wrap the captured element in a presentation frame:
70
+ Everything is captured from the live DOM, so you get exactly what you see — logged-in state, open modals, form inputs, scroll position. No headless browser needed.
73
71
 
74
- - **Frame size** — presets (1920×1080, 1080×1080, 1200×630, 1080×1920) or custom dimensions
75
- - **Background** — solid color (editable hex) or uploaded image (cover-fit)
76
- - **Padding** — adjustable spacing around the component
77
- - **Auto-scaling** — components that exceed the frame are scaled down to fit
72
+ ## Framing (Component mode)
78
73
 
79
- Frame settings persist in `localStorage` across sessions.
74
+ When capturing a component, you can wrap it in a presentation frame with a background color or image, adjustable padding, and preset sizes (1920×1080, 1080×1080, 1200×630, 1080×1920) or custom dimensions. Components that are too large for the frame are automatically scaled down. These settings persist across sessions.
80
75
 
81
- ## Where screenshots go
76
+ ## After you capture
82
77
 
83
- Screenshots are saved to your Desktop by default, named after the current git branch:
84
-
85
- ```
86
- ~/Desktop/my-feature.png
87
- ```
78
+ Click the status icon to:
88
79
 
89
- You can change the save location from the toolbar settings. On macOS, a native folder picker is available. The setting is stored in `.afterbefore/config.json` in your project root.
80
+ - **Open Folder** — jump to the screenshot in Finder
81
+ - **Copy Markdown** — get a before/after comparison table for pasting into PRs
82
+ - **Push to PR** — automatically commit the screenshot, push, and post a PR comment with the image (requires [GitHub CLI](https://cli.github.com/))
90
83
 
91
- ## After capture
84
+ ## Where screenshots are saved
92
85
 
93
- Once a screenshot is captured, click the icon to access:
86
+ By default, screenshots go to your Desktop named after the current git branch (`~/Desktop/my-feature.png`). You can change the save location in the toolbar settings.
94
87
 
95
- - **Open Folder** — opens the save directory in your file manager
96
- - **Copy Markdown** — copies a before/after comparison table to your clipboard
97
- - **Push to PR** — commits the screenshot to `.afterbefore/`, pushes, and posts a PR comment with the image (requires [GitHub CLI](https://cli.github.com/))
98
- - **Reset** — start a new capture
99
-
100
- ## How it works
101
-
102
- 1. A floating camera icon appears in the corner of your dev server (draggable)
103
- 2. Click it to open the toolbar — pick a capture mode
104
- 3. For **Component** mode, hover over elements to highlight them, then click to capture
105
- 4. For **Viewport** or **Full Page**, the capture happens immediately
106
- 5. The screenshot is sent to the API route, which writes it to disk
107
- 6. The status menu appears with options to share or start over
88
+ ## Requirements
108
89
 
109
- The overlay and all dev UI elements (including Next.js indicators) are automatically excluded from captures.
90
+ - Next.js 14+ (app router)
91
+ - React 18+
92
+ - Node.js 18+
110
93
 
111
94
  ## Known limitations
112
95
 
113
- - Web fonts may render slightly differently than in the browser
114
- - Complex CSS (`backdrop-filter`, `mix-blend-mode`) may not reproduce perfectly
115
- - iframes and tainted canvas/WebGL content are not captured
116
- - Folder picker is macOS-only (other platforms use the default save directory)
117
- - Next.js only (React overlay, API routes)
118
-
119
- ## Requirements
120
-
121
- - Next.js >= 14 (app router)
122
- - React >= 18
123
- - Node.js >= 18
96
+ - Web fonts may render slightly differently
97
+ - Some CSS effects (`backdrop-filter`, `mix-blend-mode`) may not reproduce perfectly
98
+ - iframes and WebGL content are not captured
99
+ - Native folder picker is macOS-only
124
100
 
125
101
  ## License
126
102
 
127
- Licensed under [PolyForm Shield 1.0.0](https://polyformproject.org/licenses/shield/1.0.0)
103
+ [PolyForm Shield 1.0.0](https://polyformproject.org/licenses/shield/1.0.0)