fix(documentation): Autolink with base url disrupt other anchor links #2529
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
imagoiq
requested review from
b1aserlu,
davidritter-dotcom and
a team
as code owners
🦋 Changeset detectedLatest commit: 20d210d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
imagoiq
commented
Jan 23, 2024
| import { mergeConfig } from 'vite'; | ||
| import rehypeAutolinkHeadings from 'rehype-autolink-headings'; |
There was a problem hiding this comment.
I had another try and I managed to make it work with this plugin which replace the legacy remark-autolink-headings (see https://github.com/remarkjs/remark-autolink-headings)
|
Preview environment ready: https://preview-2529--swisspost-design-system-next.netlify.app |
imagoiq
commented
Jan 23, 2024
| @@ -0,0 +1 @@ | |||
| <script src="/assets/scripts/storybook-preview-events.js"></script> | |||
There was a problem hiding this comment.
It could have been part of the manager, but it would have required more work on the observer and I think this event could be beneficial as well for e2e tests, for example, where we only load the iframe not the whole storybook.
imagoiq
commented
Jan 23, 2024
| contentReady(); | ||
| } else { | ||
| // if footer does not exist yet, wait until its rendered, then emit contentReady event and listen for route-changes | ||
| new MutationObserver(function () { |
There was a problem hiding this comment.
Unfortunately, we have to make all this code to wait until the footer is available. Maybe after storybookjs/storybook#24429, we could simply put the script at the end of the body and simplify it?
|
alizedebray
approved these changes
Jan 29, 2024
gfellerph
pushed a commit
that referenced
this pull request
Feb 7, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @swisspost/[email protected] ### Major Changes - We are introducing the new package `@swisspost/design-system-components-angular` 🥳, which provides a corresponding Angular component for all our web-components. For those working on an Angular app this means: - Instead of the package `@swisspost/design-system-components`, which provides native web components, the new package can be used. - The manual creation of Angular wrapper components for our previous web components in every project is no longer necessary. - Full support of the standard Angular schema. The use of the `CUSTOM_ELEMENTS_SCHEMA` schema is history. - Component properties, events, etc. can be applied to the components in the usual Angular way. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2071](#2071)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added icons number 2572 and 2573. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2553](#2553)) - Added icon number 2574. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2592](#2592)) ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Set the size of the logo before it is displayed to avoid a layout jump right after the initial rendering of the header. (by [@alizedebray](https://github.com/alizedebray) with [#2557](#2557)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated `form-control` and `form-select` sizes and added support for floating label small size variant. (by [@imagoiq](https://github.com/imagoiq) with [#2396](#2396)) ## @swisspost/[email protected] ### Minor Changes - Added a documentation page for the ng-bootstrap modal component. (by [@alizedebray](https://github.com/alizedebray) with [#2531](#2531)) - Added a documentation page for the ng-bootstrap progressbar component. (by [@imagoiq](https://github.com/imagoiq) with [#2549](#2549)) - Added a documentation page for the ng-bootstrap/post notification-overlay component. (by [@imagoiq](https://github.com/imagoiq) with [#2608](#2608)) - Added a documentation page for the angular `custom-select` component based on the ng-bootstrap `dropdown` component. (by [@b1aserlu](https://github.com/b1aserlu) with [#2573](#2573)) - Added a documentation page for the ng-bootstrap dropdown component. (by [@davidritter-dotcom](https://github.com/davidritter-dotcom) with [#2551](#2551)) - Added a documentation page for the post stepper component. (by [@alizedebray](https://github.com/alizedebray) with [#2556](#2556)) - Added a documentation page for the design-system migration process. (by [@imagoiq](https://github.com/imagoiq) with [#2577](#2577)) - Added a documentation page for the ng-bootstrap typeahead component. (by [@imagoiq](https://github.com/imagoiq) with [#2547](#2547)) - Added a documentation page for the ng-bootstrap pagination component. (by [@imagoiq](https://github.com/imagoiq) with [#2549](#2549)) - Added a documentation page for the ng-bootstrap timepicker component. (by [@imagoiq](https://github.com/imagoiq) with [#2549](#2549)) - Added a documentation page for the post product card component. (by [@alizedebray](https://github.com/alizedebray) with [#2580](#2580)) - Added a getting-started docs page for the new `@swisspost/components-angular` package. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2071](#2071)) - Added an alert warning that the documentation is in beta, it will remain until all Design System components are documented. (by [@alizedebray](https://github.com/alizedebray) with [#2563](#2563)) ### Patch Changes - Fixed conflict between autolink anchor links and normal anchor links. (by [@imagoiq](https://github.com/imagoiq) with [#2529](#2529)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix over #2467
In the previous PR, autolink anchor link associated to heading were formed by changing the
<base>element href attribute so that the absolute URL would be created by using the parent frame URL (the main URL that the user navigate with). However, it appears that other anchor links, mostly the one used for the table of content, will use this absolute URL as well. They are correct, but the transition to an anchor is managed by Storybook and not the browser so in this case as the URL used is not the same as the iframe, it doesn't work if the page is already loaded (it works when the page is refreshed).To avoid this issue, I propose a progressive enhancement to capture all the autolink anchor links and change them (but only them) to use the absolute URL from the main frame. If the script fails, the link still works but the manager (sidebar, toolbar) of Storybook will not appear.
Ideally, we should generate those links in Storybook. But I couldn't find a way to get the context in the rehype plugin and hooking into the layout.tsx children don't seem feasible.
Testing
You can find table of contents in https://preview-2529--swisspost-design-system-next.netlify.app/?path=/docs/components-icons-getting-started--docs (although some links are broken, but fixed with #2496)