mdx-components.ts

import type { MDXComponents } from "mdx/types";

import Image from "./_common/components/Image";
import Link from "./_common/components//Link";
import Code from "./_common/components/Code";
import Blockquote from "./_common/components/Blockquote";
import HorizontalRule from "./_common/components/HorizontalRule";
import * as Heading from "./_common/components/Heading";
import * as List from "./_common/components/List";
import Video from "./_common/components/Video";
import CodePen from "./_common/components/CodePen";

export const useMDXComponents = (components: MDXComponents): MDXComponents => {
  return {
    ...components,

    // direct replacements for HTML tags generated by remark:
    img: Image,
    a: Link,
    code: Code,
    blockquote: Blockquote,
    video: Video,
    hr: HorizontalRule,
    h1: Heading.H1,
    h2: Heading.H2,
    h3: Heading.H3,
    h4: Heading.H4,
    h5: Heading.H5,
    h6: Heading.H6,
    ul: List.UnorderedList,
    ol: List.OrderedList,
    li: List.ListItem,

    // third-party embeds:
    CodePen,
  };
};