Docs

README.md

@@ -16,6 +16,10 @@ If you'd like to see what a front-end project built with Pattern Lab looks like,
 [![node (scoped)](https://img.shields.io/node/v/@pattern-lab/patternlab-node.svg)]()
 [![Join the chat at Gitter](https://badges.gitter.im/pattern-lab/node.svg)](https://gitter.im/pattern-lab/node)
 
+Docs @ [![Netlify Status](https://api.netlify.com/api/v1/badges/d454dbde-02c5-4bd4-8393-4ab75e862b03/deploy-status)](https://app.netlify.com/sites/patternlab-docs-preview/deploys)
+
+Pattern Lab Preview @ [![Netlify Status](https://api.netlify.com/api/v1/badges/a6db1666-cb4f-4d26-82d4-9d88d875f286/deploy-status)](https://app.netlify.com/sites/patternlab-handlebars-preview/deploys)
+
 ## Using Pattern Lab
 
 Refer to the [core usage guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/README.md#usage)

netlify.toml

@@ -1,2 +1,2 @@
 [context.deploy-preview]
-  command = "npm run setup && npm run preview:hbs"
+  command = "yarn setup && yarn preview:hbs && yarn preview:docs"

package.json

@@ -39,6 +39,7 @@
     "clean": "git clean -dfx",
     "publish": "npx lerna publish -m \"[skip travis] chore(release): publish %s\"",
     "postpublish": "auto release",
+    "preview:docs": "cd packages/docs && yarn production",
     "preview:hbs": "cd packages/development-edition-engine-handlebars && npx patternlab add --starterkits @pattern-lab/starterkit-handlebars-vanilla && npm run pl:build"
   },
   "nyc": {

packages/docs/.eleventy.js

@@ -0,0 +1,96 @@
+const rssPlugin = require('@11ty/eleventy-plugin-rss');
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
+const fs = require('fs');
+
+// Import filters
+const dateFilter = require('./src/filters/date-filter.js');
+const markdownFilter = require('./src/filters/markdown-filter.js');
+const w3DateFilter = require('./src/filters/w3-date-filter.js');
+
+// Import transforms
+const htmlMinTransform = require('./src/transforms/html-min-transform.js');
+const parseTransform = require('./src/transforms/parse-transform.js');
+
+// Import data files
+const site = require('./src/_data/site.json');
+
+module.exports = function(config) {
+	// Filters
+	config.addFilter('dateFilter', dateFilter);
+	config.addFilter('markdownFilter', markdownFilter);
+	config.addFilter('w3DateFilter', w3DateFilter);
+
+	// Layout aliases
+	config.addLayoutAlias('home', 'layouts/home.njk');
+
+	// Transforms
+	config.addTransform('htmlmin', htmlMinTransform);
+	config.addTransform('parse', parseTransform);
+
+	// Passthrough copy
+	config.addPassthroughCopy('src/images');
+	config.addPassthroughCopy('src/js');
+	config.addPassthroughCopy('src/admin/config.yml');
+	config.addPassthroughCopy('src/admin/previews.js');
+	config.addPassthroughCopy('node_modules/nunjucks/browser/nunjucks-slim.js');
+
+	const now = new Date();
+
+	// Custom collections
+	const livePosts = post => post.date <= now && !post.data.draft;
+	config.addCollection('posts', collection => {
+		return [
+			...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)
+		].reverse();
+	});
+
+	config.addCollection('demos', collection => {
+		return [...collection.getFilteredByGlob('./src/demos/*.md')].reverse();
+	});
+
+	config.addCollection('postFeed', collection => {
+		return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
+			.reverse()
+			.slice(0, site.maxPostsPerPage);
+	});
+
+	config.addCollection('docs', collection => {
+		return [...collection.getFilteredByGlob('./src/docs/*.md')].reverse();
+	});
+
+	config.addCollection('docsOrdered', collection => {
+		const docs = collection.getFilteredByGlob('src/docs/*.md').sort((a, b) => {
+			return Number(a.data.order) - Number(b.data.order);
+		});
+		return docs;
+	});
+
+	// Plugins
+	config.addPlugin(rssPlugin);
+	config.addPlugin(syntaxHighlight);
+	config.addPlugin(eleventyNavigationPlugin);
+
+	// 404
+	config.setBrowserSyncConfig({
+		callbacks: {
+			ready: function(err, browserSync) {
+				const content_404 = fs.readFileSync('dist/404.html');
+
+				browserSync.addMiddleware('*', (req, res) => {
+					// Provides the 404 content without redirect.
+					res.write(content_404);
+					res.end();
+				});
+			}
+		}
+	});
+
+	return {
+		dir: {
+			input: 'src',
+			output: 'dist'
+		},
+		passthroughFileCopy: true
+	};
+};

packages/docs/.gitignore

@@ -0,0 +1,17 @@
+*.log
+npm-debug.*
+*.scssc
+*.log
+*.swp
+.DS_Store
+.sass-cache
+node_modules
+dist 
+
+# Specifics
+
+# Hide design tokens
+src/scss/_tokens.scss
+
+# Hide compiled CSS
+src/_includes/assets/*

packages/docs/.prettierrc

@@ -0,0 +1,7 @@
+{
+	"printWidth": 90,
+	"useTabs": true,
+	"tabWidth": 2,
+	"singleQuote": true,
+	"bracketSpacing": false
+}

packages/docs/.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/index.js"
+        }
+    ]
+}

packages/docs/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 andy-bell.design and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/docs/README.md

@@ -0,0 +1,32 @@
+# Pattern Lab Website
+
+This is the website for patternlab.io. This site was build using the [Hylia starter kit](https://hylia.website/), which is a lightweight [Eleventy](https://11ty.io) starter kit.
+
+---
+
+## How to work with this project
+
+1. Clone this repository
+2. `cd` into the project directory and run `yarn`
+3. Once all the dependencies are installed run `yarn start`
+4. Open your browser at `http://localhost:8080`
+
+## Terminal commands
+
+### Serve the site locally
+
+```bash
+yarn start
+```
+
+### Build a production version of the site
+
+```bash
+yarn production
+```
+
+### Compile Sass
+
+```bash
+yarn sass:process
+```

packages/docs/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "patternlab-website",
+  "version": "0.1.0",
+  "description": "The website for patternlab.io",
+  "main": "index.js",
+  "dependencies": {
+    "@11ty/eleventy": "^0.8.3",
+    "@11ty/eleventy-plugin-rss": "^1.0.6",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
+    "@tbranyen/jsdom": "^13.0.0",
+    "concurrently": "^4.1.0",
+    "html-minifier": "^4.0.0",
+    "json-to-scss": "^1.3.1",
+    "sass": "^1.21.0",
+    "semver": "^6.3.0",
+    "slugify": "^1.3.4",
+    "stalfos": "github:hankchizljaw/stalfos#c8971d22726326cfc04089b2da4d51eeb1ebb0eb"
+  },
+  "devDependencies": {
+    "@11ty/eleventy-navigation": "^0.1.5",
+    "@erquhart/rollup-plugin-node-builtins": "^2.1.5",
+    "bl": "^3.0.0",
+    "chokidar-cli": "^2.0.0",
+    "cross-env": "^5.2.0",
+    "make-dir-cli": "^2.0.0",
+    "prettier": "^1.18.2",
+    "rollup": "^1.16.1",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.0.3"
+  },
+  "scripts": {
+    "sass:tokens": "npx json-to-scss src/_data/tokens.json src/scss/_tokens.scss",
+    "sass:process": "yarn sass:tokens && sass src/scss/style.scss dist/css/style.css --style=compressed",
+    "cms:precompile": "make-dir dist/admin && nunjucks-precompile src/_includes > dist/admin/templates.js -i \"\\.(njk|css|svg)$\"",
+    "cms:bundle": "rollup --config",
+    "start": "concurrently \"yarn sass:process -- --watch\" \"yarn cms:bundle -- --watch\" \"chokidar \\\"src/_includes/**\\\" -c \\\"yarn cms:precompile\\\"\" \"yarn serve\"",
+    "serve": "cross-env ELEVENTY_ENV=development npx eleventy --serve",
+    "production": "yarn sass:process && yarn cms:precompile && yarn cms:bundle && npx eleventy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bradfrost/pl-website-eleventy.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bradfrost/pl-website-eleventy/issues"
+  },
+  "homepage": "https://github.com/bradfrost/pl-website-eleventy/#readme"
+}

packages/docs/php-docs/advanced-auto-regenerate.md

@@ -0,0 +1,55 @@
+---
+title: Watching for Changes and Auto Regenerating Patterns
+tags:
+  - docs
+---
+
+Pattern Lab can watch for changes to files in `./source/` and automatically rebuild the entire Pattern Lab website for you. Make your changes, save the file, and Pattern Lab takes care of the rest.
+
+## How to Start Watching for Changes
+
+To start watching for changes do the following:
+
+1. In a terminal window navigate to the root of your project
+2. Type `php core/console --watch`
+
+To stop watching files use `CTRL+C` in the same terminal window.
+
+### Only Watch for Changes to Pattern Lab Files
+
+If you use a task runner like Gulp or Grunt to compile Sass, JavaScript or images you may want Pattern Lab to only concern itself with its own files. To limit Pattern Lab to watch and move only its files do the following:
+
+1. In a terminal window navigate to the root of your project
+2. Type `php core/console --watch --patternsonly`
+
+Or, better yet, use this command within your Gulp or Grunt script.
+
+### Start the Web Server & Watch for Changes at the Same Time
+
+If you're relying on Pattern Lab's server to view your content you'll want to run the watch and server with the same command. Do the following:
+
+1. In a terminal window navigate to the root of your project
+2. Type `php core/console --server --with-watch`
+
+You can also start the server and watch only patterns:
+
+1. In a terminal window navigate to the root of your project
+2. Type `php core/console --server --with-watch --patternsonly`
+
+To stop the server and watching files use `CTRL+C` in the same terminal window.
+
+### Start the Web Server, Watch for Changes, and Reload the Browser at the Same Time
+
+The ultimate solution for working with Pattern Lab if you're not using a task runner is Pattern Lab's [Auto-Reload Plugin](https://github.com/pattern-lab/plugin-php-reload). Do the following:
+
+1. In a terminal window navigate to the root of your project
+2. Install the [Auto-Reload Plugin](https://github.com/pattern-lab/plugin-php-reload) using `composer require pattern-lab/plugin-reload`
+3. Type `php core/console --server --with-watch`
+
+The Auto-Reload Plugin is automatically enabled when you install it. You can always [disable the plugin](https://github.com/pattern-lab/plugin-php-reload#disabling-the-plugin) if you need to.
+
+To stop the server, watching files, and auto-reload service use `CTRL+C` in the same terminal window.
+
+## What Pattern Lab Will Watch
+
+By default, the PHP version of Pattern Lab will watch all files in `./source` except those that match the "ignore" configuration options in `config/config.yml`. When using `--patternsonly` Pattern Lab will only watch those directories in `./source` that start with an underscore. For example, `_patterns`. To learn how to modify what is ignored check out "[Managing Assets for a Pattern](/docs/pattern-managing-assets.html)".

packages/docs/php-docs/advanced-clean-public.md

@@ -0,0 +1,5 @@
+---
+title: Stopping public/ from Being "Cleaned"
+tags:
+  - docs
+---

packages/docs/php-docs/advanced-config-options.md

@@ -0,0 +1,7 @@
+---
+title: Editing the Configuration Options
+tags:
+  - docs
+---
+
+Pattern Lab comes with a simple configuration file that allows you to modify certain aspects of the system. The configuration file can be found in `./config/config.yml`.

packages/docs/php-docs/advanced-exporting-patterns.md

@@ -0,0 +1,17 @@
+---
+title: Exporting Patterns
+tags:
+  - docs
+---
+
+Pattern Lab can export all of your patterns for you sans Pattern Lab's CSS and JavaScript. To export your patterns do the following:
+
+1. In a terminal window navigate to the root of your project
+2. Type `php core/console --export`
+
+If you require your patterns to be exported without your global header and footer (_e.g. to export a clean molecule_) do the following:
+
+1. In a terminal window navigate to the root of your project
+2. Type `php core/console --export --clean`
+
+In both cases the patterns will be exported to `./export/patterns`. The export directory is one of the many directories that can be [configured and changed](/docs/editing-source-files.html).

packages/docs/php-docs/advanced-page-follow.md

@@ -0,0 +1,7 @@
+---
+title: Multi browser & Multi device Testing with Page Follow
+tags:
+  - docs
+---
+
+An auto-reload service was built into Pattern Lab 1. With Pattern Lab 2 this feature has been removed. This feature may return as a plugin in the same way that the [Auto-Reload service](/docs/advanced-reload-browser.html) did.

packages/docs/php-docs/advanced-pattern-lab-nav.md

@@ -0,0 +1,29 @@
+---
+title: Modifying Pattern Lab's Navigation
+tags:
+  - docs
+---
+
+When sharing Pattern Lab with a client it may be beneficial to turn-off certain elements in the default navigation. To turn-off navigation elements do the following:
+
+1. Open `./config/config.yml`
+2. Add the keys for the elements you'd like to hide to the `ishControlsHide` configuration option
+3. Re-generate your Pattern Lab site
+
+The following keys are supported and will hide their respective elements:
+
+```
+s
+m
+l
+full
+random
+disco
+hay
+find
+views-new
+tools-all
+tools-docs
+```
+
+`hay` is disabled by default.