From 7131ea5ecafff68f21bf76d8c524219d2382406e Mon Sep 17 00:00:00 2001 From: Nick Reese Date: Sun, 6 Jun 2021 15:31:07 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20s3=20support=20for=20dis?= =?UTF-8?q?play?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/images/index.js | 11 +++++++---- packages/images/utils/getS3Params.js | 2 -- packages/images/utils/helpers.js | 6 +++--- packages/images/utils/imageStore.js | 11 ++++++++--- packages/images/workers/resize.js | 8 ++++++-- 5 files changed, 24 insertions(+), 14 deletions(-) diff --git a/packages/images/index.js b/packages/images/index.js index 26aea69..53408c1 100644 --- 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 index 727619c..bc5ddad 100644 --- 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 index 4dc5ed3..6a79010 100644 --- 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 index 7d6c590..98fdd3e 100644 --- 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 = ``; @@ -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 index 8c6df5e..68f0945 100644 --- 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;