Add page screenshot

[arjunkomath]

Summary by CodeRabbit

• New Features
  • Page list now includes preview screenshots for each page, generated dynamically.
• Style
  • Updated page list to a two-column layout with a left-side image preview and right-side details.
  • Improved icon accessibility by adding a descriptive title.
• Chores
  • Added a new dependency to support screenshot generation.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
changes-page	Ready	Preview	Sep 20, 2025 1:44am
changes-page-docs	Ready	Preview	Sep 20, 2025 1:44am

1 Skipped Deployment

Project	Deployment	Preview	Updated (UTC)
user-changes-page	Skipped		Sep 20, 2025 1:44am

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Introduces a screenshot URL utility using the capture-node library, adds the dependency, and integrates server-side generation of per-page screenshot URLs into the pages index. The Pages component now accepts and renders these screenshots alongside existing page metadata in a two-column layout.

Changes

Cohort / File(s)	Summary
Dependency addition apps/web/package.json	Added capture-node dependency ^2.2.0.
Screenshot utility apps/web/utils/capture.ts	New getPageScreenshotUrl(url: string) using environment keys to build image URLs with fixed viewport (1280x720) and scaleFactor 1.5.
Pages index integration apps/web/pages/pages/index.tsx	Server-side: computes screenshots via getPageScreenshotUrl for each page (based on custom_domain or url_slug), returns in props. Client: Pages component accepts screenshots, renders two-column layout with left screenshot image, adds accessible SVG title, minor typing/import tweaks, string literal update for "/pages/new".

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant B as Browser
  participant N as Next.js (pages/pages/index.tsx)
  participant C as capture utils (utils/capture.ts)
  participant Lib as capture-node (SDK)

  U->>B: Navigate to /pages
  B->>N: getServerSideProps()
  N->>N: Map pages -> url (custom_domain or slug)
  N->>C: getPageScreenshotUrl(url)
  C->>Lib: buildImageUrl({ url, w:1280, h:720, scale:1.5 })
  Lib-->>C: Signed image URL
  C-->>N: Screenshot URL
  N-->>B: props { pages, screenshots, ... }
  B->>N: Render Pages component
  Note over N,B: Pages renders two-column items with left screenshot and right metadata

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I hop through code with whiskers bright,
New screenshots bloom in server night.
A nibble of URLs, signed and neat,
Two columns dance—so crisp, so sweet.
With capture’s charm and careful sight,
Our pages pose in perfect light.
Thump-thump! Ship it—just right.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "Add page screenshot" is concise and accurately summarizes the primary change — adding server-side screenshot generation and UI preview support (new capture utility, dependency, and screenshots prop). It is clear, focused, and gives a teammate scanning history a correct understanding of the main intent.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[arjunkomath]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (5)

apps/web/utils/capture.ts (1)

1-1: Import shape may be wrong

Please confirm whether capture-node provides a default export or a named Capture. If it’s default, this import will throw at runtime.

apps/web/pages/pages/index.tsx (4)

16-16: Avoid bundling server-only deps into the client

Move the getPageScreenshotUrl import inside getServerSideProps via dynamic import so capture-node never touches the client bundle.

-import { getPageScreenshotUrl } from "../../utils/capture";
+// Moved to getServerSideProps via dynamic import to keep client bundle clean.

Add inside getServerSideProps (shown in the next comment’s diff).

---

94-94: Use the ROUTES constant for consistency

Prefer ROUTES.NEW_PAGE here (used elsewhere) to avoid hard-coded route drift.

-                  ? "/pages/new"
+                  ? ROUTES.NEW_PAGE

---

129-134: Invalid Tailwind class: h-18

h-18 isn’t in Tailwind’s default scale; height won’t apply. Use a valid height and add decoding="async" for perf.

-                          <img
-                            className="w-48 h-18 object-cover rounded-md border border-gray-200 dark:border-gray-700"
-                            src={screenshots[idx]}
-                            alt={`Screenshot of ${page.title}`}
-                            loading="lazy"
-                          />
+                          <img
+                            className="w-48 h-28 object-cover rounded-md border border-gray-200 dark:border-gray-700"
+                            src={screenshots[idx]}
+                            alt={`Screenshot of ${page.title}`}
+                            loading="lazy"
+                            decoding="async"
+                          />

---

121-133: Index-coupling between pages and screenshots

Relying on idx risks mismatch if the arrays ever diverge. Prefer returning a single array of objects { page, screenshot } from getServerSideProps and map that.

Example (outside current hunk):

// server
const items = rows.map((page) => ({
  page,
  screenshot: getPageScreenshotUrl(
    page.page_settings?.custom_domain
      ? `https://${page.page_settings.custom_domain}`
      : `https://${page.url_slug}.changes.page`
  ),
}));
return { props: { items, error } };

// client
{items.map(({ page, screenshot }) => (
  // use screenshot directly
))}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4fa6fba and 20d16e9.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (3)

• apps/web/package.json (1 hunks)
• apps/web/pages/pages/index.tsx (6 hunks)
• apps/web/utils/capture.ts (1 hunks)

🔇 Additional comments (2)

apps/web/pages/pages/index.tsx (2)

202-202: Nice a11y improvement

Adding <title>Go to page</title> to the SVG is a good touch.

---

37-44: Signed URL confirmed — no raw API secret exposed

Verified: buildImageUrl returns a signed URL containing only the public API key + a generated hash (e.g., md5(api_secret + request_query)), not the raw secret — safe to use in an . Treat generated URLs as public tokens (anyone with the full URL can fetch the image).