<commit_before>[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node) 

## About the Node Version of Pattern Lab

The Node version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the Node version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The Node version is a work in progress, the [PHP version](https://github.com/pattern-lab/patternlab-php) should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice.

### Getting Started

To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in: 

1. `npm install`
2. `npm install -g grunt-cli`
3. `grunt`  

This creates all patterns, the styleguide, and the pattern lab site.

### Command Line Interface

The following are grunt task arguments you may execute:

##### `patternlab`
With no arguments, patternlab runs the full builder, compiling patterns, and constructing the front-end site.

##### `patternlab:only_patterns`
Compile the patterns only, outputting to ./public/patterns

##### `patternlab:v`
Retrieve the version of patternlab-node you have installed

##### `patternlab:help`
Get more information about patternlab-node, pattern lab in general, and where to report issues.

### Config Options

##### Watching Changes
To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt watch`. The `Gruntfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.

##### Nav Bar Controls
If you don't have a need for some of the nav-bar tools in the patternlab frontend, you can turn them off in `config.json`.

The current selection is as follows. It reflects support versus patternlab-php.

```
"ishControlsVisible": {
	"s": true,
	"m": true,
	"l": true,
	"full": true,
	"random": true,
	"disco": true,
	"hay": true,
	"mqs": false,
	"find": false,
	"views-all": true,
	"views-annotations": true,
	"views-code": true,
	"views-new": true,
	"tools-all": true,
	"tools-follow": false,
	"tools-reload": false,
	"tools-shortcuts": false,
	"tools-docs": true
}
```
##### Pattern States
You can set the state of a pattern by including it in `config.json` too. The out of the box styles are in progress (orange), in review (yellow), and complete (green).
Pattern states should be lowercase and use hyphens where spaces are present.
```
"patternStates": {
	"colors" : "inprogress",
	"fonts" : "inreview",
	"three-up" : "complete"
}
```

##### Pattern Export
`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory. 

```
"patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],<commit_msg>documentation for pattern links<commit_after>[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node) 

## About the Node Version of Pattern Lab

The Node version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the Node version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The Node version is a work in progress, the [PHP version](https://github.com/pattern-lab/patternlab-php) should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice.

### Getting Started

To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in: 

1. `npm install`
2. `npm install -g grunt-cli`
3. `grunt`  

This creates all patterns, the styleguide, and the pattern lab site.

### Command Line Interface

The following are grunt task arguments you may execute:

##### `patternlab`
With no arguments, patternlab runs the full builder, compiling patterns, and constructing the front-end site.

##### `patternlab:only_patterns`
Compile the patterns only, outputting to ./public/patterns

##### `patternlab:v`
Retrieve the version of patternlab-node you have installed

##### `patternlab:help`
Get more information about patternlab-node, pattern lab in general, and where to report issues.

### Config Options

##### Watching Changes
To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt watch`. The `Gruntfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.

##### Nav Bar Controls
If you don't have a need for some of the nav-bar tools in the patternlab frontend, you can turn them off in `config.json`.

The current selection is as follows. It reflects support versus patternlab-php.

```
"ishControlsVisible": {
	"s": true,
	"m": true,
	"l": true,
	"full": true,
	"random": true,
	"disco": true,
	"hay": true,
	"mqs": false,
	"find": false,
	"views-all": true,
	"views-annotations": true,
	"views-code": true,
	"views-new": true,
	"tools-all": true,
	"tools-follow": false,
	"tools-reload": false,
	"tools-shortcuts": false,
	"tools-docs": true
}
```
##### Pattern States
You can set the state of a pattern by including it in `config.json` too. The out of the box styles are in progress (orange), in review (yellow), and complete (green).
Pattern states should be lowercase and use hyphens where spaces are present.
```
"patternStates": {
	"colors" : "inprogress",
	"fonts" : "inreview",
	"three-up" : "complete"
}
```

##### Pattern Linking
You can build patterns that link to one another to help simulate using a real website. This is especially useful when working with the Pages and Templates pattern types. The basic format is:

`{{ link.pattern-name }}`

For example, if you wanted to add a link to the `home page` template from your `blog` template you could write the following:

`<a href="{{ link.templates-homepage }}">Home</a>`

This would compile to:

`<a href="/patterns/templates-homepage/templates-homepage.html">Home</a>`

As you can see, it's a much easier way of linking patterns to one another.


##### Pattern Export
`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory. 

```
"patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
{'fraction_non_alphanumeric': 0.10562227074235808, 'fraction_numerical': 0.0008187772925764192, 'mean_word_length': 4.7168486739469575, 'pattern_counts': {'":': 42, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1709960', 'n_tokens_mistral': 2083, 'n_tokens_neox': 1989, 'n_words': 944}