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

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

• Rollup

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

• Youtube