zuplo · dan-lee · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+
 # dependencies
 /node_modules
 /.pnp
@@ -8,12 +9,8 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
-
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -32,11 +29,11 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
 
 .env
 
 /policies.*.json
+/generated
 /temp
 scripts/update-policies.mjs
 scripts/update-policies.mjs.map
@@ -47,4 +44,4 @@ yarn.lock
 # Generated Content
 public/robots.txt
 public/sitemap.xml
-public/sitemap-*.xml
+public/sitemap-*.xml
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/docs/articles/accounts/billing.md b/docs/articles/accounts/billing.md
@@ -17,7 +17,7 @@ When you navigate to the "Upgrade & Billing" page, you will see a link to manage
 your existing subscription. Clicking this link will take you to the Stripe
 checkout page where you can update your payment method.
 
-::: note Enterprise Plans
+:::note{title="Enterprise Plans"}
 
 Enterprise plans are setup with custom billing and cannot be managed through the
 portal. Contact your account representative for questions or assistance.

diff --git a/docs/articles/accounts/managing-account-members.md b/docs/articles/accounts/managing-account-members.md
@@ -15,19 +15,19 @@ menu.
 The view will display the users that are currently members of the account and
 their roles.
 
-![Members](../../../public/media/managing-account-members/image.png)
+![Members](/media/managing-account-members/image.png)
 
 On the top of the page, you can enter an email address of the user you want to
 invite. For accounts with the enterprise role feature, users are added to the
 account with the role of "Member", for all other accounts users are added with
 the role of "Admin".
 
-![Invite User](../../../public/media/managing-account-members/image-1.png)
+![Invite User](/media/managing-account-members/image-1.png)
 
 After inviting a user, you will see the invited user in the list with the
 members.
 
-![Invited User](../../../public/media/managing-account-members/image-2.png)
+![Invited User](/media/managing-account-members/image-2.png)
 
 ## Change Member Role
 
@@ -36,10 +36,10 @@ members.
 Once a user has accepted the invitation, you can change their role by selecting
 the role from the drop down.
 
-![Change Role](../../../public/media/managing-account-members/image-3.png)
+![Change Role](/media/managing-account-members/image-3.png)
 
 ## Removing a Member
 
 To remove a user from the account, click on the remove icon next to the user.
 
-![Remove Member](../../../public/media/managing-account-members/image-4.png)
+![Remove Member](/media/managing-account-members/image-4.png)
diff --git a/docs/articles/accounts/managing-project-members.md b/docs/articles/accounts/managing-project-members.md
@@ -13,7 +13,7 @@ To manage project members, navigate to the project settings page and click on
 the "Members" tab. Here you can see a list of all members in the project and
 their roles.
 
-![Project Members](../../../public/media/managing-project-members/image-1.png)
+![Project Members](/media/managing-project-members/image-1.png)
 
 This list will display all account members - even those who have no access to
 the project.
@@ -29,7 +29,7 @@ account admin and cannot be changed.
 For users who are not account admins, you can change their role by selecting the
 desired role from the dropdown.
 
-![Member Role](../../../public/media/managing-project-members/image-2.png)
+![Member Role](/media/managing-project-members/image-2.png)
 
 ## Remove Project Member
 

diff --git a/docs/articles/accounts/roles-and-permissions.md b/docs/articles/accounts/roles-and-permissions.md
@@ -4,7 +4,7 @@ title: Role Permissions
 
 <EnterpriseFeature name="Role Based Access Control" />
 
-:::info Beta
+:::info{title="Beta"}
 
 The specific permissions of each role are currently in beta and may change
 without notice.

diff --git a/docs/articles/accounts/zuplo-api-keys.md b/docs/articles/accounts/zuplo-api-keys.md
@@ -17,9 +17,9 @@ the top right corner of the screen and selecting "Settings" from the dropdown
 menu. Click the "API Keys" tab to view the API keys in your account that you
 have access to.
 
-![API Keys](../../../public/media/zuplo-api-keys/image.png)
+![API Keys](/media/zuplo-api-keys/image.png)
 
-::: note Required Role
+:::note{title="Required Role"}
 
 Account admins can view and manage all API keys in the account. Developers can
 only view their own API keys. Members do not have access to API keys.
