feat: DR-8328 Add compute page first stage#7859
Open
carlagn wants to merge 50 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Contributor
|
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
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
Comment on lines
+9
to
22
| :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 "fumadocs-openapi/css/preset.css"; | ||
| @import "@prisma-docs/ui/styles"; | ||
| @source "../../node_modules/streamdown/dist/*.js"; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In standard CSS, what happens to @importrules that appear after a qualified rule like:root { ... }? Also, for Tailwind CSS v4 with Lightning CSS/PostCSS, does the toolchain safely process late @import rules in source CSS?
💡 Result:
In standard CSS, @import rules that appear after a qualified rule like :root { ... } are invalid and ignored by user agents (browsers). The CSS specification (Cascading and Inheritance Levels 3-6) requires all @import rules to precede all other valid at-rules and style rules (except @charset, @layer statements, and @supports-condition), or else they are invalid. A qualified rule is a style rule (selector + block), so any @import after it is ignored. This is confirmed by MDN, W3C specs, and browser behavior. For Tailwind CSS v4 with Lightning CSS/PostCSS, the toolchain does not safely process late @import rules in source CSS. Tailwind v4 uses Lightning CSS for processing, which enforces the same CSS validity rules: late @import rules cause errors or are invalid. Tailwind's built-in @import handling (replacing postcss-import) processes valid @import rules at the top, inlining them while preserving order and conditions, but late @imports remain invalid per CSS rules and Lightning CSS bundling docs explicitly state they cause errors. Issues in Tailwind repos confirm late @imports (e.g., after @import "tailwindcss") are ignored or fail, requiring them at the top (e.g., before Tailwind import for fonts). No evidence of special handling for late @imports; source CSS must follow standard CSS positioning rules.
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/CSS/%40import
- 2: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@import
- 3: https://developer.mozilla.org/en-US/docs/Web/CSS/@import
- 4: https://lightningcss.dev/bundling.html
- 5: https://www.w3.org/TR/css-cascade-3/Overview.html
- 6: https://www.w3.org/TR/REC-CSS2/cascade.html
- 7: https://drafts.csswg.org/css-cascade-6/
- 8: https://tailwindcss.com/blog/tailwindcss-v4
- 9: https://tailwindcss.com/docs/upgrade-guide
- 10: https://tailwindcss.com/docs/functions-and-directives
- 11: Incorrect import order with nested layers tailwindlabs/tailwindcss#19931
- 12: Resolve
@importin core tailwindlabs/tailwindcss#14446 - 13: @import statement is not working in v4.0.2 tailwindlabs/tailwindcss#16136
Move the :root block below all @import rules—this placement violates CSS specifications.
Per the CSS Cascade specification (Levels 3–6), all @import rules must precede any qualified rules (like :root { ... }). Any @import that appears after a qualified rule is invalid and ignored by browsers and build tools alike. Tailwind CSS v4 with Lightning CSS enforces these same rules strictly—it doesn't provide special handling for late imports.
The current code at lines 9–17 places :root before the imports at lines 18–22, which means fumadocs-ui, fumadocs-openapi, and @prisma-docs/ui styles will be silently dropped during the build, leaving your UI incomplete.
Proposed fix
`@import` "tailwindcss";
`@import` "@prisma/eclipse/styles/globals.css";
-
-: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` "fumadocs-openapi/css/preset.css";
`@import` "@prisma-docs/ui/styles";
`@source` "../../node_modules/streamdown/dist/*.js";
+
+: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;
+}🧰 Tools
🪛 Stylelint (17.9.0)
[error] 18-18: Invalid position for @import rule (no-invalid-position-at-import-rule)
(no-invalid-position-at-import-rule)
[error] 19-19: Invalid position for @import rule (no-invalid-position-at-import-rule)
(no-invalid-position-at-import-rule)
[error] 20-20: Invalid position for @import rule (no-invalid-position-at-import-rule)
(no-invalid-position-at-import-rule)
[error] 21-21: Invalid position for @import rule (no-invalid-position-at-import-rule)
(no-invalid-position-at-import-rule)
[error] 22-22: Unexpected unknown at-rule "@source" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/docs/src/app/global.css` around lines 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).
Contributor
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
| @@ -0,0 +1,1626 @@ | |||
| "use client"; | |||
|
|
|||
| import { useEffect, useRef, useState } from "react"; | |||
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify if React namespace types are used without explicit type imports,
# and inspect TS compiler options that influence UMD global access.
rg -n --type=tsx 'React\.ReactNode|React\.[A-Z][A-Za-z]+'
fd -i 'tsconfig*.json' -x sh -c 'echo "---- $1 ----"; sed -n "1,220p" "$1"' sh {}Repository: prisma/web
Length of output: 5043
🏁 Script executed:
cat -n apps/site/src/app/compute/how-it-works.tsx | head -200Repository: prisma/web
Length of output: 7300
🏁 Script executed:
grep -n 'React\.' apps/site/src/app/compute/how-it-works.tsxRepository: prisma/web
Length of output: 127
Import ReactNode type to fix React.ReactNode reference
Line 185 references React.ReactNode, but the React namespace isn't imported on line 3—only the hooks are. With "strict": true in your tsconfig, this fails type-checking. Import the type directly instead of relying on the namespace.
Suggested fix
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
...
-function AnimatedLine({ children }: { children: React.ReactNode }) {
+function AnimatedLine({ children }: { children: ReactNode }) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/compute/how-it-works.tsx` at 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).
Comment on lines
+1548
to
+1551
| <TabsTrigger | ||
| key={tab.value} | ||
| value={tab.value} | ||
| className={cn( |
Contributor
There was a problem hiding this comment.
Inactive mobile tabs can lose an accessible name
Because the label is hidden on mobile for inactive tabs (Lines 1576-1582), those TabsTriggers may become icon-only with no accessible text. Add an explicit name on the trigger.
Suggested fix
<TabsTrigger
key={tab.value}
value={tab.value}
+ aria-label={tab.label}
className={cn(Also applies to: 1576-1582
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/compute/how-it-works.tsx` around lines 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.
Contributor
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
| </div> | ||
| </section> | ||
| <div className="before:inset-x-20 before:inset-y-0 before:absolute relative before:content-[''] before:pointer-events-none before:-z-0 rounded-full before:bg-[radial-gradient(64.76%_75.81%_at_50%_50%,var(--color-background-ppg)_0%,var(--color-background-default)_70%)]"> | ||
| <div className="inset-x-20 inset-y-0 bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-cente absolute inset-0 z-1 pointer-events-none" /> |
Contributor
There was a problem hiding this comment.
Tailwind class typo drops background centering.
Line 487 uses bg-cente, so the centering utility won’t apply.
Suggested fix
- <div className="inset-x-20 inset-y-0 bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-cente absolute inset-0 z-1 pointer-events-none" />
+ <div className="inset-x-20 inset-y-0 bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-center absolute inset-0 z-1 pointer-events-none" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div className="inset-x-20 inset-y-0 bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-cente absolute inset-0 z-1 pointer-events-none" /> | |
| <div className="inset-x-20 inset-y-0 bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-center absolute inset-0 z-1 pointer-events-none" /> |
🤖 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` at 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.
Contributor
🍈 Lychee Link Check Report67 links: ✅ All links are working!Full Statistics Table
|
…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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Enhancements