<commit_before><p align="center">
  <img
    src="https://raw.githubusercontent.com/electric-eloquence/fepper-npm/master/excludes/fepper-branding.png"
    alt="Fepper"
  >
</p>

<h2 align="center">A frontend prototyper tool for rapid prototyping of websites</h2>

[![Known Vulnerabilities][snyk-image]][snyk-url]
[![Linux Build Status][linux-image]][linux-url]
[![Mac Build Status][mac-image]][mac-url]
[![Windows Build Status][windows-image]][windows-url]
![Node Version][node-version-image]
[![License][license-image]][license-url]

### Downstream projects

* [Fepper Base](https://github.com/electric-eloquence/fepper-base) - no 
  unnecessary assets, styles, Pattern Lab demo, or 
  <a href="https://www.npmjs.com/package/fp-stylus" target="_blank">fp-stylus</a> 
  extension.
* [Fepper for Drupal](https://github.com/electric-eloquence/fepper-drupal) - 
  templates configured for Drupal, along with a Drupal theme built to 
  accommodate those templates.
* [Fepper for Wordpress](https://github.com/electric-eloquence/fepper-wordpress) 
  \- templates configured for WordPress, along with a WordPress theme built to 
  accommodate those templates.

### Table of contents

* [Install](#install)
* [Update](#update)
* [Use](#use)
* [Configure](#configure)
* [Global Data](#global-data)
* [Partial Data](#partial-data)
* [Static Site Generation](#static-site-generation)
* [The Backend](#the-backend)
* [Templater](#templater)
* [Webserved Directories](#webserved-directories)
* [Mustache Browser](#mustache-browser)
* [HTML Scraper](#html-scraper)
* [variables.styl](#variables.styl)
* [UI Customization](#ui-customization)
* [Extensions](#extensions)
* [Express App](#express-app)
* [Mobile Devices](#mobile-devices)
* [I18N](#i18n)
* [Keyboard Shortcuts](#keyboard-shortcuts)
* [More Documentation](#more-documentation)

### <a id="install"></a>Install

#### System requirements

* Unix-like or Windows OS.
* Minimum supported Node.js version 12.0.0.

#### Simplest way to get started

* Download the 
  <a href="https://github.com/electric-eloquence/fepper/releases/latest" target="_blank">
  latest release</a>.

#### Mac install

* In macOS Finder:
  * Double-click `fepper.command`.
  * If not already installed, this will install:
    * Node.js.
    * <a href="https://www.npmjs.com/package/fepper-cli" target="_blank">fepper-cli</a>, 
      which will give you the `fp` command.
  * If opening for the first time, macOS may warn that it can't be opened 
    because it is from an unidentified 
    developer.&nbsp;<a href="https://gist.github.com/e2tha-e/72364ca766cf5d2d1a732b6af4f3b7a8" target="_blank">*</a>
    * In this case, ctrl+click `fepper.command` and click "Open".
    * In the following prompt, click "Open" to confirm that you're sure you 
      want to open it.
  * Enter your password to allow installation.
  * After installation, Fepper should automatically open in a browser.
  * Open http://localhost:3000 if it doesn't open automatically.

#### CLI install

* On other Unix-like OSs (or if you prefer working on the command line):
  * Install Node.js if it isn't already installed.
  * `npm install -g fepper-cli`
  * `npm install`
  * `fp`

#### Windows install

* In File Explorer, double-click 
  `fepper.vbs`.&nbsp;<a href="https://gist.github.com/e2tha-e/72364ca766cf5d2d1a732b6af4f3b7a8" target="_blank">*</a>
  * If Node.js is not installed, this will install it.
  * After Node.js installation, double-click `fepper.vbs` again.
    * This will install <a href="https://www.npmjs.com/package/fepper-cli" target="_blank">
      fepper-cli</a>, which will give you the `fp` command.
    * It will then install and launch Fepper.

#### Base install

* Comes with no unnecessary assets, styles, Pattern Lab demo, or 
  <a href="https://www.npmjs.com/package/fp-stylus" target="_blank">fp-stylus</a> 
  extension.
* Node.js must be installed beforehand.
* `npm install -g fepper-cli`
* `npm run install-base`
* `fp`

#### Post-install

* To stop Fepper, go to the command line where Fepper is running and press 
  ctrl+c.

### <a id="update"></a>Update

Run `fp update` to download and install the latest updates.

### <a id="use"></a>Use

* To launch from macOS Finder:
  * Double-click `fepper.command`.
* To launch from Windows File Explorer:
  * Double-click `fepper.vbs`.
* To launch from the command line:
  * `fp`
* Consult the <a href="https://patternlab.io/docs/index.html" target="_blank">
  Pattern Lab docs</a> for instructions on using Pattern Lab.
* Start editing files in `source`. Changes should automatically appear in the 
  browser.
* These other utility tasks are runnable on the command line:
  * `fp data` - Build data.json from underscore-prefixed .json files
  * `fp frontend-copy` - Copy assets, scripts, and styles to the backend
  * `fp help` - Print documentation of Fepper tasks
  * `fp once` - Output a new build to the public directory
  * `fp restart` - Restart after shutdown, but without opening the browser
  * `fp static` - Generate a static site from the 04-pages directory
  * `fp syncback` - Combine frontend-copy and template tasks
  * `fp template` - Translate templates in 03-templates for the backend, and 
    output them there
  * `fp ui:help` - Print UI tasks and their descriptions
  * `fp update` - Update Fepper distro, Fepper CLI, Fepper NPM, Fepper UI, and 
    Fepper extensions
  * `fp version` - Print the versions of Fepper CLI, Fepper NPM, and Fepper UI
  * `fp extend:help` - Print extension tasks and their descriptions
* Enter a `-d` or `--debug` switch to run the command in `debug` mode.
* If using Git for version control, directories named "ignore" will be ignored.

### <a id="configure"></a>Configure

Edit the `pref.yml` file to customize preferences and to view further 
documentation in the comments. If you wish to use the `syncback`, 
`frontend-copy`, or `template` tasks, you must supply values for the 
`backend.synced_dirs` preferences in order for those directories to get 
processed and copied to the backend.

### <a id="global-data"></a>Global Data

Edit `source/_data/_data.json` to globally populate 
<a href="https://www.npmjs.com/package/feplet" target="_blank">Feplet</a> 
(.mustache) templates with data. Manual edits to `source/_data/data.json` will 
get overwritten on each build.

### <a id="partial-data"></a>Partial Data

Underscore-prefixed .json files within 
`source/_patterns` will be concatenated to the output of `_data.json`, the 
whole in turn getting built into `data.json`, the final source of globally 
scoped data. 

_Partial data_ is distinct from _pattern data_. For example, `00-homepage.json` 
is _pattern data_ and specific to the `00-homepage` pattern. No other pattern 
will pick up `00-homepage.json`, even if `00-homepage.mustache` is included in 
another pattern. However, `_00-homepage.json` is _partial data_ and will get 
concatenated to the _global data_ outputted to `data.json`. `_00-homepage.json` 
will be picked up by all patterns.

* **DO NOT EDIT source/_data/data.json**<commit_msg>reordered readme sections<commit_after><p align="center">
  <img
    src="https://raw.githubusercontent.com/electric-eloquence/fepper-npm/master/excludes/fepper-branding.png"
    alt="Fepper"
  >
</p>

<h2 align="center">A frontend prototyper tool for rapid prototyping of websites</h2>

[![Known Vulnerabilities][snyk-image]][snyk-url]
[![Linux Build Status][linux-image]][linux-url]
[![Mac Build Status][mac-image]][mac-url]
[![Windows Build Status][windows-image]][windows-url]
![Node Version][node-version-image]
[![License][license-image]][license-url]

### Downstream projects

* [Fepper Base](https://github.com/electric-eloquence/fepper-base) - no 
  unnecessary assets, styles, Pattern Lab demo, or 
  <a href="https://www.npmjs.com/package/fp-stylus" target="_blank">fp-stylus</a> 
  extension.
* [Fepper for Drupal](https://github.com/electric-eloquence/fepper-drupal) - 
  templates configured for Drupal, along with a Drupal theme built to 
  accommodate those templates.
* [Fepper for Wordpress](https://github.com/electric-eloquence/fepper-wordpress) 
  \- templates configured for WordPress, along with a WordPress theme built to 
  accommodate those templates.

### Table of contents

* [Install](#install)
* [Configure](#configure)
* [Run](#run)
* [Update](#update)
* [Global Data](#global-data)
* [Partial Data](#partial-data)
* [Static Site Generation](#static-site-generation)
* [The Backend](#the-backend)
* [Templater](#templater)
* [Webserved Directories](#webserved-directories)
* [Mustache Browser](#mustache-browser)
* [HTML Scraper](#html-scraper)
* [variables.styl](#variables.styl)
* [UI Customization](#ui-customization)
* [Extensions](#extensions)
* [Express App](#express-app)
* [Mobile Devices](#mobile-devices)
* [I18N](#i18n)
* [Keyboard Shortcuts](#keyboard-shortcuts)
* [More Documentation](#more-documentation)

### <a id="install"></a>Install

#### System requirements

* Unix-like or Windows OS.
* Minimum supported Node.js version 12.0.0.

#### Simplest way to get started

* Download the 
  <a href="https://github.com/electric-eloquence/fepper/releases/latest" target="_blank">
  latest release</a>.

#### Mac install

* In macOS Finder:
  * Double-click `fepper.command`.
  * If not already installed, this will install:
    * Node.js.
    * <a href="https://www.npmjs.com/package/fepper-cli" target="_blank">fepper-cli</a>, 
      which will give you the `fp` command.
  * If opening for the first time, macOS may warn that it can't be opened 
    because it is from an unidentified 
    developer.&nbsp;<a href="https://gist.github.com/e2tha-e/72364ca766cf5d2d1a732b6af4f3b7a8" target="_blank">*</a>
    * In this case, ctrl+click `fepper.command` and click "Open".
    * In the following prompt, click "Open" to confirm that you're sure you 
      want to open it.
  * Enter your password to allow installation.
  * After installation, Fepper should automatically open in a browser.
  * Open http://localhost:3000 if it doesn't open automatically.

#### CLI install

* On other Unix-like OSs (or if you prefer working on the command line):
  * Install Node.js if it isn't already installed.
  * `npm install -g fepper-cli`
  * `npm install`
  * `fp`

#### Windows install

* In File Explorer, double-click 
  `fepper.vbs`.&nbsp;<a href="https://gist.github.com/e2tha-e/72364ca766cf5d2d1a732b6af4f3b7a8" target="_blank">*</a>
  * If Node.js is not installed, this will install it.
  * After Node.js installation, double-click `fepper.vbs` again.
    * This will install <a href="https://www.npmjs.com/package/fepper-cli" target="_blank">
      fepper-cli</a>, which will give you the `fp` command.
    * It will then install and launch Fepper.

#### Base install

* Comes with no unnecessary assets, styles, Pattern Lab demo, or 
  <a href="https://www.npmjs.com/package/fp-stylus" target="_blank">fp-stylus</a> 
  extension.
* Node.js must be installed beforehand.
* `npm install -g fepper-cli`
* `npm run install-base`
* `fp`

#### Post-install

* To stop Fepper, go to the command line where Fepper is running and press 
  ctrl+c.

### <a id="configure"></a>Configure

Edit the `pref.yml` file to customize preferences and to view further 
documentation in the comments. If you wish to use the `syncback`, 
`frontend-copy`, or `template` tasks, you must supply values for the 
`backend.synced_dirs` preferences in order for those directories to get 
processed and copied to the backend.

### <a id="run"></a>Run

* To launch from macOS Finder:
  * Double-click `fepper.command`.
* To launch from Windows File Explorer:
  * Double-click `fepper.vbs`.
* To launch from the command line:
  * `fp`
* Consult the <a href="https://patternlab.io/docs/index.html" target="_blank">
  Pattern Lab docs</a> for instructions on using Pattern Lab.
* Start editing files in `source`. Changes should automatically appear in the 
  browser.
* These other utility tasks are runnable on the command line:
  * `fp data` - Build data.json from underscore-prefixed .json files
  * `fp frontend-copy` - Copy assets, scripts, and styles to the backend
  * `fp help` - Print documentation of Fepper tasks
  * `fp once` - Output a new build to the public directory
  * `fp restart` - Restart after shutdown, but without opening the browser
  * `fp static` - Generate a static site from the 04-pages directory
  * `fp syncback` - Combine frontend-copy and template tasks
  * `fp template` - Translate templates in 03-templates for the backend, and 
    output them there
  * `fp ui:help` - Print UI tasks and their descriptions
  * `fp update` - Update Fepper distro, Fepper CLI, Fepper NPM, Fepper UI, and 
    Fepper extensions
  * `fp version` - Print the versions of Fepper CLI, Fepper NPM, and Fepper UI
  * `fp extend:help` - Print extension tasks and their descriptions
* Enter a `-d` or `--debug` switch to run the command in `debug` mode.
* If using Git for version control, directories named "ignore" will be ignored.

### <a id="update"></a>Update

Run `fp update` to download and install the latest updates.

### <a id="global-data"></a>Global Data

Edit `source/_data/_data.json` to globally populate 
<a href="https://www.npmjs.com/package/feplet" target="_blank">Feplet</a> 
(.mustache) templates with data. Manual edits to `source/_data/data.json` will 
get overwritten on each build.

### <a id="partial-data"></a>Partial Data

Underscore-prefixed .json files within 
`source/_patterns` will be concatenated to the output of `_data.json`, the 
whole in turn getting built into `data.json`, the final source of globally 
scoped data. 

_Partial data_ is distinct from _pattern data_. For example, `00-homepage.json` 
is _pattern data_ and specific to the `00-homepage` pattern. No other pattern 
will pick up `00-homepage.json`, even if `00-homepage.mustache` is included in 
another pattern. However, `_00-homepage.json` is _partial data_ and will get 
concatenated to the _global data_ outputted to `data.json`. `_00-homepage.json` 
will be picked up by all patterns.

* **DO NOT EDIT source/_data/data.json**
{'fraction_non_alphanumeric': 0.12874378992193045, 'fraction_numerical': 0.0099361249112846, 'mean_word_length': 4.2597984322508395, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, 'https://': 26, 'lorem ipsum': 0, 'www.': 10, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3969699', 'n_tokens_mistral': 4639, 'n_tokens_neox': 4382, 'n_words': 1473}