diff --git a/components/blog/AnalyticsArchitecture.tsx b/components/blog/AnalyticsArchitecture.tsx new file mode 100644 index 000000000..56cccb895 --- /dev/null +++ b/components/blog/AnalyticsArchitecture.tsx @@ -0,0 +1,86 @@ +import { Globe, BarChart3, Database, Server, Gauge, ArrowRight } from 'lucide-react' +import { cn } from '@/lib/utils' +import type { ComponentType } from 'react' + +/** + * Diagram for the ClickHouse analytics blog post: the path a pageview takes from + * the browser through Plausible CE into ClickHouse, with PostgreSQL and the + * separate Core Web Vitals store shown as satellites rather than in the hot path. + * + * Server-rendered, theme-aware via the fd-* tokens. The arrows are decorative + * (aria-hidden); the node labels carry the meaning, and the whole figure has an + * aria-label that reads the flow as one sentence for screen readers. + */ + +function Node({ + icon: Icon, + title, + subtitle, + muted = false, +}: { + icon: ComponentType<{ className?: string }> + title: string + subtitle: string + muted?: boolean +}) { + return ( +
+ +
{title}
+
{subtitle}
+
+ ) +} + +function Arrow() { + return ( +