Storybook Markdown Docs
Supporting .html files in Storybook
This article is part of a series , feel free to look at the others below 👇👇.
- Addon-Kit is a developer’s dream come true
- Storybook Markdown Docs (not mdx)
- Storybook Markdown Docs (not mdx) Part 2
- Storybook Addon for Auto Markdown Import
- Support .html files in Storybook
So, after I finished the 4th article and created the addon, I found out I needed to add more features, specifically in the department of story indexing. The main issue for me was the lack of capability to put a title for the Markdown files I imported.
As you can see, the README and CHANGELOG names are not so pretty. I wanted to use Introduction & Changelog respectively. But Storybook had other opinions. I had to dig deep for this one.
As I mentioned before, Storybook is indexing stories using a special class called StoryIndexGenerator and down the rabbit hole, there is another library with the name @storybook/docs-mdx that has a sole purpose of analyzing the .mdx files to retrieve the title of the docs story that will be displayed in the Storybook sidebar (among other things).
Suddenly, it clicked for me, I can use <title>Introduction</title> which will not show in the Markdown render but can be used to retrieve the special title and use it for the index and by inheritance the sidebar.
Not to bore you with more details, I created a nice PR for this purpose on the @storybook/docs-mdx library 👇👇
And I even took it a little further, I updated the @sheriffmoose/storybook-md addon to also be able to import .html files, since we are going to utilize <title> tag.
For that purpose, I had to write a separate loader for the .html files and made it work with .md files as well, making the use of transcludeMarkdown not needed anymore, and making the addon truely zero-config addon, just plug and play. I even included a demo.html and made it work nicely.
Stay tuned, when the PR gets merged, the next prerelease of Storybook will include these changes, and in no time we will be able to import .md & .html files in Storybook.
@sheriffmoose/storybook-md v1.0.12 is now available
