mdx-components.ts

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

import Image from "./components/Image";
import Link from "./components/Link";
import Code from "./components/Code";
import Blockquote from "./components/Blockquote";
import HorizontalRule from "./components/HorizontalRule";
import * as Heading from "./components/Heading";
import * as List from "./components/List";
import Video from "./components/Video";
import Tweet from "./components/Tweet";
import YouTube from "./components/YouTube";
import Gist from "./components/Gist";
import CodePen from "./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:
    Tweet,
    YouTube,
    Gist,
    CodePen,
  };
};