Numerous Problems Multiplied

    design-manual-scraper

    1.1.0 • Public • Published

    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){}
    });

    Install

    npm i design-manual-scraper

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    33.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • aratramba