diff --git a/.changeset/poor-ligers-cheat.md b/.changeset/poor-ligers-cheat.md new file mode 100644 index 0000000000..920a040ce6 --- /dev/null +++ b/.changeset/poor-ligers-cheat.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Fixed conflict between autolink anchor links and normal anchor links. diff --git a/packages/documentation/.storybook/main.ts b/packages/documentation/.storybook/main.ts index f54714b1bd..51657b808d 100644 --- a/packages/documentation/.storybook/main.ts +++ b/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', }, ], diff --git a/packages/documentation/.storybook/manager-head.html b/packages/documentation/.storybook/manager-head.html index 484a7bda4e..ac8421da22 100644 --- a/packages/documentation/.storybook/manager-head.html +++ b/packages/documentation/.storybook/manager-head.html @@ -1,4 +1,5 @@ - + + diff --git a/packages/documentation/.storybook/preview-body.html b/packages/documentation/.storybook/preview-body.html new file mode 100644 index 0000000000..3fde0cc66f --- /dev/null +++ b/packages/documentation/.storybook/preview-body.html @@ -0,0 +1 @@ + diff --git a/packages/documentation/.storybook/preview-head.html b/packages/documentation/.storybook/preview-head.html index 6da4c30e9c..6b39f036b6 100644 --- a/packages/documentation/.storybook/preview-head.html +++ b/packages/documentation/.storybook/preview-head.html @@ -15,21 +15,3 @@ - - - diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 2114ab90af..555fa98df5 100644 --- a/packages/documentation/package.json +++ b/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", diff --git a/packages/documentation/public/assets/scripts/autolink.js b/packages/documentation/public/assets/scripts/autolink.js new file mode 100644 index 0000000000..a092b11d24 --- /dev/null +++ b/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}`); + } + }); +}); diff --git a/packages/documentation/public/assets/scripts/storybook-events.js b/packages/documentation/public/assets/scripts/storybook-manager-events.js similarity index 100% rename from packages/documentation/public/assets/scripts/storybook-events.js rename to packages/documentation/public/assets/scripts/storybook-manager-events.js diff --git a/packages/documentation/public/assets/scripts/storybook-preview-events.js b/packages/documentation/public/assets/scripts/storybook-preview-events.js new file mode 100644 index 0000000000..f09563db12 --- /dev/null +++ b/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; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4a94cadd86..dea649dec8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,6 +475,9 @@ importers: react-syntax-highlighter: specifier: 15.5.0 version: 15.5.0(react@18.2.0) + rehype-autolink-headings: + specifier: ^7.1.0 + version: 7.1.0 remark-autolink-headings: specifier: 7.0.1 version: 7.0.1 @@ -7539,6 +7542,12 @@ packages: '@types/unist': 2.0.6 dev: true + /@types/hast@3.0.3: + resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==} + dependencies: + '@types/unist': 2.0.6 + dev: true + /@types/http-proxy@1.17.11: resolution: {integrity: sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==} dependencies: @@ -7799,6 +7808,10 @@ packages: resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} dev: true + /@types/unist@3.0.2: + resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} + dev: true + /@types/uuid@9.0.7: resolution: {integrity: sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==} dev: true @@ -10933,6 +10946,12 @@ packages: - supports-color dev: true + /devlop@1.1.0: + resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + dependencies: + dequal: 2.0.3 + dev: true + /di@0.0.1: resolution: {integrity: sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==} dev: true @@ -13220,6 +13239,18 @@ packages: function-bind: 1.1.2 dev: true + /hast-util-heading-rank@3.0.0: + resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==} + dependencies: + '@types/hast': 3.0.3 + dev: true + + /hast-util-is-element@3.0.0: + resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + dependencies: + '@types/hast': 3.0.3 + dev: true + /hast-util-parse-selector@2.2.5: resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==} dev: true @@ -18080,6 +18111,17 @@ packages: jsesc: 0.5.0 dev: true + /rehype-autolink-headings@7.1.0: + resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==} + dependencies: + '@types/hast': 3.0.3 + '@ungap/structured-clone': 1.2.0 + hast-util-heading-rank: 3.0.0 + hast-util-is-element: 3.0.0 + unified: 11.0.4 + unist-util-visit: 5.0.0 + dev: true + /remark-autolink-headings@7.0.1: resolution: {integrity: sha512-a1BIwoJ0cSnX+sPp5u3AFULBFWHGYBt57Fo4a+7IlGiJOQxs8b7uYAE5Iu26Ocl7Y5cvinZy3FaGVruLCKg6vA==} dependencies: @@ -20276,6 +20318,18 @@ packages: vfile: 5.3.7 dev: true + /unified@11.0.4: + resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==} + dependencies: + '@types/unist': 3.0.2 + bail: 2.0.2 + devlop: 1.1.0 + extend: 3.0.2 + is-plain-obj: 4.1.0 + trough: 2.1.0 + vfile: 6.0.1 + dev: true + /union-value@1.0.1: resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==} engines: {node: '>=0.10.0'} @@ -20345,12 +20399,24 @@ packages: '@types/unist': 2.0.6 dev: true + /unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + dependencies: + '@types/unist': 3.0.2 + dev: true + /unist-util-stringify-position@3.0.3: resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==} dependencies: '@types/unist': 2.0.6 dev: true + /unist-util-stringify-position@4.0.0: + resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + dependencies: + '@types/unist': 3.0.2 + dev: true + /unist-util-visit-parents@3.1.1: resolution: {integrity: sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==} dependencies: @@ -20365,6 +20431,13 @@ packages: unist-util-is: 5.2.1 dev: true + /unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + dependencies: + '@types/unist': 3.0.2 + unist-util-is: 6.0.0 + dev: true + /unist-util-visit@2.0.3: resolution: {integrity: sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==} dependencies: @@ -20381,6 +20454,14 @@ packages: unist-util-visit-parents: 5.1.3 dev: true + /unist-util-visit@5.0.0: + resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} + dependencies: + '@types/unist': 3.0.2 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + dev: true + /universalify@0.1.2: resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} engines: {node: '>= 4.0.0'} @@ -20613,6 +20694,13 @@ packages: unist-util-stringify-position: 3.0.3 dev: true + /vfile-message@4.0.2: + resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} + dependencies: + '@types/unist': 3.0.2 + unist-util-stringify-position: 4.0.0 + dev: true + /vfile@5.3.7: resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==} dependencies: @@ -20622,6 +20710,14 @@ packages: vfile-message: 3.1.4 dev: true + /vfile@6.0.1: + resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} + dependencies: + '@types/unist': 3.0.2 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.2 + dev: true + /vinyl-fs@3.0.3: resolution: {integrity: sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==} engines: {node: '>= 0.10'}