fix(documentation): Autolink with base url disrupt other anchor links

.changeset/poor-ligers-cheat.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed conflict between autolink anchor links and normal anchor links.

packages/documentation/.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 import pkg from '../package.json';
-import remarkAutolinkHeadings from 'remark-autolink-headings';
 import { mergeConfig } from 'vite';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 const config: StorybookConfig = {
   logLevel: 'info',
@@ -29,15 +29,16 @@ const config: StorybookConfig = {
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
-            remarkPlugins: [
+            rehypePlugins: [
               [
-                remarkAutolinkHeadings,
+                rehypeAutolinkHeadings,
                 {
                   content: {
                     type: 'element',
                     tagName: 'post-icon',
                     properties: { name: 2037 },
                   },
+                  headingProperties: { className: 'docs-autolink' },
                   behavior: 'append',
                 },
               ],

packages/documentation/.storybook/manager-head.html

@@ -1,4 +1,5 @@
-<script src="/assets/scripts/storybook-events.js"></script>
+<script src="/assets/scripts/storybook-manager-events.js"></script>
+<script src="/assets/scripts/autolink.js"></script>
 <script src="/assets/scripts/analytics-helper.js"></script>
 <script src="/assets/scripts/analytics-events.js"></script>
 

packages/documentation/.storybook/preview-body.html

@@ -0,0 +1 @@
+<script src="/assets/scripts/storybook-preview-events.js"></script>

packages/documentation/.storybook/preview-head.html

@@ -15,21 +15,3 @@
 <script>
   window.global = window;
 </script>
-
-<!-- Change base location of iframe to get relative parent anchor link and not relative to iframe url. Source: https://stackoverflow.com/a/68418536  -->
-<script>
-  const onChangeState = () => {
-    const baseEl = document.querySelector('base');
-    baseEl.setAttribute('href', window.parent.location.href);
-  };
-
-  ['pushState', 'replaceState'].forEach(changeState => {
-    window.history[changeState] = new Proxy(window.history[changeState], {
-      apply(target, thisArg, argList) {
-        onChangeState();
-
-        return target.apply(thisArg, argList);
-      },
-    });
-  });
-</script>

packages/documentation/package.json

@@ -63,6 +63,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "15.5.0",
+    "rehype-autolink-headings": "^7.1.0",
     "remark-autolink-headings": "7.0.1",
     "rimraf": "5.0.5",
     "sass": "1.69.7",

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

@@ -0,0 +1,11 @@
+// Change base location of iframe to get relative parent anchor link and not relative to iframe url.
+window.addEventListener('storybook:contentReady', function () {
+  const previewIframe = document.getElementById('storybook-preview-iframe');
+  let links = previewIframe.contentDocument.querySelectorAll('.docs-autolink a');
+  links.forEach(link => {
+    const anchor = link.getAttribute('href');
+    if (anchor.startsWith('#')) {
+      link.setAttribute('href', `${window.parent.location.href}${anchor}`);
+    }
+  });
+});

packages/documentation/public/assets/scripts/storybook-preview-events.js

@@ -0,0 +1,30 @@
+const previewIframe = document.body;
+let footerEl = document.querySelector('.docs-footer');
+let currentPage = null;
+
+if (footerEl) {
+  // if footer already exists, just emit ready event and listen for route-changes
+  contentReady();
+} else {
+  // if footer does not exist yet, wait until its rendered, then emit contentReady event and listen for route-changes
+  new MutationObserver(function () {
+    footerEl = document.querySelector('.docs-footer');
+
+    if (footerEl && isNewPage()) {
+      contentReady();
+      currentPage = window.parent.location.href;
+    }
+  }).observe(previewIframe, {
+    childList: true,
+    subtree: true,
+  });
+}
+
+function contentReady() {
+  window.dispatchEvent(new Event('storybook:contentReady'));
+  window.parent.dispatchEvent(new Event('storybook:contentReady'));
+}
+
+function isNewPage() {
+  return currentPage !== window.parent.location.href;
+}