Gathering detailed insights and metrics for @storybook-extras/markdown
Installations
npm install @storybook-extras/markdownDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=16
Node Version
16.19.1
NPM Version
lerna/5.6.2/node@v16.19.1+x64 (linux)
Score
39.6
Supply Chain
65.8
Quality
74.8
Maintenance
50
Vulnerability
97.6
License
Releases
13
Contributors
4
Unable to fetch Contributors
Languages
3
TypeScript
JavaScript
Handlebars
TypeScript (94.34%)
JavaScript (3.76%)
Handlebars (1.9%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
10,816
Last Day
3
Last Week
31
Last Month
163
Last Year
3,716
GitHub Statistics
MIT License
16 Stars
520 Commits
1 Forks
2 Watchers
3 Branches
4 Contributors
Updated on Oct 28, 2024
Bundle Size
163.00 B
Minified
139.00 B
Minified + Gzipped
Sponsor this package
Maintainers
1
Package Meta Information
Latest Version
0.0.68
Package Id
@storybook-extras/markdown@0.0.68
Unpacked Size
26.20 kB
Size
7.73 kB
File Count
54
NPM Version
lerna/5.6.2/node@v16.19.1+x64 (linux)
Node Version
16.19.1
Published on
Mar 01, 2023
Total Downloads
Cumulative downloads
Total Downloads
10,816
Last Day
-40%
3
Compared to previous day
Last Week
-31.1%
31
Compared to previous week
Last Month
-59.9%
163
Compared to previous month
Last Year
8.8%
3,716
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
7
Markdown Docs
Storybook addon for auto importing markdown/html docs.
Table of Contents
Getting started
- Install the addon:
1yarn add @storybook-extras/markdown -D
- Add the addon to your Storybook config:
1// .storybook/main.ts 2import { StorybookConfig } from '@storybook/angular'; 3import { ExtrasConfig } from '@storybook-extras/preset'; 4 5const config: StorybookConfig & ExtrasConfig = { 6 ... 7 "stories": [ 8 "../*.@(md|html)", 9 "../src/**/*.stories.@(js|jsx|ts|tsx)" 10 ], 11 "addons": [ 12 "@storybook-extras/markdown", 13 ... 14 ], 15 ... 16} 17 18export default config;
- Optionally you may want to pass
includesand/orexcludesoptions if needed like so:
1export default { 2 addons: [ 3 { 4 name: '@storybook-extras/markdown', 5 options: { 6 includes: '../stories/**/*.@(md|html)', 7 excludes: [/\.component\.html$/], 8 stories: [ 9 { 10 path: '../stories/markdown-main-js.md', 11 title: 'Markdown/main.js', 12 }, 13 ], 14 }, 15 }, 16 ], 17};
That's it, you're done. Now you will find README & CHANGELOG along with HTML docs if you want as well, in your Storybook sidebar and you can open them and see the contents.
Custom Titles
Currently Storybook will be using the file name as the story title, e.g. README.md will be README. This addon supports multiple options to customize the title for your .md & .html files.
| Precedence | Option | Example |
|---|---|---|
| 1 | Use the HTML title tag | <title>Docs/Custom Title</title> |
| 2 | Use the HTML meta tag, usign Meta will throw an error | <meta title="Custom Title" /> |
| 3 | Uses a markdown comment in the file | {/*title:"Custom Title"*/} |
| 4 | Use predefined list of titles from main.js | See below |
| 5 | Use the filename with a + to separate the title. Note: full path will be omitted. | Markdown+Custom Title.md becomes Markdown/Custom Title |
Predefined Titles
1// .storybook/main.ts 2import { StorybookConfig } from '@storybook/angular'; 3import { ExtrasConfig } from '@storybook-extras/preset'; 4 5const config: StorybookConfig & ExtrasConfig = { 6 // if you are using @storybook-extras/markdown 7 addons: [ 8 { 9 name: '@storybook-extras/markdown', 10 options: { 11 titles: { 12 '../README.md': 'Custom Title', 13 }, 14 }, 15 }, 16 ], 17 // if you are using @storybook-extras/preset 18 extras: { 19 markdown: { 20 titles: { 21 '../README.md': 'Custom Title', 22 }, 23 }, 24 }, 25}; 26 27export default config;
NOTE:
Custom Title processing is dependendant on #20809
Read More
I have written a series of articles to explain the motivation and purpose behind this addon. Feel free to read through.
Addon-Kit is a developer’s dream come trueStorybook Markdown Docs (not mdx)Storybook Markdown Docs (not mdx) Part 2Storybook Addon for Auto Markdown ImportSupport .html files in StorybookCustom Titles for Storybook Docs?
Also make sure to check out these PRs that made this addon possible:
No vulnerabilities found.
No security vulnerabilities found.