pv-stylemark

CLI for zero configuration stylemark-lsg-toolchain-setup.

Installation

npm i @pro-vision/pv-stylemark -D

Usage

Command Line Interface

Installing this package gives you the CLI pv-stylemark. It can be used with the parameters dev and prod.

dev: Assembles all found hbs files and generates clickdummy (components/pages) and Stylemark - Living Styleguide. Starts watches all involved files.

prod: Assembles all found hbs files and generates clickdummy (components/pages) and Stylemark - Living Styleguide and writes all to your target folder.

Webpack Plugin

pv-stylemark also provides a Webpack-Plugin, which can also be used to render the LSG.

Example:

// webpack.config.module.js
const { PvStylemarkPlugin } = require("@pro-vision/pv-stylemark");


module.exports = {
  //...
  plugins: [
    new PvStylemarkPlugin()
  ]
  //...
};

Configuration

Basic Configuration

Basic Configuration for both, cli and webpack-plugin, can be done in a pv.config.js file in the npm project root-folder. Possible configuration values are:

| key | type | default | usage | | ------------- | ------ | -------- | ----------------------------- | | destPath | string | 'target' | defines where to put bundled files | | cdTemplatesSrc | string | 'src/templates/' | defines homefolder of clickdummy-templates (glob: [cdTemplatesSrc]**/*.hbs) | | componentsSrc | string | 'src/components/' | defines homefolder of components (glob: [componentsSrc]**/*.hbs) | | cdPagesSrc | string | 'src/pages/' | defines homefolder of clickdummy-pages (glob: [cdPagesSrc]**/*.hbs) | | hbsHelperSrc | string | 'helpers/handlebarsHelper/' | defines homefolder of additional handlebars-helpers (glob: [hbsHelperSrc]*.js) | | lsgIndex | string | 'src/styleguide/index.html' | defines path to styleguide landing page html file | | lsgConfigPath | string | 'config/config.stylemark.yaml' | defines path to lsg config file (which is required) |

Example:

// pv.config.js
module.exports = {
  destPath: 'dist',
  cdTemplatesSrc: 'src/clickdummy/templates/',
  cdPagesSrc: 'src/clickdummy/pages/',
  hbsHelperSrc: 'helper/handlebarsHelper/',
  lsgConfigPath: 'config.stylemark.yaml',
};