Function mdxComponents

src/mdx-components.tsx:26–291

(components?: MDXComponents)

import { BlockMath, InlineMath } from "react-katex"

export function mdxComponents(components?: MDXComponents): MDXComponents {
  return {
    h1: ({ className, children, ...props }: React.ComponentProps<"h1">) => (
      <h1
        id={children?.toString().toLowerCase().replace(/\s+/g, "-")}
        className={cn(
          "text-[44px] font-calendas tracking-tighter text-pretty leading-tight",
          className
        )}
        {...props}
      >
        {children}
      </h1>
    ),
    h2: ({ className, children, ...props }: React.ComponentProps<"h2">) => (
      <>
        <h2
          id={children?.toString().toLowerCase().replace(/\s+/g, "-")}
          className={cn("text-3xl md:text-4xl font-medium mb-0 py-0 mt-14 tracking-tight", className)}
          {...props}
        >
          {children}
        </h2>
        <hr className="mt-2.5" />
      </>
    ),
    h3: ({ className, children, ...props }: React.ComponentProps<"h3">) => (
      <h3
        id={children?.toString().toLowerCase().replace(/\s+/g, "-")}
        className={cn("text-xl md:text-2xl font-medium py-0 mt-12 [h2+hr+&]:mt-0 tracking-tight", className)}
        {...props}
      >
        {children}
      </h3>
    ),
    h4: ({ className, children, ...props }: React.ComponentProps<"h4">) => (
      <h4
        id={children?.toString().toLowerCase().replace(/\s+/g, "-")}
        className={cn("text-lg md:text-xl font-medium py-0 mt-10 [h3+&]:mt-0 tracking-tight", className)}
        {...props}
      >
        {children}
      </h4>
    ),
    a: ({
      className,
      children,
      ...props
    }: React.HTMLAttributes<HTMLAnchorElement>) => (
      <a
        className={cn(
          "font-medium text-base md:text-lg text-blue hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300 duration-300 ease-out transition-[color,background-color,opacity] inline-flex items-center leading-0 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-blue",
          className
        )}
        {...props}
      >
        {children}
        <ExternalLinkIcon className="ml-1 mt-0.5" size={14} strokeWidth={2.5} />