update docs for url builder

Author: Maya Shavin

package.json

@@ -18,7 +18,6 @@
     "pretest:ci": "yarn pretest",
     "test:ci": "lerna run test:ci --stream",
     "prettier": "yarn prettier --write .",
-    "build:demo": "npm --prefix packages/demo run build",
     "changelog": "node scripts/changelog.js"
   },
   "author": "Maya Shavin <dpnminh@gmail.com>",

packages/url/README.md

@@ -1,9 +1,25 @@
 # `cloudinary-build-url`
 
+![Cloudinary URL Builder](https://res.cloudinary.com/mayashavin/image/upload/v1605534519/logos/logo-light.png)
+
 > The lighter URL builder API for Cloudinary with all features in TypeScript.
 
 By default, `f_auto` (auto format per browser) and `q_auto` (auto quality per device) are enabled. And all the urls are generated as secured HTTPS format, unless user states otherwise.
 
+[📖 Documentation]()
+
+## Installation
+
+```bash
+yarn add cloudinary-build-url
+```
+
+or 
+
+```bash
+npm i cloudinary-build-url
+```
+
 ## Usage
 
 ### Build a delivery url for image

packages/url/__tests__/transformers.test.ts

@@ -13,8 +13,7 @@ describe('Modifiers', () => {
       }
 
       expect(transform(options)).toEqual([
-        'c_scale,w_500,h_500',
-        'ar_16:9',
+        'c_scale,w_500,h_500,ar_16:9',
       ])
     })
 
@@ -38,8 +37,7 @@ describe('Modifiers', () => {
       }
 
       expect(transform(options)).toEqual([
-        'c_scale,w_500,h_500',
-        'ar_16:9',
+        'c_scale,w_500,h_500,ar_16:9',
         ['br_12','e_grayscale'],
         ['bo_1px_dashed_#fff', 'e_pixelate']
       ])

packages/url/__tests__/url.test.ts

@@ -127,10 +127,10 @@ describe('Url', () => {
         resize: {
           width: 500,
           type: 'scale',
+          aspectRatio: '16:9',
           height: 500,
         },
-        aspectRatio: '16:9',
-      })).toBe('https://res.cloudinary.com/demo/image/upload/c_scale,w_500,h_500,q_auto,ar_16:9,f_auto/v1/example')
+      })).toBe('https://res.cloudinary.com/demo/image/upload/c_scale,w_500,h_500,ar_16:9,q_auto,f_auto/v1/example')
     })
 
     it('should return fetch delivery url', () => {
@@ -143,9 +143,9 @@ describe('Url', () => {
           width: 500,
           type: 'scale',
           height: 500,
+          aspectRatio: '16:9',
         },
-        aspectRatio: '16:9',
-    })).toBe('https://res.cloudinary.com/demo/image/fetch/c_scale,w_500,h_500,q_auto,ar_16:9,f_auto/v1/example')
+    })).toBe('https://res.cloudinary.com/demo/image/fetch/c_scale,w_500,h_500,ar_16:9,q_auto,f_auto/v1/example')
     })
 
     it('should return fetch deliver url with target format', () => {
@@ -157,10 +157,10 @@ describe('Url', () => {
           width: 500,
           type: 'scale',
           height: 500,
+          aspectRatio: '16:9',
         },
-        aspectRatio: '16:9',    
         format: 'png'
-      })).toBe('https://res.cloudinary.com/demo/image/fetch/c_scale,w_500,h_500,q_auto,ar_16:9,f_png/example')
+      })).toBe('https://res.cloudinary.com/demo/image/fetch/c_scale,w_500,h_500,ar_16:9,q_auto,f_png/example')
     })
 
     it('should return fetch deliver url with chained transformations', () => {
@@ -171,12 +171,12 @@ describe('Url', () => {
           width: 500,
           type: 'scale',
           height: 500,
+          aspectRatio: '16:9',
         },
-        aspectRatio: '16:9',
         chaining: [{
           effect: 'grayscale'
         }]
-      })).toBe('https://res.cloudinary.com/demo/image/upload/c_scale,w_500,h_500,q_auto,ar_16:9,f_auto/e_grayscale/example')
+      })).toBe('https://res.cloudinary.com/demo/image/upload/c_scale,w_500,h_500,ar_16:9,q_auto,f_auto/e_grayscale/example')
     })
   })
 

packages/url/lib/constants.ts

