feature: add test and demo

cloudinary-community · Oct 25, 2020 · d4a8185 · d4a8185
1 parent 291e6e7
commit d4a8185
Show file tree

Hide file tree

Showing 21 changed files with 778 additions and 135 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gridsome-plugin-cloudinary",
   "version": "0.0.1",
-  "description": "Gridsome plugin for using Cloudinary-Vue",
+  "description": "Cloudinary plugin for Gridsome",
   "main": "./src/gridsome.client.js",
   "private": true,
   "workspaces": [

diff --git a/packages/api/__tests__/api.test.js b/packages/api/__tests__/api.test.js
@@ -1,6 +1,6 @@
 "use strict";
 
-const api = require("..");
+const api = require("../lib/api");
 
 describe("api", () => {
   it("needs tests");

diff --git a/packages/api/lib/api.js b/packages/api/lib/api.js
@@ -55,7 +55,7 @@ class CloudinaryApi {
        * @returns {string} Returns the optimized delivery URL for the target image
       */    
       url: (publicId, options = {}) => {
-        return cld.url(publicId, getTransformationOptions(options))
+        return sdk.url(publicId, getTransformationOptions(options))
       },
       /**
        * Generate HTML Element tag for an image with transformation
@@ -64,7 +64,7 @@ class CloudinaryApi {
        * @returns {Object}
        */
       element: (publicId, options = {}) => {
-        return cld.imageTag(publicId, getTransformationOptions(options))
+        return sdk.imageTag(publicId, getTransformationOptions(options))
       },
       /**
        * 
@@ -73,7 +73,7 @@ class CloudinaryApi {
        * @returns {string} Returns the optimized delivery URL for the target image
        */
       fetchRemote: (url, options = {}) => {
-        return cld.url(url, getTransformationOptions({ ...options, type: 'fetch' }))
+        return sdk.url(url, getTransformationOptions({ ...options, type: 'fetch' }))
       }
     }  
 
@@ -85,7 +85,7 @@ class CloudinaryApi {
        * @returns {string} Returns the optimized delivery URL for the target video
       */  
       url(publicId, options) {
-        return cld.video_url(publicId, getTransformationOptions(options))
+        return sdk.video_url(publicId, getTransformationOptions(options))
       },
       /**
        * Generate HTML Element tag for an video with transformation
@@ -94,7 +94,7 @@ class CloudinaryApi {
        * @returns {Object}
        */
       element(publicId, options) {
-        return cld.videoTag(publicId, getTransformationOptions(options))
+        return sdk.videoTag(publicId, getTransformationOptions(options))
       },
       /**
        * Generate thumbnail image of a video based on transformations
@@ -106,7 +106,7 @@ class CloudinaryApi {
         const transformations = getTransformationOptions(options)
 
         return {
-          url: cld.video_thumbnail_url(publicId, transformations),
+          url: sdk.video_thumbnail_url(publicId, transformations),
         }
       } 
     }
@@ -182,8 +182,6 @@ module.exports = CloudinaryApi
 
 module.exports.DELIVERY_TYPES = DELIVERY_TYPES
 
-module.exports.withSnakeCaseKeys = sdk.Util.withSnakeCaseKeys
-
 module.exports.uploadToCloudinary = async (file, publicId, options = {}) => {};
 
 module.exports.CONSTANTS = options
diff --git a/packages/api/lib/utils/constants.js b/packages/api/lib/utils/constants.js
@@ -5,4 +5,9 @@ exports.DEFAULT_TRANS = {
  quality: 'auto'
 }
 
-exports.DEFAULT_KEYS = ["resourceType", "prefix", "tags", "maxResults", "type", "context"];
+exports.DEFAULT_RESOURCES_FIELDS = ["resourceType", "prefix", "tags", "maxResults", "context"];
+
+exports.RESOURCE_TYPES = {
+ IMAGE: 'image',
+ VIDEO: 'video'
+}
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -33,5 +33,8 @@
   "devDependencies": {
     "eslint": "^7.11.0"
   },
-  "gitHead": "d2769d55a67eadd72c52733e32fe9f90af2a92e7"
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "291e6e7ad6e034f523882276f8518a85e573b0f9"
 }
diff --git a/packages/demo/gridsome.config.js b/packages/demo/gridsome.config.js
@@ -1,22 +1,28 @@
 require('dotenv').config();
-// This is where project configuration and plugin options are located.
-// Learn more: https://gridsome.org/docs/config
-
-// Changes here require a server restart.
-// To restart press CTRL + C in terminal and run `gridsome develop`
 
 module.exports = {
-  siteName: 'Gridsome',
+  siteName: 'Gridsome - Cloudinary Source',
   plugins: [
     {
       use: '@mayas/gridsome-source-cld',
       options: {
         cloudName: process.env.CLOUDNAME,
         apiKey: process.env.API_KEY,
         apiSecret: process.env.API_SECRET,
-        resourceType: "upload",
-        prefix: "articles"
-      }
+        resourceOptions: {
+          type: "upload",
+          prefix: 'examples'
+        },
+        transformations: {
+          width: 300,
+          height: 300,
+          gravity: 'auto:subject',
+          crop: 'fill',
+        }
+      },
+    },
+    {
+      use: "gridsome-plugin-tailwindcss",
     }
   ]
 }
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -11,5 +11,11 @@
     "dotenv": "^8.2.0",
     "gridsome": "^0.7.0"
   },
-  "gitHead": "d2769d55a67eadd72c52733e32fe9f90af2a92e7"
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "291e6e7ad6e034f523882276f8518a85e573b0f9",
+  "devDependencies": {
+    "gridsome-plugin-tailwindcss": "^3.0.1"
+  }
 }
diff --git a/packages/demo/src/layouts/Default.vue b/packages/demo/src/layouts/Default.vue
@@ -1,15 +1,13 @@
 <template>
   <div class="layout">
-    <header class="header">
-      <strong>
-        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
-      </strong>
-      <nav class="nav">
-        <g-link class="nav__link" to="/">Home</g-link>
-        <g-link class="nav__link" to="/about/">About</g-link>
-      </nav>
+    <header class="header px-5 lg:px-56">
+      <g-link to="/" class="md:text-3xl font-semibold capitalize">{{ $static.metadata.siteName }}</g-link>
     </header>
     <slot/>
+    <footer class="mx-auto font-sm w-full text-center p-3">
+      <span>Built by <a href="https://mayashavin.com" target="_blank" rel="noopener noreferrer" class="underline text-indigo-700">Maya Shavin</a></span>
+      <span> © {{(new Date()).getFullYear()}}</span>
+    </footer>
   </div>
 </template>
 
@@ -23,25 +21,18 @@ query {
 
 <style>
 body {
-  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  @apply font-livvic;
   margin:0;
   padding:0;
   line-height: 1.5;
 }
 
 .layout {
-  max-width: 760px;
-  margin: 0 auto;
-  padding-left: 20px;
-  padding-right: 20px;
+  @apply mx-auto;
 }
 
 .header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  height: 80px;
+  @apply flex justify-between items-center mb-8 h-20 text-white bg-indigo-600;
 }
 
 .nav__link {

diff --git a/packages/demo/src/main.js b/packages/demo/src/main.js
@@ -3,7 +3,12 @@
 
 import DefaultLayout from '~/layouts/Default.vue'
 
-export default function (Vue, { router, head, isClient }) {
+export default function (Vue, { head }) {
   // Set default layout as a global component
   Vue.component('Layout', DefaultLayout)
+
+  head.link.push({
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Livvic:wght@400;600&display=swap'
+  })
 }
diff --git a/packages/demo/src/pages/Index.vue b/packages/demo/src/pages/Index.vue
@@ -1,27 +1,42 @@
 <template>
   <Layout>
-
-    <!-- Learn how to use images here: https://gridsome.org/docs/images -->
-    <g-image alt="Example image" src="~/favicon.png" width="135" />
-
-    <h1>Hello, world!</h1>
-
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
-    </p>
-
-    <p class="home-links">
-      <a href="https://gridsome.org/docs/" target="_blank" rel="noopener">Gridsome Docs</a>
-      <a href="https://github.com/gridsome/gridsome" target="_blank" rel="noopener">GitHub</a>
-    </p>
-
+    <div class="px-5 lg:px-56 mx-auto">
+      <h1 class="font-semibold px-1 text-2xl mb-5 text-pink-700">Images Gallery Demo</h1>
+      <p class="text-lg mb-5 px-1">
+        A demo <a href="https://gridsome.com" target="_blank" rel="noopener noreferrer" class="underline text-indigo-700">Gridsome</a> site, 
+        with optimized and transformed images served from <a href="https://cloudinary.com" target="_blank" class="underline text-indigo-700" rel="noopener noreferrer">Cloudinary</a>.
+      </p>
+      <ul class="flex flex-wrap">
+        <li v-for="image in images" :key="image.node.public_id" class="p-1">
+          <g-image :src="image.node.url" loading="lazy"/>
+        </li>
+      </ul>
+    </div>
   </Layout>
 </template>
+<page-query>
+query {
+  images: allCldMedia {
+    edges {
+      node {
+        public_id
+        format
+        url
+      }
+    }
+  }
+}  
+</page-query>
 
 <script>
 export default {
   metaInfo: {
     title: 'Hello, world!'
+  },
+  computed: {
+    images() {
+      return this.$page.images.edges
+    }
   }
 }
 </script>

diff --git a/packages/demo/tailwind.config.js b/packages/demo/tailwind.config.js
@@ -0,0 +1,30 @@
+module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+  purge: [],
+  theme: {
+    extend: {
+      colors: {
+        indigo: {
+          50: '#F7F8FD',
+          100: '#F0F1FB',
+          200: '#D8DCF4',
+          300: '#C1C7EE',
+          400: '#939EE1',
+          500: '#6474D4',
+          600: '#5A68BF',
+          700: '#3C467F',
+          800: '#2D345F',
+          900: '#1E2340',
+        },
+      },
+      fontFamily: {
+        livvic: ['Livvic', 'sans-serif']
+      }
+    },
+  },
+  variants: {},
+  plugins: [],
+}
diff --git a/packages/gs-cld-source/__tests__/gs-cld-source.test.js b/packages/gs-cld-source/__tests__/gs-cld-source.test.js
diff --git a/packages/gs-cld-source/__tests__/index.test.js b/packages/gs-cld-source/__tests__/index.test.js
@@ -0,0 +1,20 @@
+"use strict";
+
+const CloudinaryApi = require("../lib");
+
+describe("gs-cld-source", () => {
+  it("uses default options if no options is passed", () => {
+    const mockApi = {
+      loadSource: jest.fn()
+    }
+
+    const instance = new CloudinaryApi(mockApi)
+
+    expect(instance._options).toEqual({})
+
+    expect(instance._cld.config()).toEqual({
+      privateCdn: false,
+      secure: true
+    })
+  });
+});
diff --git a/packages/gs-cld-source/lib/gs-cld-source.js b/packages/gs-cld-source/lib/gs-cld-source.js