diff --git a/src/lib/markdown/mdx.ts b/src/lib/markdown/mdx.ts index 45e66a53..284b22c9 100644 --- a/src/lib/markdown/mdx.ts +++ b/src/lib/markdown/mdx.ts @@ -41,34 +41,27 @@ const rehypeAutolinkHeadingsOptions: RehypeAutolinkHeadingsOptions = { class: "no-underline pl-1 mb-3 cursor-pointer opacity-0 hover:!opacity-100 group-hover:!opacity-100", }, - // group(node) { - // return h("a"); - // }, content(node) { return h("span", "#"); }, }; -const rehypeRewriteOptions: RehypeRewriteOptions = { - rewrite: (node, i, parent) => { - if ( - node.type === "element" && - node.properties && - ["h2", "h3", "h4", "h5", "h6"].includes(node.tagName) - ) { - // node.properties.className = - // "group scroll-mt-20 text-[26px] lg:text-[32px] md:scroll-mt-32"; - node.properties.className = "group scroll-mt-20 md:scroll-mt-32"; - } - if ( - node.type === "element" && - node.properties && - ["p", "li"].includes(node.tagName) - ) { - node.properties.className = "text-xl"; - } - }, -}; +const rehypeRewriteHeadingGroupLinks: Plugin<[], Root, Root> = + () => async (root, vfile: VFile) => { + const promises: Promise[] = []; + visit(root, ["element"], (node: any, index, parent) => { + promises.push( + (async () => { + if ( + node.type === "element" && + ["h2", "h3", "h4", "h5", "h6"].includes(node.tagName) + ) { + node.properties.className = "group scroll-mt-20 md:scroll-mt-32"; + } + })(), + ); + }); + }; const rehypeCodeOptions: CodeOptions = { theme: "github-dark", @@ -127,7 +120,7 @@ function getOptions(headings: Element[] = []): SerializeOptions { rehypeStaticImages, rehypeSlug, [rehypeAutolinkHeadings, rehypeAutolinkHeadingsOptions], - [rehypeRewrite as any, rehypeRewriteOptions], + rehypeRewriteHeadingGroupLinks, [rehypeRewrite, getHeaderRewriteOptions(headings)], ], }, diff --git a/src/lib/markdown/static-images.ts b/src/lib/markdown/static-images.ts index aaf4140c..e4ffb9c2 100644 --- a/src/lib/markdown/static-images.ts +++ b/src/lib/markdown/static-images.ts @@ -1,5 +1,6 @@ +import { Root } from "mdast"; import path from "path"; -import { Parent } from "unist"; +import { Plugin } from "unified"; import { visit } from "unist-util-visit"; import type { VFile } from "vfile"; @@ -7,13 +8,17 @@ import type { VFile } from "vfile"; * Copies images from the /static folder to /public if they are referenced by a * @returns */ -export default function rehypeStaticImages() { - return async (root: Parent, vfile: VFile) => { +const rehypeStaticImages: Plugin<[], Root, Root> = + () => async (root, vfile: VFile) => { const promises: Promise[] = []; visit(root, ["element"], (node: any, index, parent) => { promises.push( (async () => { - if (node.type === "element" && node.tagName === "img") { + if ( + node.type === "element" && + node.tagName === "img" && + node.properties + ) { if (!node.properties.src.startsWith("http")) { const publicDir = path.join(process.cwd(), "public"); let url = path.resolve( @@ -23,21 +28,24 @@ export default function rehypeStaticImages() { const relativePath = url.replace(publicDir, ""); if (process.env.USE_IMAGE_CDN) { node.properties.src = `https://cdn.zuplo.com/docs${relativePath}`; - node.properties.srcSet = [ - `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=320,format=auto/docs${relativePath} 320w`, - `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=640,format=auto/docs${relativePath} 640w`, - `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=960,format=auto/docs${relativePath} 960w`, - `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=1280,format=auto/docs${relativePath} 1280w`, - `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=2560,format=auto/docs${relativePath} 2560w`, - ].join(", "); } else { node.properties.src = `/docs${relativePath}`; } } + + if (node.properties.src.startsWith("https://cdn.zuplo.com/")) { + const url = new URL(node.properties.src); + node.properties.srcSet = [ + `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=640,format=auto${url.pathname} 640w`, + `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=960,format=auto${url.pathname} 960w`, + `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=1280,format=auto${url.pathname} 1280w`, + `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=2560,format=auto${url.pathname} 2560w`, + ].join(", "); + } } })(), ); }); await Promise.all(promises); }; -} +export default rehypeStaticImages;