fix(documentation): fix documentation heading links (#3279)

.changeset/eighty-bananas-hug.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed the documentation heading links by adding the rehype-slug plugin

packages/documentation/.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 import pkg from '@/../package.json';
 import { mergeConfig } from 'vite';
+import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 const config: StorybookConfig = {
@@ -30,6 +31,7 @@ const config: StorybookConfig = {
         mdxPluginOptions: {
           mdxCompileOptions: {
             rehypePlugins: [
+              rehypeSlug,
               [
                 rehypeAutolinkHeadings,
                 {

packages/documentation/package.json

@@ -74,8 +74,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-syntax-highlighter": "15.5.0",
-    "rehype-autolink-headings": "^7.1.0",
-    "remark-autolink-headings": "7.0.1",
+    "rehype-autolink-headings": "7.1.0",
+    "rehype-slug": "6.0.0",
     "rimraf": "6.0.1",
     "sass": "1.77.6",
     "storybook": "8.1.11",

packages/documentation/public/assets/scripts/autolink.js

@@ -5,7 +5,7 @@ window.addEventListener('storybook:contentReady', function () {
   links.forEach(link => {
     const anchor = link.getAttribute('href');
     if (anchor.startsWith('#')) {
-      link.setAttribute('href', `${window.parent.location.href}${anchor}`);
+      link.setAttribute('href', `${window.parent.location.href.replace(/#.*/, '')}${anchor}`);
     }
   });
 });