From d8c5ac723c4f8822243f22848aa4a164de8062dc Mon Sep 17 00:00:00 2001 From: Jeremias Menichelli Date: Thu, 18 Jun 2026 12:58:22 +0200 Subject: [PATCH] chore: Handle metric cards component for md output (#46999) --- .../docs/components/MetricsStackCards.data.ts | 55 +++++++++++++ apps/docs/components/MetricsStackCards.tsx | 80 ++----------------- .../internals/generate-guides-markdown.ts | 4 +- .../markdown-schema/MetricsStackCards.ts | 9 +++ 4 files changed, 75 insertions(+), 73 deletions(-) create mode 100644 apps/docs/components/MetricsStackCards.data.ts create mode 100644 apps/docs/internals/markdown-schema/MetricsStackCards.ts diff --git a/apps/docs/components/MetricsStackCards.data.ts b/apps/docs/components/MetricsStackCards.data.ts new file mode 100644 index 00000000000..1cbd0a4a156 --- /dev/null +++ b/apps/docs/components/MetricsStackCards.data.ts @@ -0,0 +1,55 @@ +export type MetricsStackOption = { + title: string + description: string + href: string + iconKind: 'grafana' | 'datadog' | 'flame' + iconColor: string + iconBg: string + badges: { label: string; variant: 'default' | 'community' }[] +} + +export const metricsStackOptions: MetricsStackOption[] = [ + { + title: 'Grafana Cloud (SaaS)', + description: + 'Use Grafana Cloud’s managed Prometheus (works on Free + Pro tiers) and import the Supabase dashboard without running any infrastructure.', + href: '/guides/telemetry/metrics/grafana-cloud', + iconKind: 'grafana', + iconColor: '#F05A28', + iconBg: 'rgba(240,90,40,0.1)', + badges: [ + { label: 'Supabase guide', variant: 'default' }, + { label: 'Community', variant: 'community' }, + ], + }, + { + title: 'Grafana + self-hosted Prometheus', + description: + 'Run Prometheus yourself following the official installation guidance and pair it with Grafana plus our dashboard JSON and alert pack.', + href: '/guides/telemetry/metrics/grafana-self-hosted', + iconKind: 'grafana', + iconColor: '#F05A28', + iconBg: 'rgba(240,90,40,0.1)', + badges: [{ label: 'Supabase guide', variant: 'default' }], + }, + { + title: 'Datadog', + description: + 'Scrape the Metrics API with the Datadog Agent or Prometheus remote write and monitor Supabase alongside your app telemetry.', + href: 'https://docs.datadoghq.com/integrations/supabase/', + iconKind: 'datadog', + iconColor: '#632CA6', + iconBg: 'rgba(99,44,166,0.1)', + badges: [{ label: 'Community', variant: 'community' }], + }, + { + title: 'Vendor-agnostic / BYO Prometheus', + description: + 'Connect AWS AMP, Grafana Mimir, VictoriaMetrics, or any Prometheus-compatible SaaS with the same scrape job pattern.', + href: '/guides/telemetry/metrics/vendor-agnostic', + iconKind: 'flame', + iconColor: '#0BA678', + iconBg: 'rgba(11,166,120,0.1)', + badges: [{ label: 'Supabase guide', variant: 'default' }], + }, +] diff --git a/apps/docs/components/MetricsStackCards.tsx b/apps/docs/components/MetricsStackCards.tsx index 3ee2cbfb0ec..895a5b7daee 100644 --- a/apps/docs/components/MetricsStackCards.tsx +++ b/apps/docs/components/MetricsStackCards.tsx @@ -1,79 +1,15 @@ -import Link from 'next/link' import { Datadog, Grafana } from 'icons' import { Flame } from 'lucide-react' +import Link from 'next/link' import type { ReactNode } from 'react' -interface MetricsStackOption { - title: string - description: ReactNode - href: string - icon: ReactNode - iconColor: string - iconBg: string - badges: { label: string; variant: 'default' | 'community' }[] -} +import { metricsStackOptions, type MetricsStackOption } from './MetricsStackCards.data' -const metricsStackOptions: MetricsStackOption[] = [ - { - title: 'Grafana Cloud (SaaS)', - description: ( - <> - Use Grafana Cloud’s managed Prometheus (works on Free + Pro tiers) and import the Supabase - dashboard without running any infrastructure. - - ), - href: '/guides/telemetry/metrics/grafana-cloud', - icon: , - iconColor: '#F05A28', - iconBg: 'rgba(240,90,40,0.1)', - badges: [ - { label: 'Supabase guide', variant: 'default' }, - { label: 'Community', variant: 'community' }, - ], - }, - { - title: 'Grafana + self-hosted Prometheus', - description: ( - <> - Run Prometheus yourself following the official installation guidance and pair it with - Grafana plus our dashboard JSON and alert pack. - - ), - href: '/guides/telemetry/metrics/grafana-self-hosted', - icon: , - iconColor: '#F05A28', - iconBg: 'rgba(240,90,40,0.1)', - badges: [{ label: 'Supabase guide', variant: 'default' }], - }, - { - title: 'Datadog', - description: ( - <> - Scrape the Metrics API with the Datadog Agent or Prometheus remote write and monitor - Supabase alongside your app telemetry. - - ), - href: 'https://docs.datadoghq.com/integrations/supabase/', - icon: , - iconColor: '#632CA6', - iconBg: 'rgba(99,44,166,0.1)', - badges: [{ label: 'Community', variant: 'community' }], - }, - { - title: 'Vendor-agnostic / BYO Prometheus', - description: ( - <> - Connect AWS AMP, Grafana Mimir, VictoriaMetrics, or any Prometheus-compatible SaaS with the - same scrape job pattern. - - ), - href: '/guides/telemetry/metrics/vendor-agnostic', - icon: , - iconColor: '#0BA678', - iconBg: 'rgba(11,166,120,0.1)', - badges: [{ label: 'Supabase guide', variant: 'default' }], - }, -] +const ICONS: Record = { + grafana: , + datadog: , + flame: , +} export function MetricsStackCards() { return ( @@ -86,7 +22,7 @@ export function MetricsStackCards() { className="flex h-10 w-10 items-center justify-center rounded-full text-base font-semibold" style={{ color: option.iconColor, backgroundColor: option.iconBg }} > - {option.icon} + {ICONS[option.iconKind]}

{option.title}

diff --git a/apps/docs/internals/generate-guides-markdown.ts b/apps/docs/internals/generate-guides-markdown.ts index 67bd4a9d243..22aee30a6ae 100644 --- a/apps/docs/internals/generate-guides-markdown.ts +++ b/apps/docs/internals/generate-guides-markdown.ts @@ -12,11 +12,12 @@ import { gfm } from 'micromark-extension-gfm' import { mdxjs } from 'micromark-extension-mdxjs' import { getInternalLinkBaseUrl, prefixInternalLinks } from './internal-links' +import { Admonition } from './markdown-schema/Admonition' import { Link } from './markdown-schema/Link' +import { MetricsStackCards } from './markdown-schema/MetricsStackCards' import { Panel } from './markdown-schema/Panel' import { StepHike } from './markdown-schema/StepHike' import { TabPanel } from './markdown-schema/TabPanel' -import { Admonition } from './markdown-schema/Admonition' import { Price } from './markdown-schema/Price' const PARTIALS_DIR = path.join(process.cwd(), 'content', '_partials') @@ -136,6 +137,7 @@ const SCHEMA: ComponentSchema = { IconPanel: Panel, ...StepHike, TabPanel, + MetricsStackCards, } async function generateOne(filePath: string, linkBaseUrl: string): Promise { diff --git a/apps/docs/internals/markdown-schema/MetricsStackCards.ts b/apps/docs/internals/markdown-schema/MetricsStackCards.ts new file mode 100644 index 00000000000..b8dc2f8fc60 --- /dev/null +++ b/apps/docs/internals/markdown-schema/MetricsStackCards.ts @@ -0,0 +1,9 @@ +import { metricsStackOptions } from '../../components/MetricsStackCards.data' +import { withDocsBasePath } from '../internal-links' + +export const MetricsStackCards = (): string => + metricsStackOptions + .map( + ({ title, description, href }) => `- [${title}](${withDocsBasePath(href)}). ${description}` + ) + .join('\n')