feat: complete MDX migration for blog, fix diagram fidelity and refactor styling architecture

apps/web/src/content-engine/components.ts

@@ -0,0 +1,39 @@
+
+import { LeadParagraph } from '../components/ArticleParagraph';
+import { H2, H3 } from '../components/ArticleHeading';
+import { Paragraph } from '../components/ArticleParagraph';
+import { ArticleBlockquote } from '../components/ArticleBlockquote';
+import { Marker } from '../components/Marker';
+import { ComparisonRow } from '../components/Landing/ComparisonRow';
+import { StatsDisplay } from '../components/StatsDisplay';
+import { Mermaid } from '../components/Mermaid';
+import { DiagramState } from '../components/DiagramState';
+import { DiagramTimeline } from '../components/DiagramTimeline';
+import { DiagramGantt } from '../components/DiagramGantt';
+import { DiagramPie } from '../components/DiagramPie';
+import { DiagramSequence } from '../components/DiagramSequence';
+import { IconList, IconListItem } from '../components/IconList';
+
+import { Section } from '../components/Section';
+import { Reveal } from '../components/Reveal';
+
+export const mdxComponents = {
+    LeadParagraph,
+    H2,
+    H3,
+    Paragraph,
+    ArticleBlockquote,
+    Marker,
+    ComparisonRow,
+    StatsDisplay,
+    Mermaid,
+    DiagramState,
+    DiagramTimeline,
+    DiagramGantt,
+    DiagramPie,
+    DiagramSequence,
+    IconList,
+    IconListItem,
+    Section,
+    Reveal
+};

apps/web/src/content-engine/definitions.ts

@@ -0,0 +1,55 @@
+
+import { ComponentDefinition } from '@mintel/content-engine';
+
+export const componentDefinitions: ComponentDefinition[] = [
+    {
+        name: 'LeadParagraph',
+        description: 'Large, introductory text for the beginning of the article.',
+        usageExample: '<LeadParagraph>First meaningful sentence.</LeadParagraph>'
+    },
+    {
+        name: 'H2',
+        description: 'Section heading.',
+        usageExample: '<H2>Section Title</H2>'
+    },
+    {
+        name: 'H3',
+        description: 'Subsection heading.',
+        usageExample: '<H3>Subtitle</H3>'
+    },
+    {
+        name: 'Paragraph',
+        description: 'Standard body text paragraph.',
+        usageExample: '<Paragraph>Some text...</Paragraph>'
+    },
+    {
+        name: 'ArticleBlockquote',
+        description: 'A prominent quote block for key insights.',
+        usageExample: '<ArticleBlockquote>Important quote</ArticleBlockquote>'
+    },
+    {
+        name: 'Marker',
+        description: 'Yellow highlighter effect for very important phrases.',
+        usageExample: '<Marker>Highlighted Text</Marker>'
+    },
+    {
+        name: 'ComparisonRow',
+        description: 'A component comparing a negative vs positive scenario.',
+        usageExample: '<ComparisonRow description="Cost Comparison" negativeLabel="Lock-In" negativeText="High costs" positiveLabel="Open" positiveText="Control" />'
+    },
+    {
+        name: 'StatsDisplay',
+        description: 'A bold visual component to highlight a key statistic or number.',
+        usageExample: '<StatsDisplay value="42%" label="Cost Reduction" subtext="Average savings by switching to open standards." />'
+    },
+    {
+        name: 'Mermaid',
+        description: 'Renders a Mermaid diagram.',
+        usageExample: '<Mermaid graph="graph TD..." id="my-diagram" />'
+    },
+    {
+        name: 'DiagramState',
+        description: 'A state transition diagram.',
+        usageExample: '<DiagramState states={["A", "B"]} ... />'
+    }
+];

apps/web/src/content-engine/registry.tsx

@@ -0,0 +1,3 @@
+
+export * from './definitions';
+export { mdxComponents } from './components';