Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Linkable headers in storybook documentation-only MDX stories #8599

Closed
folz opened this issue Oct 28, 2019 · 1 comment
Closed

Linkable headers in storybook documentation-only MDX stories #8599

folz opened this issue Oct 28, 2019 · 1 comment

Comments

@folz
Copy link

folz commented Oct 28, 2019

Is your feature request related to a problem? Please describe.
We recently converted our component library's docs to Storybook Docs. It's been mostly fantastic, but we seem to have lost the ability to link to specific sections in longform docs.

E.g. given

# Getting Started

foo

## Installation

bar

I am unable to link directly to the ## Installation subheader. Instead, I have to link to the /docs/getting-started story and tell people to scroll down to Installation.

Attempting to use "Anchors in Markdown" per https://gist.github.com/asabaylus/3071099 does not work - it renders the "heading" as a link with a literal ## in front of the link.

Describe the solution you'd like
I would like headings in documentation-only MDX to be:

  1. Linkable at all (is this already possible? If so, my apologies, I was unable to find it in the docs)
  2. Automatically linked (perhaps slugified?), even if I don't use the "Anchors in Markdown" syntax.

Describe alternatives you've considered
Instead of using markdown, I can use jsx like <h2 id="my-anchor"> and manually construct the link, but this is cumbersome and loses a lot of the benefits of writing docs in markdown.

I can also probably override the MDX context to use an auto-linking header component like the one I reference in "additional context" below, but I think this feature would be valuable to all users of storybook docs.

Are you able to assist bring the feature to reality?
If you point me at the relevant code I can try my best.

Additional context
I came across this gatsby plugin to autolink headers that may be useful: https://github.com/ChristopherBiscardi/gatsby-mdx/tree/master/packages/mdx-component-autolink-header

And this is how my story docs look when trying to use Anchors in Markdown

In:

## This is a heading

[## This should be a heading!](#anchor-me)

Out:
Screen Shot 2019-10-28 at 4 01 36 PM

@shilman
Copy link
Member

shilman commented Oct 28, 2019

Closing this as a dupe to #8184 -- coming soon!

@shilman shilman closed this as completed Oct 28, 2019
@shilman shilman added this to the 5.3.0 milestone Oct 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants