mdx-components.js

// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including components from
// other libraries.
 
// This file is required to use MDX in `app` directory.
export function useMDXComponents(components) {
    return {
      // Allows customizing built-in components, e.g. to add styling.
      // h1: ({ children }) => <h1 style={
      //   {
      //     background: "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgICA8Zz4NCiAgICAJPHBhdGggZD0iTTAsMzJMMzIsMGwzMiwzMkwzMiw2NEwwLDMyeiBNOCwzMmwyNCwyNGwyNC0yNEwzMiw4TDgsMzJ6IE0xNiwzMmwxNi0xNmwxNiwxNkwzMiw0OEwxNiwzMnogTTI0LDMybDgsOGw4LThsLTgtOEwyNCwzMnoiIC8+DQogICAgPC9nPg0KPC9zdmc+) bottom center no-repeat",
      //     backgroundSize: "0.5em 0.5em",
      //     font: "700 3vw/1.25 'Playfair Display', sans-serif",
      //     letterSpacing: "0.125em",
      //     margin: "0 0 1em 0",
      //     padding: "1em 0",
      //     position: "relative",
      //     textAlign: "center",
      //     textTransform: "uppercase",
      //     textWrap: "balance",

      //   }}>{children}</h1>,
      // p: ({children}) => <p style={
      //   {
      //     textIndent: "2em",
      //     paddingBottom: "1em",
      //     textAlign: "justify",
      // }}>{children}</p>,
      ...components,
    }
  }