Design Manual Scraper

Generate components.json file for Design Manual capturing HTML comments and their corresponding HTML components from a website.

Usage

Use the keyword @component to flag html comments in your templates. Comments should be written in properly formatted YAML format.

<!-- @component
    name: My Component
    description: this is a description for my component
-->

The immediate next DOM-node after the comment will be used as HTML-source for the component. If you need to capture multiple blocks, see Capture multiple blocks. Any parameter in the component block will be add to the meta object in the output json.

<!-- @component
    name: My Component
-->
 
<div>This is my component</div>
<div>This isn't</div>

---

Output file

Output will look something like this.

[
  {
    "meta": {
      "name": "foo",
      "description": "foo description",
      "param": "foo"
    },
    "file": "file.html",
    "output": "<div>this is my component</div>"
  }
]

---

Examples

You can add an example or multiple examples with the example or examples keyword, where the former is a YAML string and the latter a YAML list. The {{block}} flag will be replaced by the captured block

single example

<!-- @component
    name: My Component
    example: |
        <div class="max-width: 300px">
            {{block}}
        </div>
-->
 
<p>this is my example</p>

multiple example

<!-- @component
    name: My Component
    examples: 
        - >
            <div class="max-width: 300px">
                {{block}}
            </div>
        - >
            <div class="max-width: 300px">
                {{block}}
            </div>
-->
 
<p>this is my example</p>

---

Capture multiple blocks

The capture keyword specifies how many blocks after the comment will be returned. Use capture: all to capture the comments' siblings. Use capture: section to capture all items until the next @component tag.

<!-- @component
    name: My Component
    capture: 3
-->
 
<div>1</div>
<div>2</div>
<div>3</div>
<div>nope</div>
<div>nope</div>

<!-- @component
    name: My Component
    capture: section
-->
 
<div>1</div>
<div>2</div>
<div>3</div>
<!-- @component -->
<div>nope</div>

<!-- @component
    name: My Component
    capture: all
-->
 
<div>1</div>
<div>2</div>
<div>3</div>
<!-- @component -->
<div>yep</div>

---

Reserved words

• example for an example block
• examples for multiple example blocks
• capture for the number of DOM-nodes to be captured
  • all: the rest of the DOM-nodes within the comments` parent
  • section: the rest of the DOM-nodes within the comments` parent or a new @component comment
  • number: the exact positive number of DOM-nodes

---

How to use

npm install design-manual-scraper

var scraper = require('design-manual-scraper');
 
scraper({
    url: 'https://rawgit.com/EightMedia/design-manual-scraper/master/test/fixtures/',
    paths: ['examples.html', 'capture.html', 'yaml.html'],
    keyword: '@component',
    block: '{{block}}',
    output: 'components.json',
    complete: function(components){}
});