added environments section

Author: ntotten

docs/articles/custom-ci-cd.md

@@ -38,7 +38,12 @@ be picked up by the Zuplo CLI.
 
 :::
 
-## Setting up a custom workflow with GitHub Actions
+## Provider Instructions
+
+Below you will find examples of how to set up a custom CI/CD pipeline with
+various providers.
+
+### GitHub Actions
 
 The full example is available at
 https://github.com/zuplo/zup-cli-example-project/blob/main/.github/workflows/ci.yml
@@ -99,7 +104,7 @@ jobs:
 2. Create a secret for your GitHub Action and be sure to set `ZUPLO_API_KEY` to
    the API key you generated in the previous step.
 
-## Setting up a custom workflow with Bitbucket Pipelines
+### Bitbucket Pipelines
 
 The full example is available at
 https://github.com/zuplo/zup-cli-example-project/blob/main/bitbucket-pipelines.yml
@@ -172,7 +177,7 @@ pipelines:
 2. Create a secret repository variable for your BitBucket Pipelines and be sure
    to set `ZUPLO_API_KEY` to the API key you generated in the previous step.
 
-## Setting up a custom workflow with Azure Pipelines
+### Azure Pipelines
 
 The full example is available at
 https://github.com/zuplo/zup-cli-example-project/blob/main/azure-pipelines.yml
@@ -223,7 +228,7 @@ steps:
 2. Create a secret for your Azure Pipelines and be sure to set `ZUPLO_API_KEY`
    to the API key you generated in the previous step.
 
-## Setting up a custom workflow with Gitlab Pipelines
+### Gitlab Pipelines
 
 The full example is available at
 https://github.com/zuplo/zup-cli-example-project/blob/main/.gitlab-ci.yml
@@ -278,7 +283,7 @@ The above samples showcase the most common use case for our customers. However,
 you might have more advanced use cases that require more control. The following
 sections describe some other parameters that you can control.
 
-### You have multiple sub-folders in your repository
+### Multiple Projects
 
 You might end up with this structure because you are using git submodules to
 connect multiple repositories together. Or, you might have multiple projects in

docs/articles/update-zup-in-github-action.md

@@ -1,6 +1,6 @@
 ---
 title: Automate Zuplo API Updates with GitHub Actions
-sidebar_label: Update API in GitHub Action
+sidebar_label: GitHub Action Automation
 ---
 
 Because Zuplo is OpenAPI native, you can automate the process of udating your

docs/dedicated/architecture.md

@@ -121,3 +121,28 @@ access to your APIs for end-users around the world. The load balancer is also
 configured to handle failover in case of an outage in one region.
 
 <ManagedDedicatedMultiRegionArchitecture />
+
+### Environments
+
+Customers running managed dedicated Zuplo typically have multiple instances of
+Zuplo deployed. The most common case is to have a production instance(s) and a
+non-production instance. The non-production instance is used to deploy and test
+changes to your API Gateway before deploying them to production.
+
+Each instance is isolated and runs in its own VPC or network.
+
+It is possible to have multiple instances depending on your requirements. For
+example, some customers have seperate instances for production, staging, and
+development. For most customer though, a single production and a single
+development instance is sufficient.
+
+When you onboard to Zuplo, you will work with your account manager to determine
+the configuration that best meets your requirements. When your project is
+created it will be pre-configured with the agreed upon number of instances and
+setup with rules that determine where each environment gets deployed.
+
+The most common setup is where your `main` branch is deployed to production and
+all other branches are deployed to a non-production environment, but this is
+fully customizable.
+
+<ManagedDedicatedEnvironmentsArchitecture />

src/components.tsx

@@ -52,4 +52,7 @@ export const mdxComponents = {
   ManagedDedicatedMultiRegionArchitecture: lazy(
     () => import("./diagrams/ManagedDedicatedMultiRegionArchitecture.js"),
   ),
+  ManagedDedicatedEnvironmentsArchitecture: lazy(
+    () => import("./diagrams/ManagedDedicatedEnvironmentsArchitecture.js"),
+  ),
 };

src/diagrams/ManagedDedicatedEnvironmentsArchitecture.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Diagram, DiagramBuilder, Position } from "./common/index.js";
+
+export default function ManagedDedicatedMultiRegionArchitecture() {
+  const props = React.useMemo(() => {
+    const y = 50;
+    const x = 0;
+
+    const space = 100;
+
+    const builder = new DiagramBuilder([
+      {
+        position: { x, y },
+        label: "Source Control",
+        type: "custom",
+      },
+      {
+        position: { x: x + space * 2, y },
+        label: "Control Plane",
+        variant: "zuplo",
+      },
+      {
+        label: "Zuplo API Gateway (Production)",
+        variant: "zuplo",
+        position: { x: x + space * 4, y: y - 60 },
+        width: 160,
+      },
+      {
+        label: "Zuplo API Gateway (Non-Production)",
+        variant: "zuplo",
+        position: { x: x + space * 4, y: y + 40 },
+        width: 160,
+      },
+    ]);
+
+    const duration = 4;
+    builder.connect(
+      { label: "Source Control", position: Position.Right },
+      { label: "Control Plane", position: Position.Left },
+      { animate: true, icon: "square-code", duration },
+    );
+    builder.connect(
+      { label: "Control Plane", position: Position.Right },
+      { label: "Zuplo API Gateway (Production)", position: Position.Left },
+      { animate: true, icon: "square-code", duration },
+    );
+    builder.connect(
+      { label: "Control Plane", position: Position.Right },
+      { label: "Zuplo API Gateway (Non-Production)", position: Position.Left },
+      { animate: true, icon: "square-code", duration },
+    );
+
+    return builder.getProps();
+  }, []);
+
+  return <Diagram {...props} className="h-56" />;
+}