@eventcatalog/core 4.10.14 → 4.11.0

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

@@ -0,0 +1,176 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
+import { CheckIcon, ChevronDownIcon, ClipboardIcon } from '@heroicons/react/24/outline';
+import { getCodeLanguageIconUrl, getCodeLanguageName } from './code-group-icons';
+import './code-group.css';
+
+export interface CodeGroupItem {
+  label: string;
+  language?: string;
+  content?: ReactNode;
+  html?: string;
+}
+const changeEvent = 'eventcatalog:code-group-change';
+const focus = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-[rgb(var(--ec-accent))]';
+function LanguageIcon({ item }: { item: CodeGroupItem }) {
+  const url = getCodeLanguageIconUrl(item.language ?? '', item.label);
+  return url ? <img src={url} alt="" className="size-4 shrink-0" /> : null;
+}
+export default function CodeGroup({
+  items,
+  dropdown = false,
+  className = '',
+}: {
+  items: CodeGroupItem[];
+  dropdown?: boolean;
+  className?: string;
+}) {
+  const [selected, setSelected] = useState(0);
+  const [copied, setCopied] = useState(false);
+  const panels = useRef<HTMLDivElement>(null);
+  const tabs = useRef<(HTMLButtonElement | null)[]>([]);
+  const id = useId();
+  const active = Math.min(selected, Math.max(items.length - 1, 0));
+  useEffect(() => {
+    const sync = (event: Event) => {
+      const index = items.findIndex((item) => item.label === (event as CustomEvent<string>).detail);
+      if (index >= 0) setSelected(index);
+    };
+    document.addEventListener(changeEvent, sync);
+    return () => document.removeEventListener(changeEvent, sync);
+  }, [items]);
+  useEffect(() => {
+    setCopied(false);
+  }, [active]);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const select = (index: number) => {
+    setSelected(index);
+    document.dispatchEvent(new CustomEvent(changeEvent, { detail: items[index].label }));
+  };
+  const copy = async () => {
+    const panel = panels.current?.children[active];
+    const encoded = panel?.querySelector('[data-code]')?.getAttribute('data-code');
+    const code = encoded?.replace(/\u007f/g, '\n') ?? panel?.querySelector('pre')?.textContent ?? '';
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+  if (!items.length) return null;
+  return (
+    <div
+      className={`ec-code-group not-prose relative my-6 rounded-xl border border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-code-bg,var(--ec-page-bg)))] ${className}`}
+    >
+      <div
+        data-code-controls
+        className="flex items-stretch justify-between gap-2 rounded-t-xl border-b border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-content-hover))] pl-1 pr-2"
+      >
+        {dropdown ? (
+          <span className="min-w-0 truncate px-3 py-2.5 text-sm">{items[active].label}</span>
+        ) : (
+          <div role="tablist" aria-label="Code examples" className="flex min-w-0 overflow-x-auto">
+            {items.map((item, index) => (
+              <button
+                key={index}
+                ref={(el) => {
+                  tabs.current[index] = el;
+                }}
+                type="button"
+                role="tab"
+                id={`${id}-tab-${index}`}
+                aria-controls={`${id}-panel-${index}`}
+                aria-selected={index === active}
+                tabIndex={index === active ? 0 : -1}
+                onClick={() => select(index)}
+                onKeyDown={(event) => {
+                  const next =
+                    event.key === 'ArrowRight'
+                      ? (index + 1) % items.length
+                      : event.key === 'ArrowLeft'
+                        ? (index - 1 + items.length) % items.length
+                        : event.key === 'Home'
+                          ? 0
+                          : event.key === 'End'
+                            ? items.length - 1
+                            : undefined;
+                  if (next !== undefined) {
+                    event.preventDefault();
+                    select(next);
+                    tabs.current[next]?.focus();
+                  }
+                }}
+                className={`-mb-px inline-flex shrink-0 items-center gap-2 border-b-2 border-transparent px-3 py-2.5 text-[13px] font-medium text-[rgb(var(--ec-content-text-muted))] aria-selected:border-[rgb(var(--ec-accent))] aria-selected:text-[rgb(var(--ec-content-text))] ${focus}`}
+              >
+                <LanguageIcon item={item} />
+                {item.label}
+              </button>
+            ))}
+          </div>
+        )}
+        <div className="flex shrink-0 items-center gap-1 py-1">
+          {dropdown && (
+            <Listbox value={active} onChange={select}>
+              <div className="relative">
+                <ListboxButton
+                  aria-label="Select code example"
+                  className={`flex items-center gap-2 rounded-lg px-2 py-1 text-[13px] hover:bg-[rgb(var(--ec-page-bg))] ${focus}`}
+                >
+                  <LanguageIcon item={items[active]} />
+                  {getCodeLanguageName(items[active].language ?? '', items[active].label)}
+                  <ChevronDownIcon className="size-3" />
+                </ListboxButton>
+                <ListboxOptions className="absolute right-0 top-full z-20 mt-2 min-w-48 rounded-xl border border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-page-bg))] p-1 shadow-lg">
+                  {items.map((item, index) => (
+                    <ListboxOption
+                      key={index}
+                      value={index}
+                      className="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-[13px] data-[focus]:bg-[rgb(var(--ec-content-hover))] data-[selected]:text-[rgb(var(--ec-accent))]"
+                    >
+                      {({ selected }) => (
+                        <>
+                          <LanguageIcon item={item} />
+                          <span className="flex-1">{getCodeLanguageName(item.language ?? '', item.label)}</span>
+                          {selected && <CheckIcon className="size-4" />}
+                        </>
+                      )}
+                    </ListboxOption>
+                  ))}
+                </ListboxOptions>
+              </div>
+            </Listbox>
+          )}
+          <button
+            type="button"
+            aria-label={copied ? 'Copied!' : 'Copy code'}
+            onClick={copy}
+            className={`flex size-7 items-center justify-center rounded-md text-[rgb(var(--ec-content-text-muted))] hover:bg-[rgb(var(--ec-page-bg))] ${focus}`}
+          >
+            {copied ? <CheckIcon className="size-4 text-emerald-500" /> : <ClipboardIcon className="size-4" />}
+          </button>
+        </div>
+      </div>
+      <div ref={panels} data-code-panels className="overflow-hidden rounded-b-xl">
+        {items.map((item, index) => (
+          <div
+            key={index}
+            data-code-panel={item.label}
+            id={`${id}-panel-${index}`}
+            role={dropdown ? 'region' : 'tabpanel'}
+            aria-label={dropdown ? item.label : undefined}
+            aria-labelledby={dropdown ? undefined : `${id}-tab-${index}`}
+            hidden={index !== active}
+            tabIndex={0}
+          >
+            {item.html !== undefined ? <div dangerouslySetInnerHTML={{ __html: item.html }} /> : item.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { Children, isValidElement, type ReactNode } from 'react';
+import CodeGroup from './CodeGroup';
+
+export function MarkdownCodeGroup({
+  children,
+  dropdown,
+  className,
+}: {
+  children?: ReactNode;
+  dropdown?: boolean;
+  className?: string;
+}) {
+  const items = Children.toArray(children).flatMap((child) => {
+    if (
+      !isValidElement<{ 'data-code-panel'?: string; 'data-code-lang'?: string }>(child) ||
+      child.props['data-code-panel'] === undefined
+    )
+      return [];
+    return [{ label: child.props['data-code-panel'], language: child.props['data-code-lang'], content: child }];
+  });
+  return <CodeGroup items={items} dropdown={dropdown} className={className} />;
+}

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>