in code blocks to their corresponding type
+ // definitions in the same file.
+ //
+ // Important: this has to run after rehypeSlug, since it
+ // relies on the headers to already have IDs.
+ //
+ // TODO: Only run this on the "Configuration" page, like in the old site?
+ rehypeConfigLinker,
+ ]}
+ components={{
+ a: (props) => {
+ // Replace header auto-links with a custom link icon.
+ const { children, node: _node, ...rest } = props;
+ if (rest.className === "header-auto-link") {
+ return (
+
+
+
+ );
+ }
- const href = normalizeHref(rest.href);
- const isExternalLink =
- isAbsoluteUrl(href || "") &&
- !href?.startsWith(`${docsConfig.siteUrl}`);
+ const href = normalizeHref(rest.href);
+ const isExternalLink =
+ isAbsoluteUrl(href || "") &&
+ !href?.startsWith(`${docsConfig.siteUrl}`);
+
+ if (!isExternalLink) {
+ return (
+
+ {children}
+
+ );
+ }
- if (!isExternalLink) {
return (
- {children}
+ {/* Only add the icon if the first child is a string. This is to avoid
+ breaking the layout of other components like image links etc. */}
+ {typeof Children.toArray(children)[0] === "string" ? (
+ // with display: "inline-flex" somehow breaks link underlining,
+ // so going for this manual solution instead.
+
+ {children}
+
+
+ ) : (
+ children
+ )}
);
- }
+ },
+ p: (props) => {
+ const { children, node: _node, ...rest } = props;
- return (
-
- {/* Only add the icon if the first child is a string. This is to avoid
- breaking the layout of other components like image links etc. */}
- {typeof Children.toArray(children)[0] === "string" ? (
- // with display: "inline-flex" somehow breaks link underlining,
- // so going for this manual solution instead.
-
- {children}
-
-
- ) : (
- children
- )}
-
- );
- },
- p: (props) => {
- const { children, node: _node, ...rest } = props;
-
- // The React children can either be an array or a single element, and
- // each element can be a string or something else. The Children.toArray()
- // method from React helps us convert either situation into a predictable array.
- const arrayChildren = Children.toArray(children);
- const fc = arrayChildren[0];
- if (fc && typeof fc === "string") {
- // Render paragraphs that start with "TIP:", "NOTE:", "CAUTION:", or "TODO:"
- // as blockquotes with an appropriate icon.
- const alertRegex = new RegExp(
- /^(TIP|NOTE|CAUTION|TODO): (.*)$/,
- "s"
- );
- const match = fc.match(alertRegex);
-
- if (match) {
- const alertType = match[1];
- const alertText = match[2];
- return (
-
- ) : (
-
- )
- }
- >
- {alertType}: {alertText}
- {arrayChildren.slice(1)}
-
+ // The React children can either be an array or a single element, and
+ // each element can be a string or something else. The Children.toArray()
+ // method from React helps us convert either situation into a predictable array.
+ const arrayChildren = Children.toArray(children);
+ const fc = arrayChildren[0];
+ if (fc && typeof fc === "string") {
+ // Render paragraphs that start with "TIP:", "NOTE:", "CAUTION:", or "TODO:"
+ // as blockquotes with an appropriate icon.
+ const alertRegex = new RegExp(
+ /^(TIP|NOTE|CAUTION|TODO): (.*)$/,
+ "s"
);
+ const match = fc.match(alertRegex);
+
+ if (match) {
+ const alertType = match[1];
+ const alertText = match[2];
+ return (
+
+ ) : (
+
+ )
+ }
+ >
+ {alertType}: {alertText}
+ {arrayChildren.slice(1)}
+
+ );
+ }
}
- }
- return {children}
;
- },
- img: (props) => {
- const { src, node: _node, ...rest } = props;
- // eslint-disable-next-line jsx-a11y/alt-text
- return })
;
- },
- pre: (props) => {
- const { children, node, ...rest } = props;
- const firstChild = node?.children[0];
- if (
- !firstChild ||
- firstChild?.type !== "element" ||
- firstChild?.tagName !== "code"
- ) {
- return {children};
- }
+ return {children}
;
+ },
+ img: (props) => {
+ const { src, node: _node, ...rest } = props;
+ // eslint-disable-next-line jsx-a11y/alt-text
+ return ;
+ },
+ pre: (props) => {
+ const { children, node, ...rest } = props;
+ const firstChild = node?.children[0];
+ if (
+ !firstChild ||
+ firstChild?.type !== "element" ||
+ firstChild?.tagName !== "code"
+ ) {
+ return {children};
+ }
- return (
-
- {children}
-
- );
- },
- h1: h(1),
- h2: h(2),
- h3: h(3),
- h4: h(4),
- h5: h(5),
- h6: h(6),
- table: (props) => (
-
- ),
- th: TableTh,
- td: TableTd,
- tr: TableTr,
- thead: TableThead,
- tbody: TableTbody,
- // For tags that contain tags, we need to extract the content
- // of the tag and pass it to a Mantine component. If it's
- // a tag that doesn't contain a tag, we just render it as is.
- // pre: (props) => {
- // const firstChild = props.node?.children[0];
- // if (
- // firstChild?.type === "element" &&
- // firstChild?.tagName === "code"
- // ) {
- // const contentElement = firstChild.children[0];
- // if (contentElement.type !== "text") {
- // throw new Error("Code content is not text");
- // }
- // const content = contentElement.value;
- // const language = firstChild.properties?.className?.[0]?.replace(
- // "language-",
- // ""
- // );
+ return (
+
+ {children}
+
+ );
+ },
+ h1: h(1),
+ h2: h(2),
+ h3: h(3),
+ h4: h(4),
+ h5: h(5),
+ h6: h(6),
+ table: (props) => (
+
+ ),
+ th: TableTh,
+ td: TableTd,
+ tr: TableTr,
+ thead: TableThead,
+ tbody: TableTbody,
+ // For tags that contain tags, we need to extract the content
+ // of the tag and pass it to a Mantine component. If it's
+ // a tag that doesn't contain a tag, we just render it as is.
+ // pre: (props) => {
+ // const firstChild = props.node?.children[0];
+ // if (
+ // firstChild?.type === "element" &&
+ // firstChild?.tagName === "code"
+ // ) {
+ // const contentElement = firstChild.children[0];
+ // if (contentElement.type !== "text") {
+ // throw new Error("Code content is not text");
+ // }
+ // const content = contentElement.value;
+ // const language = firstChild.properties?.className?.[0]?.replace(
+ // "language-",
+ // ""
+ // );
- // return (
- //
- // );
- // } else {
- // return ;
- // }
- // },
- }}
- >
- {children}
-