b5813e3b53
- Changed h2 font weight from bold to semibold for improved visual hierarchy in rendered content.
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { type MDXComponents } from 'mdx/types';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
/**
|
|
* Этот объект определяет, какие React-компоненты
|
|
* будут использоваться для рендеринга MDX-тегов (<a>, <h1>, <p> и т.д.)
|
|
* и какие кастомные компоненты будут доступны прямо в MDX.
|
|
*/
|
|
const components: MDXComponents = {
|
|
// 🔗 Заменяем стандартные <a> на <Link> Next.js
|
|
a: ({ children, href = '', ...props }) => {
|
|
// внутренние ссылки → через <Link>
|
|
if (href.startsWith('/')) {
|
|
return (
|
|
<Link href={href} {...props}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// внешние ссылки → target="_blank"
|
|
return (
|
|
<a href={href} rel="noopener noreferrer" target="_blank" {...props}>
|
|
{children}
|
|
</a>
|
|
);
|
|
},
|
|
|
|
h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
|
|
|
|
h2: ({ children }) => <h2 className="text-2xl font-semibold">{children}</h2>,
|
|
|
|
// 🖼 Обработка картинок через next/image
|
|
img: (props) => (
|
|
<Image
|
|
{...props}
|
|
alt={props.alt || ''}
|
|
className="my-4 rounded-xl"
|
|
height={props.height ? Number(props.height) : 600}
|
|
width={props.width ? Number(props.width) : 800}
|
|
/>
|
|
),
|
|
};
|
|
|
|
/**
|
|
* Эта функция вызывается автоматически при рендере MDX.
|
|
* Через неё Next.js App Router объединяет глобальные и локальные MDX-компоненты.
|
|
*/
|
|
export function useMDXComponents(componentsArgument: MDXComponents): MDXComponents {
|
|
return {
|
|
...components,
|
|
...componentsArgument, // позволяет переопределять внутри MDX
|
|
};
|
|
}
|