cleanup markdown renderer
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m9s

This commit is contained in:
Lee 2024-04-20 02:54:04 +01:00
parent 18a782243e
commit fa530d3168
2 changed files with 74 additions and 44 deletions

@ -1,54 +1,20 @@
import { MDXRemote } from "remote-mdx/rsc"; 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"; import { ReactElement } from "react";
import { formatCode, formatHeading, formatLink, formatList } from "@/app/components/mx-renderer";
/**
* 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 (
<div className={cn("pb-4", level > 1 ? "pt-6" : null)}>
<Tag className={`text-${4 - level}xl font-semibold pb-2`} {...props} />
<Separator />
</div>
);
};
}
/** /**
* The components to use in the MDX renderer. * The components to use in the MDX renderer.
*/ */
const components = { const components = {
h1: (props: any) => createHeading(1)(props), h1: (props: any) => formatHeading(1, props),
h2: (props: any) => createHeading(2)(props), h2: (props: any) => formatHeading(2, props),
code: (props: any) => { h3: (props: any) => formatHeading(3, props),
if (!props.className) { h4: (props: any) => formatHeading(4, props),
return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />; h5: (props: any) => formatHeading(5, props),
} h6: (props: any) => formatHeading(6, props),
code: (props: any) => formatCode(props),
return ( ul: (props: any) => formatList(props),
<div className="pt-4"> a: (props: any) => formatLink(props),
<CodeHighlighter
language={props.className ? props.className.replace("language-") : undefined}
code={props.children}
/>
</div>
);
},
ul: (props: any) => <ul className="list-disc pl-4 pt-2">{props.children}</ul>,
a: (props: any) => (
<Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
{props.children}
</Link>
),
}; };
export function CustomMDX(props: any): ReactElement { export function CustomMDX(props: any): ReactElement {

@ -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 (
<div className={`pb-4 ${paddingBottom}`}>
<Tag className={`text-${textSize}xl font-semibold pb-2`} {...props} />
<Separator />
</div>
);
}
/**
* Format a code block.
*
* @param props The props to pass to the code block.
*/
export function formatCode(props: any) {
if (!props.className) {
return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
}
return (
<div className="pt-4">
<CodeHighlighter
language={props.className ? props.className.replace("language-") : undefined}
code={props.children}
/>
</div>
);
}
/**
* Format a list.
*
* @param props The props to pass to the list.
*/
export function formatList(props: any) {
return <ul className="list-disc pl-4 pt-2">{props.children}</ul>;
}
/**
* Format a link.
*
* @param props The props to pass to the link.
*/
export function formatLink(props: any) {
return (
<Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
{props.children}
</Link>
);
}