public-blog/mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

export function getMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    // Typography
    h1: (props) => (
      <h1 {...props} className="scroll-m-20 heading-xl text-ink mt-10 mb-4">
        {props.children}
      </h1>
    ),
    h2: (props) => (
      <h2 {...props} className="scroll-m-20 border-b border-border pb-2 heading-lg text-ink mt-12 mb-4 first:mt-0">
        {props.children}
      </h2>
    ),
    h3: (props) => (
      <h3 {...props} className="scroll-m-20 heading-md text-ink mt-8 mb-3">
        {props.children}
      </h3>
    ),
    h4: ({ children, ...props }) => (
      <h4 className="heading-sm text-ink mt-8 mb-3" {...props}>{children}</h4>
    ),
    h5: ({ children, ...props }) => (
      <h5 className="text-base font-semibold text-ink mt-6 mb-2" {...props}>{children}</h5>
    ),
    h6: ({ children, ...props }) => (
      <h6 className="text-sm font-medium uppercase tracking-wider text-ink-soft mt-6 mb-2" {...props}>{children}</h6>
    ),
    p: ({ children }) => (
      <p className="leading-7 [&:not(:first-child)]:mt-6 text-ink">
        {children}
      </p>
    ),
    blockquote: ({ children }) => (
      <blockquote className="border-l-4 border-border pl-4 italic text-ink-soft my-6">
        {children}
      </blockquote>
    ),
    hr: () => <hr className="my-8 border-border" />,
    a: ({ href, children, ...props }) => {
      const isExternal = typeof href === 'string' && (href.startsWith('http://') || href.startsWith('https://'))
      return (
        <a
          href={href}
          target={isExternal ? '_blank' : undefined}
          rel={isExternal ? 'noopener noreferrer' : undefined}
          className="font-medium underline underline-offset-4 hover:text-accent transition-colors"
          {...props}
        >
          {children}
        </a>
      )
    },
    code: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {
      const isInline = !className?.includes('language-');

      if (isInline) {
        return (
          <code
            className="rounded-md bg-ink/[0.06] px-1.5 py-[0.15rem] font-mono text-[0.8125rem] leading-[1.4] dark:bg-white/[0.08]"
            {...props}
          >
            {children}
          </code>
        );
      }
      return <code className={className} {...props} />;
    },
    pre: ({ children, ...props }: { children: React.ReactNode } & React.HTMLAttributes<HTMLPreElement>) => (
      <pre className="my-6 p-0" {...props}>
        {children}
      </pre>
    ),
    img: ({ src, alt, ...rest }) => (
      <img src={src} alt={alt} className="my-8 rounded-xl w-full" {...rest} />
    ),
    table: ({ children }) => (
      <div className="my-6 overflow-x-auto">
        <table className="w-full border-collapse text-sm">
          {children}
        </table>
      </div>
    ),

    // Lists
    ul: (props) => <ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props} />,
    ol: (props) => <ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props} />,
    li: (props) => <li className="leading-7" {...props} />,

    // Figures and captions
    figure: (props) => <figure className="my-8" {...props} />,
    figcaption: (props) => <figcaption className="text-center text-sm text-ink-soft mt-2" {...props} />,

    // Subscripts and superscripts
    sup: (props) => <sup className="text-xs" {...props} />,
    sub: (props) => <sub className="text-xs" {...props} />,

    // Keyboard keys
    kbd: (props) => (
      <kbd className="rounded bg-surface px-2 py-1 font-mono text-xs text-ink border border-border" {...props} />
    ),

    // Collapsible sections
    details: (props) => <details className="my-4 rounded-lg border border-border p-4" {...props} />,
    summary: (props) => <summary className="cursor-pointer font-semibold" {...props} />,

    // Buttons (handle onclick string from transformerCopyButton)
    button: ({ children, onClick, ...props }: { children?: React.ReactNode; onClick?: string | (() => void); className?: string } & Record<string, unknown>) => {
      if (typeof onClick === 'string') {
        const className = (props.className as string) ?? '';
        return (
          <button
            dangerouslySetInnerHTML={{
              __html: `<button${className ? ` class="${className.replace(/"/g, '&quot;')}"` : ''} onclick="${onClick}">${(children as string) ?? ''}</button>`
            }}
            suppressHydrationWarning
          />
        );
      }
      return (
        <button
          {...props}
          onClick={typeof onClick === 'function' ? onClick : undefined}
        >
          {children}
        </button>
      );
    },
  }
}