Replace /stack with the Prisma Stack landing page#8002
Conversation
Rebuild the /stack route as a Prisma Stack marketing page: hero, an interactive "stack simplified" flow diagram (Compute, Postgres, Bun, TypeScript with SVG connectors and a cycling frontend framework), a vertical framework carousel, a Bun API grid, a Prisma Postgres data section with highlighted code, and a CTA. Built with Tailwind + @prisma/eclipse (Button, Card, Action, CodeBlock) and semantic design tokens so it themes in light and dark. Diagram and marquee geometry live in a scoped CSS module; product marks use Font Awesome plus inline Prisma and Bun marks tinted to currentColor. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedAn error occurred during the review process. Please try again later. WalkthroughThe stack page is redesigned with new framework, Bun API, and Postgres extension data, new Bun and Prisma SVG marks, a scroll-reveal wrapper, an animated connector-based diagram, a framework marquee carousel, Shiki-rendered code samples, and updated page styling. ChangesPrisma Stack page redesign
Estimated code review effort: 3 (Moderate) | ~25 minutes Related PRs: None identified from the provided information. Suggested labels: enhancement, ui, site Suggested reviewers: None identified from the provided information. A stack of tools, reworked and bright, 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Drop the bespoke .fw-* marquee CSS and fwscroll keyframe in favour of the existing @/components/marquee (two-copy loop, marquee-up keyframes, fade mask). Row styling moves to Tailwind. Trims the CSS module to the diagram/bracket geometry that has no eclipse/Tailwind equivalent. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
apps/site/src/app/stack/stack-diagram.tsx (2)
144-156: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winResize handler is unthrottled and triggers a full SVG rebuild each call.
drawFlowreflows the DOM (multipleoffsetWidth/offsetTopreads) and rewritessvg.innerHTMLon everyresizeevent, which can fire dozens of times per second during a drag-resize. Debouncing (e.g. rAF-batched or a shortsetTimeoutdebounce) would avoid layout-thrash on the hot resize path.⚡ Suggested debounce
useEffect(() => { drawFlow(); - window.addEventListener("resize", drawFlow); + let raf = 0; + const onResize = () => { + cancelAnimationFrame(raf); + raf = requestAnimationFrame(drawFlow); + }; + window.addEventListener("resize", onResize); if (document.fonts?.ready) document.fonts.ready.then(drawFlow); const t1 = setTimeout(drawFlow, 300); const t2 = setTimeout(drawFlow, 900); return () => { - window.removeEventListener("resize", drawFlow); + window.removeEventListener("resize", onResize); + cancelAnimationFrame(raf); clearTimeout(t1); clearTimeout(t2); }; }, [drawFlow]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/site/src/app/stack/stack-diagram.tsx` around lines 144 - 156, The resize path in stack-diagram.tsx is doing a full redraw on every window resize event via drawFlow, which can cause layout thrash. Update the useEffect resize listener to debounce or batch calls (for example with requestAnimationFrame or a short timeout) so drawFlow runs at most once per resize burst, and make sure the cleanup in the same effect cancels any pending scheduled redraws alongside removing the listener.
295-295: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd
aria-hiddento the dynamically-built connector SVG.The
<svg ref={svgRef}>element's content is entirely decorative (connector lines/arrowheads injected viainnerHTML) but lacksaria-hidden, so assistive tech may attempt to parse the injected path markup.♿ Suggested fix
- <svg className={styles["flow-svg"]} ref={svgRef} /> + <svg className={styles["flow-svg"]} ref={svgRef} aria-hidden />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/site/src/app/stack/stack-diagram.tsx` at line 295, The dynamically generated connector SVG in stack-diagram.tsx is decorative only, so update the SVG element rendered by the stack diagram component to include aria-hidden. Use the existing svgRef-based element in the stack diagram render path and keep the injected innerHTML connector markup unchanged; just mark the SVG as hidden from assistive technology so screen readers ignore it.apps/site/src/app/stack/reveal.tsx (1)
16-16: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
ref as nevererases type safety for the polymorphicTag.Casting to
neversilences the compiler entirely rather than narrowing to a shared DOM type. Typing the ref asHTMLElement(the common ancestor ofdiv/section) would keep type checking meaningful without the blunt cast.♻️ Suggested tightening
- const ref = useRef<HTMLDivElement>(null); + const ref = useRef<HTMLElement>(null); ... - <Tag ref={ref as never} className={`${styles.reveal} ${className ?? ""}`}> + <Tag ref={ref} className={`${styles.reveal} ${className ?? ""}`}>Also applies to: 36-40
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/site/src/app/stack/reveal.tsx` at line 16, The polymorphic Tag ref typing in reveal.tsx is being forced through a `never` cast, which bypasses useful type checking. Update the `useRef`/`Tag` usage in the reveal component to use a shared DOM type like `HTMLElement` instead of `HTMLDivElement` plus `ref as never`, so the ref remains compatible across both `div` and `section` variants. Make the same tightening where the ref is passed through the related `Tag` render path so the compiler can still validate the element shape.apps/site/src/app/stack/stack-data.ts (1)
1-28: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider whether framework accent colors should live in the design-token system.
Only the Next.js entry uses a semantic token (
var(--color-foreground-neutral)/var(--color-background-neutral-weak)); every other framework hardcodes brand hex/rgba values. Since the PR emphasizes "semantic design tokens for light and dark theming," worth confirming these brand-specific hex codes are intentionally theme-agnostic (typical for logo brand colors) rather than an oversight.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/site/src/app/stack/stack-data.ts` around lines 1 - 28, The framework color values in frameworks are mostly hardcoded brand hex/rgba strings while only Next.js uses semantic tokens, so make the color source intentional and consistent. If these badges should participate in light/dark theming, replace the inline color/bg values with semantic design tokens; otherwise keep the brand colors in a clearly separated brand palette and document that Framework entries are intentionally theme-agnostic in stack-data.ts.apps/site/src/app/stack/stack.module.css (1)
366-371: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider extending
prefers-reduced-motioncoverage to swap/hover transitions.The reduced-motion block turns off
.revealand.fw-track, but the framework-swap opacity transitions (.ss-fw,.n-frontend .node-title) and the.node:hovertransform are left active. These are auto-triggered by the diagram's cycling framework display rather than user scroll, so motion-sensitive users would still see them animate.♻️ Suggested addition
`@media` (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .fw-track { animation: none; } + .ss-fw, + .node-title, + .node { + transition: none; + } }Also applies to: 79-83, 248-252, 440-449
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/site/src/app/stack/stack.module.css` around lines 366 - 371, The reduced-motion styles in stack.module.css only disable `.reveal` and `.fw-track`, but the framework swap and hover animations still run. Extend the existing `prefers-reduced-motion` block to also neutralize the `.ss-fw` / `.n-frontend .node-title` opacity transitions and the `.node:hover` transform so the diagram’s auto-cycling framework display stays motion-free for sensitive users.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/site/src/app/stack/stack-diagram.tsx`:
- Around line 128-137: The cycling logic in stack-diagram.tsx leaves the inner
timeout unmanaged, so the callback in the useEffect around setInterval can still
run after unmount. Update the useEffect that schedules the framework swap to
store the timeout ID alongside the interval, and clear both in the cleanup
function; use the existing setSwapping, setIdx, and frameworks.length logic, but
make sure the delayed state updates are cancelled if the component unmounts
before the 240ms delay finishes.
---
Nitpick comments:
In `@apps/site/src/app/stack/reveal.tsx`:
- Line 16: The polymorphic Tag ref typing in reveal.tsx is being forced through
a `never` cast, which bypasses useful type checking. Update the `useRef`/`Tag`
usage in the reveal component to use a shared DOM type like `HTMLElement`
instead of `HTMLDivElement` plus `ref as never`, so the ref remains compatible
across both `div` and `section` variants. Make the same tightening where the ref
is passed through the related `Tag` render path so the compiler can still
validate the element shape.
In `@apps/site/src/app/stack/stack-data.ts`:
- Around line 1-28: The framework color values in frameworks are mostly
hardcoded brand hex/rgba strings while only Next.js uses semantic tokens, so
make the color source intentional and consistent. If these badges should
participate in light/dark theming, replace the inline color/bg values with
semantic design tokens; otherwise keep the brand colors in a clearly separated
brand palette and document that Framework entries are intentionally
theme-agnostic in stack-data.ts.
In `@apps/site/src/app/stack/stack-diagram.tsx`:
- Around line 144-156: The resize path in stack-diagram.tsx is doing a full
redraw on every window resize event via drawFlow, which can cause layout thrash.
Update the useEffect resize listener to debounce or batch calls (for example
with requestAnimationFrame or a short timeout) so drawFlow runs at most once per
resize burst, and make sure the cleanup in the same effect cancels any pending
scheduled redraws alongside removing the listener.
- Line 295: The dynamically generated connector SVG in stack-diagram.tsx is
decorative only, so update the SVG element rendered by the stack diagram
component to include aria-hidden. Use the existing svgRef-based element in the
stack diagram render path and keep the injected innerHTML connector markup
unchanged; just mark the SVG as hidden from assistive technology so screen
readers ignore it.
In `@apps/site/src/app/stack/stack.module.css`:
- Around line 366-371: The reduced-motion styles in stack.module.css only
disable `.reveal` and `.fw-track`, but the framework swap and hover animations
still run. Extend the existing `prefers-reduced-motion` block to also neutralize
the `.ss-fw` / `.n-frontend .node-title` opacity transitions and the
`.node:hover` transform so the diagram’s auto-cycling framework display stays
motion-free for sensitive users.
🪄 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: 47b02150-3960-4797-a503-4ee481044072
📒 Files selected for processing (8)
apps/site/src/app/stack/bun-mark.tsxapps/site/src/app/stack/framework-carousel.tsxapps/site/src/app/stack/page.tsxapps/site/src/app/stack/prisma-mark.tsxapps/site/src/app/stack/reveal.tsxapps/site/src/app/stack/stack-data.tsapps/site/src/app/stack/stack-diagram.tsxapps/site/src/app/stack/stack.module.css
- Track and clear the framework-swap setTimeout on unmount - rAF-batch the resize handler so drag-resize doesn't thrash layout - aria-hidden the runtime-built connector SVG - Drop the unused polymorphic `as` prop and `ref as never` cast in Reveal - Extend prefers-reduced-motion to the diagram's swap + hover transitions Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Addressed the review in 664bc31:
Not changed — framework accent colours in |
1 participant
Replaces the old
/stack"Prisma in your stack" link grid with a new Prisma Stack marketing page.What's here
Implementation notes
@prisma/eclipse(Button,Card,Action,CodeBlock) and semantic design tokens, so it themes in light and dark.currentColorso they take each tile's colour.Verified with typecheck, oxlint, oxfmt, and a local render at desktop and mobile widths.
🤖 Generated with Claude Code
Summary by CodeRabbit