Neighbor's Preppy Maltese

    svelte-blueprint

    1.0.6 • Public • Published

    Svelte blueprint 🏗️

    Build svelte components documentation.

    For spanish go here.


    Svelte-blueprint reads svelte files placed in a path known as source and then creates svelte files based on a template in the dst path


    example1


    Install

    $ npm i -D svelte-blueprint
    

    Svelte adjustments

    The .svelte files inside source path should have extra comments.

    • To set description add:

      <!--D Description of the component -->
    • To add a description of a prop just add a single line comment next to it's definition.

      export let name // Name string
    • To set usage example add:
      If you need to add quote marks use single ones ' '

      <!--E
          <Component  />
      -->

    Generate blueprints

    To generate the blueprint files you can use a plugin for specific module bundlers or use the cli.

    Plugins

    Cli

    Usage:

    $ svelte-blueprint

    Options:

    Short Long Default Description Type
    --help Shows help [bool]
    --version Shows the version [bool]
    -s --source src/Components Source path of components [string]
    -d --dst Blueprints Destination path for blueprints [string]
    -w --watch false Should watch for changes in source [bool]
    -t --template svelte-blueprint/templates/Blueprint.svelte Path of a template for the output page [string]


    Templates

    By default, the genrated Blueprint file uses a Blueprint Component contained in this library.

    You can customize the colors of that template or use your own template.

    These are the variables you may want to override to match your own style.

     :global(:root) {
        --svelte-blueprint-background: transparent;
        --svelte-blueprint-color: #3e3e3e;
        --svelte-blueprint-accent: #55c1ff;
        --svelte-blueprint-table-border: #e7e7e7;
        --svelte-blueprint-table-background: #fff;
        --svelte-blueprint-table-hover: #eaeaea;
        --svelte-blueprint-table-header-color: #fff;
    }

    If you need to use your own template this are the svelete slots you should define:

    <slot name='description' > 
        Component description
    </slot>
    <slot name='props'>
        Component properties
    </slot>
    <slot name='example'>
        Component example
    </slot>

    Also you may want to use these props:

    title
    code

    For a better understanding, checkout the default template

    Guides

    Install

    npm i svelte-blueprint

    DownloadsWeekly Downloads

    8

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    178 kB

    Total Files

    12

    Last publish

    Collaborators

    • evesan