fix(blog): replace unreadable mermaid diagram in custom domains post

[ankur-arch]

Replaces the mermaid sequence diagram in the Prisma Compute custom domains post with a plain table. The mermaid renderer outputs very faint/washed-out text that makes the diagram hard to follow.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Documentation
  • Updated the custom domains blog post to use a clearer, step-by-step visual of the ACME certificate provisioning flow.
• New Features
  • Added a reusable sequence diagram component to render the TLS workflow illustration consistently.
• Style
  • Introduced dedicated styles for sequence diagrams (layout, lifelines, arrows, and step labels) to improve readability and visual consistency.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blog	Ready	Preview, Comment	Jun 15, 2026 11:43am
docs	Ready	Preview, Comment	Jun 15, 2026 11:43am
eclipse	Ready	Preview, Comment	Jun 15, 2026 11:43am
site	Ready	Preview, Comment	Jun 15, 2026 11:43am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

An inline Mermaid sequence diagram illustrating the ACME http-01 certificate provisioning workflow is replaced with a custom React SequenceDiagram component. The component renders an SVG diagram with the same seven-stage workflow, supported by new CSS styling for SVG layout, arrows, participant labels, and numbered step indicators.

Changes

Mermaid Diagram to React Component Conversion

Layer / File(s)	Summary
SequenceDiagram component: constants, data, and SVG rendering apps/blog/content/blog/prisma-compute-custom-domains/SequenceDiagram.tsx	Exports a new SequenceDiagram React component with diagram layout constants (dimensions, offsets, step spacing), a STEPS array enumerating participant interactions and message flows with dashed/solid styling, and SVG rendering logic that draws participant boxes, lifelines, numbered arrows (straight and self-loop), and computed label positions.
MDX blog post integration apps/blog/content/blog/prisma-compute-custom-domains/index.mdx	Adds an import for the SequenceDiagram component and replaces the inline Mermaid sequenceDiagram code block with a rendered <SequenceDiagram /> component, preserving all seven stages of the custom domain/ACME workflow.
CSS styling for sequence diagram apps/blog/src/app/global.css	Introduces .seq-diagram container class and helper classes for SVG rendering (participant boxes, lifelines, solid/dashed arrows, labels, numbered elements) with accent-based CSS variables controlling colors and typography.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• prisma/web#7942: Introduced the original blog post file (apps/blog/content/blog/prisma-compute-custom-domains/index.mdx) containing the Mermaid diagram that this PR refactors into a React component.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change: replacing an unreadable mermaid diagram with a custom implementation to improve readability in the blog post.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Jun 15, 2026, 11:49 AM

[coderabbitai]

Actionable comments posted: 1

🤖 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/blog/content/blog/prisma-compute-custom-domains/index.mdx`:
- Around line 56-66: Swap the order of steps 6 and 7 in the table to reflect the
correct ACME http-01 validation sequence. Currently, step 6 shows the
Certificate authority checking the HTTP challenge path before step 7 shows
Prisma Compute serving the challenge response. In the ACME flow, Prisma Compute
must publish the challenge response at the target URL first, then the
Certificate authority can validate it by checking that path. Move the "Serve
challenge response" action to step 6 and the "Check HTTP challenge path" action
to step 7 to match both the correct ACME sequence and the prose description.

🪄 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: 24317fdc-ff63-4eab-aed3-98d75bde353f

📥 Commits

Reviewing files that changed from the base of the PR and between 8d45ce8 and 9d4c84f.

📒 Files selected for processing (1)

• apps/blog/content/blog/prisma-compute-custom-domains/index.mdx