@@ -31,7 +31,7 @@ label, expiration, and select the permissions for your new API key.
 
 <EnterpriseFeature name="Fine-grained API Key Management" />
 
-![Create API Key](../../../public/media/zuplo-api-keys/image-1.png)
+![Create API Key](/media/zuplo-api-keys/image-1.png)
 
 ## Editing an API Key
 
@@ -44,7 +44,7 @@ API Keys can be deleted by selecting the delete button on the list page or by
 opening the details page for the key and clicking the "Delete" button at the
 bottom of the page.
 
-![Delete API Key](../../../public/media/zuplo-api-keys/image-2.png)
+![Delete API Key](/media/zuplo-api-keys/image-2.png)
 
 ## API Key Permissions
 
@@ -59,7 +59,7 @@ Selecting All Projects will also grant all project level permissions to that
 key. If you want to customize the project level permissions, scope the key to
 one or more projects.
 
-![Project Access](../../../public/media/zuplo-api-keys/image-3.png)
+![Project Access](/media/zuplo-api-keys/image-3.png)
 
 ### Environment Access
 
@@ -69,23 +69,23 @@ example, if you want to restrict a key to only have access to only access
 preview and development environments, you can select only those two
 environments.
 
-![Environment Access](../../../public/media/zuplo-api-keys/image-4.png)
+![Environment Access](/media/zuplo-api-keys/image-4.png)
 
 ### Project permissions
 
 When API Keys are scoped to specific projects, you can select the permissions
 the key has in that project. For each permission select the level of access
 desired from the drop down.
 
-![Project permissions](../../../public/media/zuplo-api-keys/image-5.png)
+![Project permissions](/media/zuplo-api-keys/image-5.png)
 
 ### Account permissions
 
 API Keys can be granted account level permissions. These permissions are for
 account level resources like custom domains, tunnels, etc. For each permission
 select the level of access desired from the drop down.
 
-![Account permissions](../../../public/media/zuplo-api-keys/image-6.png)
+![Account permissions](/media/zuplo-api-keys/image-6.png)
 
 When selecting permissions for API Key Buckets or Monetization Buckets, the
 environment type scope is also applied. For example, if your key has access to

diff --git a/docs/articles/add-api-to-backstage.md b/docs/articles/add-api-to-backstage.md
@@ -22,7 +22,7 @@ repository, you can follow
 Zuplo API is redeployed, you should now be able to retrieve your public-ready
 OpenAPI file by hitting `https://<your-prod-zuplo-api-domain>/openapi`.
 
-![Zuplo route](../../public/media/add-api-to-backstage/image-3.png)
+![Zuplo route](/media/add-api-to-backstage/image-3.png)
 
 ## 2/ Add Zuplo to your `reading.allowed` list
 
@@ -86,7 +86,7 @@ You should now be able to see your API under the APIs tab in Backstage. If you
 navigate to your API and click the 'DEFINITION' tab - you can even preview your
 OpenAPI spec.
 
-![OpenAPI spec](../../public/media/add-api-to-backstage/image-6.png)
+![OpenAPI spec](/media/add-api-to-backstage/image-6.png)
 
 Congratulations! You've successfully added your Zuplo API to Backstage. You can
 repeat the steps above for all of your OpenAPI files.
@@ -128,13 +128,13 @@ Save and commit this file.
 You can register existing APIs in your catalog directly from Backstage. Navigate
 to the APIs tab, and click 'REGISTER EXISTING API'.
 
