From 1f20b15741db4420365d0f9cb561d81da02f2ec0 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Tue, 23 Jan 2024 13:54:28 +0100 Subject: [PATCH 1/2] fix(documentation): Autolink with base url disrupt other anchor links --- packages/documentation/.storybook/main.ts | 7 +- .../.storybook/manager-head.html | 3 +- .../.storybook/preview-body.html | 1 + .../.storybook/preview-head.html | 18 ---- packages/documentation/package.json | 1 + .../public/assets/scripts/autolink.js | 11 +++ ...-events.js => storybook-manager-events.js} | 0 .../scripts/storybook-preview-events.js | 30 ++++++ pnpm-lock.yaml | 96 +++++++++++++++++++ 9 files changed, 145 insertions(+), 22 deletions(-) create mode 100644 packages/documentation/.storybook/preview-body.html create mode 100644 packages/documentation/public/assets/scripts/autolink.js rename packages/documentation/public/assets/scripts/{storybook-events.js => storybook-manager-events.js} (100%) create mode 100644 packages/documentation/public/assets/scripts/storybook-preview-events.js 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 ea59188430..936f5793bb 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 d64be4fff2..f76817f23f 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 @@ -7897,6 +7900,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: @@ -8177,6 +8186,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 @@ -11327,6 +11340,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 @@ -13663,6 +13682,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 @@ -18650,6 +18681,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: @@ -20931,6 +20973,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'} @@ -21000,12 +21054,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: @@ -21020,6 +21086,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: @@ -21036,6 +21109,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'} @@ -21273,6 +21354,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: @@ -21282,6 +21370,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'} From 1e5a101af1c95c72f8eca9fd901157a420b85d99 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Tue, 23 Jan 2024 14:14:54 +0100 Subject: [PATCH 2/2] Add changeset --- .changeset/poor-ligers-cheat.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/poor-ligers-cheat.md 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.