Glorybook NPM | npm.io

Image of contentful-, webpack- and storybook logo

Glorybook

A webpack plugin to use in conjunction with @storybook/addons-docs.

Will take your contentful data and turn it into a markdown file that storybook can read.

Install

npm i --save-dev glorybook

yarn add --dev glorybook

Usage

The plugin will fetch data from the supplied contentful space, and output .mdx-files inside your webpack /src-folder. By default the created files are put in a subfolder named /contentful.

Be sure to not expose your space/access token in your public code

webpack.config.js

const GlorybookPlugin = require("glorybook");

module.exports = {
  plugins: [
    new GlorybookPlugin({
      space: 'contentful space id', // required
      accessToken: 'contentful access token' // required
    })
  ]
}

Example

This setup in your contentful content model:
Screenshot of contentful UI

Will output this in storybook:
Screenshot of storybook UI

With a file structure like this:

📦src
 ┗ 📂contentful
   ┗ 📂parent
     ┗ 📂child-folder
       ┗ 📜nested-page.stories.mdx

The plugin can currently handle

Rich text
Images (single)
Videos (single)
Referenced content, including all of the above

Options

Name	Type	Default	Description
`environment`	`{String}`	`'master'`	Defines what contentful environment you want to get data from.
`srcFolder`	`{String}`	`'/src'`	Defines where your src-folder lives.
`subFolder`	`{String}`	`'/contentful'`	Defines where the generated files will be put, inside the `srcFolder`
`contentTypeId`	`{String}`	`'page'`	The id of your contentful pages that you like to fetch
`additionalHead`	`{String}`	`''`	If you have more content you like to paste in the top of every file
`camelCase`	`{Bool}`	`false`	If you want the generated files to be named in in camelCase. When `false`, they will be in kebab-case
`fullPathOutput`	`{Bool}`	`false`	When the page is nested, this will keep the full relative path in the filename. When `false`, only the last part will be kept.
`nestedOutput`	`{Bool}`	`true`	If the files should be placed in folders just like in storyfull. `false` will place all files in the,un-nested , `subFolder`
`labelDefinedBy`	`{String}`	`'label'`	The id your contentful entry that defines label the file will be placed under
`pathDefinedBy`	`{String}`	`'path'`	The id your contentful entry that defines what path/filename the file will get

Dev-notes

The /demo-folder is used for previewing any test output during development of this plugin.
This folder has a copy of storybook installed in order for us to run the plugin and have a real-world environment to sandbox in.

For getting started with building on this project, run: