From fa530d3168dfcea7211f2c8689bb122f8a48680f Mon Sep 17 00:00:00 2001 From: Liam Date: Sat, 20 Apr 2024 02:54:04 +0100 Subject: [PATCH] cleanup markdown renderer --- src/app/components/mx-components.tsx | 54 +++++------------------ src/app/components/mx-renderer.tsx | 64 ++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 44 deletions(-) create mode 100644 src/app/components/mx-renderer.tsx diff --git a/src/app/components/mx-components.tsx b/src/app/components/mx-components.tsx index 4ee332e..ff6a334 100644 --- a/src/app/components/mx-components.tsx +++ b/src/app/components/mx-components.tsx @@ -1,54 +1,20 @@ import { MDXRemote } from "remote-mdx/rsc"; -import { CodeHighlighter } from "@/app/components/code-highlighter"; -import { Separator } from "@/app/components/ui/separator"; -import { cn } from "@/app/common/utils"; -import Link from "next/link"; import { ReactElement } from "react"; - -/** - * Create a heading component. - * - * @param level the level of the heading. - */ -function createHeading(level: number) { - // eslint-disable-next-line react/display-name - return (props: any) => { - const Tag = `h${level}`; - return ( -
1 ? "pt-6" : null)}> - - -
- ); - }; -} +import { formatCode, formatHeading, formatLink, formatList } from "@/app/components/mx-renderer"; /** * The components to use in the MDX renderer. */ const components = { - h1: (props: any) => createHeading(1)(props), - h2: (props: any) => createHeading(2)(props), - code: (props: any) => { - if (!props.className) { - return ; - } - - return ( -
- -
- ); - }, - ul: (props: any) => , - a: (props: any) => ( - - {props.children} - - ), + 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), }; export function CustomMDX(props: any): ReactElement { diff --git a/src/app/components/mx-renderer.tsx b/src/app/components/mx-renderer.tsx new file mode 100644 index 0000000..9df4bed --- /dev/null +++ b/src/app/components/mx-renderer.tsx @@ -0,0 +1,64 @@ +import { CodeHighlighter } from "@/app/components/code-highlighter"; +import { Separator } from "@/app/components/ui/separator"; +import Link from "next/link"; + +/** + * Create a heading component. + * + * @param level The level of the heading. + * @param props The props to pass to the heading. + */ +export function formatHeading(level: number, props: any) { + const Tag = `h${level}`; + const paddingBottom = level > 1 ? "pt-6" : ""; + const textSize = 4 - level; + + return ( +
+ + +
+ ); +} + +/** + * Format a code block. + * + * @param props The props to pass to the code block. + */ +export function formatCode(props: any) { + if (!props.className) { + return ; + } + + return ( +
+ +
+ ); +} + +/** + * Format a list. + * + * @param props The props to pass to the list. + */ +export function formatList(props: any) { + return
    {props.children}
; +} + +/** + * Format a link. + * + * @param props The props to pass to the link. + */ +export function formatLink(props: any) { + return ( + + {props.children} + + ); +}