Add an example for Border and fix code highlights

__docTemplate/src/tmpl/site/_layout.hbs

@@ -228,6 +228,7 @@
 	<script src="js/jquery.min.js"></script>
 	<script src="js/bootstrap.min.js"></script>
 	<script src="js/clipboard.min.js"></script>
+  <script src="js/prism.js"></script>
 	<script src="js/prism.min.js"></script>
 	<script src="js/template.min.js"></script>
 	{{#if options.search}}

__docTemplate/src/utils/docletHelper.js

@@ -384,4 +384,4 @@ exports.hasDetails = function (doclet) {
 	|| (doclet.tutorials && doclet.tutorials.length)
 	|| (doclet.see && doclet.see.length)
 	|| (doclet.todo && doclet.todo.length))
-};
+};

__docTemplate/template/tmpl.js

@@ -269,7 +269,7 @@ Handlebars.registerPartial("site/layout", this["tmpl"]["site/layout"] = Handleba
     + ((stack1 = (helpers.block || (depth0 && depth0.block) || alias2).call(alias1,"footer",{"name":"block","hash":{},"fn":container.program(53, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "	</footer>\r\n"
     + ((stack1 = helpers["if"].call(alias1,((stack1 = (depth0 != null ? depth0.config : depth0)) != null ? stack1.debug : stack1),{"name":"if","hash":{},"fn":container.program(60, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "	<script src=\"js/jquery.min.js\"></script>\r\n	<script src=\"js/bootstrap.min.js\"></script>\r\n	<script src=\"js/clipboard.min.js\"></script>\r\n	<script src=\"js/prism.min.js\"></script>\r\n	<script src=\"js/template.min.js\"></script>\r\n"
+    + "	<script src=\"js/jquery.min.js\"></script>\r\n	<script src=\"js/bootstrap.min.js\"></script>\r\n	<script src=\"js/clipboard.min.js\"></script>\r\n  <script src=\"js/prism.js\"></script>\r\n	<script src=\"js/prism.min.js\"></script>\r\n	<script src=\"js/template.min.js\"></script>\r\n"
     + ((stack1 = helpers["if"].call(alias1,((stack1 = (depth0 != null ? depth0.options : depth0)) != null ? stack1.search : stack1),{"name":"if","hash":{},"fn":container.program(62, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + ((stack1 = helpers.each.call(alias1,((stack1 = (depth0 != null ? depth0.options : depth0)) != null ? stack1.scripts : stack1),{"name":"each","hash":{},"fn":container.program(64, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "	"

__docTemplate/template/utils/docletHelper.js

@@ -384,4 +384,4 @@ exports.hasDetails = function (doclet) {
 	|| (doclet.tutorials && doclet.tutorials.length)
 	|| (doclet.see && doclet.see.length)
 	|| (doclet.todo && doclet.todo.length))
-};
+};

src/actions/border.ts

@@ -5,6 +5,7 @@ import {prepareColor} from "../internal/utils/prepareColor";
 import {SystemColors} from "../qualifiers/color";
 import RoundCornersAction from "./roundCorners/RoundCornersAction";
 
+
 /**
  * @summary action
  * @description Adds a solid border around an image or video.
@@ -13,23 +14,42 @@ import RoundCornersAction from "./roundCorners/RoundCornersAction";
  * {@link https://cloudinary.com/documentation/image_transformations#adding_image_borders | Adding image borders}
  * @memberOf Actions
  * @namespace Border
+ * @example
+ * import {Cloudinary} from "@cloudinary/base/instance/Cloudinary";
+ *
+ * const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
+ * const image = yourCldInstance.image('woman');
+ * image.border(
+ *  Border.solid(15, 'green'),
+ *  // Or alternatively
+ *  Border.solid().width(15).color('green')
+ * );
+ *
  */
-class Border extends Action {
+
+
+
+/**
+ * @memberOf Actions.Border
+ * @example
+ * // Used through a builder function Border.solid(), and not by creating a new instance
+ * import {Cloudinary} from "@cloudinary/base/instance/Cloudinary";
+ *
+ * const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
+ * const image = yourCldInstance.image('woman');
+ * image.border(
+ *  Border.solid(15, 'green'),
+ *  // Or alternatively
+ *  Border.solid().width(15).color('green')
+ * );
+ */
+class BorderAction extends Action {
   private borderWidth: number | string;
   private borderColor: string;
   private borderType: string;
   private _roundCorners: RoundCornersAction;
 
 
-  /**
-   * @summary action
-   * @memberOf Actions.Border
-   * @description Sets the style of the border.
-   * @return {Border}
-   */
-  static solid(width: number | string, color: SystemColors): Border {
-    return new Border('solid', color, width);
-  }
 
   /**
    * @description Adds a border of the specified type around an image or video.
@@ -46,9 +66,9 @@ class Border extends Action {
 
   /**
    * @description Sets the width of the border
-   * @param {number} borderWidth The width in pixels.
+   * @param {number | string} borderWidth The width in pixels.
    */
-  width(borderWidth: number): this {
+  width(borderWidth: number | string): this {
     this.borderWidth = borderWidth;
     return this;
   }
@@ -82,6 +102,24 @@ class Border extends Action {
   }
 }
 
-const {solid} = Border;
 
-export {Border, solid};
+
+
+/**
+ * @summary action
+ * @memberOf Actions.Border
+ * @description Sets the style of the border.
+ * @param {number | string} width The width in pixels.
+ * @param {string} color The color of the border, e.g 'green', 'yellow'.
+ * @return {Actions.Border.BorderAction}
+ */
+function solid(width: number | string, color: SystemColors): BorderAction {
+  return new BorderAction('solid', color, width);
+}
+
+
+const Border = {
+  solid
+};
+
+export {BorderAction, Border, solid};

src/assets/CloudinaryTransformable.ts

@@ -1,4 +1,4 @@
-import {Border} from "../actions/border";
+import {Border, BorderAction} from "../actions/border";
 import {IReshape} from "../actions/reshape";
 import ResizeSimpleAction from "../actions/resize/ResizeSimpleAction";
 import RoundCornersAction from "../actions/roundCorners/RoundCornersAction";
@@ -43,7 +43,7 @@ class CloudinaryTransformable extends CloudinaryFile {
    * @param {Actions.Border} border
    * @return {this}
    */
-  border(border: Border): this {
+  border(border: BorderAction): this {
     this.transformation.border(border);
     return this;
   }

src/transformation/Transformation.ts

@@ -15,7 +15,7 @@ import {IReshape} from "../actions/reshape";
 import {SystemColors} from "../qualifiers/color";
 import {prepareColor} from "../internal/utils/prepareColor";
 import {Extract} from "../actions/extract";
-import {Border} from "../actions/border";
+import {Border, BorderAction} from "../actions/border";
 import {FlagQualifier} from "../qualifiers/flag/FlagQualifier";
 import {EffectActions} from "../actions/effect";
 import {videoEditType} from "../actions/videoEdit";
@@ -93,7 +93,7 @@ class Transformation {
    * @param {Border} borderAction
    * @return {this}
    */
-  border(borderAction: Border): this{
+  border(borderAction: BorderAction): this{
     return this.addAction(borderAction);
   }