chore: Handle metric cards component for md output (#46999)

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' }],
+  },
+]

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: <Grafana className="h-5 w-5" />,
-    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: <Grafana className="h-5 w-5" />,
-    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: <Datadog className="h-5 w-5" />,
-    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: <Flame className="h-5 w-5" strokeWidth={1.5} />,
-    iconColor: '#0BA678',
-    iconBg: 'rgba(11,166,120,0.1)',
-    badges: [{ label: 'Supabase guide', variant: 'default' }],
-  },
-]
+const ICONS: Record<MetricsStackOption['iconKind'], ReactNode> = {
+  grafana: <Grafana className="h-5 w-5" />,
+  datadog: <Datadog className="h-5 w-5" />,
+  flame: <Flame className="h-5 w-5" strokeWidth={1.5} />,
+}
 
 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]}
               </span>
               <p className="text-base font-medium text-foreground">{option.title}</p>
             </div>

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<string> {

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')