feat: add size support to picture shortcode

Author: clenemt

Diff for: package-lock.json

@@ -24,37 +24,37 @@
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-img": "^0.3.0",
     "@11ty/eleventy-navigation": "^0.1.6",
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "babel-loader": "^8.1.0",
+    "@babel/cli": "^7.12.8",
+    "@babel/core": "^7.12.9",
+    "@babel/preset-env": "^7.12.7",
+    "babel-loader": "^8.2.2",
     "cheerio": "^1.0.0-rc.3",
-    "core-js": "^3.7.0",
+    "core-js": "^3.8.0",
     "cross-env": "^7.0.2",
     "css-loader": "^5.0.1",
     "date-fns": "^2.16.1",
     "eleventy-plugin-error-overlay": "^0.1.2",
     "html-minifier": "^4.0.0",
     "js-yaml": "^3.14.0",
     "markdown-it": "^12.0.2",
-    "markdown-it-anchor": "^6.0.0",
+    "markdown-it-anchor": "^6.0.1",
     "markdown-it-attrs": "^3.0.3",
     "markdown-it-bracketed-spans": "^1.0.1",
-    "mini-css-extract-plugin": "^1.3.0",
+    "mini-css-extract-plugin": "^1.3.1",
     "node-sass": "^5.0.0",
     "npm-run-all": "^4.1.5",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "outdent": "^0.7.1",
-    "postcss": "^8.1.6",
-    "postcss-loader": "^4.0.4",
+    "postcss": "^8.1.10",
+    "postcss-loader": "^4.1.0",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "sass-loader": "^10.0.5",
-    "source-map-explorer": "^2.5.0",
+    "sass-loader": "^10.1.0",
+    "source-map-explorer": "^2.5.1",
     "svg-sprite": "^1.5.0",
     "vinyl": "^2.2.1",
-    "webpack": "^5.4.0",
+    "webpack": "^5.9.0",
     "webpack-cli": "^4.2.0",
     "webpack-manifest-plugin": "^3.0.0-rc.0"
   }

Diff for: package.json

@@ -30,42 +30,55 @@
   clear: both;
 }
 
-.fs-small {
-  font-size: $font-size-small;
+.t-small {
+  font-size: $font-size-small !important;
 }
 
-.fs-large {
-  font-size: $font-size-large;
+.t-large {
+  font-size: $font-size-large !important;
 }
 
-.fw-normal {
-  font-weight: normal;
+.t-normal {
+  font-weight: normal !important;
 }
 
-.fw-bold {
-  font-weight: 700;
+.t-bold {
+  font-weight: 700 !important;
+}
+
+.t-center {
+  text-align: center !important;
+}
+
+.d-block {
+  display: block !important;
 }
 
 .d-flex {
   display: flex !important;
 }
 
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
 .mb-0 {
   margin-bottom: 0 !important;
 }
 
 .mr-1 {
-  margin-right: 0.25rem;
+  margin-right: 0.25rem !important;
 }
 
 .mr-2 {
-  margin-right: 0.5rem;
+  margin-right: 0.5rem !important;
 }
 
 .ml-1 {
-  margin-left: 0.25rem;
+  margin-left: 0.25rem !important;
 }
 
 .ml-2 {
-  margin-left: 0.5rem;
+  margin-left: 0.5rem !important;
 }

Diff for: src/assets/styles/base/_utilities.scss

@@ -12,7 +12,7 @@ layout: default
     {# {% if tags %}<span class="project__tags">{% for tag in tags %}<a href="/projects/{{ tag }}" class="project__tag">{{ tag }}</a>{% endfor%}</span>
     {% endif %} #}
     <time class="project__date" datetime="{{ page.date | formatISO }}">{{ page.date | format('LLL yyyy') }}</time>
-    {% if image %}<div class="project__image">{% image image, title, null, null, false %}</div>{% endif %}
+    {% if image %}<div class="project__image">{% image image, title, null, null, false, "90vw, (min-width: 782px) 43rem" %}</div>{% endif %}
   </header>
 
   <div class="project__content">

Diff for: src/includes/project.njk

@@ -1,9 +1,9 @@
 ---
+date: 2019-11-11
 draft: true
 ---
 
 Ideas:
-* Privatezilla
 * move outside of dropbox
 * windows terminal
 * nvm

Diff for: src/notes/ideas.md

@@ -6,7 +6,7 @@ title: Clement Moron
 
 <div class="container page home">
 
-# [Hello I’m Clement]{.page__title-pre .fw-bold} a frontend architect.{.page__title}
+# [Hello I’m Clement]{.page__title-pre .t-bold} a frontend architect.{.page__title}
 
 I am also a [writer](notes/) and [definitely not]{.select-hide .select-hide--2} professional climber.
 

Diff for: src/pages/home.md

@@ -20,7 +20,7 @@ The term _"living"_ means its an **ever-going process**.
 
 In the course of **3+** years I iterated over this style guide and delivered not less then three versions.
 
-### Version 1.0 [(2014)]{.fs-small .fw-normal}
+### Version 1.0 [(2014)]{.t-small .t-normal}
 
 The first iteration was heavily inspired by [Bootstrap](https://getbootstrap.com/docs/3.3/components/) since it was the only style guide out there at the time.
 
@@ -30,7 +30,7 @@ Components usage was similar to [ExtJs](https://docs.sencha.com/extjs/3.4.0/) li
 
 {% image "uikit-v1-js.jpg", "Two column website showing the inputs section", "The Ext JS approach to components" %}
 
-### Version 2.0 [(2015)]{.fs-small .fw-normal}
+### Version 2.0 [(2015)]{.t-small .t-normal}
 
 With version 2.0 we split the library into Javascript and CSS components to make navigation easier.
 
@@ -40,7 +40,7 @@ Additionally, every components would have it's own documentation page for easier
 
 {% image "uikit-v2-js.jpg", "Full screen website with sidebar showing buttons section" , "A single unified page per component" %}
 
-### Version 3.0 [(2016)]{.fs-small .fw-normal}
+### Version 3.0 [(2016)]{.t-small .t-normal}
 
 The focus here was on clarity and quality. New documentations guides and examples were added.
 

Diff for: src/projects/2012-01-01_uikit.md

@@ -8,7 +8,7 @@ tags: open-source
 
 Before the Typescript era, users had to resort to online documentation for guidance. {.lead}
 
-In those dark age, it was common to **squint** at [tiny]{.fs-small} fonts and confusing UIs to find out what your function was supposed to return.
+In those dark age, it was common to **squint** at [tiny]{.t-small} fonts and confusing UIs to find out what your function was supposed to return.
 
 {% image "docdash-angular.png", "Angular documentation website", "That documentation gave me nightmares" %}
 

Diff for: src/projects/2018-01-01_docdash.md

@@ -5,7 +5,7 @@ const Image = require('@11ty/eleventy-img');
 const markdown = require('./markdown');
 
 const iconDefaultSize = 24;
-const defaultSizes = '90vw, (min-width: 1280px) 1152px';
+const defaultSizes = '90vw, (min-width: 782px) 41rem';
 const defaultImagesSizes = [1920, 1280, 640, 320];
 
 const isFullUrl = (url) => {
@@ -50,14 +50,21 @@ module.exports = {
 
   // Allow embedding responsive images
   // {% image "image.jpeg", "Image alt", "Image title", "my-class" %}
-  image: async (
-    src,
-    alt,
-    title,
-    className,
-    lazy = true,
-    sizes = defaultSizes
-  ) => {
+  // {% image [100,100], "image.jpeg", "Image alt", "Image title", "my-class" %}
+  image: async (...args) => {
+    let fallbackWidth, fallbackHeight;
+
+    if (Array.isArray(args[0])) {
+      [fallbackWidth, fallbackHeight] = args.shift();
+    }
+
+    const src = args[0];
+    const alt = args[1];
+    const title = args[2];
+    const className = args[3];
+    const lazy = args[4] ?? true;
+    const sizes = args[5] ?? defaultSizes;
+
     const extension = path.extname(src).slice(1).toLowerCase();
     const fullSrc = isFullUrl(src) ? src : `./src/assets/images/${src}`;
 
@@ -78,20 +85,21 @@ module.exports = {
 
     const fallback = stats[extension].reverse()[0];
     const picture = outdent({ newline: '' })`
-    <picture class="${!title && className || ''}">
+    <picture class="${(!title && className) || ''}">
       ${Object.values(stats)
         .map(
           (image) =>
             `<source type="image/${image[0].format}" srcset="${image
               .map((entry) => `${entry.url} ${entry.width}w`)
               .join(', ')}" sizes="${sizes}">`
-        ).join('')}
+        )
+        .join('')}
       <img
         class="img-fluid ${className || ''}"
         loading="${lazy ? 'lazy' : 'eager'}"
         src="${fallback.url}"
-        width="${fallback.width}"
-        height="${fallback.height}" alt="${alt}">
+        width="${fallbackWidth ?? fallback.width}"
+        height="${fallbackHeight ?? fallback.height}" alt="${alt}">
     </picture>`;
     return title
       ? outdent({ newline: '' })`