Update render files.

Author: chrisspiegl

assets/images.11ty.js

@@ -1,3 +1,119 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4c840f634e3c59f4ab713f321f1f126f7a9e88877ef0c2eff715760742308a27
-size 2936
+const path = require("path")
+const util = require("util")
+const glob = require("glob")
+const sharp = require("sharp")
+const mkdirp = require("mkdirp")
+
+const outputPath = `_site/assets/images/`
+
+const resizeConf = {
+  sizes: [
+    {
+      width: 320,
+      rename: { suffix: "-320w" },
+    },
+    {
+      width: 640,
+      rename: { suffix: "-640w" },
+    },
+    {
+      width: 1280,
+      rename: { suffix: "-1280w" },
+    },
+    {
+      width: 1920,
+      rename: { suffix: "-1920w" },
+    },
+    {
+      width: 3840,
+      rename: { suffix: "-3840w" },
+    },
+  ],
+  jpegOptions: {
+    quality: 80,
+    progressive: true,
+    withMetadata: true,
+    force: false,
+    //   errorOnUnusedImage: false,
+    //   errorOnEnlargement: false
+  },
+  webpOptions: {
+    quality: 80,
+    withMetadata: true,
+    force: true,
+  },
+  pngOptions: {
+    compressionLevel: 8,
+    force: false,
+  },
+}
+
+module.exports = class {
+  async data() {
+    const filePath = path.join(__dirname, `/images/`)
+    return {
+      permalink: `/assets/images/images.json`,
+      eleventyExcludeFromCollections: true,
+      filePath,
+    }
+  }
+
+  async loadImages(imgFolder) {
+    const cwd = path.resolve(imgFolder.file)
+    const getImages = util.promisify(glob)
+    const processedImages = []
+
+    const imgs = await getImages("**/*(*.jpg|*.png|*.gif)", { cwd: cwd })
+    const imgsRendered = await getImages("**/*(*.jpg|*.png|*.gif)", { cwd: outputPath })
+
+    imgs.forEach(function (img) {
+      const ext = path.extname(img)
+      const base = path.basename(img, ext)
+      const dir = path.dirname(img)
+
+      mkdirp.sync(path.join(outputPath, dir))
+
+      if (!imgsRendered.includes(img)) {
+        // console.log(`PASS THROUGH MASTER FOR ${img}`)
+        let passThroughImg = sharp(imgFolder.file + img)
+        passThroughImg.toFile(path.join(outputPath, dir, base + ext))
+      } else {
+        // console.log(`FOUND MASTER FOR ${img}`)
+      }
+
+
+      const image = sharp(imgFolder.file + img)
+      image
+      .jpeg(resizeConf.jpegOptions)
+      .png(resizeConf.pngOptions)
+      .webp(resizeConf.webpOptions)
+      resizeConf.sizes.forEach(function (size) {
+        const newPath = path.join(dir, base + size.rename.suffix + ext)
+        const newPathOutput = path.join(outputPath, newPath)
+        if (imgsRendered.includes(newPath)) {
+          // console.log(`FOUND RESIZED IMAGE FOR ${newPath}`);
+          return;
+        }
+        // console.log(`RENDERING NEW RESIZED IMAGE FOR ${newPath}`);
+        const resized = image.resize({
+          width: size.width,
+          withoutEnlargement: true,
+          kernel: "lanczos2",
+        })
+        resized.toFile(newPathOutput);
+      })
+
+      processedImages.push(img)
+    })
+
+    return JSON.stringify(processedImages, null, "\t")
+  }
+
+  async render({ filePath }) {
+    try {
+      return await this.loadImages({ file: filePath })
+    } catch (err) {
+      throw new Error(err)
+    }
+  }
+}

assets/styles.11ty.js

@@ -1,3 +1,118 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:704cddb384430aff341d8ace1d21055a9d2c4aa62d2110cd14b7491ffda5577b
-size 3033
+// Shamelessly modified from Eleventastic:
+// https://github.com/maxboeck/eleventastic
+
+const path = require("path")
+const sass = require("sass")
+const CleanCSS = require("clean-css")
+const cssesc = require("cssesc")
+
+const isProd = process.env.ELEVENTY_ENV === "production"
+
+// main entry point name
+const fileName = "style.scss"
+
+module.exports = class {
+  async data() {
+    const filePath = path.join(__dirname, `/scss/${fileName}`)
+    return {
+      permalink: '/assets/style.css',
+      eleventyExcludeFromCollections: true,
+      layout: 'blank',
+      filePath,
+    }
+  }
+
+  // Compile Sass to CSS,
+  // Embed Source Map in Development
+  async compile(config) {
+    return new Promise((resolve, reject) => {
+      if (!isProd) {
+        config.sourceMap = true
+        config.sourceMapEmbed = true
+        config.outputStyle = "expanded"
+      }
+
+      const result = sass.renderSync(config)
+      return resolve(result.css.toString())
+    })
+  }
+
+  // Minify & Optimize with CleanCSS in Production
+  async minify(css) {
+    return new Promise((resolve, reject) => {
+      if (!isProd) {
+        resolve(css)
+      }
+      const minified = new CleanCSS().minify(css)
+      if (!minified.styles) {
+        return reject(minified.error)
+      }
+      resolve(minified.styles)
+    })
+  }
+
+  // display an error overlay when CSS build fails.
+  // this brilliant idea is taken from Mike Riethmuller / Supermaya
+  // @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-scss.js
+  renderError(error) {
+    return `
+        /* Error compiling stylesheet */
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            font-family: monospace;
+            font-size: 1.25rem;
+            line-height:1.5;
+        }
+        body::before {
+            content: '';
+            background: #000;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.7;
+            position: fixed;
+        }
+        body::after {
+            content: '${cssesc(error)}';
+            white-space: pre;
+            display: block;
+            top: 0;
+            padding: 30px;
+            margin: 50px;
+            width: calc(100% - 100px);
+            color:#721c24;
+            background: #f8d7da;
+            border: solid 2px red;
+            position: fixed;
+        }`
+  }
+
+  // render the CSS file
+  async render({filePath}) {
+    try {
+      const css = await this.compile({ file: filePath })
+      const result = await this.minify(css)
+      return result
+    } catch (err) {
+      // if things go wrong
+      if (isProd) {
+        // throw and abort in production
+        throw new Error(err)
+      } else {
+        // otherwise display the error overly
+        console.error(err)
+        const msg = err.formatted || err.message
+        return this.renderError(msg)
+      }
+    }
+  }
+}