120 lines
4.2 KiB
TypeScript
120 lines
4.2 KiB
TypeScript
import type { MDXComponents } from 'mdx/types'
|
|
import { Callout } from '@/components/ui/Callout'
|
|
|
|
|
|
export function useMDXComponents(components: MDXComponents): MDXComponents {
|
|
return {
|
|
...components,
|
|
Callout,
|
|
// Typography
|
|
h1: (props) => (
|
|
<h1 {...props} className="heading-xl text-ink mt-10 mb-4">
|
|
{props.children}
|
|
</h1>
|
|
),
|
|
h2: (props) => (
|
|
<h2 {...props} className="border-b border-border pb-2 heading-lg text-ink mt-12 mb-4 first:mt-0">
|
|
{props.children}
|
|
</h2>
|
|
),
|
|
h3: (props) => (
|
|
<h3 {...props} className="heading-md text-ink mt-8 mb-3">
|
|
{props.children}
|
|
</h3>
|
|
),
|
|
h4: ({ children, ...props }) => (
|
|
<h4 className="heading-sm text-ink mt-8 mb-3" {...props}>{children}</h4>
|
|
),
|
|
h5: ({ children, ...props }) => (
|
|
<h5 className="text-base font-semibold text-ink mt-6 mb-2" {...props}>{children}</h5>
|
|
),
|
|
h6: ({ children, ...props }) => (
|
|
<h6 className="text-sm font-medium uppercase tracking-wider text-ink-soft mt-6 mb-2" {...props}>{children}</h6>
|
|
),
|
|
p: ({ children }) => (
|
|
<p className="text-ink leading-7 [&:not(:first-child)]:mt-6">
|
|
{children}
|
|
</p>
|
|
),
|
|
blockquote: ({ children }) => (
|
|
<blockquote className="my-6 border-l-4 border-accent/40 bg-surface/60 py-1 pl-5 pr-4 italic text-ink-soft">
|
|
{children}
|
|
</blockquote>
|
|
),
|
|
hr: () => <hr className="my-8 border-border" />,
|
|
a: ({ href, children, ...props }) => {
|
|
const isExternal = typeof href === 'string' && (href.startsWith('http://') || href.startsWith('https://'))
|
|
return (
|
|
<a
|
|
href={href}
|
|
target={isExternal ? '_blank' : undefined}
|
|
rel={isExternal ? 'noopener noreferrer' : undefined}
|
|
className="font-medium underline underline-offset-4 hover:text-accent transition-colors"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</a>
|
|
)
|
|
},
|
|
code: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {
|
|
const isInline = !className?.includes('language-');
|
|
|
|
if (isInline) {
|
|
return (
|
|
<code
|
|
className="rounded-md bg-ink/[0.06] px-1.5 py-[0.15rem] font-mono text-[0.8125rem] leading-[1.4] dark:bg-white/[0.08]"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</code>
|
|
);
|
|
}
|
|
return <code className={className} {...props} />;
|
|
},
|
|
pre: ({ children, ...props }: { children: React.ReactNode } & React.HTMLAttributes<HTMLPreElement>) => (
|
|
<pre className="my-6 p-0" {...props}>
|
|
{children}
|
|
</pre>
|
|
),
|
|
img: ({ src, alt, ...rest }) => (
|
|
<img
|
|
src={src}
|
|
alt={alt ?? ''}
|
|
className="mx-auto my-8 h-auto max-h-[80vh] w-auto max-w-full rounded-2xl border border-border bg-surface object-contain shadow-card"
|
|
loading="lazy"
|
|
decoding="async"
|
|
{...rest}
|
|
/>
|
|
),
|
|
table: ({ children }) => (
|
|
<div className="my-8 overflow-x-auto rounded-xl border border-border bg-canvas">
|
|
<table className="w-full min-w-[40rem] border-collapse text-sm">
|
|
{children}
|
|
</table>
|
|
</div>
|
|
),
|
|
|
|
// Lists
|
|
ul: (props) => <ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props} />,
|
|
ol: (props) => <ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props} />,
|
|
li: (props) => <li className="leading-7" {...props} />,
|
|
|
|
// Figures and captions
|
|
figure: (props) => <figure className="my-10" {...props} />,
|
|
figcaption: (props) => <figcaption className="mx-auto mt-3 max-w-2xl text-center text-sm leading-6 text-ink-soft" {...props} />,
|
|
|
|
// Subscripts and superscripts
|
|
sup: (props) => <sup className="text-xs" {...props} />,
|
|
sub: (props) => <sub className="text-xs" {...props} />,
|
|
|
|
// Keyboard keys
|
|
kbd: (props) => (
|
|
<kbd className="rounded bg-surface px-2 py-1 font-mono text-xs text-ink border border-border" {...props} />
|
|
),
|
|
|
|
// Collapsible sections
|
|
details: (props) => <details className="my-6 rounded-xl border border-border bg-surface/70 p-4 shadow-card" {...props} />,
|
|
summary: (props) => <summary className="cursor-pointer font-semibold text-ink" {...props} />,
|
|
}
|
|
}
|