Addon-docs: Permalinking to MDX docs pages

[ghost]

Currently in V 5.3 the <Meta /> docs-block has a title property from which the docs-page URL is generated, e.g. the title "DesignSystem / Component / MyButton" creates a route like http://...path/=/docs/designsystem-components-mybutton--page. If we change the title of the docs page, then the link is broken. It would be better if the Meta-Tag could receive an id which enables you to permalink to the page.

Typical use case: Initial creation of pages from entities of your design process where a draft-name and a guid is given e.g. MyButton with guid 781e6e22-e3d2-4ca7-835b-a8b65095bfc0. In later implementation steps, the name may change to TheButton whereas the guid remains the same. Links from design artifacts into storybook should stay the same as they reference the same entity (permalink).

Steps to reproduce

• Create docs-page e.g. my-button.stories.mdx.
• Therein create a meta tag:

<Meta
  id="781e6e22-e3d2-4ca7-835b-a8b65095bfc0"
  title="DesignSystem / Components / MyButton"
  ...
/>

• Build/serve storybook.
• The following routes should open the same docs-page:
  • http://...path/=/docs/designsystem-components-mybutton--page
  • http://...path/=/docs/781e6e22-e3d2-4ca7-835b-a8b65095bfc0 (maybe with suffix --page)
• Rename title to "DesignSystem / Components / TheButton"
• The following routes should now open the same docs-page:
  • http://...path/=/docs/designsystem-components-thebutton--page
  • http://...path/=/docs/781e6e22-e3d2-4ca7-835b-a8b65095bfc0 (maybe with suffix --page)
• Whereas the following route will be invalid:
  • http://...path/=/docs/designsystem-components-mybutton--page

Versions

• @storybook/react 5.3
• @storybook/angular 5.3
• @storybook/addon-docs 5.3

Work summary

A similar thing already works for stories itself (https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#permalinking-to-stories). Permalinking is possible with the property componentId. A similar mechanism has to be implemented for docs-page via the Meta tag.

I would suppose the property name id is more appropriate as componentId. If id is conflicting, then pageId may also be a good name.

Remark: Both URLs (by title, by id) should be valid.

Where to start

First orientation may be the current implementation of the story with its permalinking feature:

• https://github.com/storybookjs/storybook/tree/next/addons/docs/src
• https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#permalinking-to-stories

Acceptance criteria

• Meta-Tag has additional property called id or pageId
• URL with this id can be used as permalink to docs page
• URL with id and title both work whereas title is volatile

Who to contact

• @davidwuerfel via GitHub
• MrCube42#0602 via Discord

[shilman]

I'm gonna call this a bug. There should be a <Meta id="xxx"> to go along with the CSF equiv.

[RavilM]

I also expect this.
Interesting possible to add name to story.
<Meta title="DesignSystem | Components" (name in menu and story) id="781e6e22-e3d2-4ca7-835b-a8b65095bfc0" (url to story) /> <Story name="MyButton" (name in menu and story) id="321-432df34-321" (url to story) > <SimpleButton /> </Story>

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid.

Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).