Component library
Mix documentation with real life components to get an active representation of your websites components.
Free form markdown
Write your pages in free form markdown and embed your `!{components}` wherever you want, as often as you want. No limits.
Fits the way you work
Use your source code documentation, HTML comments or a web scraper to collect components. No need to write markup or code any different.
NPM Install
> npm i design-manual collect-components --save-dev
Tag your HTML components
<!-- @component
name: hello world
description: This is my first component
-->
<img src="https://assets.imgix.net/examples/butterfly.jpg?px=50&w=1200&h=50&fit=crop" alt="" />
Embed components in markdown
!{hello world}
Build
const DesignManual = require('design-manual');
const collectComponents = require('collect-components');
// gather components
collectComponents({
url: 'http://localhost:8000/',
paths: ['homepage.html', 'page.html'],
output: 'docs/components.json',
complete: function() {
// build design manual
DesignManual.build({
output: 'docs/',
pages: './',
components: 'docs/components.json',
meta: {
domain: 'example.com',
title: 'Example'
}
});
}
});
> Starting design manual
> Starting components
> Found 1 changed component
> Rendering component ./lib/hello-world.html
> Generated components
> Starting pages
> Found 1 changed page
> Generated docs/index.html
> Generated pages
> Design manual complete