Add zoom.ts

content/rancher/v2.x/en/overview/_index.md

@@ -22,4 +22,4 @@ Rancher provides an intuitive user interface for DevOps engineers to manage thei
 
 The following figure illustrates the role Rancher plays in IT and DevOps organizations. Each team deploys their applications on the public or private clouds they choose. IT administrators gain visibility and enforce policies across all users, clusters, and clouds.
 
-![Platform]({{< baseurl >}}/img/rancher/platform.png)
+{{< zoom-img src="img/rancher/platform.png" alt="Platform">}}

gulpfile.babel.js

@@ -103,7 +103,7 @@ gulp.task('sass', () => {
     .pipe(gulp.dest('static/css'));
 });
 
-const vendors = ['ml-stack-nav', 'lory.js', 'tingle.js', 'moment', 'jquery'];
+const vendors = ['zoom.ts', 'ml-stack-nav', 'lory.js', 'tingle.js', 'moment', 'jquery'];
 
 gulp.task('build:vendor', () => {
   const b = browserify();

package.json

@@ -35,7 +35,8 @@
     "rancher-website-theme": "https://github.com/rancherlabs/website-theme.git",
     "run-sequence": "^2.0.0",
     "vinyl-buffer": "^1.0.1",
-    "vinyl-source-stream": "^2.0.0"
+    "vinyl-source-stream": "^2.0.0",
+    "zoom.ts": "^8.0.0"
   },
   "babel": {
     "presets": [

src/sass/app.scss

@@ -3,7 +3,8 @@
 // 7. node
 @import
 '~tingle.js/src/tingle',
-'~ml-stack-nav/src/ml-stack-nav';
+'~ml-stack-nav/src/ml-stack-nav',
+'~zoom.ts/dist/zoom';
 
 // 1. Configuration and helpers
 @import