Liam
e6a28ed268
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m38s
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { MDXRemote } from "remote-mdx/rsc";
|
|
import { ReactElement } from "react";
|
|
import {
|
|
formatCode,
|
|
formatHeading,
|
|
formatLink,
|
|
formatList,
|
|
formatTable,
|
|
formatTableData,
|
|
formatTableHeader,
|
|
} from "@/app/components/mdx-renderer";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
/**
|
|
* The components to use in the MDX renderer.
|
|
*/
|
|
const components = {
|
|
h1: (props: any) => formatHeading(1, props),
|
|
h2: (props: any) => formatHeading(2, props),
|
|
h3: (props: any) => formatHeading(3, props),
|
|
h4: (props: any) => formatHeading(4, props),
|
|
h5: (props: any) => formatHeading(5, props),
|
|
h6: (props: any) => formatHeading(6, props),
|
|
code: (props: any) => formatCode(props),
|
|
ul: (props: any) => formatList(props),
|
|
a: (props: any) => formatLink(props),
|
|
table: (props: any) => formatTable(props),
|
|
th: (props: any) => formatTableHeader(props),
|
|
td: (props: any) => formatTableData(props),
|
|
};
|
|
|
|
export function CustomMDX(props: any): ReactElement {
|
|
return (
|
|
<MDXRemote
|
|
{...props}
|
|
components={{ ...components, ...(props.components || {}) }}
|
|
options={{
|
|
mdxOptions: {
|
|
remarkPlugins: [remarkGfm],
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
}
|