Merge branch 'master' of github.com:bradfrost/pl-website-eleventy

Author: bradfrost

packages/docs/.eleventy.js

@@ -1,5 +1,6 @@
 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
@@ -15,80 +16,81 @@ const parseTransform = require('./src/transforms/parse-transform.js');
 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);
-
-    // 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
-    };
+	// 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/.prettierrc

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

packages/docs/package-lock.json

@@ -17,6 +17,7 @@
     "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",

packages/docs/package.json

@@ -1,20 +1,18 @@
 ---
 title: Managing Pattern Assets
 tags:
-  - docs
+    - docs
 ---
 
-
-
 Assets for patterns - including JavaScript, CSS, and images - should be stored and edited in the `./source/` directory. Pattern Lab will move these assets to the `./public/` directory for you when you generate your site or when you watch the `./source/` directory for changes. **You can name and organize your assets however you like.** If you would like to use `./source/stylesheets/` to store your styles instead of `./source/css/` you can do that. There is nothing to configure. The structure will be maintained when they're moved to the `./public/` directory.
 
 ## Ignoring and Not Moving Assets Based on File Extension
 
 By default, Pattern Lab will not move assets with the following file extensions:
 
-* `.less`
-* `.scss`
-* `.DS_Store`
+-   `.less`
+-   `.scss`
+-   `.DS_Store`
 
 To ignore more file extensions edit the `ie` configuration option in `./config/config.yml`. For example, to ignore `*.png` files your `ie` configuration option would look like:
 
@@ -28,7 +26,7 @@ To ignore more file extensions edit the `ie` configuration option in `./config/c
 
 By default, the PHP version of Pattern Lab will ignore **all** assets in directories that exactly match:
 
-* `scss`
+-   `scss`
 
 To ignore more directories just edit the `id` configuration option in `./config/config.yml`. For example, to ignore directories named `test/` your `id` configuration option would look like:
 
@@ -41,6 +39,3 @@ To ignore more directories just edit the `id` configuration option in `./config/
 ## Adding Assets to the Pattern Header & Footer
 
 Static assets like Javascript and CSS **are not** added automagically to your patterns. You need to add them manually to the [shared pattern header and footer](/docs/pattern-header-footer.html).
-
-
-

packages/docs/php-docs/pattern-managing-assets.md

@@ -1,20 +1,18 @@
 ---
 title: Using Pattern States
 tags:
-  - docs
+    - docs
 ---
 
-
-
 Pattern states provide your team and client a simple visual of the current state of patterns in Pattern Lab. Pattern states can track progress of a pattern from development, through client review, to completion or they can be used to give certain patterns specific classes. It's important to note that the state of a pattern can be influenced by its pattern partials.
 
 ## The Default Pattern States
 
 Pattern Lab comes with the following default pattern states:
 
-* **inprogress**: pattern is in development or being worked upon. a red dot.
-* **inreview**: pattern is ready for a client to look at and comment upon. a yellow dot.
-* **complete**: pattern is ready to be moved to production. a green dot.
+-   **inprogress**: pattern is in development or being worked upon. a red dot.
+-   **inreview**: pattern is ready for a client to look at and comment upon. a yellow dot.
+-   **complete**: pattern is ready to be moved to production. a green dot.
 
 Any pattern that includes a pattern partial that has a lower pattern state will inherit that state. For example, a pattern with the state of `inreview` that includes a pattern partial with the state of `inprogress` will have its state overridden and set to `inprogress`. It will not change to `inreview` until the pattern partial has a state of `inreview` or `complete`.
 
@@ -45,6 +43,3 @@ You can use the following as your CSS template for new pattern states:
 ```
 
 Then add `@newpatternstate` to your patterns to have the new look show up. If you want to add it to the cascade of the default patterns you can modify `./config/config.yml`. Simply add your new pattern state to the `patternStates` list.
-
-
-

packages/docs/php-docs/pattern-states.md

@@ -1,11 +1,11 @@
+{% set navPages = collections.docs | eleventyNavigation %}
 <ul class="c-tree-nav__subnav">
-    {% for doc in collections.docsOrdered %}
-        {% if doc.data.category == subnavCategory %}
-        <li class="c-tree-nav__subnav-item">
-            <a href="{{doc.url}}" class="c-tree-nav__subnav-link">
-                {{ doc.data.title }}
-            </a><!--end c-tree-nav__subnav-link-->
-        </li><!--end c-tree-nav__subnav-item--> 
-        {% endif %}
-    {% endfor %}           
-</ul><!--end c-tree-nav__subnav-->
+{% for entry in navPages %}
+    {% if entry.key == subnavCategory %}
+    <li class="c-tree-nav__subnav-item">
+        <a href="{{entry.url}}" class="c-tree-nav__subnav-link">{{ entry.title }}<a>
+    </li><!--end c-tree-nav__subnav-item -->
+  {% endif %}
+{% endfor %}
+</ul><!--end c-tree-nav__subnav-->
+

packages/docs/src/_includes/components/tree-subnav.njk

@@ -4,6 +4,9 @@ tags:
   - demo-content
   - code
   - blog
+eleventyNavigation:
+  key: DOCS DOCS DOCS
+  order: 300
 ---
 
 The best way to demo a code post is to display a real life post, so check out this one from [andy-bell.design](https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/) about a full bleed CSS utility.
@@ -22,9 +25,9 @@ It’s small, but hella mighty:
 
 ```css
 .full-bleed {
-  width: 100vw;
-  margin-left: 50%;
-  transform: translateX(-50%);
+	width: 100vw;
+	margin-left: 50%;
+	transform: translateX(-50%);
 }
 ```
 
@@ -43,9 +46,9 @@ The `.full-bleed` utility gives those elements prominence and _importantly_ keep
 
 ```css
 .wrapper {
-  max-width: 50rem;
-  margin-left: auto;
-  margin-right: auto;
+	max-width: 50rem;
+	margin-left: auto;
+	margin-right: auto;
 }
 ```
 

packages/docs/src/docs/a-post-with-code-samples.md

@@ -3,6 +3,10 @@ title: Watching for Changes and Auto Regenerating Patterns
 tags:
   - docs
 category: advanced
+eleventyNavigation:
+  key: Watching for Changes and Auto Regenerating Patterns
+  parent: advanced
+  order: 300
 ---
 
 Pattern Lab has the ability to watch for changes to patterns and frontend assets. When these files change, it will automatically rebuild the entire Pattern Lab website. You simply make your changes, save the file, and Pattern Lab will take care of the rest.
@@ -38,5 +42,3 @@ By default, Pattern Lab monitors the following files:
 - all of the Javascript files under `source/js/`
 
 The watch configuration is found within the Gruntfile or Gulpfile at the root of the project.
-
-