Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bmpickford/cem-plugin-docsify

Plugin for custom-elements-manifest to generate documentation using Docsify
https://github.com/bmpickford/cem-plugin-docsify

custom-elements-manifest docsify

Last synced: about 2 months ago
JSON representation

Plugin for custom-elements-manifest to generate documentation using Docsify

Host: GitHub
URL: https://github.com/bmpickford/cem-plugin-docsify
Owner: bmpickford
License: mit
Created: 2021-07-20T14:15:33.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2021-08-04T13:41:00.000Z (over 3 years ago)
Last Synced: 2024-11-15T23:32:04.214Z (about 2 months ago)
Topics: custom-elements-manifest, docsify
Language: TypeScript
Homepage:
Size: 1.17 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

🔌 cem-plugin-docsify 🔌

> A custom-elements-manifest plugin that generates a docsify site for your element

### [Demo](https://bmpickford.github.io/cem-plugin-docsify)

## Install

```sh
yarn add cem-plugin-docsify
```

## Usage

```javascript
// custom-elements-manifest.config.mjs
import docsify from 'cem-plugin-docsify';

export default {
plugins: [
docsify({ name: 'MyGreatCustomElement' }),
]
}
```

## Configuration
The plugin comes with several built in configuration options
```javascript
// custom-elements-manifest.config.mjs

docsify({
// required
// name of your docs page. This will appear at the top right
// of your docs sidebar
name: 'MyGreatCustomElement',
// optional. Default: ''
// repo URL. If included a link to your repository will appear
// in the top right of the docs site
repoURL: 'https://github.com/bmpickford/cem-plugin-docsify',
// optional. Default: docs/
// path to output doc files
out: './docs',
// optional. Default: false
// if marked as true, will include an Examples link in
// the sidebar, that will have an iframe that links
// to './docs/storybook'. If you include this option it
// is expected that there will be a built storybook docs
// site in the docs folder
includeStorybook: false,
// optional. Default: 3000
// docsify doesn't give many options for customizing embedded content
// so the height needs to be static. Set to 3000 as a default but
// this is here to modify if needed
storybookHeight: 3000,
}),
```

### Usage with Storybook
As seen in the demo, you can include your storybooks docs as an iFrame to easily provide tangible examples. To do this, you
will need to build your storybook docs (e.g. `build-storybook --docs`) and set the output to `docs/storybook` or alternatively manually copy it across.
Then apply this configuration to the plugin:

```javascript
// custom-elements-manifest.config.mjs

docsify({
name: 'MyGreatCustomElementWithStorybookDocs',
includeStorybook: true,
}),
```

It is also recommended to remove any navigation and panels from the storybook docs for a better user experience. This can be configured in .storybook/manager.js
##### [Storybook Configuration Docs](https://storybook.js.org/docs/react/configure/features-and-behavior)

For the demo, this was the configuration used:
```javascript
// .storybook/manager.js
import { addons } from '@storybook/addons';

addons.setConfig({
showNav: false,
showPanel: false,
isFullscreen: true,
});
```

## Development
#### Installation
```sh
yarn install
```

#### Running
This will generate the docs for the example element found in `fixtures/default/sourcecode/default.js`
```sh
yarn start
```

#### Run tests

```sh
yarn run test
```

## 🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/bmpickford/cem-plugin-docsify/issues)

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License