Skip to content

Instantly share code, notes, and snippets.

@Aratramba
Last active May 9, 2018 11:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Aratramba/896250b0b9695c3900ce29c2a0cf08a8 to your computer and use it in GitHub Desktop.
Save Aratramba/896250b0b9695c3900ce29c2a0cf08a8 to your computer and use it in GitHub Desktop.
Design Manual setup with Gather Components
const DesignManual = require('design-manual');
const scraper = require('gather-components');
scraper({
url: 'http://website.com',
paths: ['patterns.html'],
components: 'docs/components.yaml',
output: 'docs/components.json'
}).then(() => {
DesignManual.build({
force: true,
output: 'docs/',
pages: 'docs/src/',
components: 'docs/components.json',
nav: [
{ label: 'Index', href: 'index.html' }
],
meta: {
domain: 'my-website',
title: 'My Design Manual',
version: 'v' + require('../package.json').version
},
prerender: {
port: 3000,
path: '/',
serveFolder: 'docs/',
},
onComplete: () => {}
});
});
-
name: hello world
description: hello world component description
selectors:
- img

!{hello world}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Patterns</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="https://assets.imgix.net/examples/butterfly.jpg?px=50&w=1200&h=50&fit=crop" alt="" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment