screenshot updates

docs/articles/custom-domains.md

@@ -29,14 +29,14 @@ Go to your project in the Zuplo portal and open to the <SettingsTabIcon />
 `Add New Custom Domain` button to open the `New Custom Domain` configuration
 modal.
 
-![](https://cdn.zuplo.com/assets/4b34e012-447b-49c8-8df1-cd5e0e6ec5a7.png)
+![Custom Domain](../../public/media/custom-domains/image.png)
 
 ### 2. Add your domain
 
 Then, pick the edge deployed environment you want to assign the domain to and
 enter your apex domain (e.g. example.com) or subdomain (e.g. api.example.com)
 
-![](https://cdn.zuplo.com/assets/cac30cc7-511a-4e88-926b-2e0504105719.png)
+![Add New Domain](../../public/media/custom-domains/image-1.png)
 
 Once saved, you will be provided with a `CNAME` configuration that will look
 something like the one below that you'll use in the next step.

docs/articles/environments.md

@@ -10,65 +10,57 @@ dedicated environment, deployed for no additional cost in under 20s.
 
 ## Environment Types
 
-There are two distinct types of environment:
-
-- **working-copy** - this is your development environment. You can think of this
-  as your personal cloud laptop. To deploy to this environment you just need to
-  save a change in portal.zuplo.com, that will automatically trigger a build and
-  deploy of your working-copy. A working-copy environment typically ends in a
-  `.dev` URL. These are _not_ deployed to the edge and run in a data-center.
-  There are some subtle differences in behavior between edge deployments and
-  working-copies, so it is important to test both before going to production.
-  Note, every developer using Zuplo gets a private working-copy. These are not
-  shared with anybody else. If you share a project with another person, they
-  will have their own working-copy environment.
-
-:::warning
-
-Never use a working-copy environment in a production setting. They offer no SLA,
-and will often sleep after inactivity leading to slower cold-start times. There
-can be occasional downtime of a few seconds for upgrades.
-
-:::
-
-- **edge deployment** - these are real deployments that are deployed to the edge
-  at 100s of data-centers around the world. They have 0ms startup time and offer
-  very high availability due to their headless, distributed nature. You can
-  deploy edge environments using our
-  [GitHub integration](/docs/articles/source-control) or building a
-  [custom CI/CD pipeline](/docs/articles/custom-ci-cd).
-
-Edge deployments typically have a domain ending with `.app` but you can also
-configure [custom vanity domains](/docs/articles/custom-domains).
-
-Edge deployments cannot be directly edited in portal.zuplo.com but they can be
-viewed - so you can see the source code currently deployed to an environment.
+There are three types of environments on Zuplo - Production, Preview, and
+Development (called Working Copy). Each environment has a unique URL and every
+environment is deployed to 300+ edge locations around the world.
+
+### Development (Working Copy)
+
+This is your development environment. You can think of this as your personal
+cloud laptop. To deploy to this environment you just need to save a change in
+portal.zuplo.com, that will automatically trigger a build and deploy of your
+working-copy. A working-copy environment ends in a `.dev` URL. While these
+environments are deployed to the edge in 300+ data centers around the world,
+they are optimized for development purposes. There are some minor differences
+with production and preview environments with caching and other features.
+
+### Preview
+
+These are are environments that are deployed using the
+[GitHub integration](/docs/articles/source-control) or building a
+[custom CI/CD pipeline](/docs/articles/custom-ci-cd). Preview environments are
+deployed from from any branch that is not set as your default (i.e. production
+branch). Preview environments are deployed to the edge and have the same
+behavior as production environments, but are typically used for staging, testing
+pull requests, etc.
+
+### Production
+
+These are are environments that are deployed using the
+[GitHub integration](/docs/articles/source-control) or building a
+[custom CI/CD pipeline](/docs/articles/custom-ci-cd). Each project has only one
+Production environment and is deployed from the git branch that is set as your
+production branch in your source control settings.
 
 ## Navigating Environments
 
-At the top left corner of portal.zuplo.com you will see your
-**project/environment** selector. This consists of two selectors separated by a
-`/`.
-
-On the left is the current project - you can change project by clicking on the
-project name (or create a new project).
-
-One the right is the current **environment**. By default you will be looking at
-**working-copy** which is your private, editable, instance of the current
-project you are working on.
+On the bottom toolbar of the Zuplo portal you will see a selector for the
+current environment. You can switch between environments by clicking on the name
+of the current environment and then selecting another environment.
 
-![Environments](../../public/media/environments.png)
+![Environments](../../public/media/environments/image.png)
 
-If you have other any **edge-deployments** you will see them listed alongside
-your working-copy. In this case we have two edge-deployments called
-`development` and `prod (main)`.
+Your development (working copy) environment will be listed at the top in a
+separate section. Your git deployed environments will be listed next with the
+production environment on top.
 
-For users using [GitHub integration](/docs/articles/source-control) the name of
-the deployment matches the branch name (yes - creating a new environment is
-literally as easy as creating a new branch).
+For users using [source control integration](/docs/articles/source-control) the
+name of the deployment matches the branch name (yes - creating a new environment
+is literally as easy as creating a new branch).
 
-You can't edit the code of an edge-deployment in portal.zuplo.com but you can
-switch into those environments to perform a number of functions, such as:
+You can't edit the code of an production or preview environment in
+portal.zuplo.com but you can switch into those environments to perform a number
+of functions, such as:
 
 - edit API consumers for this environment
 - view analytics for this environment

docs/articles/open-api.md

@@ -8,14 +8,14 @@ specification standard as the core way to configure the gateway.
 When you create a new project you will see a `routes.oas.json` file. This is
 your default OpenAPI routing file (oas = 'open api specification').
 
-![routes.oas.json](https://cdn.zuplo.com/assets/ac1b4a8a-7e5b-49de-be58-7c1edcd26701.png)
+![routes.oas.json](../../public/media/open-api/image.png)
 
 You can use the Route Designer to build your routes, which will be creating an
 OpenAPI document in the background for you (check it out in the **JSON View**).
 
 You can also **import an OpenAPI** document by clicking on the **Open API** tab.
 
-![Import OpenAPI](https://cdn.zuplo.com/assets/73ad9166-9d53-464e-ae66-831b709f861e.png)
+![Import Open API](../../public/media/open-api/image-1.png)
 
 This will merge your imported file with any routes you already have in your
 .oas.json file. By default, operations will be merged by path & method - but you

docs/articles/rename-or-move-project.md

@@ -18,12 +18,12 @@ move to a different project.
 If you're confident all your code is stored safely in the repo you can now
 disconnect the project from Source Control.
 
-![Disconnect Project](../../public/media/disconnect-project.png)
+![Disconnect Project](../../public/media/rename-or-move-project/image.png)
 
 Next create a new project in the correct account if moving accounts or with the
 correct name. Choose the `Advanced` option on the new project dialog.
 
-![Advanced New Project](../../public/media/advanced-new-project.png)
+![Import existing project](../../public/media/source-control/image-1.png)
 
 You should see a list of Orgs and Repos - pick the source repo you wanted to
 move and click Create Project from Repository.

docs/articles/source-control.md

@@ -27,18 +27,17 @@ For full instructions on setting up github see
 ## Connecting Existing Repositories
 
 If you have an existing GitHub repository that contains a Zuplo project, you can
-connect to that repository when you create a new project. Select **Advanced**
-then select your GitHub organization and repository.
+connect to that repository when you create a new project. Select **Import
+existing project** then select your GitHub organization and repository.
 
-![](https://cdn.zuplo.com/assets/f09aa7ac-abc0-4f20-9e41-df42b7761748.png)
+![alt text](../../public/media/source-control/image-1.png)
 
 ## Limitations
 
 **Renaming or moving projects in GitHub**
 
-The Zuplo GitHub integration does not yet handle moving or renaming
-repositories. As a workaround, you can first disconnect your project from GitHub
-and recreate it in another org or with another name. To do so, go to
-**Settings** > **Source Control** and then click **Disconnect** to disconnect
-your project from GitHub. Then follow the above instructions to reconnect your
-project to GitHub.
+The Zuplo GitHub integration does not handle moving or renaming repositories. As
+a workaround, you can first disconnect your project from GitHub and recreate it
+in another org or with another name. To do so, go to **Settings** > **Source
+Control** and then click **Disconnect** to disconnect your project from GitHub.
+Then follow the above instructions to reconnect your project to GitHub.

docs/articles/step-2-add-api-key-auth.md

@@ -45,9 +45,13 @@ If you test your route, you should get a 401 Unauthorized response
 ## 2/ Set up an API Key
 
 In order to call your API, you need to configure an API consumer. Go to
-Settings > API Consumers. Click **Add New Consumer**
+Services, then click "Configure" on the "API Key Service".
 
-![API Key Consumers](../../public/media/step-2-add-api-key-auth/image-2.png)
+![API Key Service](../../public/media/step-2-add-api-key-auth/image-7.png)
+
+Then click **Create Consumer**.
+
+![Create Consumer](../../public/media/step-2-add-api-key-auth/image-8.png)
 
 Create a name for your identity - this will be the subject (or sub) that
 identifies the user when calling Zuplo. Add your own e-mail address to the **Key
@@ -62,7 +66,7 @@ used to authenticate.
 After your API Key consumer is created, click the button to copy your new API
 Key.
 
-![New Key](../../public/media/step-2-add-api-key-auth/image-4.png)
+![New Key](../../public/media/step-2-add-api-key-auth/image-9.png)
 
 ## 4/ Test out your new key
 

docs/articles/step-4-deploying-to-the-edge.md

@@ -25,19 +25,13 @@ To follow this tutorial you'll need
 
 ## 1/ Authorize to GitHub
 
-Before you begin, it is best to create an empty GitHub Repo to use for your
-Zuplo project. Click the button below to go to GitHub and create a new
-repository. Select the organization where you'd like to create the repository.
+Next, go to your project in the Zuplo portal and open to the **Settings** tab,
+then select **Source Control**. Control. If your project isn't already connected
+to GitHub click the **Connect to GitHub** button and follow the auth flow.
+You'll need to grant permissions for any GitHub organizations you want to work
+with.
 
-<GithubButton text="Create GitHub Repo" href="https://github.com/new" />
-
-Next, go to your project in the Zuplo portal and open to the <SettingsTabIcon />
-**Settings** tab (1), then select **Source Control** (2). Control. If your
-project isn't already connected to GitHub click the **Connect to GitHub** button
-and follow the auth flow. You'll need to grant permissions for any GitHub
-organizations you want to work with.
-
-![](https://cdn.zuplo.com/assets/2594e74e-ada4-4f63-ab23-e3c6eeb72219.png)
+![Connect Github](../../public/media/step-4-deploying-to-the-edge/image-1.png)
 
 Next, a dialog will open asking you to authorize Zuplo. Click the **Authorize
 Zuplo** button.
@@ -80,21 +74,28 @@ If you weren't prompted to select a GitHub org, it is likely that you are
 already a member of an an account that has authorized Zuplo. To add Zuplo to a
 new organization click **Add GitHub Account** in the org picker list.
 
-![](https://cdn.zuplo.com/assets/fa11f143-e646-4cf5-9dfd-6a1ba64b8a13.png)
+![Connect Org](../../public/media/step-4-deploying-to-the-edge/image-2.png)
 
 ## 2/ Connect GitHub to your Project
 
 With your GitHub App configured, you can now return to the Zuplo portal. In the
-**Source Control** settings you should now see a list of GitHub repositories -
-if you just created your project, it should be listed on the top. If not, just
-type the name in the search box. Once you have located your repository click the
-**Connect** button.
+**Source Control** settings you should now see a list of GitHub repositories.
+Create a new repository by clicking the **Create new repository** button. You
+will be prompted that this will open Github. Click to continue.
+
+![Create Repo](../../public/media/step-4-deploying-to-the-edge/image-3.png)
+
+In the Github UI, you can rename your repository if you want. Click the **Create
+repository** button at the bottom of the page and return to the Zuplo Portal.
 
-![](https://cdn.zuplo.com/assets/f7247c52-47e0-4661-8551-aa6061256d1f.png)
+The portal will reload and you will see your new repository listed. Click
+**Connect** to connect Zuplo to that repository.
+
+![Connect](../../public/media/step-4-deploying-to-the-edge/image-4.png)
 
 After the connection succeeds you will see a link to your GitHub repository.
 
-![](https://cdn.zuplo.com/assets/4bc3cbd4-8e94-4eb5-a5ed-8f528e018ad8.png)
+![Connected Repository](../../public/media/step-4-deploying-to-the-edge/image-5.png)
 
 Click the link to return to GitHub. You should see a green check next to the
 commit hash (1). When you hover your mouse over that you'll see the Zuplo
@@ -126,17 +127,21 @@ Let's make a simple change to our `working-copy` environment. Let's do something
 simple like capitalize the **Summary** field from 'Get all todos' to 'Get All
 Todos'. It doesn't really matter what the change is.
 
-![Change of Summary](https://cdn.zuplo.com/assets/e915ea82-8980-4629-b2b0-b595ac65cc37.png)
+![Changes Summary](../../public/media/step-4-deploying-to-the-edge/image-6.png)
 
 Save your changes. Click the GitHub button at bottom left and choose **Commit &
-Push**. Enter a description of your change in the dialog that pops up:
+Push**.
+
+![Commit & Push](../../public/media/step-4-deploying-to-the-edge/image-7.png)
+
+Enter a description of your change in the dialog that pops up:
 
-![Commit Dialog](https://cdn.zuplo.com/assets/6a713c7f-c40a-4556-859f-a9befebeac82.png)
+![Change Summary](../../public/media/step-4-deploying-to-the-edge/image-8.png)
 
 Click **Commit & Push** will create a new temporary branch in GitHub with a name
 `zup-...`. On the next dialog, click **Create Pull Request**.
 
-![Create PR](https://cdn.zuplo.com/assets/01d01c6f-49dd-413f-ba48-79356d872a0f.png)
+![Create PR](../../public/media/step-4-deploying-to-the-edge/image-9.png)
 
 This will navigate you to the screen in GitHub that allows you to create a Pull
 Request. Change the **base** branch to `development` (since that is the
@@ -156,7 +161,7 @@ The successful merge will trigger a rebuild and deployment of `development` with
 your change. You can check this by choosing the environment `development` in
 Zuplo and navigating to the **readonly** Route Designer.
 
-![Readonly view of changes](https://cdn.zuplo.com/assets/3bc451b2-8422-4807-98cc-eee907c46021.png)
+![Navigating Environments](../../public/media/step-4-deploying-to-the-edge/image.png)
 
 This shows how you can use widely recognized GitOps practices to manage how code
 flows through your environments using Pull Requests and protected branches.