Move heroku nodejs and digital ocean nodejs guide under extended lang…

…uage guides

_includes/docs/example_link.html

@@ -0,0 +1,8 @@
+<div class="alert alert-secondary d-flex align-items-center" role="alert">
+  <div class="me-2">
+    {% include icons/github.html width="16" color="#181717" %}
+  </div>
+  <div>
+    Find a complete <a href="{{ include.url }}">code example on GitHub</a> for this guide.
+  </div>
+</div>

_includes/docs/headsup.html

@@ -0,0 +1,3 @@
+<div class="alert alert-info">
+  <strong>Heads up!</strong> This guide assumes you are already familiar with <a href="https://github.com/motdotla/dotenv">dotenv</a> and have <a href="/docs/tutorials/sync">synced your secrets</a> with <a href="https://github.com/dotenv-org/dotenv-vault">dotenv-vault</a>.
+</div>

_includes/docs/nav.html

@@ -45,6 +45,16 @@
       </ul>
     </li>
 
+    <li class="py-2">
+      {% include docs/nav_group.html text="Extended Language Guides" %}
+      <ul class="list-unstyled fw-normal ps-1 pb-2 small">
+        {% include layouts/docs_nav_title_grid.html name="NodeJS" icon="nodejs" color="#339933" %}
+        {% include docs/nav_link.html url="/docs/languages/nodejs" text="Overview" %}
+        {% include docs/nav_link.html url="/docs/languages/nodejs/digital-ocean" text="Digital Ocean" %}
+        {% include docs/nav_link.html url="/docs/languages/nodejs/heroku" text="Heroku" %}
+      </ul>
+    </li>
+
     <li class="py-2">
       {% include docs/nav_group.html text="Tutorials" %}
       <ul class="list-unstyled fw-normal ps-1 pb-2 small">

_includes/docs/step_build_env_vault.md

@@ -0,0 +1,39 @@
+## Build .env.vault
+
+Push your latest `.env` file changes and edit your production secrets. [Learn more about syncing](/docs/tutorials/sync)
+
+##### CLI
+```shell
+npx dotenv-vault@latest push
+npx dotenv-vault@latest open production
+```
+
+Use the UI to configure those secrets per environment.
+
+##### UI
+{% include helpers/screenshot_browser.html url="/assets/img/docs/edit-production-value.gif" www="dotenv.org" %}
+
+Then build your encrypted `.env.vault` file.
+
+##### CLI
+```shell
+npx dotenv-vault@latest build
+```
+
+Its contents should look something like this.
+
+##### .env.vault
+```shell
+#/-------------------.env.vault---------------------/
+#/         cloud-agnostic vaulting standard         /
+#/   [how it works](https://dotenv.org/env-vault)   /
+#/--------------------------------------------------/
+
+# development
+DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
+DOTENV_VAULT_DEVELOPMENT_VERSION=2
+
+# production
+DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
+DOTENV_VAULT_PRODUCTION_VERSION=2
+```

_includes/docs/step_install_dotenv.md

@@ -0,0 +1,45 @@
+## Install dotenv
+
+Install [`dotenv`](https://github.com/motdotla/dotenv).
+
+##### CLI
+```shell
+npm install dotenv --save # Requires dotenv >= 16.1.0
+```
+
+Create a `.env` file in the root of your project.
+
+##### .env
+```shell
+# .env
+HELLO="World"
+```
+
+As early as possible in your application, import and configure dotenv.
+
+##### index.js
+```js
+// index.js
+require('dotenv').config()
+console.log(process.env) // remove this after you've confirmed it is working
+
+const PORT = process.env.PORT || 3000
+const http = require('http')
+...
+```
+
+Try running it locally.
+
+##### CLI
+```shell
+node index.js
+{
+  ...
+  HELLO: 'World'
+}
+Server running on port:3000/
+```
+
+Perfect. `process.env` now has the keys and values you defined in your `.env` file.
+
+That covers local development. Let's solve for production next.

_includes/helpers/screenshot_browser.html

@@ -10,6 +10,8 @@
         </div>
       </div>
     </div>
-    <img src="{{include.url}}" width="500" class="rounded-bottom w-100">
+    <a href="{{include.url}}" target="_blank">
+      <img src="{{include.url}}" width="500" class="rounded-bottom w-100">
+    </a>
   </div>
 </div>

_layouts/docs.html

@@ -17,7 +17,7 @@
           <div class="row pt-2 mt-3">
             <div class="col">
               <div class="fw-semibold mb-0 text-dark">{{ page.section }}</div>
-              <h1 class="fw-extrabold py-0 my-0">{{ page.title }}</h1>
+              <h1 class="fw-extrabold fs-2 py-0 my-0">{{ page.title }}</h1>
             </div>
             <div class="col col-auto d-flex align-items-top">
               <div>

docs/integrations/heroku/express.md

@@ -1,6 +1,8 @@
 ---
 layout: docs
+section: "Language Guides"
 title: "Heroku with Express - Integrations"
+description: Load environment variables from encrypted .env.vault files, with NodeJS 🚀.
 ---
 
 {% include icons/heroku.html width="50" color="#430098" %}