feat: 🎸 s3 support for display

Elderjs · Jun 6, 2021 · 7131ea5 · 7131ea5
1 parent 4a4f949
commit 7131ea5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 14 deletions.
diff --git a/packages/images/index.js b/packages/images/index.js
@@ -4,6 +4,7 @@ const path = require('path');
 const sharp = require('sharp');
 const fs = require('fs-extra');
 const imageStore = require('./utils/imageStore');
+const pluginHelpers = require('./utils/helpers');
 
 const imageFileTypes = ['jpg', 'jpeg', 'png'];
 const defaultWidths = [1280, 992, 768, 576, 400, 350, 200];
@@ -34,7 +35,7 @@ const processImages = async ({
   widths = defaultWidths,
   scales = defaultScales,
   s3,
-  debug = false,
+  debug,
 }) => {
   try {
     const WorkerNodes = require('worker-nodes');
@@ -85,6 +86,7 @@ const processImages = async ({
           height: original.info.height,
           format: original.info.format,
           original: s3Rel || file.rel, // if original is on s3 log it.
+          rel: file.rel,
           sizes: [],
         };
         // imageBuffer
@@ -238,7 +240,6 @@ const plugin = {
     vanillaLazyLocation: '/static/vanillaLazy.min.js', // vanillaLazy's location relative to the root of the site. The plugin will move it to your public folder for you.
   },
   init: async (plugin) => {
-    console.log(plugin);
     plugin.externalManifest = false;
 
     if (plugin.config.widths.length === 0) {
@@ -376,15 +377,17 @@ const plugin = {
     {
       hook: 'bootstrap',
       name: 'processImages',
-      description: 'Populate image store and make it available on the plugin.',
+      description:
+        'Populate image store and make it available on the plugin. Also make plugin internal helpers available.',
       priority: 99,
       run: async ({ plugin, helpers }) => {
         if (plugin.manifest) {
           plugin.imageStore = imageStore(plugin.manifest, plugin);
-          console.log(`elderjs-plugin-image: Done.`);
+          console.log(`elderjs-plugin-images: Done.`);
           return {
             helpers: {
               ...helpers,
+              ...pluginHelpers,
               images: plugin.imageStore,
             },
           };

diff --git a/packages/images/utils/getS3Params.js b/packages/images/utils/getS3Params.js
@@ -6,7 +6,5 @@ module.exports = (s3 = {}) => {
     S3_BUCKET_URL: s3['S3_BUCKET_URL'],
     USE_S3_HOSTING: s3['USE_S3_HOSTING'],
   };
-
-  console.log('getS3Params', s3, result);
   return result;
 };
diff --git a/packages/images/utils/helpers.js b/packages/images/utils/helpers.js
@@ -1,4 +1,4 @@
-function getSrcsets(maxWidth, fileSizes) {
+function getSrcsets({ maxWidth, fileSizes, key = 'relative' }) {
   const sizes = [];
   const srcsets = fileSizes.reduce(
     (out, cv) => {
@@ -8,8 +8,8 @@ function getSrcsets(maxWidth, fileSizes) {
 
       let thisSrcSet = out[cv.format][cv.width] || '';
       // let thisSrcSet = '';
-      if (cv.scale === 1) thisSrcSet = `${cv.relative}${thisSrcSet}`;
-      if (cv.scale === 2 && thisSrcSet.length) thisSrcSet = `${thisSrcSet}, ${cv.relative} 2x`;
+      if (cv.scale === 1) thisSrcSet = `${cv[key]}${thisSrcSet}`;
+      if (cv.scale === 2 && thisSrcSet.length) thisSrcSet = `${thisSrcSet}, ${cv[key]} 2x`;
       out[cv.format][cv.width] = thisSrcSet;
       return out;
     },

diff --git a/packages/images/utils/imageStore.js b/packages/images/utils/imageStore.js
@@ -19,7 +19,11 @@ const imageStore = (manifest, plugin) => {
 
         //todo title
 
-        const { sizes, srcsets } = getSrcsets(maxWidth, file.sizes);
+        const { sizes, srcsets } = getSrcsets({
+          maxWidth,
+          fileSizes: file.sizes,
+          key: plugin.config.s3 && plugin.config.s3.USE_S3_HOSTING ? 's3' : 'relative',
+        });
         const sources = getSources(sizes, srcsets);
 
         let picture = `<picture class="${classStr ? ` ${classStr}` : ''}">`;
@@ -54,9 +58,10 @@ const imageStore = (manifest, plugin) => {
         return pictureWithWrap;
       } catch (e) {
         if (e.message.includes("'sizes' of undefined")) {
-          throw new Error(`Cannot find source image with ${path}`);
+          console.log('manifest keys', Object.keys(manifest));
+          throw new Error(`Cannot find source image with ${path} in manifest. (logged above)`);
         } else {
-          throw new Error(e);
+          throw e;
         }
       }
     },

diff --git a/packages/images/workers/resize.js b/packages/images/workers/resize.js
@@ -33,6 +33,7 @@ const resize = async ({
   }
 
   let s3;
+  let s3Location;
 
   // check if we should use s3.
   const { AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, S3_BUCKET, S3_BUCKET_URL, USE_S3_HOSTING } = getS3Params(s3Params);
@@ -47,7 +48,7 @@ const resize = async ({
     publicLocation = `${S3_BUCKET_URL}${relative}`;
     cacheLocation = `${S3_BUCKET_URL}${relative}`;
 
-    if (USE_S3_HOSTING) relative = `${S3_BUCKET_URL}${relative}`;
+    s3Location = `${S3_BUCKET_URL}${relative}`;
   }
 
   let image;
@@ -120,7 +121,7 @@ const resize = async ({
           Bucket: S3_BUCKET,
           Key: relative.substr(1),
         });
-        console.log(`s3Response`, r);
+        if (debug) console.log(`s3Response`, r);
       } catch (e) {
         console.error(e);
       }
@@ -151,6 +152,9 @@ const resize = async ({
     out.width = out.width / scale;
   }
 
+  // support USE_S3_HOSTING
+  if (s3) out.s3 = s3Location;
+
   if (debug) console.log(`Completed ${relative}`, out);
 
   return out;