fixed header link hover

zuplo · Feb 21, 2024 · 5b9b350 · 5b9b350
1 parent 7c3a972
commit 5b9b350
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 36 deletions.
diff --git 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<void>[] = [];
+    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
@@ -1,19 +1,24 @@
+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";
 
 /**
  * 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<void>[] = [];
     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;