Powerful tool that provide a nice web interface to display your website styleguide and modules/plugins documentations in one place.
JavaScript CSS Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.resources clean display Apr 13, 2017
app/views add yml support for data files Aug 16, 2018
bin fix: fix config extend by using deep-extend in place of _merge to avo… Aug 2, 2017
data Init repo Jan 17, 2017
dist generate js files May 25, 2018
doc update documentation Aug 16, 2018
public add yml support for data files Aug 16, 2018
src
.babelrc update the .babelrc file to use the env preset May 25, 2018
.changelogrc finish git-changelog integration Jun 7, 2017
.editorconfig Init repo Jan 17, 2017
.gitignore update gitignore to ignore yarn-error.log May 25, 2018
.node-version Init repo Jan 17, 2017
CHANGELOG.md update s-activate component Jul 5, 2018
LICENSE.txt Init repo Jan 17, 2017
README.md finish components integration v1 Aug 15, 2018
carpenter.config.js update config Aug 16, 2018
package-lock.json update lock files Jun 30, 2018
package.json update package version Aug 16, 2018
webpack.config.js update s-activate component Jul 5, 2018
yarn.lock add yml support for data files Aug 16, 2018

README.md

Coffeekraken Carpenter

Carpenter

Powerful tool that provide a nice web interface to display your website styleguide and modules/plugins documentations in one place.

Carpenter is like a architect plan for your website

Carpenter screenshot

Demo : Coffeekraken website carpenter

Features

  1. Build styleguide directly from your CSS codebase
    • Reflect perfectly what your website looks like
    • List all features that your CSS cover
    • Interactive demo
  2. Aggregate markdown documentations
    • Tell Carpenter where to look for markdown files, it take care of displaying them nicely
    • Aggregate all the useful documentations in one interface
  3. Document your twig/blade components
    • Compile your twig/blade templates
    • Support data files to compile your templates with

Install

npm install coffeekraken-carpenter --save-dev

Configure

The configuration is made through the carpenter.config.js file that you need to add at the root of your project. Here's a simple example:

module.exports = {
	title: 'My Cool Website',
	styleguide: {
		files: [
			'dist/css/styleguide.css'
		]
	},
	documentation: {
		files: [
			'node_modules/coffeekraken-s-*/**/*.md',
			'README.md'
		]
	},
	components: {
		inject: [
			'dist/css/style.css',
			'dist/js/app.js'
		],
		viewsRootPath: 'app/views',
		phpBootstrapPath: 'app/bootstrap.php',
		saveCompiled: false
	}
}
Check out the full config file reference here

Write some styleguide docblocks

In your styleguide.css file, you need to document your styleguide like so:

/**
 * @name 		My Cool Component
 * @styleguide 	Components / My Cool Component
 * @example 	html
 * <div class="my-cool-component">
 * 	Hello world
 * </div>
 */

Launch

In order to launch Carpenter in your project, you just need to add this line in your package.json scripts:

{
	"scripts": {
		"carpenter": "coffeekraken-carpenter"
	}
}

Then launch Carpenter with

npm run carpenter

Browser support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE11+ last 2 versions last 2 versions last 2 versions

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.

Documentation

  • Configuration : All the configuration properties available
  • Node API : Describe all the exposed Node API methods
  • CLI : CLI options reference
  • Displays : How to display your docblocks into the web interface

License

The code is available under the MIT license.