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.