https://github.com/nju33/storybook-docsify
Storybook and Docsify integrator (But it's altmost Docsify 👻)
https://github.com/nju33/storybook-docsify
storybook-addon
Last synced: 2 months ago
JSON representation
Storybook and Docsify integrator (But it's altmost Docsify 👻)
- Host: GitHub
- URL: https://github.com/nju33/storybook-docsify
- Owner: nju33
- License: mit
- Created: 2019-09-10T08:05:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-27T02:02:15.000Z (over 4 years ago)
- Last Synced: 2024-12-22T20:37:06.992Z (5 months ago)
- Topics: storybook-addon
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@nju33/storybook__addon-docsify
- Size: 389 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @nju33/storybook\_\_addon-docsify
## Prepare
Install like below,
```sh
yarn add -D @nju33/storybook__addon-docsify
```
And you should add the following to your `addon.js` (if you're using TypeScript then `addon.ts`).
```sh
import '@nju33/storybook__addon-docsify/dist/register';
```
Finally, place Docsify root as `index.html` following like. (The details is in [Docsify document](https://docsify.js.org/#/configuration).)
```html
Document Title
window.$docsify = {
basePath: '/',
name: 'Document',
};
```
After Docsify will do it for you. 👻
## Examples
In the below is first example.
```jsx
storiesOf('html-button', module)
// html-button/foo-bar.md
.add('foo-bar', () => foo-bar)
// html-button/bar-baz.md
.add('bar-baz', () => bar-baz);
```
In the above, The document path is `html-button/foo-bar`. In this case, Storybook has interapted key is `html-button--foo-bar` that using `--` as separator.
That `--` is handled `/` by this addon. Thus `index.html#/html-button/foo-bar` will be loaded then.
If you want to change its behavior, You maybe change it by pass to parameter into your story.
```jsx
storiesOf('html-button', module)
.addParameter({
docsify: {
path: 'html-button/README'
}
})
// html-button/README.md
.add('foo-bar', () => foo-bar)
// html-button/README.md
.add('bar-baz', () => bar-baz);
```
This addon read the parameter using by `docsify`. By setting `path`, you can make Docsify is loaded `*.md` you wish.