https://github.com/karlisup/chewingum
A simple, flexible Documentation generator for Pattern Library.
https://github.com/karlisup/chewingum
component-library css documentation-generator pattern-library
Last synced: 9 months ago
JSON representation
A simple, flexible Documentation generator for Pattern Library.
- Host: GitHub
- URL: https://github.com/karlisup/chewingum
- Owner: karlisup
- License: mit
- Created: 2017-01-22T15:17:02.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-24T21:15:56.000Z (over 7 years ago)
- Last Synced: 2025-08-09T03:11:14.693Z (10 months ago)
- Topics: component-library, css, documentation-generator, pattern-library
- Language: CSS
- Homepage:
- Size: 416 KB
- Stars: 4
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Documentation generator for Pattern Library.
## Features
### Template engine agnostic
As it is build upon `node.js` it uses multiple libraries to support various template engines to generate documentation. So far it supported template engines are:
1. `twig`
2. TODO `moustache`
3. TODO `handlebars`
### Use API insted of `Copy`/`Paste`
You can build pattern libraries
1. fast (reuse template, demo data)
2. documented (have demo right beside documentation)
3. link it directly into your project
A component (e.g. `lakeside.twig`):
```twig
{% if image %}
{% endif %}
{% include 'partials/title/title.twig' with title %}
{% if summary %}{{ summary }}
{% endif %}
{{ title.title }}
```
Usage (in `news-feed.twig`):
```twig
{% for i in 0..2 %}
{% include 'partials/lakeside/lakeside.twig' with article %}
{% endfor %}
```
Test data for demo generation (`lakeside.json`):
```json
{
"image": {
"src": "http://placehold.it/800x600/",
"alt": "placeholder"
},
"title": "data@partials/title/title.json",
"listItems": "data@partials/lists/list-inline.json"
}
```
### Customisable look
Every self-worthy company has their own style guides and design principles they base their designs upon. Chewingum allows you to completely change visual look of the generated documentation to fit your needs.
| Github-like ([Demo](https://karlisup.github.io/chewingum/demo//partials/lakeside/lakeside.html)) |
| :-----------: |
|  |
## Usage
### Part I
enough to see Chewingum in action
```js
// setting general settings
var src = './pattern-library/'
var dest = './documentation/'
// gulp modules
var gulp = require('gulp')
var chewingum = require('chewingum')
var browserSync = require('browser-sync').create()
// Pattern Library
// For each template file (e.g. breadcrumbs.twig) will build a documentation file.
gulp.task('chewingum', function () {
chewingum({
location: {
src: src,
dest: dest
}
})
})
// Server
// Will build server for patter-library
gulp.task('server', function () {
browserSync.init({
server: {
baseDir: dest
},
port: 9999,
open: false,
notify: false
})
})
```
### Part II
add your way to pass style & JavaScript
```js
// for STYLE
var sass = require('gulp-sass')
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')
// for JavaScript
var concat = require('gulp-concat')
// Style
// Will combine and minify all component styles
gulp.task('style', function (done) {
return gulp.src('./sass/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(dest + '/assets/'))
.pipe(browserSync.stream())
})
// JavaScript
// Will combine and minify all component JavaScript files.
gulp.task('javascript', function (done) {
return gulp.src(src + '/**/*.js')
.pipe(concat('components.js'))
.pipe(gulp.dest(dest + '/assets/'))
})
// FOOTER
// WATCH
gulp.task('watch', function (done) {
gulp.watch(src + '/**/*.twig', ['chewingum'])
})
// DEFAULT
gulp.task('default', ['chewingum', 'style', 'javascript', 'server', 'watch'])
```
## Options
### opts.location.src
Type: `String` Default: `src/components/`
Sets target for folder from which all the components will be taken.
### opts.location.dest
Type: `String` Default: `dest/components/`
Sets target for Pattern Library output location.
### opts.filterItems
Type: `Array` Default: `[]`
Pass tabs that filter search results by regular expression. Example: `[{'title': 'Atoms','regex': '01-atoms'}]`.
### opts.location.styleguide
Type: `String` Default: `node_modules/chewingum/doc-template/`
Sets target for pattern library templates. It is possible to modify existing pattern library look by moving doc-template to local folder and modifying this URL.
## Contribute
Help us make this project better - [Contributing guide](/CONTRIBUTING.md)!