feat: Make MD headers clickable (#6529)

* feat: Make MD headers clickable

* Reformat code in the mdx config

* Reformat styles

Author: damianstasik

next.mdx.mjs

@@ -17,10 +17,7 @@ export const NEXT_REHYPE_PLUGINS = [
   // Generates `id` attributes for headings (H1, ...)
   rehypeSlug,
   // Automatically add anchor links to headings (H1, ...)
-  [
-    rehypeAutolinkHeadings,
-    { properties: { ariaHidden: true, tabIndex: -1, class: 'anchor' } },
-  ],
+  [rehypeAutolinkHeadings, { behavior: 'wrap' }],
   // Transforms sequential code elements into code tabs and
   // adds our syntax highlighter (Shikiji) to Codeboxes
   rehypeShikiji,

styles/markdown.css

@@ -34,6 +34,18 @@ main {
     @apply text-base;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &[id] a {
+      @apply text-neutral-900
+        dark:text-white;
+    }
+  }
+
   h1,
   h2,
   h3,