more abstraction and organization, adding tests

Author: colbyfayock

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.env

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFiles: ['dotenv/config'],
+}

package.json

@@ -19,6 +19,7 @@
     "node-fetch": "2"
   },
   "devDependencies": {
+    "dotenv": "^10.0.0",
     "jest": "^27.4.3"
   }
 }

src/index.js

@@ -1,8 +1,7 @@
 const fs = require('fs').promises;
 const glob = require('glob');
-const { JSDOM } = require('jsdom');
 
-const { getCloudinary, getCloudinaryUrl } = require('./lib/cloudinary');
+const { getCloudinary, updateHtmlImagesToCloudinary } = require('./lib/cloudinary');
 
 /**
  * TODO
@@ -39,45 +38,27 @@ module.exports = {
     // Find all HTML source files in the publish directory
 
     const pages = glob.sync(`${PUBLISH_DIR}/**/*.html`);
-    const errors = [];
-
-    for ( const page of pages ) {
-      const html = await fs.readFile(page, 'utf-8');
-      const dom = new JSDOM(html);
-
-      // Loop through all images found in the DOM and swap the source with
-      // a Cloudinary URL
-
-      const images = Array.from(dom.window.document.querySelectorAll('img'));
-
-      for ( const $img of images ) {
-        let imgSrc = $img.getAttribute('src');
-
-        try {
-          const cloudinarySrc = await getCloudinaryUrl({
-            apiKey,
-            apiSecret,
-            deliveryType,
-            folder,
-            path: imgSrc,
-            publishDir: PUBLISH_DIR,
-            uploadPreset,
-          });
-  
-          $img.setAttribute('src', cloudinarySrc)
-        } catch(e) {
-          const { error } = e;
-          errors.push({
-            imgSrc,
-            message: e.message || error.message
-          });
-          continue;
-        }
-        
+
+    const results = await Promise.all(pages.map(async page => {
+      const sourceHtml = await fs.readFile(page, 'utf-8');
+
+      const { html, errors } = await updateHtmlImagesToCloudinary(sourceHtml, {
+        deliveryType,
+        uploadPreset,
+        folder,
+        localDir: PUBLISH_DIR,
+        remoteHost: process.env.DEPLOY_PRIME_URL
+      });
+
+      await fs.writeFile(page, html);
+
+      return {
+        page,
+        errors
       }
+    }));
 
-      await fs.writeFile(page, dom.serialize());
-    }
+    const errors = results.filter(({ errors }) => errors.length > 0);
 
     if ( errors.length > 0) {
       console.log(`Done with ${errors.length} errors...`);

src/lib/cloudinary.js

@@ -1,6 +1,7 @@
 const crypto = require('crypto');
 const path = require('path');
 const fetch = require('node-fetch');
+const { JSDOM } = require('jsdom');
 const cloudinary = require('cloudinary').v2;
 
 const { isRemoteUrl, determineRemoteUrl } = require('./util');
@@ -15,28 +16,62 @@ function getCloudinary() {
 
 module.exports.getCloudinary = getCloudinary;
 
+/**
+ * createPublicId
+ */
+
+async function createPublicId({ path: filePath } = {}) {
+  let hash = crypto.createHash('md5');
+
+  const { name: imgName } = path.parse(filePath);
+
+  if ( !isRemoteUrl(filePath) ) {
+    hash.update(filePath);
+  } else {
+    const response = await fetch(filePath);
+    const buffer = await response.buffer();
+    hash.update(buffer);
+  }
+
+  hash = hash.digest('hex');
+
+  return `${imgName}-${hash}`
+}
+
+module.exports.createPublicId = createPublicId;
+
 /**
  * getCloudinaryUrl
  */
 
 async function getCloudinaryUrl(options = {}) {
   const {
-    apiKey,
-    apiSecret,
     deliveryType,
     folder,
     path: filePath,
-    publishDir,
+    localDir,
+    remoteHost,
     uploadPreset,
   } = options;
 
+  const { cloud_name: cloudName, api_key: apiKey, api_secret: apiSecret } = cloudinary.config();
+  const canSignUpload = apiKey && apiSecret;
+
+  if ( !cloudName ) {
+    throw new Error('Cloudinary Cloud Name required.');
+  }
+
+  if ( deliveryType === 'upload' && !canSignUpload && !uploadPreset ) {
+    throw new Error(`To use deliveryType ${deliveryType}, please use an uploadPreset for unsigned requests or an API Key and Secret for signed requests.`);
+  }
+
   let fileLocation;
 
   if ( deliveryType === 'fetch' ) {
     // fetch allows us to pass in a remote URL to the Cloudinary API
     // which it will cache and serve from the CDN, but not store
 
-    fileLocation = determineRemoteUrl(filePath);
+    fileLocation = determineRemoteUrl(filePath, remoteHost);
   } else if ( deliveryType === 'upload' ) {
     // upload will actually store the image in the Cloudinary account
     // and subsequently serve that stored image
@@ -48,7 +83,7 @@ async function getCloudinaryUrl(options = {}) {
     let fullPath = filePath;
 
     if ( !isRemoteUrl(fullPath) ) {
-      fullPath = path.join(publishDir, fullPath);
+      fullPath = path.join(localDir, fullPath);
     }
 
     const id = await createPublicId({
@@ -57,28 +92,29 @@ async function getCloudinaryUrl(options = {}) {
 
     const uploadOptions = {
       folder,
-      public_id: id
+      public_id: id,
+      overwrite: false
+    }
+
+    if ( uploadPreset ) {
+      uploadOptions.upload_preset = uploadPreset;
     }
 
     let results;
 
-    if ( apiKey && apiSecret ) {
+    if ( canSignUpload ) {
       // We need an API Key and Secret to use signed uploading
 
       results = await cloudinary.uploader.upload(fullPath, {
-        ...uploadOptions,
-        overwrite: false
+        ...uploadOptions
       });
-    } else if ( uploadPreset ) {
+    } else {
       // If we want to avoid signing our uploads, we don't need our API Key and Secret,
       // however, we need to provide an uploadPreset
 
       results = await cloudinary.uploader.unsigned_upload(fullPath, uploadPreset, {
         ...uploadOptions
-        // Unsigned uploads default to overwrite: false
       });
-    } else {
-      throw new Error(`To use deliveryType ${deliveryType}, please use an uploadPreset for unsigned requests or an API Key and Secret for signed requests.`);
     }
 
     // Finally use the stored public ID to grab the image URL
@@ -104,25 +140,55 @@ async function getCloudinaryUrl(options = {}) {
 module.exports.getCloudinaryUrl = getCloudinaryUrl;
 
 /**
- * createPublicId
+ * updateHtmlImagesToCloudinary
  */
 
-async function createPublicId({ path: filePath } = {}) {
-  let hash = crypto.createHash('md5');
+async function updateHtmlImagesToCloudinary(html, options = {}) {
+  const {
+    deliveryType,
+    uploadPreset,
+    folder,
+    localDir,
+    remoteHost
+  } = options;
 
-  const { name: imgName } = path.parse(filePath);
+  const errors = [];
+  const dom = new JSDOM(html);
 
-  if ( !isRemoteUrl(filePath) ) {
-    hash.update(filePath);
-  } else {
-    const response = await fetch(filePath);
-    const buffer = await response.buffer();
-    hash.update(buffer);
-  }
+  // Loop through all images found in the DOM and swap the source with
+  // a Cloudinary URL
 
-  hash = hash.digest('hex');
+  const images = Array.from(dom.window.document.querySelectorAll('img'));
 
-  return `${imgName}-${hash}`
+  for ( const $img of images ) {
+    let imgSrc = $img.getAttribute('src');
+
+    try {
+      const cloudinarySrc = await getCloudinaryUrl({
+        deliveryType,
+        folder,
+        path: imgSrc,
+        localDir,
+        uploadPreset,
+        remoteHost
+      });
+
+      $img.setAttribute('src', cloudinarySrc)
+    } catch(e) {
+      const { error } = e;
+      errors.push({
+        imgSrc,
+        message: e.message || error.message
+      });
+      continue;
+    }
+
+  }
+
+  return {
+    html: dom.serialize(),
+    errors
+  }
 }
 
-module.exports.createPublicId = createPublicId;
+module.exports.updateHtmlImagesToCloudinary = updateHtmlImagesToCloudinary;

src/lib/util.js

@@ -12,14 +12,14 @@ module.exports.isRemoteUrl = isRemoteUrl;
  * determineRemoteUrl
  */
 
-function determineRemoteUrl(url) {
+function determineRemoteUrl(url, host) {
   if ( isRemoteUrl(url) ) return url;
 
   if ( !url.startsWith('/') ) {
     url = `/${url}`;
   }
 
-  url = `${process.env.DEPLOY_PRIME_URL}${url}`;
+  url = `${host}${url}`;
 
   return url;
 }