@eventcatalog/core 4.10.15 → 4.11.0

package/eventcatalog/src/components/MDX/CodeGroup/code-group-icons.ts

@@ -0,0 +1,345 @@
+import { buildUrl } from '@utils/url-builder';
+
+/** Maps fence languages and file extensions to an icon in `public/icons/languages`. */
+const LANGUAGE_ICONS: Record<string, string> = {
+  js: 'javascript',
+  javascript: 'javascript',
+  jsx: 'react',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  ts: 'typescript',
+  typescript: 'typescript',
+  tsx: 'react',
+  node: 'nodejs',
+  nodejs: 'nodejs',
+  py: 'python',
+  python: 'python',
+  rb: 'ruby',
+  ruby: 'ruby',
+  php: 'php',
+  cs: 'csharp',
+  csharp: 'csharp',
+  'c#': 'csharp',
+  dotnet: 'dotnet',
+  fsharp: 'fsharp',
+  vb: 'dotnet',
+  go: 'go',
+  golang: 'go',
+  java: 'java',
+  kt: 'kotlin',
+  kotlin: 'kotlin',
+  gradle: 'gradle',
+  swift: 'swift',
+  rs: 'rust',
+  rust: 'rust',
+  c: 'c',
+  h: 'c',
+  cpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  hpp: 'cpp',
+  'c++': 'cpp',
+  dart: 'dart',
+  scala: 'scala',
+  r: 'r',
+  perl: 'perl',
+  pl: 'perl',
+  lua: 'lua',
+  hs: 'haskell',
+  haskell: 'haskell',
+  clj: 'clojure',
+  clojure: 'clojure',
+  erl: 'erlang',
+  erlang: 'erlang',
+  ml: 'ocaml',
+  ocaml: 'ocaml',
+  zig: 'zig',
+  deno: 'deno',
+  bun: 'bun',
+  sol: 'solidity',
+  solidity: 'solidity',
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  shell: 'bash',
+  console: 'bash',
+  curl: 'curl',
+  yaml: 'yaml',
+  yml: 'yaml',
+  json: 'json',
+  jsonc: 'json',
+  json5: 'json',
+  jsonschema: 'json-schema',
+  'json-schema': 'json-schema',
+  toml: 'toml',
+  md: 'markdown',
+  mdx: 'markdown',
+  markdown: 'markdown',
+  html: 'html',
+  htm: 'html',
+  vue: 'vue',
+  svelte: 'svelte',
+  angular: 'angular',
+  css: 'css',
+  scss: 'sass',
+  less: 'css',
+  graphql: 'graphql',
+  gql: 'graphql',
+  sql: 'mysql',
+  mysql: 'mysql',
+  postgres: 'postgresql',
+  postgresql: 'postgresql',
+  psql: 'postgresql',
+  docker: 'docker',
+  dockerfile: 'docker',
+  git: 'git',
+  diff: 'git',
+  hcl: 'terraform',
+  tf: 'terraform',
+  terraform: 'terraform',
+  nginx: 'nginx',
+  kafka: 'kafka',
+  '.net': 'dotnet',
+  aspnet: 'dotnet',
+  'asp.net': 'dotnet',
+  vbnet: 'dotnet',
+  'vb.net': 'dotnet',
+  fs: 'fsharp',
+  'f#': 'fsharp',
+  kts: 'kotlin',
+  groovy: 'gradle',
+  maven: 'maven',
+  pom: 'maven',
+  spring: 'spring',
+  jl: 'julia',
+  julia: 'julia',
+  f90: 'fortran',
+  fortran: 'fortran',
+  cr: 'crystal',
+  crystal: 'crystal',
+  nim: 'nim',
+  elm: 'elm',
+  purs: 'purescript',
+  purescript: 'purescript',
+  re: 'reasonml',
+  reason: 'reasonml',
+  reasonml: 'reasonml',
+  flutter: 'flutter',
+  grpc: 'grpc',
+  sqlite: 'sqlite',
+  mongodb: 'mongodb',
+  mongo: 'mongodb',
+  redis: 'redis',
+  prisma: 'prisma',
+  wasm: 'webassembly',
+  wat: 'webassembly',
+  webassembly: 'webassembly',
+  sass: 'sass',
+  tailwind: 'tailwind',
+  tailwindcss: 'tailwind',
+  http: 'httpie',
+  httpie: 'httpie',
+  swagger: 'swagger',
+  ipynb: 'jupyter',
+  jupyter: 'jupyter',
+  android: 'android',
+  ios: 'apple',
+  objc: 'apple',
+  objectivec: 'apple',
+  'objective-c': 'apple',
+  ino: 'arduino',
+  arduino: 'arduino',
+  unity: 'unity',
+  vim: 'vim',
+  hasura: 'hasura',
+};
+
+/** Languages that have a display name but no icon. */
+const NAME_ONLY_LANGUAGES: Record<string, string> = {
+  xml: 'XML',
+  xsd: 'XML Schema',
+  txt: 'Text',
+  text: 'Text',
+  plaintext: 'Text',
+  plain: 'Text',
+  ini: 'INI',
+  properties: 'Properties',
+  env: 'Env',
+  dotenv: 'Env',
+  makefile: 'Makefile',
+  make: 'Makefile',
+  cmake: 'CMake',
+  tex: 'LaTeX',
+  latex: 'LaTeX',
+  csv: 'CSV',
+  groovy: 'Groovy',
+  elixir: 'Elixir',
+  ex: 'Elixir',
+  exs: 'Elixir',
+  matlab: 'MATLAB',
+  ps1: 'PowerShell',
+  powershell: 'PowerShell',
+  pwsh: 'PowerShell',
+  bat: 'Batch',
+  cmd: 'Batch',
+  regex: 'Regex',
+  mermaid: 'Mermaid',
+  hbs: 'Handlebars',
+  handlebars: 'Handlebars',
+  ejs: 'EJS',
+  pug: 'Pug',
+  nix: 'Nix',
+  cobol: 'COBOL',
+  scheme: 'Scheme',
+  racket: 'Racket',
+  lisp: 'Lisp',
+  ada: 'Ada',
+  pascal: 'Pascal',
+  prolog: 'Prolog',
+  smalltalk: 'Smalltalk',
+  vhdl: 'VHDL',
+  verilog: 'Verilog',
+  asm: 'Assembly',
+  assembly: 'Assembly',
+};
+
+/** Formats that already have an icon elsewhere under `public/icons`. */
+const SCHEMA_ICONS: Record<string, string> = {
+  avro: 'avro',
+  avsc: 'avro',
+  proto: 'proto',
+  protobuf: 'proto',
+  openapi: 'openapi',
+  asyncapi: 'asyncapi',
+};
+
+const LANGUAGE_NAMES: Record<string, string> = {
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  react: 'React',
+  nodejs: 'Node.js',
+  python: 'Python',
+  ruby: 'Ruby',
+  php: 'PHP',
+  csharp: 'C#',
+  dotnet: '.NET',
+  go: 'Go',
+  java: 'Java',
+  kotlin: 'Kotlin',
+  gradle: 'Gradle',
+  swift: 'Swift',
+  rust: 'Rust',
+  c: 'C',
+  cpp: 'C++',
+  dart: 'Dart',
+  scala: 'Scala',
+  r: 'R',
+  perl: 'Perl',
+  lua: 'Lua',
+  haskell: 'Haskell',
+  clojure: 'Clojure',
+  erlang: 'Erlang',
+  ocaml: 'OCaml',
+  zig: 'Zig',
+  deno: 'Deno',
+  bun: 'Bun',
+  solidity: 'Solidity',
+  bash: 'Shell',
+  curl: 'cURL',
+  yaml: 'YAML',
+  json: 'JSON',
+  'json-schema': 'JSON Schema',
+  toml: 'TOML',
+  markdown: 'Markdown',
+  html: 'HTML',
+  vue: 'Vue',
+  svelte: 'Svelte',
+  angular: 'Angular',
+  css: 'CSS',
+  graphql: 'GraphQL',
+  mysql: 'SQL',
+  postgresql: 'PostgreSQL',
+  docker: 'Docker',
+  git: 'Git',
+  terraform: 'Terraform',
+  nginx: 'NGINX',
+  kafka: 'Kafka',
+  avro: 'Avro',
+  proto: 'Protobuf',
+  openapi: 'OpenAPI',
+  asyncapi: 'AsyncAPI',
+  fsharp: 'F#',
+  maven: 'Maven',
+  spring: 'Spring',
+  julia: 'Julia',
+  fortran: 'Fortran',
+  crystal: 'Crystal',
+  nim: 'Nim',
+  elm: 'Elm',
+  purescript: 'PureScript',
+  reasonml: 'ReasonML',
+  flutter: 'Flutter',
+  grpc: 'gRPC',
+  sqlite: 'SQLite',
+  mongodb: 'MongoDB',
+  redis: 'Redis',
+  prisma: 'Prisma',
+  webassembly: 'WebAssembly',
+  sass: 'Sass',
+  tailwind: 'Tailwind CSS',
+  httpie: 'HTTP',
+  swagger: 'Swagger',
+  jupyter: 'Jupyter',
+  android: 'Android',
+  apple: 'Apple',
+  arduino: 'Arduino',
+  unity: 'Unity',
+  vim: 'Vim',
+  hasura: 'Hasura',
+};
+
+const normalize = (value: string) => value.trim().toLowerCase();
+
+const getExtension = (label?: string) => {
+  const match = label?.trim().match(/\.([a-z0-9+#]+)$/i);
+  return match?.[1];
+};
+
+const resolveIconKey = (language?: string, label?: string) => {
+  for (const candidate of [language, getExtension(label)]) {
+    if (!candidate) continue;
+    const key = normalize(candidate);
+    if (LANGUAGE_ICONS[key]) return LANGUAGE_ICONS[key];
+    if (SCHEMA_ICONS[key]) return SCHEMA_ICONS[key];
+  }
+  return undefined;
+};
+
+/**
+ * Human readable language name for a code panel, for example `Python` for `py`.
+ * Falls back to the fence language as written, or the label when there is no language.
+ */
+export function getCodeLanguageName(language?: string, label?: string): string {
+  const key = resolveIconKey(language, label);
+  if (key && LANGUAGE_NAMES[key]) return LANGUAGE_NAMES[key];
+  for (const candidate of [language, getExtension(label)]) {
+    if (candidate && NAME_ONLY_LANGUAGES[normalize(candidate)]) return NAME_ONLY_LANGUAGES[normalize(candidate)];
+  }
+  const raw = language?.trim();
+  if (raw) return raw.charAt(0).toUpperCase() + raw.slice(1);
+  return label ?? '';
+}
+
+/**
+ * Resolves an icon URL for a code panel from its fence language, falling back to the file
+ * extension in the panel label. Returns `undefined` when there is no matching icon.
+ */
+export function getCodeLanguageIconUrl(language?: string, label?: string): string | undefined {
+  for (const candidate of [language, getExtension(label)]) {
+    if (!candidate) continue;
+    const key = normalize(candidate);
+    if (LANGUAGE_ICONS[key]) return buildUrl(`/icons/languages/${LANGUAGE_ICONS[key]}.svg`, true);
+    if (SCHEMA_ICONS[key]) return buildUrl(`/icons/${SCHEMA_ICONS[key]}.svg`, true);
+  }
+  return undefined;
+}

package/eventcatalog/src/components/MDX/CodeGroup/code-group.css

@@ -0,0 +1,22 @@
+/* Overrides for markup generated by syntax highlighters, outside React's control. */
+.ec-code-group [data-example-code-block] {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.ec-code-group [data-code-panel] .expressive-code {
+  margin: 0;
+}
+.ec-code-group [data-code-panel] .frame {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.ec-code-group [data-code-panel] .frame > .header,
+.ec-code-group [data-code-panel] .frame .copy {
+  display: none;
+}
+.ec-code-group [data-code-panel] pre {
+  border-radius: 0;
+}

package/eventcatalog/src/components/MDX/CodeGroup/code-group.spec.tsx

@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import CodeGroup from './CodeGroup';
+import { MarkdownCodeGroup } from './MarkdownCodeGroup';
+import { parseCodePanels } from './parse-panels';
+import { getCodeLanguageIconUrl, getCodeLanguageName } from './code-group-icons';
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+const roots: Root[] = [];
+function render(element: React.ReactNode) {
+  const container = document.createElement('div');
+  document.body.append(container);
+  const root = createRoot(container);
+  roots.push(root);
+  act(() => root.render(element));
+  return container;
+}
+afterEach(() => {
+  act(() => roots.splice(0).forEach((root) => root.unmount()));
+  document.body.innerHTML = '';
+});
+const items = [
+  { label: 'hello.js', language: 'js', content: <pre>first</pre> },
+  { label: 'hello.py', language: 'python', content: <pre>second</pre> },
+];
+describe('React CodeGroup', () => {
+  it('switches panels with keyboard focus and synchronizes matching groups', () => {
+    const a = render(<CodeGroup items={items} />);
+    const b = render(<CodeGroup items={items} dropdown />);
+    const tabs = a.querySelectorAll<HTMLButtonElement>('[role=tab]');
+    act(() => tabs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })));
+    expect(tabs[1].getAttribute('aria-selected')).toBe('true');
+    expect(document.activeElement).toBe(tabs[1]);
+    expect(a.querySelectorAll<HTMLElement>('[role=tabpanel]')[0].hidden).toBe(true);
+    expect(b.querySelectorAll<HTMLElement>('[role=region]')[1].hidden).toBe(false);
+    expect(b.querySelector('button')?.textContent).toBe('Python');
+  });
+  it('copies the selected code', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, { clipboard: { writeText } });
+    const root = render(<CodeGroup items={items} />);
+    act(() => root.querySelectorAll<HTMLButtonElement>('[role=tab]')[1].click());
+    await act(async () => root.querySelector<HTMLButtonElement>('[aria-label="Copy code"]')!.click());
+    expect(writeText).toHaveBeenCalledWith('second');
+    expect(root.querySelector('[aria-label="Copied!"]')).not.toBeNull();
+  });
+  it('preserves highlighted Astro HTML and decodes copy newlines', async () => {
+    const parsed = parseCodePanels(
+      '<div data-code-panel="file.js" data-code-lang="js"><pre><code><span>one</span>two</code></pre><button data-code="one&#127;two"></button></div>'
+    );
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, { clipboard: { writeText } });
+    const root = render(<CodeGroup items={parsed} />);
+    expect(root.querySelector('code span')?.textContent).toBe('one');
+    await act(async () => root.querySelector<HTMLButtonElement>('[aria-label="Copy code"]')!.click());
+    expect(writeText).toHaveBeenCalledWith('one\ntwo');
+  });
+  it('accepts Markdown panels and escapes labels', () => {
+    const root = render(
+      <MarkdownCodeGroup>
+        <div data-code-panel="<script>" data-code-lang="js">
+          <pre>hello</pre>
+        </div>
+      </MarkdownCodeGroup>
+    );
+    expect(root.querySelector('[role=tab]')?.textContent).toBe('<script>');
+    expect(root.querySelector('script')).toBeNull();
+    expect(root.querySelector('pre')?.textContent).toBe('hello');
+  });
+});
+
+describe('language names and icons', () => {
+  it.each([
+    ['cs', undefined, 'C#', '/icons/languages/csharp.svg'],
+    ['dotnet', undefined, '.NET', '/icons/languages/dotnet.svg'],
+    ['fsharp', undefined, 'F#', '/icons/languages/fsharp.svg'],
+    ['java', undefined, 'Java', '/icons/languages/java.svg'],
+    ['kts', undefined, 'Kotlin', '/icons/languages/kotlin.svg'],
+    [undefined, 'Main.go', 'Go', '/icons/languages/go.svg'],
+    ['powershell', undefined, 'PowerShell', undefined],
+    ['xml', undefined, 'XML', undefined],
+    ['avsc', undefined, 'Avro', '/icons/avro.svg'],
+    ['brainfuck', undefined, 'Brainfuck', undefined],
+  ])('maps %s / %s to %s', (language, label, name, icon) => {
+    expect(getCodeLanguageName(language, label)).toBe(name);
+    expect(getCodeLanguageIconUrl(language, label)).toBe(icon);
+  });
+});

