Spicerack

bin/bake.js

@@ -28,6 +28,7 @@ const defaultConfig = {
   domain: undefined,
   embeds: 'embeds',
   entrypoints: 'scripts/app.js',
+  imageSrcSizes: undefined,
   input: process.cwd(),
   layouts: '_layouts',
   nunjucksVariables: undefined,
@@ -90,6 +91,7 @@ async function prepareConfig(inputOptions) {
   options.domain = resolver('domain');
   options.embeds = resolver('embeds');
   options.entrypoints = resolver('entrypoints');
+  options.imageSrcSizes = resolver('imageSrcSizes');
   options.input = resolver('input');
   options.layouts = resolver('layouts');
   options.nunjucksVariables = resolver('nunjucksVariables');

lib/engines/base.js

@@ -6,7 +6,6 @@ import chokidar from 'chokidar';
 import glob from 'fast-glob';
 
 // local
-import { getBasePath } from '../env.js';
 import { noop, outputFile } from '../utils.js';
 
 /**

lib/filters/srcSets.js

@@ -0,0 +1,23 @@
+import { Baker } from '../index.js';
+
+function maxstache(str, ctx) {
+  return str
+    .split(/\{|\}/)
+    .map((t, i) => (!(i % 2) ? t : ctx[t]))
+    .join('');
+}
+
+/**
+ * @param {number[]} sizes
+ * @param {Baker} instance
+ **/
+export function createSrcSetFilter(sizes, instance) {
+  return function createSrcSet(source) {
+    return sizes
+      .map((size) => {
+        const url = instance.getStaticPath(`${maxstache(source, { size })}`);
+        return `${url} ${size}w`;
+      })
+      .join(', ');
+  };
+}

lib/index.js

@@ -38,6 +38,7 @@
 import { NunjucksEngine } from './engines/nunjucks.js';
 import { RollupEngine } from './engines/rollup.js';
 import { SassEngine } from './engines/sass.js';
+import { createSrcSetFilter } from './filters/srcSets.js';
 
 const CROSSWALK_ALLOWED_ASSET_TYPES = [
   'img',
@@ -60,6 +61,7 @@
  * @property {string} data
  * @property {string} [domain]
  * @property {string} entrypoints
+ * @Property {{[key: string]: number[]}} imageSrcSizes
  * @property {string} input
  * @property {string} layouts
  * @property {{[key: string]: (...args) => unknown}} [nunjucksVariables]
@@ -83,6 +85,7 @@
     domain,
     embeds,
     entrypoints,
+    imageSrcSizes,
     input,
     layouts,
     nunjucksVariables,
@@ -190,10 +193,7 @@
     this.nunjucks.addCustomTag('inject', injectBlock);
 
     // create our static tag
-    const staticBlock = createStaticBlock(
-      this.input,
-      [this.assets, this.sass]
-    );
+    const staticBlock = createStaticBlock(this.input, [this.assets, this.sass]);
 
     // save a reference to our static block function for use elsewhere
     // TODO: refactor away in v1
@@ -211,6 +211,17 @@
     this.nunjucks.addCustomFilter('log', logFilter);
     this.nunjucks.addCustomFilter('jsonScript', jsonScriptFilter);
 
+    // Add image size src set filters
+    if (imageSrcSizes) {
+      Object.keys(imageSrcSizes).forEach((size) => {
+        const srcSetFilterName = size.charAt(0).toUpperCase() + size.slice(1);
+        this.nunjucks.addCustomFilter(
+          srcSetFilterName,
+          createSrcSetFilter(size, this)
+        );
+      });
+    }
+
     // if an object of custom nunjucks filters was provided, add them now
     if (nunjucksFilters) {
       this.nunjucks.addCustomFilters(nunjucksFilters);
@@ -320,7 +331,9 @@
       }
 
       if (!assetName) {
-        throw new Error('Crosswalk: Unable to process crowsswalk tsv/csv. Missing required \'assetName\' column.')
+        throw new Error(
+          "Crosswalk: Unable to process crowsswalk tsv/csv. Missing required 'assetName' column."
+        );
       }
 
       if (
@@ -359,9 +372,9 @@
             return;
           }
 
-          preppedData.assets[normalizedAssetType][normalizedAssetName][ext] =
-            this.getStaticPath(path);
-        });
+        preppedData.assets[normalizedAssetType][normalizedAssetName][ext] =
+          this.getStaticPath(path);
+      });
 
       return acc;
     }, preppedData);
@@ -411,7 +424,10 @@
           document.documentElement.clientHeight
         );
       });
-      await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, height: contentHeight });
+      await page.setViewport({
+        width: FIXED_FALLBACK_SCREENSHOT_WIDTH,
+        height: contentHeight,
+      });
 
       // store the fallback image in the _dist directory
       const screenshotEmbedDir = join(this.output, embedFilePath)