mirror of
https://github.com/supabase/supabase.git
synced 2026-06-28 11:33:52 -04:00
Matt Linkous
71e94a1590
- **Draft** - **Update** - **feat: add beautiful-mermaid and integration flow diagrams** - **Make mermaid theme match site** <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Mermaid diagram rendering in docs with themed SVG output. * **Documentation** * Added "Supabase Partner Integration Guide" covering simple and signed-redirect flows, JWT verification, sequence diagrams, and key guidance. * Updated site navigation to include the new partner integration guide. * **Chores** * Added Mermaid rendering dependency. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45730) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
26 lines
724 B
TypeScript
26 lines
724 B
TypeScript
import { renderMermaidSVG } from 'beautiful-mermaid'
|
|
|
|
interface MermaidProps {
|
|
chart: string
|
|
}
|
|
|
|
export function Mermaid({ chart }: MermaidProps) {
|
|
const svg = renderMermaidSVG(chart, {
|
|
bg: 'hsl(var(--background-default))',
|
|
fg: 'hsl(var(--foreground-default))',
|
|
accent: 'hsl(var(--brand-default))',
|
|
muted: 'hsl(var(--foreground-light))',
|
|
line: 'hsl(var(--border-strong))',
|
|
border: 'hsl(var(--border-strong))',
|
|
surface: 'hsl(var(--background-surface-200))',
|
|
transparent: true,
|
|
})
|
|
|
|
return (
|
|
<div
|
|
className="my-6 overflow-x-auto rounded-md border bg-surface-100 p-4 [&>svg]:mx-auto [&>svg]:h-auto [&>svg]:max-w-full"
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
)
|
|
}
|