adding different delivery types for images

Author: colbyfayock

manifest.yml

@@ -1 +1,9 @@
-name: netlify-plugin-cloudinary
+name: netlify-plugin-cloudinary
+inputs:
+  - name: deliveryType
+    required: false
+    description: "The method in which Cloudinary stores and delivers images (Ex: fetch, upload)"
+    default: "fetch"
+  - name: uploadPreset
+    required: false
+    description: "Defined set of asset upload defaults in Cloudinary"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "netlify-plugin-cloudinary",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -13,8 +13,10 @@
   },
   "license": "MIT",
   "dependencies": {
+    "cloudinary": "^1.27.1",
     "fs": "^0.0.1-security",
     "glob": "^7.2.0",
-    "jsdom": "^18.1.1"
+    "jsdom": "^18.1.1",
+    "path": "^0.12.7"
   }
 }

src/index.js

@@ -1,34 +1,95 @@
 const glob = require('glob');
 const fs = require('fs').promises;
+const path = require('path');
 const { JSDOM } = require('jsdom');
+const cloudinary = require('cloudinary').v2;
 
-const CLOUD_NAME = 'colbycloud';
+/**
+ * TODO
+ * - Track uploads to avoid uploading same image multiple times
+ */
 
 module.exports = {
 
-  async onPostBuild({ constants }) {
+  async onPostBuild({ constants, inputs }) {
     const { PUBLISH_DIR } = constants;
+    const { deliveryType, uploadPreset } = inputs;
 
-    const pages = glob.sync(`${PUBLISH_DIR}/**/*.html`);
+    const cloudName = process.env.CLOUDINARY_CLOUD_NAME;
+    const apiKey = process.env.CLOUDINARY_API_KEY;
+    const apiSecret = process.env.CLOUDINARY_API_SECRET;
+
+    if ( !cloudName ) {
+      throw new Error('Cloudinary Cloud Name required. Please use environment variable CLOUDINARY_CLOUD_NAME');
+    }
 
+    cloudinary.config({
+      cloud_name: cloudName,
+      api_key: apiKey,
+      api_secret: apiSecret
+    });
+
+    const pages = glob.sync(`${PUBLISH_DIR}/**/*.html`);
 
     for ( const page of pages ) {
       const html = await fs.readFile(page, 'utf-8');
       const dom = new JSDOM(html);
       const images = Array.from(dom.window.document.querySelectorAll('img'));
 
       for ( const $img of images ) {
-        const imgSrc = $img.getAttribute('src');
-        let cloudinarySrc = imgSrc
+        let imgSrc = $img.getAttribute('src');
+        let cloudinarySrc;
+
+        if ( deliveryType === 'fetch' ) {
+          imgSrc = determineRemoteUrl(imgSrc);
 
-        if ( !imgSrc.startsWith('http') ) {
-          if ( !imgSrc.startsWith('/') ) {
-            cloudinarySrc = `/${cloudinarySrc}`;
+          cloudinarySrc = cloudinary.url(imgSrc, {
+            type: deliveryType,
+            secure: true,
+            transformation: [
+              {
+                fetch_format: 'auto',
+                quality: 'auto'
+              }
+            ]
+          });
+        } else if ( deliveryType === 'upload' ) {
+
+          if ( !isRemoteUrl(imgSrc) ) {
+            imgSrc = path.join(PUBLISH_DIR, imgSrc);
           }
-          cloudinarySrc = `${process.env.DEPLOY_PRIME_URL}${cloudinarySrc}`;
-        }
 
-        cloudinarySrc = `https://res.cloudinary.com/${CLOUD_NAME}/image/fetch/${cloudinarySrc}`;
+          let results;
+          
+          if ( apiKey && apiSecret ) {
+            try {
+              results = await cloudinary.uploader.upload(imgSrc);
+            } catch(e) {
+              console.log('e', e)
+            }
+          } else if ( uploadPreset ) {
+            try {
+              results = await cloudinary.uploader.unsigned_upload(imgSrc, uploadPreset);
+            } catch(e) {
+              console.log('e', e)
+            }
+          } else {
+            throw new Error(`To use deliveryType ${deliveryType}, please use an uploadPreset for unsigned requests or an API Key and Secret for signed requests.`);
+          }
+
+          const { public_id } = results;
+
+          cloudinarySrc = cloudinary.url(public_id, {
+            secure: true,
+            transformation: [
+              {
+                fetch_format: 'auto',
+                quality: 'auto'
+              }
+            ]
+          });
+
+        }
 
         $img.setAttribute('src', cloudinarySrc)
 
@@ -37,4 +98,30 @@ module.exports = {
     }
   }
 
+}
+
+/**
+ * isRemoteUrl
+ */
+
+function isRemoteUrl(path) {
+  return path.startsWith('http');
+}
+
+/** 
+ * determineRemoteUrl
+ */
+
+function determineRemoteUrl(path) {
+  if ( isRemoteUrl(path) ) return path;
+
+  let url = path;
+
+  if ( !path.startsWith('/') ) {
+    url = `/${url}`;
+  }
+  
+  url = `${process.env.DEPLOY_PRIME_URL}${url}`;
+
+  return url;
 }

yarn.lock

@@ -65,6 +65,21 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
+cloudinary-core@^2.10.2:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.12.0.tgz#fe20231e7bf6a52116c61a2a03c04fcc60b968a3"
+  integrity sha512-EXvnWuq3Ah6pZHB2vEfkrJ4tCGlccZo3xsmt1f+bmrB53jU42ZrnX+v8xKRMot9c/STSO7GPbxbhJQ/z/xRazg==
+
+cloudinary@^1.27.1:
+  version "1.27.1"
+  resolved "https://registry.yarnpkg.com/cloudinary/-/cloudinary-1.27.1.tgz#41abace12827dd1edc06ff511d8da2e261b3845f"
+  integrity sha512-NrSVdzD2yJUMwL4UTfOjlq+bkc88SaNoZjhibLnpI40c46vfIlz2Y77R9HfgYIQ1Lx/k+U1WKZuiQ5Z2Wd2Dsg==
+  dependencies:
+    cloudinary-core "^2.10.2"
+    core-js "3.6.5"
+    lodash "^4.17.11"
+    q "^1.5.1"
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -77,6 +92,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
+[email protected]:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -239,6 +259,11 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+[email protected]:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
 is-potential-custom-element-name@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
@@ -285,6 +310,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lodash@^4.17.11:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 [email protected]:
   version "1.51.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
@@ -343,11 +373,24 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+process@^0.11.1:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
 psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -358,6 +401,11 @@ punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+q@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
 "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -408,6 +456,13 @@ universalify@^0.1.2:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"