update install page to prioritize npx install

_includes/icons/npm2.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{include.width}}" height="{{include.width}}" viewBox="0 0 128 128"><path fill="#cb3837" d="M2 38.5h124v43.71H64v7.29H36.44v-7.29H2zm6.89 36.43h13.78V53.07h6.89v21.86h6.89V45.79H8.89zm34.44-29.14v36.42h13.78v-7.28h13.78V45.79zm13.78 7.29H64v14.56h-6.89zm20.67-7.29v29.14h13.78V53.07h6.89v21.86h6.89V53.07h6.89v21.86h6.89V45.79z"/></svg>

_includes/install/card.html

@@ -2,6 +2,8 @@
   <div class="row mb-5 pb-5">
     <div class="col col-lg-8 offset-lg-2">
 
+      <p class="fw-bold">Other Ways to Install</p>
+
 <div class="card">
   <div class="card-header p-0 border-bottom-0">
     <ul class="nav nav-tabs nav-fill card-header-tabs m-0" id="list-tab" role="tablist">
@@ -23,12 +25,6 @@
           <div class="d-block pt-2">Docker</div>
         </a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link link-dark text-center rounded-start-0 border-0" id="list-nodejs-list" data-bs-toggle="list" href="#list-nodejs" role="tab" aria-controls="list-nodejs">
-          {% include icons/nodejs.html width="30" %}
-          <div class="d-block pt-2">NodeJS</div>
-        </a>
-      </li>
     </ul>
   </div>
   <div class="card-body p-lg-4">
@@ -80,18 +76,6 @@
           </button>
         </div>
       </div>
-
-      <div class="tab-pane" id="list-nodejs" role="tabpanel" aria-labelledby="list-nodejs-list">
-        <p>Install dotenv-vault and run commands via npx</p>
-
-        <div class="input-group mb-3">
-          <span class="input-group-text fs-6 text-success pe-0 font-monospace">$</span>
-          <input id="nodejs-cmd" type="text" class="border-start-0 ps-2 form-control form-control-lg bg-light font-monospace fs-6" value="npx dotenv-vault help">
-          <button class="btn btn-light border ms-2 clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#nodejs-cmd">
-            {% include icons/clipboard.html width="20" %}
-          </button>
-        </div>
-      </div>
     </div>
   </div>
 </div>

_includes/install/hero.html

@@ -2,7 +2,7 @@
   <div class="row mb-3">
     <div class="col-lg-8 offset-lg-2">
       <h1 class="text-center fw-extrabold mt-5 lh-1">Install dotenv-vault</h1>
-      <p class="text-center lead fw-medium mt-1">The fastest way to start managing your developer secrets</p>
+      <p class="text-center lead fw-medium mt-1 mb-0">The fastest way to start managing your developer secrets</p>
     </div>
   </div>
 </div>

_includes/install/npx.html

@@ -0,0 +1,43 @@
+<div class="container">
+  <div class="row">
+    <div class="col col-lg-8 offset-lg-2">
+
+<div class="card">
+  <div class="card-body p-lg-4">
+    <div class="text-center">
+      {% include icons/npm2.html width="100" %}
+    </div>
+
+    <p class="text-center">The easiest (and recommended) way to use dotenv-vault is via <a href="https://docs.npmjs.com/cli/v7/commands/npx">npx</a>.</p>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text fs-6 text-success pe-0 font-monospace">$</span>
+      <input id="npm-cmd-1" type="text" class="border-start-0 ps-2 form-control form-control-lg bg-light font-monospace fs-6" value="npx dotenv-vault@latest new">
+      <button class="btn btn-light border ms-2 clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#npm-cmd-1">
+        {% include icons/clipboard.html width="20" %}
+      </button>
+    </div>
+    <div class="input-group mb-3">
+      <span class="input-group-text fs-6 text-success pe-0 font-monospace">$</span>
+      <input id="npm-cmd-2" type="text" class="border-start-0 ps-2 form-control form-control-lg bg-light font-monospace fs-6" value="npx dotenv-vault@latest push">
+      <button class="btn btn-light border ms-2 clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#npm-cmd-2">
+        {% include icons/clipboard.html width="20" %}
+      </button>
+    </div>
+    <div class="input-group mb-3">
+      <span class="input-group-text fs-6 text-success pe-0 font-monospace">$</span>
+      <input id="npm-cmd-3" type="text" class="border-start-0 ps-2 form-control form-control-lg bg-light font-monospace fs-6" value="npx dotenv-vault@latest pull">
+      <button class="btn btn-light border ms-2 clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#npm-cmd-3">
+        {% include icons/clipboard.html width="20" %}
+      </button>
+    </div>
+  </div>
+</div>
+
+      <p class="mt-2 mb-4">npx makes it easy to use CLI tools, but it requires NodeJS and npm. See below for other ways to install <a href="https://github.com/dotenv-org/dotenv-vault">dotenv-vault</a>.</p>
+
+    </div>
+  </div>
+</div>
+
+

install/index.md

@@ -6,4 +6,5 @@ redirect_from:
 ---
 
 {% include install/hero.html %}
+{% include install/npx.html %}
 {% include install/card.html %}