Chore: release v3.6.0

Author: amrw-js

CHANGELOG.md

@@ -27,6 +27,10 @@ Types of changes:
 -------------
 
 -------------
+## 3.6.0 - 2022-04-25
+### Fixed
+- Update documentations
+
 ## 3.6.0-beta.20 - 2022-04-18
 ### Added
 - possibility to render unwrapped image using `disableAnimation` prop

README.md

@@ -1,10 +1,9 @@
-[![Release](https://img.shields.io/badge/release-v3.5.1-blue.svg)](https://github.com/scaleflex/react-cloudimage-responsive/releases)
+[![Release](https://img.shields.io/badge/release-v3.6.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
 [![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
-
-[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Responsive%20images,%20now%20easier%20than%20ever&url=https://scaleflex.github.io/react-cloudimage-responsive/&via=cloudimage&hashtags=react,images,cloudimage,responsive_images,lazy_loading,web_acceleration,image_optimization,image_CDN,image_CDNwebp,jpeg_xr,jpg_optimization,image_resizing_and_CDN,cropresize)
+[![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)
 
 ## VERSIONS
 
@@ -39,7 +38,7 @@
 		•
 		<a href="https://scaleflex.github.io/react-cloudimage-responsive/" target="_blank">Demo</a>
 		•
-		<a href="https://codesandbox.io/s/1840nl707j" target="_blank">Code Sandbox</a>
+		<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-forked-9yq9tm" target="_blank">Code Sandbox</a>
 		•
 		<a href="https://medium.com/@dmitry_82269/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074" target="_blank">Why?</a>
 	</strong>
@@ -64,15 +63,13 @@ Cloudimage, contact us at
 <p align="center">
 	<img
 		alt="The Lounge"
-		src="https://demo.cloudimg.io/width/1400/n/https://scaleflex.airstore.io/filerobot/cloudimage-process.jpg?sanitize=true">
+		src="https://cdn.scaleflex.it/filerobot/cloudimage-process.jpg">
 </p>
 
-powered by [Cloudimage](https://www.cloudimage.io/)
-([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
-
 ## Table of contents
 
 * [Demo](#demo)
+* [Responsive plugins family](#plugin_family)
 * [Requirements](#requirements)
 * [Step 1: Installation](#installation)
 * [Step 2: Initialize](#initialize)
@@ -95,6 +92,28 @@ Inspector's Network tab to see how Cloudimage delivers the optimal
 image size to your browser, hence accelerating the overall page
 loading time.
 
+## <a name="plugin_family"></a> Responsive plugins family
+In order to use Cloudimage responsive plugins on your single-page application, please check out Cloudimage responsive plugins for vanilla Javascript and the most popular Javascript frameworks.
+
+<details>
+<summary>Javascript</summary>
+<a href="https://github.com/scaleflex/js-cloudimage-responsive">Js Cloudimage Responsive (Low Quality Preview)</a><br/>
+<a href="https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-BLUR-HASH.md">Js Cloudimage Responsive (Blur-hash)</a><br/>
+<a href="https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-PLAIN.md">Js Cloudimage Responsive (Plain)</a>
+</details>
+
+<details>
+<summary>Vue.js</summary>
+<a href="https://github.com/scaleflex/vue-cloudimage-responsive">Vue Cloudimage Responsive (Low Quality Preview)</a><br/>
+<a href="https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash">Vue Cloudimage Responsive (Blur-hash)</a><br/>
+<a href="https://github.com/scaleflex/vue-cloudimage-responsive-plain">Vue Cloudimage Responsive (Plain)</a>
+</details>
+
+<details>
+<summary>Angular</summary>
+<a href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage Responsive (Low Quality Preview)</a><br/>
+</details>
+
 ## <a name="requirements"/> Requirements
 
 To use the Cloudimage Responsive plugin, you will need a
@@ -124,7 +143,7 @@ import Img, { CloudimageProvider } from 'react-cloudimage-responsive';
 
 const cloudimageConfig = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/'
+  baseURL: 'https://cdn.scaleflex.it/demo/'
 };
 
 const App = () => {
@@ -150,7 +169,7 @@ render(<App />, document.body);
 NOTE: "ratio" is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold
 the image position while image is loading.
 
-<a href="https://codesandbox.io/s/1840nl707j"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-forked-b8zebi"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### BackgroundImg component:
 
@@ -160,7 +179,7 @@ the image position while image is loading.
 </BackgroundImg>
 ```
 
-<a href="https://codesandbox.io/s/react-cloudimage-responsive-background-1nin8"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-kvep0t"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
 
 ## <a name="configuration"></a> Config
 
@@ -197,15 +216,15 @@ Allow to use a specific version of API.
 ```javascript
 const cloudimageConfig = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/',
+  baseURL: 'https://cdn.scaleflex.it/demo/',
   apiVersion: 'v7'                            // optional
 };
 ```
 - disable API version
 ```javascript
 const cloudimageConfig = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/',
+  baseURL: 'https://cdn.scaleflex.it/demo/',
   apiVersion: null                            // optional
 };
 ```
@@ -266,7 +285,7 @@ Placeholder coloured background while the image is loading or use it to set your
 
 for example
 
-```placeholderBackground: "url('https://scaleflex.airstore.io/filerobot/red-loader.gif') 50% 50% no-repeat"```
+```placeholderBackground: "url('https:/https://cdn.scaleflex.it/filerobot/red-loader.gif') 50% 50% no-repeat"```
 
 ### lowQualityPreview
 
@@ -291,7 +310,7 @@ Default:
 ```javascript
 const cloudimageConfig = {
   token: 'demo',
-  baseUrl: 'https://jolipage.airstore.io/',
+  baseUrl: 'https://cdn.scaleflex.it/demo/',
   ...
   presets: {
       xs: '(max-width: 575px)', // up to 575    PHONE
@@ -377,6 +396,8 @@ A function to be executed after the image is loaded
 
 If set to true, the plugin will only add query parameters to the provided image source URL.
 
+<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-jtf2e4"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
+
 ### disableAnimation
 
 ###### Type: **Boolean** | Default: **false** | _optional_

examples/src/components/app.js

@@ -505,7 +505,7 @@ function App() {
                   <i>{image.original_size}</i>
                   {' '}
                   <a
-                    href={`https://cloudimage.public.airstore.io/demo/${image.src}`}
+                    href={`https://cdn.scaleflex.it/demo/${image.src}`}
                     target="_blank"
                     rel="noreferrer"
                   >
@@ -536,7 +536,7 @@ function App() {
                 <i>{images[17].original_size}</i>
                 {' '}
                 <a
-                  href={`https://cloudimage.public.airstore.io/demo/${images[17].src}`}
+                  href={`https://cdn.scaleflex.it/demo/${images[17].src}`}
                   target="_blank"
                   rel="noreferrer"
                 >
@@ -590,7 +590,7 @@ sizes="
                     display: 'inline-block', width: 200, height: 200, position: 'relative',
                   }}
                 >
-                  <img src="https://doc.cloudimg.io/sample.li/boat.jpg" />
+                  <img src="https://doc.cloudimg.io/sample.li/boat.jpg" alt="boat" />
                   <div className="border-box" />
                 </div>
               </div>
@@ -767,13 +767,13 @@ import Img, { CloudimageProvider } from 'react-cloudimage-responsive';
 
 const cloudimageConfig = {
 token: 'demo',
-baseURL: 'https://jolipage.airstore.io/'
+baseURL: 'https://cdn.scaleflex.it/demo/'
 };
 
 const cloudimageConfigWithCustomCNAMEDomain = {
 token: 'demo',
-baseURL: 'https://jolipage.airstore.io/',
-customDomain: 'images.airstore.io'
+baseURL: 'https://cdn.scaleflex.it/demo/',
+customDomain: 'https://cdn.scaleflex.it/demo/'
 };
 
 const App = () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cloudimage-responsive",
-  "version": "3.6.0-beta.20",
+  "version": "3.6.0",
   "main": "dist/index.js",
   "description": "Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load.",
   "author": "scaleflex",
@@ -40,7 +40,7 @@
     "publish-demo": "npm run build-demo && npm run deploy"
   },
   "dependencies": {
-    "cloudimage-responsive-utils": "^2.4.6",
+    "cloudimage-responsive-utils": "^2.4.7",
     "core-js": "^3.15.2",
     "prop-types": "^15.8.1",
     "react-lazyload": "^3.2.0",

yarn.lock

@@ -2005,10 +2005,10 @@
     "strip-ansi" "^5.2.0"
     "wrap-ansi" "^5.1.0"
 
-"cloudimage-responsive-utils@^2.4.6":
-  "integrity" "sha512-KMtPdlKXsfSAaXXmajlrSNYQBhoQb/VFZ9R2cqe+TqLTwLL9kkGpQNmGdy4HXXvopxNLLJIYCUqhsAnvE9P90w=="
-  "resolved" "https://registry.npmjs.org/cloudimage-responsive-utils/-/cloudimage-responsive-utils-2.4.6.tgz"
-  "version" "2.4.6"
+"cloudimage-responsive-utils@^2.4.7":
+  "integrity" "sha512-bR/4opfax1qF+lnb63e+jUToRFL4/cX1ZNlZemWuqa8j8OiToS7nI5IS9u4YhyhBnKeBQV1vw8W2+m/X/CI+xQ=="
+  "resolved" "https://registry.npmjs.org/cloudimage-responsive-utils/-/cloudimage-responsive-utils-2.4.7.tgz"
+  "version" "2.4.7"
 
 "collection-visit@^1.0.0":
   "integrity" "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA="