PulseApp/docs
PulseApp/docs
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Activity

fix heading mdx components always being h1, and not having an id

Browse Source 
Took 19 minutes
This commit is contained in:
Braydon 2024-10-06 20:21:08 -04:00
parent a396118f86
commit 99ab34b2ac
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/mdx.tsx
View File

@ -8,32 +8,32 @@ import remarkGfm from "remark-gfm";
*/ */
const components = { const components = {
h1: ({ children }: { children: ReactNode }): ReactElement => ( h1: ({ children }: { children: ReactNode }): ReactElement => (
<Heading size={1} className="text-4xl"> <Heading as="h1" size={1} className="text-4xl">
{children} {children}
</Heading> </Heading>
), ),
h2: ({ children }: { children: ReactNode }): ReactElement => ( h2: ({ children }: { children: ReactNode }): ReactElement => (
<Heading size={2} className="text-3xl"> <Heading as="h2" size={2} className="text-3xl">
{children} {children}
</Heading> </Heading>
), ),
h3: ({ children }: { children: ReactNode }): ReactElement => ( h3: ({ children }: { children: ReactNode }): ReactElement => (
<Heading size={3} className="text-2xl"> <Heading as="h3" size={3} className="text-2xl">
{children} {children}
</Heading> </Heading>
), ),
h4: ({ children }: { children: ReactNode }): ReactElement => ( h4: ({ children }: { children: ReactNode }): ReactElement => (
<Heading size={4} className="text-xl"> <Heading as="h4" size={4} className="text-xl">
{children} {children}
</Heading> </Heading>
), ),
h5: ({ children }: { children: ReactNode }): ReactElement => ( h5: ({ children }: { children: ReactNode }): ReactElement => (
<Heading size={5} className="text-lg"> <Heading as="h5" size={5} className="text-lg">
{children} {children}
</Heading> </Heading>
), ),
h6: ({ children }: { children: ReactNode }): ReactElement => ( h6: ({ children }: { children: ReactNode }): ReactElement => (
<Heading size={5} className="text-md"> <Heading as="h6" size={6} className="text-md">
{children} {children}
</Heading> </Heading>
), ),
@ -89,15 +89,31 @@ export const CustomMDX = (props: any): ReactElement => (
* @return the heading jsx * @return the heading jsx
*/ */
const Heading = ({ const Heading = ({
as: Component,
className, className,
size, size,
children, children,
}: { }: {
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
className: string; className: string;
size: number; size: number;
children: ReactNode; children: ReactNode;
}): ReactElement => ( }): ReactElement => {
<h1 className={cn("pt-2.5 font-bold", size >= 2 && "pt-7", className)}> const id: string | undefined =
typeof children === "string" ? slugify(children) : undefined;
return (
<Component
id={id}
className={cn("pt-2.5 font-bold", size >= 2 && "pt-7", className)}
>
{children} {children}
</h1> </Component>
); );
};
const slugify = (text: string): string =>
text
.toLowerCase()
.replace(/[^\w\s-]/g, "")
.replace(/[\s_-]+/g, "-")
.trim();