Include NPM try it out section

website/pages/en/index.js

@@ -138,7 +138,7 @@ class Index extends React.Component {
         | \`\`\`
         `;
     const TryOutHomebrew = () => (
-      <Block id="try">
+      <Block id="tryHomebrew">
         {[
           {
             content: `${tryHomebrewContents}`,
@@ -163,7 +163,7 @@ class Index extends React.Component {
     |
     `;
    const TryOutDocker = () => (
-      <Block id="try">
+      <Block id="tryDocker">
           {[
               {
                   content: `${tryDockerContents}`,
@@ -175,6 +175,40 @@ class Index extends React.Component {
       </Block>
   );
 
+   const tryNpmContents = stripMargin`
+      | The [NPM package wrapper](https://github.com/openapitools/openapi-generator-cli) is cross-platform wrapper around the .jar artifact.
+      | **Install** globally, exposing the CLI on the command line:
+      | 
+      | \`\`\`bash
+      | # install the latest version of "openapi-generator-cli"
+      | npm install @openapitools/openapi-generator-cli -g
+      | 
+      | # install a specific version of "openapi-generator-cli"
+      | npm install @openapitools/openapi-generator-cli@cli-3.0.0 -g
+      |
+      | # Or install it as dev-dependency in your node.js projects
+      | npm install @openapitools/openapi-generator-cli -D
+      | \`\`\`
+      |
+      | Then, **generate** a ruby client from a valid [petstore.yaml](https://raw.githubusercontent.com/openapitools/openapi-generator/master/modules/openapi-generator/src/test/resources/2_0/petstore.yaml) doc:
+      | \`\`\`bash
+      | openapi-generator generate -i petstore.yaml -g ruby -o /tmp/test/
+      | \`\`\`
+    `;
+   const TryNpm = () => (
+       // note: id here is the topmost anchor linked via the "Try it out" button above.
+       <Block id="try">
+           {[
+               {
+                   content: `${tryNpmContents}`,
+                   image: `${baseUrl}img/tools/npm.svg`,
+                   imageAlign: 'left',
+                   title: 'Try via NPM',
+               }
+           ]}
+       </Block>
+   );
+
     // const Description = () => (
     //   <Block background="dark">
     //     {[
@@ -295,6 +329,7 @@ class Index extends React.Component {
           <Features />
           {/*<FeatureCallout />*/}
           <LearnHow />
+          <TryNpm />
           <TryOutHomebrew />
           <TryOutDocker />
           {/*<Description />*/}

website/static/css/custom.css

@@ -59,6 +59,13 @@ dd {
     max-height: 150px;
 }
 
+#try .blockImage,
+#tryHomebrew .blockImage,
+#tryDocker .blockImage {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
 }
 

website/static/img/tools/npm.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 36 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M0,0l0,12l10,0l0,2l8,0l0,-2l18,0l0,-12" style="fill:#cb3837;fill-rule:nonzero;"/><path d="M2,2l0,8l4,0l0,-6l2,0l0,6l2,0l0,-8l2,0l0,10l4,0l0,-8l2,0l0,4l-2,0l0,2l4,0l0,-8l2,0l0,8l4,0l0,-6l2,0l0,6l2,0l0,-6l2,0l0,6l2,0l0,-8" style="fill:#fff;fill-rule:nonzero;"/></svg>