---
import type { HTMLAttributes } from 'astro/types';
import { transform } from 'ultrahtml';
import sanitize from 'ultrahtml/transformers/sanitize';
// These styles are included globally by default, but can be removed when `markdown.headingLinks` is
// set to `false`. We import them here to ensure they are included if the component is used with the
// global Markdown option disabled.
import '../style/anchor-links.css';
import { AstroError } from 'astro/errors';
const headingLevels = [1, 2, 3, 4, 5, 6, '1', '2', '3', '4', '5', '6'] as const;
interface Props extends HTMLAttributes<'h1'> {
level: 1 | 2 | 3 | 4 | 5 | 6 | `${1 | 2 | 3 | 4 | 5 | 6}`;
id: string;
}
const { level, id, ...attrs } = Astro.props;
if (!id) {
throw new AstroError(
'Missing `id` attribute passed to `` component',
`The \`\` component requires an \`id\` attribute, but received \`${typeof id === 'string' ? '""' : id}\`.`
);
}
if (!headingLevels.includes(level)) {
throw new AstroError(
'Invalid `level` attribute passed to `` component',
`The \`\` component expects a \`level\` attribute of \`1 | 2 | 3 | 4 | 5 | 6\`, but received \`${level}\`.`
);
}
const HeadingElement = `h${level}` as const;
const headingHTML = await Astro.slots.render('default');
const headingString = await transform(headingHTML, [sanitize({ unblockElements: [] })]);
const accessibleLabel = Astro.locals.t('heading.anchorLabel', {
title: headingString,
interpolation: { escapeValue: false },
})
---
{/* The spacing in this component is a little awkward to ensure whitespace matches what the rehype plugin produces. */}