package/eventcatalog/src/components/MDX/CodeGroup/parse-panels.ts

@@ -0,0 +1,11 @@
+import { parseFragment, serialize } from 'parse5';
+
+// Only parse the trusted HTML produced by Astro's rendered MDX slot.
+export function parseCodePanels(html: string) {
+  return parseFragment(html).childNodes.flatMap((node) => {
+    if (!('attrs' in node)) return [];
+    const label = node.attrs.find((attr) => attr.name === 'data-code-panel')?.value;
+    if (label === undefined) return [];
+    return [{ label, language: node.attrs.find((attr) => attr.name === 'data-code-lang')?.value, html: serialize(node) }];
+  });
+}

package/eventcatalog/src/components/MDX/Columns/Column.astro

@@ -0,0 +1,10 @@
+---
+import { columnClass, stickyClass } from './layout';
+interface Props {
+  sticky?: boolean;
+  className?: string;
+}
+const { sticky = false, className } = Astro.props;
+---
+
+<div class:list={[columnClass, sticky && stickyClass, className]} data-sticky={String(sticky)}><slot /></div>

package/eventcatalog/src/components/MDX/Columns/Columns.astro

@@ -0,0 +1,14 @@
+---
+import { getColumnsLayout, columnsClass, gridClass } from './layout';
+interface Props {
+  cols?: number;
+  ratio?: string;
+  className?: string;
+}
+const { cols = 2, ratio, className } = Astro.props;
+const { template } = getColumnsLayout(cols, ratio);
+---
+
+<div class:list={[columnsClass, className]} style={{ '--ec-columns-template': template }}>
+  <div class={gridClass}><slot /></div>
+</div>

