Remove rehype-autolink-headings and related styles.

Astro added anchor links, so the plugin was creating duplicate anchors. Eliminated the `rehype-autolink-headings` package from dependencies and updated the code to remove its usage in `astro.config.mjs`.

Author: khalidabuhakmeh

astro.config.mjs

@@ -195,14 +195,6 @@ export default defineConfig({
           },
         },
       ],
-      rehypeHeadingIds,
-      [
-        rehypeAutolinkHeadings,
-        {
-          // Wrap the heading text in a link.
-          behavior: "wrap",
-        },
-      ],
     ],
   },
 });

package.json

@@ -35,7 +35,6 @@
     "jsdom": "^26.0.0",
     "patch-package": "^8.0.0",
     "react": "^19.0.0",
-    "rehype-autolink-headings": "^7.1.0",
     "satori": "^0.12.1",
     "sharp": "^0.34.1",
     "starlight-auto-sidebar": "^0.1.1",

src/styles/custom.css

@@ -36,42 +36,17 @@
 }
 
 /* Style the Markdown heading links. */
-.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
+.sl-heading-wrapper {
     color: var(--sl-color-white);
     text-decoration: none;
     position: relative;
-    display: block;
     padding-right: 1em;
     padding-bottom: 0.25em;
     border-bottom: 1px solid var(--sl-color-hairline);
-
-    &::after {
-        content: "";
-        color: var(--sl-color-white);
-        background-image: url("/src/assets/chain-dark.svg");
-        background-size: .5em .5em;
-        background-repeat: no-repeat;
-        position: absolute;
-        right: 0;
-        top: 33%;
-        width: .75em;
-        height: 1em;
-        opacity: 0.3;
-        transition: opacity 0.2s ease;
-        vertical-align: text-bottom;
-    }
-
-    &:hover::after {
-        opacity: 1;
-    }
+    display: block;
 }
 
 :root[data-theme='light'] {
-    .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
-        &::after {
-            background-image: url("/src/assets/chain-light.svg");
-        }
-    }
     .mermaid {
         background: var(--sl-color-gray-7);
     }