feat: DR-8328 Add compute page first stage#7859
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds local Mona Sans fonts and CSS-variable bridges across apps, introduces a new Prisma Compute landing page with many interactive UI components (including a Cobe WebGL globe and theme tokens), extends homepage card APIs, updates global CSS (token additions and reformatting), and adds the ChangesFont system & global token bridge
Compute landing page and interactive UI
Site/global CSS adjustments
Homepage cards & layout API updates
Dependency addition
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/site/src/app/global.css (1)
3-23:⚠️ Potential issue | 🟠 Major | ⚡ Quick winThe
:rootblock is placed before other imports, contradicting the comment.The comment states this block is "placed after all
@importstatements," but it actually appears between@import "tailwindcss"(line 1) and the remaining imports (lines 19–23). Iffumadocs-ui/css/preset.css,@prisma/eclipse/styles/globals.css, or@prisma-docs/ui/stylesalso define--font-sans-displayor--font-mono, those later imports will override your definitions due to cascade order.Move the
:rootblock after line 23 (after all imports) to match the comment's intent and ensure your font tokens win.🔧 Suggested fix
`@import` "tailwindcss"; -/* Promote next/font/local preloaded fonts into the design-token CSS variables. - This :root block is intentionally placed after all `@import` statements so it - wins the cascade (same :root specificity, later position = last write wins). - --font-mona-sans / --font-mona-mono are set on <html> by next/font/local and - inherited here; the quoted names act as a safe fallback if JS is disabled or - the font object is somehow not applied. */ -:root { - --font-sans-display: - var(--font-mona-sans, "Mona Sans VF"), "Inter", "Roboto", - "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif; - --font-mono: - var(--font-mona-mono, "Mona Sans Mono VF"), ui-monospace, - "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", - "DejaVu Sans Mono", monospace; -} - `@import` "fumadocs-ui/css/shadcn.css"; `@import` "fumadocs-ui/css/preset.css"; `@import` "@prisma/eclipse/styles/globals.css"; `@import` "@prisma-docs/ui/styles"; + +/* Promote next/font/local preloaded fonts into the design-token CSS variables. + This :root block is intentionally placed after all `@import` statements so it + wins the cascade (same :root specificity, later position = last write wins). + --font-mona-sans / --font-mona-mono are set on <html> by next/font/local and + inherited here; the quoted names act as a safe fallback if JS is disabled or + the font object is somehow not applied. */ +:root { + --font-sans-display: + var(--font-mona-sans, "Mona Sans VF"), "Inter", "Roboto", + "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif; + --font-mono: + var(--font-mona-mono, "Mona Sans Mono VF"), ui-monospace, + "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", + "DejaVu Sans Mono", monospace; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/global.css` around lines 3 - 23, The :root block that defines --font-sans-display and --font-mono is currently before several `@import` statements, contradicting the comment and risking those later imports overriding the variables; move the entire :root { ... } block so it appears after all `@import` statements (i.e., after the `@prisma-docs/ui/styles` import) so the :root declarations for --font-sans-display and --font-mono win the cascade and match the file comment.
🧹 Nitpick comments (1)
apps/site/src/components/homepage/bento.tsx (1)
174-181: ⚡ Quick winPlace
classNamelast so consumer overrides reliably apply.At Line 175, custom classes are prepended, so conflicting defaults (e.g., width/order utilities) can win. Move
classNameto the end ofcn(...).Proposed change
className={cn( - className, "box", "box-visible", "w-full", isCenterCard && "w-full md:order-0", color, + className, )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/homepage/bento.tsx` around lines 174 - 181, The current cn(...) call places the prop className first so consumer-provided classes can be overridden by default utilities; update the cn invocation in the component (the call that builds the className using cn, className, "box", "box-visible", "w-full", isCenterCard && "w-full md:order-0", color) by moving the className argument to the end of the argument list so consumer overrides reliably apply (keep the rest of arguments and condition isCenterCard logic unchanged).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/docs/src/app/global.css`:
- Around line 9-22: The :root rule block currently appears before several
`@import` rules (e.g., `@import` "fumadocs-ui/css/shadcn.css", `@import`
"fumadocs-ui/css/preset.css", `@import` "fumadocs-openapi/css/preset.css", `@import`
"@prisma-docs/ui/styles"), which violates CSS `@import` ordering; move the entire
:root { ... } block so it comes after all `@import` statements to ensure those
imports are recognized by browsers and build tools (adjust the file so all
`@import` lines appear first, then the :root block).
In `@apps/site/src/app/compute/components.tsx`:
- Around line 92-99: In DrawbackItem, the icon class string contains a double
space ("fa-regular fa-xmark"); fix it by changing the className to use a single
space between class names (e.g., "fa-regular fa-xmark") so it matches the rest
of the codebase and avoids inconsistent formatting; update the className in the
DrawbackItem component accordingly.
In `@apps/site/src/app/compute/page.tsx`:
- Around line 273-300: The generateMetadata() function currently returns
copy-pasted Query Insights SEO values; update it to reflect the Compute page by
changing title to "Prisma Compute", replacing the description with a
Compute-relevant blurb, changing openGraph.title to "Prisma Compute",
openGraph.url to "https://www.prisma.io/compute", and openGraph.images[0].url to
the Compute image (e.g., "/og/og-compute.png"); ensure twitter/site/creator
remain correct and that all occurrences inside generateMetadata() and its
openGraph object are updated consistently.
---
Outside diff comments:
In `@apps/site/src/app/global.css`:
- Around line 3-23: The :root block that defines --font-sans-display and
--font-mono is currently before several `@import` statements, contradicting the
comment and risking those later imports overriding the variables; move the
entire :root { ... } block so it appears after all `@import` statements (i.e.,
after the `@prisma-docs/ui/styles` import) so the :root declarations for
--font-sans-display and --font-mono win the cascade and match the file comment.
---
Nitpick comments:
In `@apps/site/src/components/homepage/bento.tsx`:
- Around line 174-181: The current cn(...) call places the prop className first
so consumer-provided classes can be overridden by default utilities; update the
cn invocation in the component (the call that builds the className using cn,
className, "box", "box-visible", "w-full", isCenterCard && "w-full md:order-0",
color) by moving the className argument to the end of the argument list so
consumer overrides reliably apply (keep the rest of arguments and condition
isCenterCard logic unchanged).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5dec4c3f-c8dc-4318-92bc-b90d00c1acdb
📒 Files selected for processing (11)
apps/docs/src/app/global.cssapps/docs/src/app/layout.tsxapps/eclipse/src/app/global.cssapps/eclipse/src/app/layout.tsxapps/site/src/app/compute/components.tsxapps/site/src/app/compute/how-it-works.tsxapps/site/src/app/compute/page.tsxapps/site/src/app/global.cssapps/site/src/app/layout.tsxapps/site/src/components/homepage/bento.tsxapps/site/src/components/homepage/card-section/card-section.tsx
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/compute/how-it-works.tsx`:
- Around line 1548-1551: The TabsTrigger components (rendered with key/value
using tab.value) can become icon-only on mobile when the label span is hidden,
so add an explicit accessible name by passing aria-label={tab.label} (or
aria-labelledby pointing to the label span's id) to each TabsTrigger; update the
TabsTrigger render where value={tab.value} to include aria-label={tab.label} so
inactive mobile tabs retain an accessible name.
- Around line 460-462: The copy icon buttons (the elements rendering <i
className="fa-regular fa-copy" /> inside clickable <button> in the HowItWorks
component) are interactive but not wired; change them to be non-interactive
until the copy action is implemented by marking them disabled and removing them
from keyboard focus, add accessibility labeling and a clear disabled affordance:
add disabled and aria-disabled="true", aria-label="Copy (disabled)" (or "Copy
code (disabled)"), title="Copy disabled until implemented", and set
tabIndex={-1} or replace the <button> with a non-interactive element that still
exposes the label (e.g., a <span> with aria-label) and a visual disabled style
(e.g., cursor-not-allowed); apply the same change for both occurrences that
render the fa-copy icon so keyboard/screen-reader users aren’t presented with a
broken control.
- Line 3: The file imports only hooks (useEffect, useRef, useState) but later
uses the React namespace type React.ReactNode; update the import to include the
ReactNode type (e.g., import { useEffect, useRef, useState, ReactNode } from
"react") and replace any React.ReactNode usages if desired with the imported
ReactNode to satisfy strict TS typing (references: the existing import line and
the React.ReactNode usage in the component/type declarations).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: cdccffc5-d523-416d-90cd-b6405ebacf15
📒 Files selected for processing (1)
apps/site/src/app/compute/how-it-works.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
apps/site/src/app/compute/page.tsx (1)
273-300:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winMetadata is still for Query Insights, not Compute.
Line 275, Line 279, Line 282, and Line 287/290 still describe the Query Insights page, so SEO indexing and social previews will be incorrect for
/compute.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/compute/page.tsx` around lines 273 - 300, The generateMetadata function currently returns metadata for "Prisma Query Insights" which is incorrect for the Compute page; update the title, description, openGraph.title, openGraph.description, openGraph.url, openGraph.images (url and alt), and twitter fields (card/site/creator if different) inside generateMetadata to reflect the Compute page content and URL (e.g., replace "Prisma Query Insights" strings and "https://www.prisma.io/query-insights" with the appropriate Compute page title, description, og image and URL), ensuring all references to Query Insights are removed so SEO and social previews target Compute.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/compute/page.tsx`:
- Around line 339-343: Two anchor elements on the compute page (the <a> tags
with className="flex items-center gap-2" containing the <span>Read the
docs</span>) wrongly point to /docs/postgres/faq#query-insights; update both
occurrences to the correct Compute docs URL (replace
/docs/postgres/faq#query-insights with the appropriate compute docs path, e.g.
/docs/compute or the canonical compute docs anchor) so the "Read the docs" CTAs
link to the relevant Compute documentation.
- Line 487: Fix the Tailwind class typo in the div that renders the footer
background: replace the incorrect "bg-cente" token in the className string with
"bg-center" so the bg-contain background image is properly centered; locate the
div containing "bg-[url('/illustrations/homepage/footer_grid.svg')]" and update
its class list accordingly.
---
Duplicate comments:
In `@apps/site/src/app/compute/page.tsx`:
- Around line 273-300: The generateMetadata function currently returns metadata
for "Prisma Query Insights" which is incorrect for the Compute page; update the
title, description, openGraph.title, openGraph.description, openGraph.url,
openGraph.images (url and alt), and twitter fields (card/site/creator if
different) inside generateMetadata to reflect the Compute page content and URL
(e.g., replace "Prisma Query Insights" strings and
"https://www.prisma.io/query-insights" with the appropriate Compute page title,
description, og image and URL), ensuring all references to Query Insights are
removed so SEO and social previews target Compute.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 01665d78-4e71-4639-89c0-2e5598928e26
📒 Files selected for processing (1)
apps/site/src/app/compute/page.tsx
…7929) * copy(compute): align page copy with messaging skills Apply the Prisma communication skills (prisma-copy-review + prisma-product-messaging) to the Compute landing page copy. - Remove all em dashes from user-facing copy (page hero/meta, feature bullets, comparison card benefits, How-it-works tabs). - Cut fluff and vague intensifiers: "actually", "ultra-low latency", "grows into jobs", and the "felt as good as the code" line, which is reframed around the integrated-platform narrative from the positioning doc (fewer separate build/hosting/database tools). - Replace dramatic fragments ("Push code. It runs.", "Sockets stay open. Streams flow uninterrupted.") with single workflow sentences, and name the mechanism (long-lived process on Bun) in the hero/meta. - Fix a broken cross-reference ("See the AI workloads section above" — no such section exists). - Mark capabilities not yet covered by the Compute docs as "Coming soon": co-located database (feature card + bento + How-it-works tab) and reliability automation (auto scaling/recovery/OOM). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * copy(compute): second skill pass on empty language + SEO Drop the "Coming soon" markers and tighten remaining empty language, plus SEO fields. - Remove "Coming soon" badges/label (co-located feature card, two bento cards, How-it-works tab). - Empty/slogan language replaced with concrete claims: - "Compute keeps it all together." -> "One service for your app, assets, and jobs." (matches the comparison cards below it) - "No runtime constraints." -> "not a constrained edge runtime" - SEO: page title and OG title now carry the primary keyword phrase ("Deploy TypeScript apps to production") instead of the bare brand name; meta description tightened under ~155 chars; OG image alt made descriptive. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * copy(compute): adjust AI-agent card to avoid co-location claim The "Building an AI agent?" card carried a green YES badge while claiming "co-located memory", which reads as an availability promise for the database co-location story. Reword to "in-process memory", which describes the long-lived stateful runtime the page already presents as available, so the card no longer implies co-location availability. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> ---------
* copy(site): align touched marketing pages with messaging skills Apply the Prisma communication skills (prisma-copy-review + prisma-product-messaging) to the user-facing copy on the marketing pages that PR #7859 touches. Copy-only edits; no structural, logic, or factual/pricing changes. - Remove em/en dashes from prose (startups testimonial + body, etc.). - Cut fluff, empty slogans, and vague intensifiers (seamless, powerful, "ship with confidence", "stay ahead in the game", "peak performance", "ultimate tool", "scale without limits", "core competencies", ...) and replace with concrete workflow/outcome language. - Fix mid-sentence capitalization (Build, Fortify, Grows, Pricing, Database) and tighten run-ons. - Correct product naming: Prisma Accelerate, Prisma Console (was "Prisma Data Platform"/"Platform Console"), VS Code (was VSCode), Management API; "Prisma ORM" instead of "the Prisma ORM". Pages: orm, postgres, enterprise, mcp, startups, query-insights, partners, community, ecosystem, studio. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * copy(site): make homepage + footer product naming consistent Align the homepage and footer with the positioning doc so all three core products (Prisma ORM, Prisma Postgres, Prisma Compute) are named and reachable consistently. - Hero: name Prisma ORM, Prisma Postgres, and Prisma Compute in the subhead (was generic "managed Postgres"/"production-ready compute"), add the missing Prisma Postgres CTA, and rename "Explore Compute" to "Explore Prisma Compute". Hero now offers all three product CTAs. - "Start with Prisma" footer-CTA section: add the missing Prisma Compute CTA so all three products are reachable. - Platform-path card: "Explore Compute" -> "Explore Prisma Compute". - Footer Product column: add Prisma Postgres and Prisma Compute (were missing) and use full "Prisma ORM" naming. - Site metadata description: name the three products. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * copy(site): single console CTA on homepage + compute heroes - Homepage hero: replace the three Explore product buttons with one primary "Try Prisma" CTA linking to the Console (pris.ly/pdp, utm_campaign=home); move the product links below the CTA as secondary text links (Prisma ORM / Prisma Postgres / Prisma Compute). - Compute hero: replace "Deploy a template" + "Read the docs" with one "Try Prisma Compute" CTA linking to the Console (utm_campaign=compute). - Homepage subhead: "production-ready compute" -> "serverless TypeScript compute" per messaging guidance (Compute production readiness needs caution). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…page # Conflicts: # apps/site/src/app/(index)/page.tsx # apps/site/src/app/layout.tsx # apps/site/src/components/homepage/card-section/card-section.tsx # apps/site/src/instrumentation-client.ts # pnpm-lock.yaml
- Hero: lead with the stitched-stack problem, name the integrated platform once, and collapse to a single console CTA (drop secondary product links) - Footer CTA: one primary "Try it out in the Console" action (pris.ly/pdp) - Remove the duplicate "Run TypeScript the way it actually works" section - Nav (site + blog): move Compute to the top of Products, fix wrong ORM description copied from Postgres - Compute: use "@prisma/cli@latest app deploy" instead of "prisma deploy" - Compute: point launch post at pris.ly/compute-blog-pb and docs at pris.ly/compute-docs, both with standardised UTM params Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…tion - Hero title: "One Platform for Your TypeScript App" (was "A Database Platform for TypeScript Developers"); structured-data name kept in sync - Tighten hero subhead: drop the second product re-listing, collapse to "Prisma brings all three into one platform, from schema to production" - Compute deploy animation: service URLs now use the real <service>.iad1.prisma.build domain instead of *.prisma.run Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Apply Luan's feedback to the Compute page, landing page, and pricing page: - Soften beta overclaims: drop absolute "no cold starts / timeouts / connection limits", remove production framing, frame WebSockets, cron, and background jobs as Coming soon - Reframe DB pairing as "auto-wiring where the app/database relationship is clear"; co-locate copy now says "same box" - Compute hero: "Deploy TypeScript apps on Prisma Compute"; fluid clamp sizing so long words no longer clip on mobile (also landing hero) - Starter apps: real `bunx create-prisma@latest --template ...` commands with a copy-to-clipboard button; drop the GitHub-repo CTA - Coming-soon badge gets an on-brand teal/sparkles treatment - Fix light-mode CLI command contrast and the landing Compute card's text overlapping its illustration - Landing: move Explore buttons below the visuals (new CardSection visualFooter slot); merge the intro sections; add Explore ORM/Postgres buttons; remove pricing absolutes - Pricing: add a Prisma Compute note (Public Beta, pricing soon) - Home title aligned to positioning: "Integrated TypeScript Infrastructure for Agentic Software Development" Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Lead the homepage hero with the canonical positioning (positioning.md §5): "Integrated TypeScript infrastructure for developers building with AI agents", with the build/deploy/iterate end-to-end subhead. Update the CollectionPage structured-data name to match. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Loosen the hero headline line-height and trim its size so the longer "Integrated TypeScript infrastructure…" copy no longer looks cramped; give the hero stack more vertical breathing room - Move the Prisma Postgres "Explore" button inside the illustration box (bottom-left), matching the Prisma Compute card Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Prisma Postgres Explore button: align to start so it sizes to its content (matching the Compute button) instead of stretching full-width - Center the Prisma ORM Explore button under the logo grid - Make CardSection per-row spacing configurable and tighten the landing product rows; reduce landing section spacing so the page reads less empty Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Give the Prisma Postgres illustration its own flex region above the Explore button so the button no longer crowds the database art - Reduce the hero bottom padding and the logo-parade band so there is less empty space between the hero and the first content section Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Stretch the two cards to the same height (items-stretch + h-full) and let each card's services panel grow to fill, so the fragmented and unified cards stay balanced instead of one running taller than the other. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Give each starter command a bordered, shaded snippet block, shrink the font to text-xs, and keep it on one line (nowrap with horizontal scroll for the longest), instead of unstyled text wrapping across two lines. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Lead with the CLI deploy command everywhere and present connecting a GitHub branch as the optional push-to-deploy follow-on (run the CLI, then connect GitHub), instead of mixing CLI-first, git-first, and "CLI or GitHub" framings. Add cursor-pointer to the How-it-works tabs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…page # Conflicts: # apps/docs/content/docs/compute/environment-variables.mdx # apps/docs/content/docs/compute/index.mdx # apps/docs/content/docs/compute/limitations.mdx # apps/docs/content/docs/compute/meta.json
Compute docs are covered by main (#7931, #7934). Drop this branch's compute docs (content/docs/compute reverted to main, content/docs/cli/compute removed, orphaned bun.svg and cspell entries reverted). Keep apps/site web changes and cross-app typography work. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Summary by CodeRabbit
New Features
Enhancements