package/eventcatalog/src/components/MDX/Columns/MarkdownColumns.tsx

@@ -0,0 +1,37 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { getColumnsLayout, columnsClass, gridClass, columnClass, stickyClass } from './layout';
+
+export function MarkdownColumns({
+  children,
+  cols = 2,
+  ratio,
+  className = '',
+}: {
+  children?: ReactNode;
+  cols?: number;
+  ratio?: string;
+  className?: string;
+}) {
+  const { template } = getColumnsLayout(cols, ratio);
+  return (
+    <div className={`${columnsClass} ${className}`} style={{ '--ec-columns-template': template } as CSSProperties}>
+      <div className={gridClass}>{children}</div>
+    </div>
+  );
+}
+
+export function MarkdownColumn({
+  children,
+  sticky = false,
+  className = '',
+}: {
+  children?: ReactNode;
+  sticky?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={`${columnClass} ${sticky ? stickyClass : ''} ${className}`} data-sticky={String(sticky)}>
+      {children}
+    </div>
+  );
+}

package/eventcatalog/src/components/MDX/Columns/columns.spec.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import ReactMarkdown from 'react-markdown';
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
+import * as runtime from 'react/jsx-runtime';
+import { getColumnsLayout } from './layout';
+import { MarkdownColumns, MarkdownColumn } from './MarkdownColumns';
+import { remarkMarkdownColumns } from '../../../remark-plugins/markdown-columns';
+import { remarkMarkdownCodeGroup } from '../../../remark-plugins/markdown-code-group';
+
+const source =
+  '<Columns cols={2} ratio="2:1">\n  <Column>\n\n## Publish an order\n\nSome **explanation**.\n\n  </Column>\n  <Column sticky>\n\n<CodeGroup>\n\n```json OrderCreated\n{"id":"123"}\n```\n\n```js JavaScript\npublish();\n```\n\n</CodeGroup>\n\n  </Column>\n</Columns>';
+
+describe('Columns', () => {
+  it('defaults to two columns and supports one through four', () => {
+    expect(getColumnsLayout().template).toBe('repeat(2, minmax(0, 1fr))');
+    for (const count of [1, 2, 3, 4]) expect(getColumnsLayout(count).count).toBe(count);
+  });
+  it('uses valid ratios and safely falls back for invalid options', () => {
+    expect(getColumnsLayout(2, '2:1').template).toBe('minmax(0, 2fr) minmax(0, 1fr)');
+    for (const ratio of ['0:1', '-1:2', 'NaN:1', '1:2:3', '1fr:2fr', 'Infinity:1']) {
+      expect(getColumnsLayout(2, ratio).template).toBe('repeat(2, minmax(0, 1fr))');
+    }
+    for (const count of [0, 5, 1.5, NaN]) expect(getColumnsLayout(count).count).toBe(2);
+  });
+  it('renders the same API as real MDX with rich content and nested components', async () => {
+    const require = createRequire(import.meta.url);
+    const mdxRequire = createRequire(require.resolve('@astrojs/mdx'));
+    const { evaluate } = await import(pathToFileURL(mdxRequire.resolve('@mdx-js/mdx')).href);
+    const result = await evaluate(source, runtime);
+    const html = renderToStaticMarkup(
+      runtime.jsx(result.default, {
+        components: {
+          Columns: MarkdownColumns,
+          Column: MarkdownColumn,
+          CodeGroup: 'section',
+        },
+      })
+    );
+    expect(html).toContain('--ec-columns-template:minmax(0, 2fr) minmax(0, 1fr)');
+    expect(html).toContain('data-sticky="true"');
+    expect(html).toContain('<strong>explanation</strong>');
+    expect(html).toContain('language-json');
+  });
+  it('recognizes adjacent layout tags in Markdown and lets CodeGroup transform within columns', () => {
+    const html = renderToStaticMarkup(
+      <ReactMarkdown remarkPlugins={[remarkMarkdownColumns, remarkMarkdownCodeGroup]}>{source}</ReactMarkdown>
+    );
+    expect(html).toContain('data-columns="true"');
+    expect(html.match(/data-column="true"/g)).toHaveLength(2);
+    expect(html).toContain('data-cols="2"');
+    expect(html).toContain('data-ratio="2:1"');
+    expect(html).toContain('data-sticky="true"');
+    expect(html).toContain('data-code-panel="OrderCreated"');
+    expect(html).toContain('<strong>explanation</strong>');
+    expect(html).not.toContain('&lt;Column');
+  });
+  it('preserves nested column layouts and leaves unrelated HTML escaped', () => {
+    const nested =
+      '<Columns>\n\n<Column>\n\n<Columns cols={1}>\n\n<Column>\n\nInner\n\n</Column>\n\n</Columns>\n\n</Column>\n\n</Columns>\n\n<script>alert(1)</script>';
+    const html = renderToStaticMarkup(<ReactMarkdown remarkPlugins={[remarkMarkdownColumns]}>{nested}</ReactMarkdown>);
+    expect(html.match(/data-columns="true"/g)).toHaveLength(2);
+    expect(html).not.toContain('<script>');
+  });
+});

