feat(docs): Add autolink headings #2467
Merged
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: 045dd0a 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 |
|
Preview environment ready: https://preview-2467--swisspost-design-system-next.netlify.app |
oliverschuerch
approved these changes
Jan 17, 2024
There was a problem hiding this comment.
Good job, I like it a lot!
And the fact that you used a legacy plugin is no problem for me (at the moment).
We can try to replace it with something newer in the future...
There is only one issue left: It's not working on the "Home" page.
On the other hand, it's not really important to have it available there.
Co-authored-by: Oliver Schürch <[email protected]>
Co-authored-by: Oliver Schürch <[email protected]>
# Conflicts: # packages/documentation/package.json # pnpm-lock.yaml
|
This was referenced Jan 22, 2024
gfellerph
pushed a commit
that referenced
this pull request
Jan 24, 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 - Restricted `post-collapsible` to collapse behaviour only. The component remains unchanged when used with external controls, however, it no longer has a `header` slot. Before: ```html <post-collapsible collapsed="" headingLevel="6"> <span slot="header">Titulum</span> <p>Contentus momentus vero siteos et accusam iretea et justo.</p> </post-collapsible> ``` After: ```html <post-accordion-item collapsed="" headingLevel="6"> <span slot="header">Titulum</span> <p>Contentus momentus vero siteos et accusam iretea et justo.</p> </post-accordion-item> ``` To get the same look and feel as in the previous version, use the `post-accordion-item` component instead. (by [@alizedebray](https://github.com/alizedebray) with [#2379](#2379)) ### Minor Changes - Updated the tooltip `min-height` and `max-width` and added a new property arrow to the tooltip, that defines wheter or not the pointer arrow is displayed. (by [@b1aserlu](https://github.com/b1aserlu) with [#2394](#2394)) ### Patch Changes - Update the background color of accordion to be white on any background color other than white. The accordion background remains gray on white backgrounds. (by [@alizedebray](https://github.com/alizedebray) with [#2379](#2379)) - Added a payload to the `collapseChange` event of the `post-collapsible` component. This payload is a boolean: `true` if the collapsible was opened, `false` if it was closed. (by [@alizedebray](https://github.com/alizedebray) with [#2379](#2379)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Updated icons number 1000, 1007, 1020, 1021, 1022, 1023, 1024, 1027, 1028, 1034, 1039, 1040, 1042, 1044, 1047, 1049, 2000, 2001, 2002, 2005, 2018, 2023, 2024, 2032, 2037, 2057, 2058, 2059, 2068, 2081, 2082, 2086, 2087, 2092, 2094, 2095, 2098, 2099, 2107, 2114, 2115, 2116, 2120, 2122, 2124, 2125, 2126, 2128, 2136, 2137, 2138, 2140, 2141, 2144, 2145, 2148, 2149, 2150, 2151, 2153, 2154, 2155, 2156, 2157, 2158, 2159, 2160, 2161, 2162, 2163, 2164, 2165, 2166, 2167, 2168, 2170, 2173, 2175, 2177, 2178, 2179, 2180, 2182, 2185, 2188, 2191, 2192, 2193, 2195, 2196, 2197, 2198, 2199, 2200, 2201, 2202, 2205, 2206, 2207, 2209, 2212, 2217, 2218, 2219, 2220, 2221, 2222, 2223, 2224, 2225, 2226, 2227, 2228, 2229, 2230, 2231, 2232, 2233, 2234, 2235, 2236, 2237, 2238, 2239, 2240, 2241, 2242, 2243, 2244, 2245, 2246, 2247, 2248, 2249, 2250, 2254, 2255, 2256, 2257, 2261, 2262, 2263, 2264, 2266, 2267, 2268, 2269, 2271, 2273, 2274, 2275, 2277, 2278, 2279, 2280, 2283, 2284, 2285, 2286, 2287, 2288, 2289, 2290, 2291, 2292, 2293, 2296, 2297, 2298, 2299, 2300, 2301, 2302, 2303, 2304, 2305, 2310, 2311, 2312, 2314, 2315, 2317, 2318, 2319, 2321, 2322, 2323, 2326, 2327, 2328, 2329, 2330, 2331, 2332, 2333, 2334, 2337, 2339, 2340, 2341, 2342, 2343, 2344, 2346, 2347, 2348, 2349, 2350, 2351, 2352, 2353, 2354, 2355, 2356, 2357, 2358, 2359, 2360, 2361, 2362, 2364, 2365, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2377, 2378, 2379, 2381, 2383, 2384, 2385, 2388, 2389, 2390, 2391, 2392, 2393, 2394, 2397, 2398, 2402, 2403, 2404, 2406, 2407, 2408, 2409, 2411, 2412, 2414, 2415, 2417, 2418, 2419, 2420, 2421, 2422, 2423, 2424, 2425, 2426, 2427, 2428, 2429, 2430, 2431, 2432, 2433, 2434, 2435, 2436, 2437, 2438, 2439, 2440, 2441, 2442, 2443, 2444, 2445, 2446, 2447, 2448, 2449, 2450, 2451, 2453, 2456, 2457, 2459, 2460, 2462, 2463, 2464, 2465, 2466, 2467, 2468, 2470, 2471, 2473, 2475, 2476, 2477, 2478, 2479, 2480, 2481, 2483, 2484, 2485, 2486, 2487, 2488, 2489, 2490, 2491, 2492, 2493, 2494, 2497, 2498, 2499, 2500, 2501, 2502, 2503, 2504, 2505, 2506, 2507, 2508, 2509, 2510, 2512, 2514, 2518, 2519, 2520, 2521, 2522, 2523, 2524, 2525, 2526, 2527, 2528, 2529, 2530, 2531, 2533, 2534, 2535, 2536, 2538, 2539, 2540, 2541, 2542, 2543, 2544, 2545, 2546, 2550, 2551, 2552, 2553, 2554, 2555, 2556, 2557, 2558, 2559, 2560, 2561, 2562, 2563, 2564, 2565, 2566, 2567, 3007, 3008, 3009, 3017, 3018, 3019, 3033, 3037, 3039, 3040, 3041, 3042, 3043, 3045, 3046, 3047, 3048, 3049, 3050, 3051, 3052, 3053, 3054, 3055, 3056, 3057, 3058, 3059, 3060, 3061, 3062, 3063, 3064, 3065, 3066, 3067, 3069, 3070, 3072, 3073, 3074, 3077, 3078, 3080, 3081, 3083, 3084, 3085, 3086, 3090, 3091, 3092, 3093, 3094, 3095, 3096, 3097, 3099, 3100, 3102, 3106, 3107, 3108, 3110, 3111, 3112, 3113, 3114, 3115, 3117, 3121, 3123, 3125, 3126, 3127, 3128, 3129, 3130, 3131, 3132, 3133, 3135, 3137, 3138, 3146, 3147, 3148, 3149, 3150, 3151, 3153, 3154, 3155, 3156, 3160, 3161, 3162, 3164, 3165, 3170, 3172, 3173, 3176, 3177, 3178, 3179, 3180, 3181, 3182, 3183, 3190, 3195, 3196, 3198, 3200, 3201, 3205, 3206, 3209, 3210, 3211, 3212, 3214, 3215, 3216, 3217, 3218, 3219, 3220, 3221, 3224, 3225, 3226, 3227, 3231, 3235, 3238, 3241, 3242, 3246, 3250, 3252, 3253, 3255, 3256, 3258, 3259, 3260, 8006, 8009, 8010, 8011, 8014, 8015, 8017, 8018 and 8019. Added icon number 2571. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2488](#2488)) ## @swisspost/[email protected] ### Minor Changes - Deprecation of legacy grid classes: - `.vertical-gutters` (use gutter classes instead, e.g. `.g-*`, `.gy-*` or `.gx-*`) - `.row.border-gutters` - `.container-reset` - `.container-reset-left` and `.container-reset-right` - `.container-fluid-#{$breakpoint}` (by [@b1aserlu](https://github.com/b1aserlu) with [#2400](#2400)) ### Patch Changes - Fixed the alignment of icons on datatable buttons. (by [@imagoiq](https://github.com/imagoiq) with [#2500](#2500)) - Updated styles for the `.is-valid` class. (by [@imagoiq](https://github.com/imagoiq) with [#2391](#2391)) - Update the background color of accordion to be white on any background color other than white. The accordion background remains gray on white backgrounds. (by [@alizedebray](https://github.com/alizedebray) with [#2379](#2379)) - Fixed a visual regression on the intranet-header with a sidenav. (by [@imagoiq](https://github.com/imagoiq) with [#2521](#2521)) ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added internationalization guidelines for the following ng-bootstrap components: alert, carousel, datepicker, pagination, and timepicker. (by [@alizedebray](https://github.com/alizedebray) with [#2517](#2517)) ### Patch Changes - Updated copyright year to 2024 in the footer of all documentation. (by [@imagoiq](https://github.com/imagoiq) with [#2491](#2491)) - Fixed links to new icons documentation. (by [@imagoiq](https://github.com/imagoiq) with [#2402](#2402)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added a documentation page for the ng-bootstrap datepicker component. (by [@alizedebray](https://github.com/alizedebray) with [#2518](#2518)) - Added a deprecation message to the badge documentation. (by [@b1aserlu](https://github.com/b1aserlu) with [#2410](#2410)) - Updated the tooltip `min-height` and `max-width` and added a new property arrow to the tooltip, that defines wheter or not the pointer arrow is displayed. (by [@b1aserlu](https://github.com/b1aserlu) with [#2394](#2394)) ### Patch Changes - Cleaned icon component controls from duplicate and null values. (by [@imagoiq](https://github.com/imagoiq) with [#2501](#2501)) - Documented the form patterns and added a usage sample to align buttons together in the button component page. (by [@imagoiq](https://github.com/imagoiq) with [#2463](#2463)) - Created a `post-accordion-item` to use as children for the `post-accordion` component. It replaces the `post-collapsible` component. (by [@alizedebray](https://github.com/alizedebray) with [#2466](#2466)) - Added autolink to headings to be able to copy anchor link more easily from the documentation. (by [@imagoiq](https://github.com/imagoiq) with [#2467](#2467)) - Updated copyright year to 2024 in the footer of all documentation. (by [@imagoiq](https://github.com/imagoiq) with [#2491](#2491)) - Convert LinkTo element to regular links to fix location issue. (by [@imagoiq](https://github.com/imagoiq) with [#2496](#2496)) - Removed intranet-header nesting in sidebar. (by [@imagoiq](https://github.com/imagoiq) with [#2492](#2492)) - Added additional information for setting up projects with content security policies that are using the `<post-icon>` component. (by [@b1aserlu](https://github.com/b1aserlu) with [#2406](#2406)) - Restricted `post-collapsible` to collapse behaviour only. The component remains unchanged when used with external controls, however, it no longer has a `header` slot. Before: ```html <post-collapsible collapsed="" headingLevel="6"> <span slot="header">Titulum</span> <p>Contentus momentus vero siteos et accusam iretea et justo.</p> </post-collapsible> ``` After: ```html <post-accordion-item collapsed="" headingLevel="6"> <span slot="header">Titulum</span> <p>Contentus momentus vero siteos et accusam iretea et justo.</p> </post-accordion-item> ``` To get the same look and feel as in the previous version, use the `post-accordion-item` component instead. (by [@alizedebray](https://github.com/alizedebray) with [#2379](#2379)) - Fixed vertical rythmn which was not applied to content inside tab like Alert component. (by [@imagoiq](https://github.com/imagoiq) with [#2497](#2497)) - Disable floating label when input is type color. (by [@imagoiq](https://github.com/imagoiq) with [#2457](#2457)) - Updated dependencies: - @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] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
imagoiq
added a commit
that referenced
this pull request
Jan 30, 2024
…#2529) 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)
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.
This is proof-of-concept. It has some complexities, and please have no hesitation to say if it's preferable not to add it.
HTML markup for links is added through remark-autolink-headings. Remark plugins are officially supported by Storybook Docs and can be easily added.
First issue (legacy plugin)
However, this plugin is considered as legacy and not updated since 2021. The author recommends using
remark-rehypeandrehype-autolink-headingstogether instead. Unfortunately, it's not possible with our setup as it'll create a double transformation into HTML as Storybook is already doing a transformation. I think that it's not a showstopper, as the plugin is quite simple (1 file) and could be even integrated into our repository if needed.Second issue (monkey patch)
Another requirement was to add a script that rewrite the
baseelement of the preview iframe to be able to get the anchor link related to the main URL and not the iframe. Without it, it would work, but let the user without sidebar and toolbar, and it would be just confusing for the user.I think, it's quite unlikely that Storybook will update themselves the
baseelement or let us do it as the element is included in a basic HTML file.