Redesign /stack: one connected TypeScript stack - #8104
Merged
Conversation
Rework the Prisma Stack page's information architecture, copy, and interactions so the complete stack reads in seconds, within the existing Eclipse theme: - Hero states the value in one sentence, leads with npm create prisma@next, and shows an animated four-layer stack visual (pure CSS, server-rendered) - Interactive stack overview: an accessible tablist shaped like the stack (app -> Compute + Bun -> ORM -> Postgres) with every panel in static HTML - "How it works": a six-step Code Hike walkthrough (scaffold, project, model, query, deploy, extend) with token-transition code morphing and a rail showing which layers each step touches; all step code stays in the DOM for crawlers and no-JS - One section each for replaceability, runtime/deployment, data layer, and agent-friendliness, deduplicating claims the old page repeated - Prisma Next naming and real query surface (db.orm.public.*) throughout - SoftwareApplication + CollectionPage JSON-LD, semantic headings, keyboard-accessible steppers, prefers-reduced-motion support everywhere Adds codehike to apps/site (already used in docs/blog); code highlighting reuses the shiki prisma-dark CSS-variable theme so both modes work. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
WalkthroughThe ChangesStack page redesign
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Visitor
participant StackPage
participant highlightJourney
participant JourneyPlayer
participant Clipboard
Visitor->>StackPage: open /stack
StackPage->>highlightJourney: generate highlighted journey code
highlightJourney-->>StackPage: return HighlightedCode[]
StackPage->>JourneyPlayer: provide highlighted journey code
Visitor->>JourneyPlayer: select or autoplay a step
Visitor->>Clipboard: copy scaffold command
Clipboard-->>Visitor: report copy success
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
- Replace the overview tablist with an interactive stack pyramid: your
app as the tip, Prisma Postgres as the foundation, each layer a tab
with a detail panel, flowing connectors between layers
- Restore the original page's framework story: the top layer cycles
through ten frameworks (monogram + name), and the app panel lists
them all with "no opinion here, on purpose" messaging
- Restore Bun API capabilities and Postgres extensions as chip strips
in their panels; restore "Stop configuring. Start shipping." as the
final CTA; restore sub-ms co-location and agent-guardrail facts
- Pyramid-principle copy pass: every section head now leads with its
conclusion ("Prisma plus your framework is the whole stack")
- Fix icons missing from the FontAwesome kit (fa-window, fa-box-open,
fa-browser, fa-folder-tree, fa-list-check, fa-file-lines, fa-rotate,
fa-play/pause -> verified glyphs or inline SVG); verified via a
runtime ::before-content audit that now reports zero missing glyphs
- Drop the duplicate "Bring any frontend" card and the standalone
extensions row now that the pyramid panels own those messages
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/site/src/app/stack/stack-data.ts (1)
44-54: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove the duplicate Bun API list
bunApisis only defined here, while the Bun layer hardcodes the same strings inchips.items. Derive one from the other or deletebunApisif it is not used elsewhere.🤖 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 44 - 54, Remove the duplicated Bun API definitions by updating the Bun layer’s chips.items to derive from the existing bunApis data, or delete bunApis if it has no other consumers. Ensure the displayed API and role strings continue to come from a single source of truth.
🤖 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.
Nitpick comments:
In `@apps/site/src/app/stack/stack-data.ts`:
- Around line 44-54: Remove the duplicated Bun API definitions by updating the
Bun layer’s chips.items to derive from the existing bunApis data, or delete
bunApis if it has no other consumers. Ensure the displayed API and role strings
continue to come from a single source of truth.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 31356c81-264f-4a7f-b54f-e599edf16f37
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
apps/site/package.jsonapps/site/src/app/stack/copy-command.tsxapps/site/src/app/stack/framework-carousel.tsxapps/site/src/app/stack/hero-visual.tsxapps/site/src/app/stack/journey/highlight.tsapps/site/src/app/stack/journey/journey-player.tsxapps/site/src/app/stack/journey/journey-steps.tsapps/site/src/app/stack/journey/smooth-pre.tsxapps/site/src/app/stack/page.tsxapps/site/src/app/stack/spotlight-card.tsxapps/site/src/app/stack/stack-data.tsapps/site/src/app/stack/stack-diagram.tsxapps/site/src/app/stack/stack-pyramid.tsxapps/site/src/app/stack/stack.module.css
💤 Files with no reviewable changes (2)
- apps/site/src/app/stack/framework-carousel.tsx
- apps/site/src/app/stack/stack-diagram.tsx
- Reorder every stack visual to the developer-journey flow: your app, Prisma ORM, Prisma Postgres, Prisma Compute (+ Bun as the runtime row under the app in the pyramid). Applies to the journey rail, the pyramid, the hero visual, the swap cards, and the page section order (data layer now precedes runtime/deployment) - The Query step now pulses the full app -> ORM -> Postgres path, and Deploy lights the whole rail - Replace the box-drawing project tree (misaligned via font fallback) with indentation-based formatting and column-aligned, comment-dimmed `# …` annotations rendered via the text tokenizer Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Cut every outcome/agent card to a one-line body and move the detail into compact icon chips: pg_cron gets a time icon, pg_search a magnifier, pgvector stars, pg_stat_statements a chart; typed queries show a green post.title vs red post.titel pair; deploys show the command and the resulting URL. Chip icons are runtime-verified against the FontAwesome kit (fa-clock and both sparkles variants are missing from it; picked verified glyphs instead). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Framework tiles now use the real logo SVGs already shipped in public/icons/technologies (Next.js, React Router, TanStack, Astro, SvelteKit, Nuxt, Hono, NestJS, SolidStart, React) on white tiles so they read in both themes; the pyramid's cycling badge shows the logo - Elysia and Vite + React had no logo asset in the repo, so the list now features NestJS (also a create-prisma template) and React - Swap cards show the default product's logo (Prisma mark, Prisma Postgres, Bun) plus real logos of the swap targets: PostgreSQL, Vercel, AWS, Node.js Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Framework chips in the "Your application" panel now link to their Prisma Next framework guides (/docs/guides/next/frameworks/*); frameworks without a Next guide stay plain chips. - "See the framework guides" points at /docs/guides/next instead of the Prisma Next intro. - pg_search chip uses fa-magnifying-glass-arrow-right: the kit serves a broken glyph for every plain magnifying-glass/search icon. - Hero stack tapers tip-to-base with the pyramid's accent edge bars and a soft teal glow, so it previews the pyramid one scroll below. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The Bun panel renders its chips from the layer's chips.items; bunApis had no consumers left. Addresses CodeRabbit feedback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… cards - Tab panels stay in the layout (invisible, not display:none), so the section holds the tallest panel's height and switching layers no longer shifts the content below. - Framework list drops React Router, SolidStart, and React until their Prisma Next guides ship; every remaining chip links to its guide. - Outcome and swap cards are now full-card links with a visible CTA naming a real docs page (query builder, connecting any client, deployment guides, extensions, branching, migrations, Bun runtime, quickstart, data modeling, Git deploys) - all verified live. - Card layout puts the icon on its own row so titles and body copy share a left edge, consistently across sections 4-7. - Agents section gains a closing cross-link to /docs/ai. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ankur-arch
added a commit
that referenced
this pull request
Jul 27, 2026
The previous og-stack.png was an AI-generated composition with a distorted Prisma mark and off-palette styling. This one is authored as an SVG in the Eclipse house style (aurora background, Mona Sans display, mono eyebrow) and rendered to a pixel-exact 1200x630 PNG. It mirrors the page itself: the five-layer stack (your application, Bun, Prisma ORM, Prisma Postgres, Prisma Compute) with official marks, plus the npm create prisma@next command. Follow-up to #8104. Co-authored-by: Claude Fable 5 <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
1 participant
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.
What this does
Rebuilds prisma.io/stack inside the existing Eclipse theme so a developer who has never heard of the individual products understands the complete Prisma Stack in a few seconds. This is a rewrite of the page's information architecture, copy, and interactions, not a restyle.
Critique of the current page
create-prismaCTA, no Prisma Next naming, and no structured data.New structure (pyramid principle: every section leads with its conclusion)
npm create prisma@nextwith copy button, animated four-layer stack visual (pure CSS, server-rendered)Original-page features and messaging carried forward
Bun.serve(),bun test, bundler,Bun.s3,Bun.redis, …) as chips in the Bun panelLater revisions (from review feedback)
# annotationsinstead of box-drawing characters (which misaligned via font fallback)public/icons/technologies(Elysia and Vite had no asset in the repo, so the list features NestJS and React instead); swap targets show PostgreSQL, Vercel, AWS, and Node.js logos; Compute (no logo asset) uses its microchip stack iconpost.title/ redpost.titelpair for type safety) instead of dense proseRedundancies removed
Implementation notes
codehike@^1.1.0added to apps/site (already a dep of docs/blog). Token-transitions fed with real shiki tokens from the site'sprisma-darkCSS-variable theme; highlighting happens server-side.::beforecontent check); replaced eight classes that have no glyph in the kit (fa-window,fa-box-open,fa-browser,fa-folder-tree,fa-list-check,fa-file-lines,fa-rotate,fa-play/fa-pause→ verified glyphs or inline SVG). Audit now reports zero missing glyphs.aria-liveannouncements; framework cycling, autoplay, connector flow, and token transitions all stop underprefers-reduced-motion, with everything readable statically.SoftwareApplication+CollectionPageJSON-LD (five layers as an ItemList), single h1 with a clean conclusion-first h2/h3 outline, every framework name, Bun API, extension, command, and code step served in static HTML. Review script confirms valid JSON-LD, no vague link text, and no unnamed buttons introduced by this page (the few empty-name links flagged live in the shared nav/footer chrome).db.orm.public.Post.where().include().all()); schema uses@default(cuid(2)).Verification
pnpm types:check,oxlint, and a productionnext buildpass (/stackprerenders statically)🤖 Generated with Claude Code
Summary by CodeRabbit