package/eventcatalog/src/components/MDX/Columns/layout.ts

@@ -0,0 +1,16 @@
+export function getColumnsLayout(cols: number = 2, ratio?: string) {
+  const count = Number.isInteger(cols) && cols >= 1 && cols <= 4 ? cols : 2;
+  const weights = ratio?.split(':').map(Number);
+  const validRatio = weights?.length === count && weights.every((weight) => Number.isFinite(weight) && weight > 0);
+  return {
+    count,
+    template: validRatio ? weights.map((weight) => `minmax(0, ${weight}fr)`).join(' ') : `repeat(${count}, minmax(0, 1fr))`,
+  };
+}
+
+export const columnsClass = 'ec-columns @container/ec-columns my-6';
+export const gridClass =
+  'ec-columns-grid grid grid-cols-1 items-start gap-8 [&>*]:min-w-0 @min-[640px]/ec-columns:grid-cols-[var(--ec-columns-template)]';
+export const columnClass = 'ec-column min-w-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0';
+export const stickyClass =
+  '@min-[640px]/ec-columns:sticky @min-[640px]/ec-columns:top-[var(--ec-column-sticky-top,5rem)] print:static';

package/eventcatalog/src/components/MDX/components.tsx

@@ -22,6 +22,9 @@ import ResourceGroupTable from '@components/MDX/ResourceGroupTable/ResourceGroup
 import EntityPropertiesTable from '@components/MDX/EntityPropertiesTable/EntityPropertiesTable.astro';
 import Tabs from '@components/MDX/Tabs/Tabs.astro';
 import TabItem from '@components/MDX/Tabs/TabItem.astro';
+import CodeGroup from '@components/MDX/CodeGroup/CodeGroup.astro';
+import Columns from '@components/MDX/Columns/Columns.astro';
+import Column from '@components/MDX/Columns/Column.astro';
 import ResourceLink from '@components/MDX/ResourceLink/ResourceLink.astro';
 import ResourceRef from '@components/MDX/ResourceRef/ResourceRef.astro';
 import Link from '@components/MDX/Link/Link.astro';
@@ -85,6 +88,9 @@ const components = (props: any) => {
     Step,
     Steps,
     TabItem,
+    CodeGroup,
+    Columns,
+    Column,
     Tabs,
     Tile,
     Tiles,

package/eventcatalog/src/components/SchemaExplorer/ApiContentViewer.tsx

@@ -134,7 +134,7 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
                 className="rounded-md border bg-[rgb(var(--ec-content-hover)/0.45)] px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))]"
                 style={{ borderColor: boxBorderColor }}
               >
-                application/json
+                text/plain
               </code>
             </div>
             <div className="flex items-center justify-between gap-4 border-t px-4 py-3" style={{ borderColor: dividerColor }}>