refactor(docs): optimizations (#1327)

* refactor(docs): added dimensions to the images

for easier calculation by the browser and to prevent reflow

* refactor(yarn): removed unnecessary additional -- for parameters

as shown on the output / shell:
from Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts

* fix(docs): corrected the path for a copy action

* chore(docs): added nunjucks dependency

that is (now correctly) referenced within the files of the docs package

Author: mfranzke

packages/docs/.eleventy.js

@@ -33,7 +33,7 @@ module.exports = function (config) {
 	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');
+	config.addPassthroughCopy('../../node_modules/nunjucks/browser/nunjucks-slim.js');
 
 	const now = new Date();
 

packages/docs/package.json

@@ -11,6 +11,7 @@
     "concurrently": "^4.1.0",
     "html-minifier": "^4.0.0",
     "json-to-scss": "^1.6.2",
+    "nunjucks": "^3.2.3",
     "sass": "^1.32.8",
     "semver": "^6.3.0",
     "slugify": "^1.5.0",
@@ -34,7 +35,7 @@
     "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\"",
+    "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"
   },

packages/docs/src/_includes/components/logo.njk

@@ -1,9 +1,9 @@
 
 <h3 class="c-logo">
 	<a href="/" class="c-logo__link" rel="home">
-	    <img class="c-logo__img" src="https://patternlab.io/images/icon-atom.svg" alt="Pattern Lab logo" aria-hidden="true">
+	    <img class="c-logo__img" src="https://patternlab.io/images/icon-atom.svg" alt="Pattern Lab logo" aria-hidden="true" width="38" height="36">
 
-		<div class="c-logo__body">
+    <div class="c-logo__body">
 			<span class="c-logo__text">Pattern Lab</span>
 		</div>
     </a>

packages/docs/src/docs/advanced-ecosystem-overview.md

@@ -20,7 +20,7 @@ Editions let teams and agencies bundle all the things that support their unique
 
 The following is good overview of what components might make up an edition:
 
-<img src="/images/pattern-lab-2-image_18-large-opt.png">
+<img src="/images/pattern-lab-2-image_18-large-opt.png" width="640" height="509" alt="Pattern Lab Edition">
 
 This is by no means exhaustive and can be added to as needed. Here is a description of each component: