Move image shortcode to its own file.

.eleventy.js

@@ -1,80 +1,20 @@
 'use strict';
 
-const path = require('path');
-
-const image = require('@11ty/eleventy-img');
 const rss = require('@11ty/eleventy-plugin-rss');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const yaml = require('js-yaml');
 const _ = require('lodash');
 
 const birds = require('#/birds');
 const events = require('#/events');
+const images = require('#/images');
 const pages = require('#/pages');
 const tags = require('#/tags');
 const taxonomy = require('#/taxonomy');
 const time = require('#/time');
 const type = require('#/type');
 const utils = require('#/utils');
 
-// eleventy image plugin
-const imageShortcode = (src, alt, attrs, sizes, getUrl) => {
-  const imgConfig = taxonomy.fromTaxonomy('img');
-  const imgSizes =
-    sizes && imgConfig.sizes[sizes]
-      ? imgConfig.sizes[sizes]
-      : sizes || imgConfig.sizes.default;
-
-  const options = {
-    widths: imgConfig.widths,
-    formats: imgConfig.formats,
-    urlPath: '/img/',
-    outputDir: './_site/img/',
-    sharpJpegOptions: {
-      progressive: true,
-      quality: 80,
-    },
-    sharpWebpOptions: {
-      quality: 60,
-      nearLossless: true,
-      reductionEffort: 3,
-    },
-
-    // eslint-disable-next-line
-    filenameFormat: function (id, src, width, format, options) {
-      const extension = path.extname(src);
-      const name = path.basename(src, extension);
-
-      return `${name}-${width}w.${format}`;
-    },
-  };
-
-  // generate images, while this is async we don’t wait
-  image(src, options);
-
-  // eslint-disable-next-line no-sync
-  const metadata = image.statsSync(src, options);
-
-  if (getUrl) {
-    const data = metadata.jpeg[metadata.jpeg.length - 1];
-    return data.url;
-  }
-
-  const imageAttributes = _.merge(
-    {
-      alt,
-      sizes: imgSizes,
-      loading: 'lazy',
-      decoding: 'async',
-    },
-    attrs,
-  );
-
-  return image.generateHTML(metadata, imageAttributes, {
-    whitespaceMode: 'inline',
-  });
-};
-
 module.exports = (eleventyConfig) => {
   eleventyConfig.setUseGitIgnore(false);
   eleventyConfig.setWatchThrottleWaitTime(100);
@@ -202,7 +142,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter('max', (array) => Math.max(...array));
 
   eleventyConfig.addFilter('imgSrc', (src) =>
-    imageShortcode(src, null, null, null, false),
+    images.image(src, null, null, null, true),
   );
 
   // shortcodes
@@ -212,7 +152,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addShortcode('getDate', (format) =>
     time.getDate(time.now(), format),
   );
-  eleventyConfig.addNunjucksShortcode('image', imageShortcode);
+  eleventyConfig.addNunjucksShortcode('image', images.image);
 
   // config
   eleventyConfig.setLibrary('md', type.mdown);

content/_includes/embed.macros.njk

@@ -365,12 +365,11 @@ params:
   attrs={}
 ) -%}
   {%- if src -%}
-    {%- set config = 'img' | fromTaxonomy -%}
     {%- if not ('://' in src) -%}
       {%- set src = ('./src/images/' + src) -%}
       {%- image src, alt or "", attrs, sizes -%}
     {%- else -%}
-      <img src="src" alt="{{ alt or '' }}" {{ utility.show_attrs(attrs) }}>
+      <img src="{{ src }}" alt="{{ alt or '' }}" {{ utility.show_attrs(attrs) }}>
     {%- endif -%}
   {%- endif -%}
 {%- endmacro %}

content/blog/2016/cssconf.md

@@ -43,7 +43,7 @@ you have a chance to watch the videos.
 
 ## Creativity in Programming for Fun and Profit
 
-{{ embed.img('blog/2016/cssconf/sd.jpg', 'Sarah Drasner speaking') }} 
+{{ embed.img('blog/2016/cssconf/sd.jpg', 'Sarah Drasner speaking') }}
 
 [Sarah Drasner] talked about programming as a creative act. There is
 more than one way to solve any given problem – and different solutions
@@ -73,7 +73,7 @@ load of amazing and beautiful samples.
 
 ## No Bugs in Sight
 
-{{ embed.img('blog/2016/cssconf/bj.jpg', 'Brian Jordan speaking') }} 
+{{ embed.img('blog/2016/cssconf/bj.jpg', 'Brian Jordan speaking') }}
 
 [Brian Jordan] talked about automated front-end testing, with tools like
 [PhantomJS]. He works with [code.org], a non-profit working to increase
@@ -96,7 +96,7 @@ were a few philisophical points that stood out:
 
 ## Nativize Is the New Normalize
 
-{{ embed.img('blog/2016/cssconf/jl.jpg', 'Jessica Lord speaking') }} 
+{{ embed.img('blog/2016/cssconf/jl.jpg', 'Jessica Lord speaking') }}
 
 [Jessica Lord] showed us how to use [Electron] to build native (Mac,
 Windows, Linux) desktop applications using Node, HTML, and CSS – with
@@ -118,7 +118,7 @@ class="title-ref">cursor: pointer</span> and "rubber-band" scrolling.
 
 ## Component-Based Style Reuse
 
-{{ embed.img('blog/2016/cssconf/ph.jpg', 'Pete Hunt speaking') }} 
+{{ embed.img('blog/2016/cssconf/ph.jpg', 'Pete Hunt speaking') }}
 
 [Pete Hunt] gave the most controversial talk of the conference,
 exploring the advantages of in-line CSS generated by JavaScript, using
@@ -159,7 +159,7 @@ processor:
 
 ## CSS4 Grid: True Layout Finally Arrives
 
-{{ embed.img('blog/2016/cssconf/jk.jpg', 'Jen Kramer speaking') }} 
+{{ embed.img('blog/2016/cssconf/jk.jpg', 'Jen Kramer speaking') }}
 
 [Jen Kramer] provided an overview of past and present CSS layout
 techniques, and an introduction to the new [CSS Grid] feature (still
@@ -193,7 +193,7 @@ can use it in production.
 
 ## Silky Smooth Animation with CSS
 
-{{ embed.img('blog/2016/cssconf/wb.jpg', 'Will Boyd speaking') }} 
+{{ embed.img('blog/2016/cssconf/wb.jpg', 'Will Boyd speaking') }}
 
 [Will Boyd] provided guidelines for creating smooth animations in CSS.
 To avoid jank, you have to keep all animations and transitions at 60fps.
@@ -237,7 +237,7 @@ initially try to achieve with other properties.
 
 ## Stop Thinking in Pixels
 
-{{ embed.img('blog/2016/cssconf/kg.jpg', 'Keith Grant speaking') }} 
+{{ embed.img('blog/2016/cssconf/kg.jpg', 'Keith Grant speaking') }}
 
 [Keith J. Grant] argued for using a combination of `em` and `rem`
 values, instead of `px`, for sizing on the web.
@@ -291,7 +291,7 @@ provide terrible results on their own.
 
 ## CSS Variables: var(--subtitle)
 
-{{ embed.img('blog/2016/cssconf/lv.jpg', 'Lea Verou speaking') }} 
+{{ embed.img('blog/2016/cssconf/lv.jpg', 'Lea Verou speaking') }}
 
 [Lea Verou] demonstrated various ways to use native CSS variables (AKA
 CSS Custom Properties) – already available in all modern browsers aside
@@ -388,7 +388,7 @@ There's so much more! I highly recommend watching the video.
 
 ## Creative Solutions for Creative Design Challenges with CSS and SVG
 
-{{ embed.img('blog/2016/cssconf/ss.jpg', 'Sara Soueidan speaking') }} 
+{{ embed.img('blog/2016/cssconf/ss.jpg', 'Sara Soueidan speaking') }}
 
 [Sara Soueidan] was scheduled to talk about SVG, but talked instead
 about hacks that she has learned to appreciate while working on the
@@ -399,7 +399,7 @@ talk is well worth the watch. So much good material in here!
 
 ## The Hateful Weight
 
-{{ embed.img('blog/2016/cssconf/hh.jpg', 'Henri Helvetica speaking') }} 
+{{ embed.img('blog/2016/cssconf/hh.jpg', 'Henri Helvetica speaking') }}
 
 [Henri Helvetica] talked about optimizing page and image sizes for the
 web. Did you know mp4 videos have better performance than gif images?
@@ -412,7 +412,7 @@ display.
 
 ## Sass Map Magic
 
-{{ embed.img('blog/2016/cssconf/mia.jpg', 'Miriam speaking') }} 
+{{ embed.img('blog/2016/cssconf/mia.jpg', 'Miriam speaking') }}
 
 I showed a wide range of uses for the underused Sass "map" data type –
 from simple site theme configurations, to data storage, and complex
@@ -425,7 +425,7 @@ functional programming. All the [slides] are online.
 
 ## Webpack and CSS
 
-{{ embed.img('blog/2016/cssconf/zg.jpg', 'Zach Green speaking') }} 
+{{ embed.img('blog/2016/cssconf/zg.jpg', 'Zach Green speaking') }}
 
 [Zach Green] walked us through his [Webpack] setup. I missed most of
 this, recovering from my own talk.
@@ -437,7 +437,7 @@ this, recovering from my own talk.
 
 ## It's Time To Ditch the Grid System
 
-{{ embed.img('blog/2016/cssconf/eh.jpg', 'Emily Hayman speaking') }} 
+{{ embed.img('blog/2016/cssconf/eh.jpg', 'Emily Hayman speaking') }}
 
 [Emily Hayman] demonstrated the ins and outs of using flexbox to build
 "content-driven" layouts, instead of forcing our content into grid
@@ -452,7 +452,7 @@ start.
 
 ## Bauhaus in the Browser
 
-{{ embed.img('blog/2016/cssconf/jm.jpg', 'Justin McDowell speaking') }} 
+{{ embed.img('blog/2016/cssconf/jm.jpg', 'Justin McDowell speaking') }}
 
 [Justin McDowell] used CSS transforms, grids, and more to bring
 [Bauhaus]-inspired art and layouts to the browser. It's a fun and
@@ -467,7 +467,7 @@ known as the "vertigo effect") in CSS.
 
 ## The Great SVG RetCon
 
-{{ embed.img('blog/2016/cssconf/ab.jpg', 'Amelia Bellamy-Royds speaking') }} 
+{{ embed.img('blog/2016/cssconf/ab.jpg', 'Amelia Bellamy-Royds speaking') }}
 
 [Amelia Bellamy-Royds] gave us a full overview of changes in [SVG2],
 along with a history of SVG. This talk is packed full of useful
@@ -481,7 +481,7 @@ information, if you are using SVG in any way.
 
 ## Coding is a Privilege
 
-{{ embed.img('blog/2016/cssconf/ar.jpg', 'speaking') }} 
+{{ embed.img('blog/2016/cssconf/ar.jpg', 'speaking') }}
 
 [Alisha Ramos] closed out the conference with a rousing talk about
 diversity (and privilege!) in tech. A few take-aways:

content/blog/2018/introducing-herman.md

@@ -133,8 +133,8 @@ the source. When a pattern changes, all the edits can be made in a
 single location, so documentation is more likely to stay up-to-date.
 
 [{{ embed.img(
-  src="blog/2017/herman-intro/sassdoc.jpg", 
-  alt="SassDoc screenshot", 
+  src="blog/2017/herman-intro/sassdoc.jpg",
+  alt="SassDoc screenshot",
   attrs={"class":"extend-small img-border img-shadow" }
 ) }}][SassDoc]
 
@@ -207,7 +207,7 @@ Herman provides display annotations for [colors] (`@colors`), [fonts]
 [{{ embed.img(
   src="blog/2017/herman-intro/sizes.jpg",
   alt="Herman size palettes",
-  attrs={"class":"extend-small img-border img-shadow"} 
+  attrs={"class":"extend-small img-border img-shadow"}
 ) }}][sizes]
 
 In order to display that data, you will need to export all your Sass

content/sample/images.md

@@ -1,16 +1,12 @@
 ---
 title: Responsive Images
-sub: Using nunjucks and markdown
+sub: Using nunjucks
 ---
 
-{% import 'utility.macros.njk' as utility %}
 {% import 'embed.macros.njk' as embed %}
 
 ## srcSet
 
-### markdown:
-![](/assets/images/blog/2016/trick-loops.jpg)
-
 ### embed (no width):
 {{ embed.img(
   src='blog/2016/trick-loops.jpg'

content/work/coachhub.md

@@ -227,7 +227,11 @@ allowing us to move quickly and efficiently. Integrating design and
 implementation helped us minimize time and money waste.
 
 <figure>
-<img src="{{ site.images }}work/coachhub/profiles.png" class="extend-full" alt="" /><figcaption>Starting with designs for the smallest, mobile screens sizes helped clarify and prioritize relevant information for each user.</figcaption>
+{{ embed.img(
+  src="work/coachhub/profiles.png",
+  attrs={"class":"extend-full"}
+) }}
+<figcaption>Starting with designs for the smallest, mobile screens sizes helped clarify and prioritize relevant information for each user.</figcaption>
 </figure>
 
 <figure>
@@ -245,15 +249,11 @@ adjusting UX design along the way, ensuring that CoachHub would be
 useful and relevant to users and partners.
 
 <figure>
-<<<<<<< HEAD
 {{ embed.img(
   src="work/coachhub/calendars.jpg",
   attrs={"class":"extend-large"}
 ) }}
 <figcaption>As we observed users navigating the app, it became clear that the appointment calendar needed distinct views and interactions for coaches and clients.</figcaption>
-=======
-<img src="{{ site.images }}work/coachhub/calendars.png" class="extend-large" alt="" /><figcaption>As we observed users navigating the app, it became clear that the appointment calendar needed distinct views and interactions for coaches and clients.</figcaption>
->>>>>>> main
 </figure>
 
 ### Accessibility

jest.config.js

@@ -23,7 +23,7 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ['src/filters/**/*.js'],
+  collectCoverageFrom: ['src/filters/**/*.js', '!src/filters/images.js'],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',