-![APIs list](../../public/media/add-api-to-backstage/image-5.png)
+![APIs list](/media/add-api-to-backstage/image-5.png)
 
 When prompted for the component URL, enter the github URL of your
 `catalog-info.yaml` file (ex.
 https://github.com/AdrianMachado/adrian-api/blob/main/catalog-info.yaml).
 
-![Adding the github URL](../../public/media/add-api-to-backstage/image-4.png)
+![Adding the github URL](/media/add-api-to-backstage/image-4.png)
 
 Complete registration of your API. If you run into issues connecting your
 repository, see our [troubleshooting guide](#troubleshooting).

diff --git a/docs/articles/api-key-administration.md b/docs/articles/api-key-administration.md
@@ -8,30 +8,30 @@ Each project is created with three API Key Buckets - one for production, one
 shared by preview environments, and one for development (working copy)
 environments.
 
-![Services](../../public/media/api-key-administration/image.png)
+![Services](/media/api-key-administration/image.png)
 
 You can view the buckets for each environment or for all environments using the
 drop down.
 
-![Environment Selection](../../public/media/api-key-administration/image-1.png)
+![Environment Selection](/media/api-key-administration/image-1.png)
 
 To open the API Key Bucket for an environment, click the **Configure** button.
 
-![Configure](../../public/media/api-key-administration/image-2.png)
+![Configure](/media/api-key-administration/image-2.png)
 
 When you first open the API Key Bucket, you will not have any API Keys created.
 
-![Empty API Key Bucket](../../public/media/api-key-administration/image-3.png)
+![Empty API Key Bucket](/media/api-key-administration/image-3.png)
 
 To add a new API Key Consumer click the **Create Consumer** button and complete
 the form.
 
-![New API Key Consumer](../../public/media/api-key-administration/image-4.png)
+![New API Key Consumer](/media/api-key-administration/image-4.png)
 
 Once a consumer is created, you can view or copy the API Key by clicking the
 icons shown.
 
-![Copy or View](../../public/media/api-key-administration/image-5.png)
+![Copy or View](/media/api-key-administration/image-5.png)
 
 If you're using the Zuplo [Developer Portal](./developer-portal.md), we have an
 integration with the API Key API that allows developers to access their API

diff --git a/docs/articles/api-key-api.md b/docs/articles/api-key-api.md
@@ -218,7 +218,7 @@ Sometimes you will want to create a new key and expire the current keys. Instead
 of calling the API for each key and manually creating a new key, you can simply
 call the roll key endpoint.
 
-:::tip Tags for Request Authorization
+:::tip{title="Tags for Request Authorization"}
 
 One useful feature of the API Key service is that most requests can have `tags`
 added to the query parameter even if they aren't get requests. This is useful

diff --git a/docs/articles/api-key-end-users.md b/docs/articles/api-key-end-users.md
@@ -26,7 +26,7 @@ the portal.
 When API Key Managers log into the Developer Portal they can copy, manage, or
 create new API Keys.
 
-![API Keys in Developer Portal](../../public/media/api-key-dev-portal.png)
+![API Keys in Developer Portal](/media/api-key-dev-portal.png)
 
 ## React Component and API
 

diff --git a/docs/articles/archiving-requests-to-storage.md b/docs/articles/archiving-requests-to-storage.md
@@ -17,7 +17,7 @@ Once you have your container you'll need the URL - you can get it on the
 > to deploy to your Zuplo account:
 > https://github.com/zuplo/samples-req-archive-filestorage
 
-![Azure](../../public/media/guides/archiving-requests-to-storage/Untitled.png)
+![Azure](/media/guides/archiving-requests-to-storage/Untitled.png)
 
 This URL will be the `blobPath` in our policy options.
 
@@ -29,13 +29,13 @@ permission. Choose a sensible start and expiration time for your token. Note, we
 do not recommend restricting IP addresses because Zuplo runs at the edge in over
 200 data-centers world-wide.
 
-![shared access tokens](../../public/media/guides/archiving-requests-to-storage/Untitled_1.png)
+![shared access tokens](/media/guides/archiving-requests-to-storage/Untitled_1.png)
 
 Then generate your SAS token - copy the token (not the URL) to the clipboard and
 enter it into a new environment variable in your zup called `BLOB_CREATE_SAS`.
 You'll need another environment variable called `BLOB_CONTAINER_PATH`.
 
-![Zuplo portal](../../public/media/guides/archiving-requests-to-storage/Untitled_2.png)
+![Zuplo portal](/media/guides/archiving-requests-to-storage/Untitled_2.png)
 
 > Note - production customers should talk to a Zuplo representative to get help
 > managing their secure keys.
@@ -113,4 +113,4 @@ property of your routes.
 
 Here's the policy in action:
 
-![Archive request policy in action](../../public/media/guides/archiving-requests-to-storage/2021-11-21_22.51.33.gif)
+![Archive request policy in action](/media/guides/archiving-requests-to-storage/2021-11-21_22.51.33.gif)
diff --git a/docs/articles/bonus-dynamic-rate-limiting.md b/docs/articles/bonus-dynamic-rate-limiting.md
@@ -11,7 +11,7 @@ To follow this tutorial you'll need to have completed
 [Step 3](./step-3-add-api-key-auth.md) to add API key authentication to that
 same route.
 
-:::info What's Dynamic Rate Limiting?
+:::info{title="What's Dynamic Rate Limiting?"}
 
 Traditionally, rate limits are static and the same for everyone. This approach
 does not let you tailor your rate limiting to your API user - you might want to
@@ -42,7 +42,7 @@ Step 3 to
 }
 ```
 
-![Customer Metadata](../../public/media/step-3-add-rate-limiting/image-2.png)
+![Customer Metadata](/media/step-3-add-rate-limiting/image-2.png)
 
 Now that we have users with different `customerType`, we can utilize this
 information to rate limit them differently.
@@ -53,9 +53,9 @@ Navigate back to the Code tab. Now add a new module to the files section by
 clicking on the `+` next to the **modules** folder and choose new empty module.
 Name the module `rate-limit.ts`.
 
-![New module](../../public/media/step-3-add-rate-limiting/image-3.png)
+![New module](/media/step-3-add-rate-limiting/image-3.png)
 
-:::info What's a Module?
+:::info{title="What's a Module?"}
 
 Modules are Typescript functions that you can execute within Zuplo. They are
 typically used to add custom code within the request/response pipeline (ex.
@@ -104,7 +104,7 @@ export function rateLimit(request: ZuploRequest, context: ZuploContext) {
 Now we'll reconfigure the rate-limiting policy to wire up our custom function.
 Find the policy in the **Route Designer** and click edit.
 
-![Edit Policy](../../public/media/step-3-add-rate-limiting/image-4.png)
+![Edit Policy](/media/step-3-add-rate-limiting/image-4.png)
 
 Update the configuration to
 

diff --git a/docs/articles/bypass-policy-for-testing.md b/docs/articles/bypass-policy-for-testing.md
@@ -91,7 +91,7 @@ the API Key Bucket you want to use and click **Create Consumer**. Enter a name
 for the consumer. Set the metadata to include the `testApiKey` flag as shown
 below.
 
-![Test API Key](../../public/media/bypass-policy-for-testing/image.png)
+![Test API Key](/media/bypass-policy-for-testing/image.png)
 
 Now when you call the API with the test API Key, the `monetization-inbound`
 policy will be bypassed.

diff --git a/docs/articles/custom-domains.md b/docs/articles/custom-domains.md
@@ -26,14 +26,14 @@ Go to your project in the Zuplo portal and open to the **Settings** tab (1),
 then select **Custom Domain** (2) and click on the `Add New Custom Domain`
 button to open the `New Custom Domain` configuration modal.
 
-![Custom Domain](../../public/media/custom-domains/image.png)
+![Custom Domain](/media/custom-domains/image.png)
 
 ### 2. Add your domain
 
 Then, pick the environment you want to assign the domain to and enter your apex
 domain (e.g. example.com) or subdomain (e.g. api.example.com)
 
-![Add New Domain](../../public/media/custom-domains/image-1.png)
+![Add New Domain](/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.
@@ -134,7 +134,7 @@ Trust Services as it has slightly better compatibility with clients.
 Certificates are issued for 90 days and are automatically renewed aproximately
 30 days before they expire. No action is required on your part.
 
-:::warning Certificate Pinning
+:::warning{title="Certificate Pinning"}
 
 Certificate pinning is not recommended for Zuplo APIs as the certificates are
 issued for short periods of time and renewed automatically. If you or your end
@@ -167,7 +167,7 @@ default certificates are issues with versions 1.2 and 1.3 enabled. If you
 require a specific version, please contact
 [[email protected]](mailto:[email protected]).
 
-:::note Legacy TLS Versions
+:::note{title="Legacy TLS Versions"}
 
 Early Zuplo customers may have certificates issued with TLS 1.0 and greater
 enabled. If you wish to upgrade to a higher TLS version, please contact