@@ -67,7 +67,7 @@ export const TRANSFORMERS = {
   rotate: 'a',
   audioCodec: 'ac',
   audioFrequency: 'af',
-  aspectRatio: 'ar',
+  // aspectRatio: 'ar',
   background: 'b',
   bitRate: 'br',
   // border: 'bo', // Border: { width:, height:, type:, color: }
@@ -83,8 +83,8 @@ export const TRANSFORMERS = {
   dpr: 'dpr',
   // else: '',
   // endIf: '',
-  endOffset: 'eo',
-  // fallbackContent: '', //to pay attention
+  endOffset: 'eo', //to remove
+  // fallbackContent: '',
   format: 'f',
   // flags: 'fl',
   gravity: 'g',
@@ -109,7 +109,7 @@ export const TRANSFORMERS = {
   // sourceTransformation,
   startOffset: 'so',
   streamingProfile: 'sp',
-  // transformation: 't',
+  transformation: 't',
   underlay: 'u',
   // variable,
   // variables,

packages/url/lib/transformers/format.ts

@@ -5,13 +5,13 @@ import { rawTransformation } from './rawTransformation'
 export type Transformation = Array<string | string[]>
 
 export const getResize = (options):string => {
-  const hasResize = options.resize || options.width || options.height
+  const hasResize = options.resize || options.width || options.height || options.aspectRatio
 
   if (!hasResize) return ''
 
   const { resize } = require('./resize')
 
-  return resize(options.resize || { width: options.width, height: options.height, type: options.crop })
+  return resize(options.resize || { width: options.width, height: options.height, type: options.crop, aspectRatio: options.aspectRatio })
 }
 
 export const getBorder = (options):string => {

packages/url/lib/transformers/index.ts

@@ -3,13 +3,15 @@ export type ResizeType = 'imaggaScale' | 'imaggaCrop' | 'crop' | 'fill' | 'scale
 export interface Resize {
   type?: ResizeType, 
   width?: number | string, 
-  height?: number | string
+  height?: number | string,
+  aspectRatio?: string,
 }
 
-export const resize = ({ type, width, height }: Resize) => {
+export const resize = ({ type, width, height, aspectRatio }: Resize) => {
   const w = width ? `w_${width}` : ''
   const h = height ? `h_${height}` : ''
   const crop = type ? `c_${type}` : ''
+  const ar = aspectRatio ? `ar_${aspectRatio}` : ''
 
-  return [ crop, w, h ].filter(Boolean).join()
+  return [ crop, w, h, ar ].filter(Boolean).join()
 }

packages/url/lib/transformers/resize.ts

@@ -40,32 +40,30 @@ export interface TransformerOption {
   colorSpace?: string,
   customFunction?: CustomFunction,
   defaultImage?: string,
-  delay?: string | number,
-  density?: string,
-  duration?: string | number,
+  delay?: number,
+  density?: number,
   dpr?: string | number,
   else?: string,
   endIf?: string,
-  fallbackContent?: string,
   format?: string,
   fetchFormat?: string,
   gravity?: string,
   if?: string,
   flags?: string | string[],
-  ocr?: string,
   opacity?: number,
   overlay?: string,
   page?: string,
   prefix?: string,
   quality?: string,
-  radius?: number,
+  radius?: number | string,
   rawTransformation?: string,
+  transformation?: string,
   chaining?: TransformerOption[],
   underlay?: string,
   variable?: string,
   variables?: string,
-  x?: string | number,
-  y?: string | number,
+  x?: number,
+  y?: number,
   zoom?: string | number
 }
 
@@ -79,6 +77,9 @@ export interface TransformerVideoOption extends TransformerOption{
   poster?: string,
   sourceTypes?: string[],
   videoCodec?: string,
+  duration?: string | number,
   videoSampling?: string
+  fallbackContent?: string,
+  ocr?: string,
 }
 

packages/url/lib/types/CldOptions.ts

@@ -35,13 +35,14 @@
     "@types/jest": "^26.0.15",
     "@types/node": "^14.14.7",
     "jest": "^26.6.3",
+    "jest-html-reporters": "^2.1.0",
     "ts-jest": "^26.4.4",
     "typescript": "^4.0.5"
   },
   "bugs": {
     "url": "https://github.com/mayashavin/cloudinary-api/issues"
   },
-  "homepage": "https://github.com/mayashavin/cloudinary-api/packages/url#readme",
+  "homepage": "https://github.com/mayashavin/cloudinary-api/tree/main/packages/url#README",
   "publishConfig": {
     "access": "public"
   },