From db8bd389c1dc108d6e7da08df7b1295873938f6d Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Thu, 10 Feb 2022 21:07:25 +0100
Subject: [PATCH] Add colored placeholder for thumbnails

---
 .eleventy.js                   | 7 +++++--
 src/_includes/plugin.js        | 5 +++--
 src/api.11ty.js                | 1 +
 src/index.11ty.js              | 1 +
 src/sass/5-modules/plugin.scss | 3 ++-
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 07a1537..254227f 100755
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,5 @@
 const glob = require("glob-promise")
-const fs = require("fs")
+const fs = require("fs/promises")
 const { URL } = require("url")
 const sharpPlugin = require("eleventy-plugin-sharp")
 
@@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
 
     eleventyConfig.addCollection('plugins', async () => {
         const files = (await glob('plugins/*.json')).map(filename => {
-            return fs.promises.readFile(filename, { encoding: 'utf-8' })
+            return fs.readFile(filename, { encoding: 'utf-8' })
         })
         const plugins = await Promise.all(files)
         return plugins.map(JSON.parse).sort((a, b) => b.id - a.id)
@@ -30,6 +30,9 @@ module.exports = function (eleventyConfig) {
             return url;
         }
     });
+    eleventyConfig.addFilter("base64", async (url) => {
+        return fs.readFile(url, 'base64')
+    });
 
     eleventyConfig.addShortcode("titleGenerator", (title, site, pageUrl, pagination) => {
         let endTitle = `${site.name} • ${site.description}`
diff --git a/src/_includes/plugin.js b/src/_includes/plugin.js
index c01419c..754026b 100644
--- a/src/_includes/plugin.js
+++ b/src/_includes/plugin.js
@@ -28,9 +28,10 @@ module.exports = function (plugin) {
                         srcset="${plugin.imagePng.image92} 1x,
                                 ${plugin.imagePng.image184} 2x">
                     <img
-                        src="${plugin.image308}" alt="${plugin.title}"
-                        srcset="${plugin.image616} 2x"
+                        src="${plugin.imagePng.image308}" alt="${plugin.title}"
+                        srcset="${plugin.imagePng.image616} 2x"
                         width="308" height="195"
+                        style="background-image: url(data:image/png;base64,${plugin.bg});"
                         loading="lazy">
                 </picture>
             </a>
diff --git a/src/api.11ty.js b/src/api.11ty.js
index 1e61ad2..148c1d9 100644
--- a/src/api.11ty.js
+++ b/src/api.11ty.js
@@ -9,6 +9,7 @@ class Main {
         const list = (await Promise.all(data.collections.plugins.map(async plugin => {
             return {
                 ...plugin,
+                bg: await this.base64('public' + await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 1, height: 1 })))),
                 imageWebp: {
                     image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
                     image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
diff --git a/src/index.11ty.js b/src/index.11ty.js
index dc63eb2..4b11c49 100644
--- a/src/index.11ty.js
+++ b/src/index.11ty.js
@@ -18,6 +18,7 @@ class Main {
         const list = (await Promise.all(data.plugins.map(async plugin => {
             return card({
                 ...plugin,
+                bg: await this.base64('public' + await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 1, height: 1 })))),
                 imageWebp: {
                     image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
                     image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
diff --git a/src/sass/5-modules/plugin.scss b/src/sass/5-modules/plugin.scss
index d712921..ec9f236 100644
--- a/src/sass/5-modules/plugin.scss
+++ b/src/sass/5-modules/plugin.scss
@@ -9,7 +9,8 @@
 .plugin__visual img {
   width: 100%;
   font-size: 0;
-  background: #e8e7e6;
+  background-color: #e8e7e6;
+  background-size: 100%;
   border-radius: .5rem;
   box-shadow: 0 .1rem .3rem 0 lighten($color-primary, 32);
 }