updated images

Author: ntotten

.tool-versions

@@ -1 +1,2 @@
 nodejs 22.13.1
+python 3.13.0

docs/articles/source-control-setup-github.md docs/articles/source-control-setup-github.mdx

@@ -16,7 +16,10 @@ work with.
 Next, a dialog will open asking you to authorize Zuplo. Click the **Authorize
 Zuplo** button.
 
-![Zuplo GitHub permission](https://cdn.zuplo.com/assets/d6194a80-b6d6-429e-85a6-ae1cb4a3375e.png)
+<Framed margin={6}>
+  ![Zuplo GitHub
+  permission](https://cdn.zuplo.com/assets/d6194a80-b6d6-429e-85a6-ae1cb4a3375e.png)
+</Framed>
 
 <Callout type="tip" title="GitHub Permissions" >
 
@@ -35,13 +38,19 @@ edit a repository. If this is your first time connecting Zuplo, you will be
 immediately asked to select a GitHub Org to install Zuplo. Select the org you
 want to use.
 
-![Installing Zuplo app](https://cdn.zuplo.com/assets/eef76bd7-4d26-4f86-96e8-89ebede03beb.png)
+<Framed margin={6}>
+  ![Installing Zuplo
+  app](https://cdn.zuplo.com/assets/eef76bd7-4d26-4f86-96e8-89ebede03beb.png)
+</Framed>
 
 Next, you will be asked to select the repositories that you want Zuplo to
 access. The easiest thing is to just select **All Repositories**, but if you
 want fine-grain control, you can select a specific repository.
 
-![Giving Zuplo repository access](https://cdn.zuplo.com/assets/ff482269-9aa2-44c3-8266-b2682b3d6ea5.png)
+<Framed margin={6}>
+  ![Giving Zuplo repository
+  access](https://cdn.zuplo.com/assets/ff482269-9aa2-44c3-8266-b2682b3d6ea5.png)
+</Framed>
 
 <Callout type="caution" title="Existing Installation" >
 

docs/articles/step-1-setup-basic-gateway.md

@@ -102,8 +102,12 @@ Add an Environment Variable called `BASE_URL`. Leave the "Secret" checkbox
 unchecked. This is typically not a secret, so there's no need to hide this from
 your colleagues.
 
+<Framed margin={4}>
+
 ![BASE_URL Environment Variable](../../public/media/step-1-setup-basic-gateway/image-20.png)
 
+</Framed>
+
 Save the environment variable, head back to the **Code** tab, click
 `routes.oas.json`, and test your route again. You should get back the same
 response from Step 2.

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

@@ -37,8 +37,12 @@ with.
 Next, a dialog will open asking you to authorize Zuplo. Click the **Authorize
 Zuplo** button.
 
+<Framed margin={4}>
+  
 ![Zuplo GitHub connection](https://cdn.zuplo.com/assets/d6194a80-b6d6-429e-85a6-ae1cb4a3375e.png)
 
+</Framed>
+
 <Callout type="tip" title="GitHub Permissions" >
 
 The permission "Act on your behalf" sounds a bit scary - however, this is a
@@ -56,14 +60,22 @@ edit a repository. If this is your first time connecting Zuplo, you will be
 immediately asked to select a GitHub Org to install Zuplo. Select the org you
 want to use.
 
+<Framed margin={4}>
+
 ![Installing Zuplo app](https://cdn.zuplo.com/assets/eef76bd7-4d26-4f86-96e8-89ebede03beb.png)
 
+</Framed>
+
 Next, you will be asked to select the repositories that you want Zuplo to
 access. The easiest thing is to just select **All Repositories**, but if you
 want fine-grain control, you can select a specific repository.
 
+<Framed margin={4}>
+
 ![Choosing repository to install](https://cdn.zuplo.com/assets/ff482269-9aa2-44c3-8266-b2682b3d6ea5.png)
 
+</Framed>
+
 <Callout type="caution" title="Existing Installation" >
 
 The next step is only if you already have Zuplo installed in a GitHub org and
@@ -137,13 +149,21 @@ Push**.
 
 Enter a description of your change in the dialog that pops up:
 
+<Framed margin={4}>
+
 ![Change Summary](../../public/media/step-4-deploying-to-the-edge/image-8.png)
 
+</Framed>
+
 Click **Commit & Push** will create a new temporary branch in GitHub with a name
 `zup-...`. On the next dialog, click **Create Pull Request**.
 
+<Framed margin={4}>
+
 ![Create PR](../../public/media/step-4-deploying-to-the-edge/image-9.png)
 
+</Framed>
+
 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's the
 environment we want to update first). Click **Create pull request**.

src/components.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from "react";
+import { lazy, Suspense } from "react";
 import { CogIcon, CopyIcon, FileTextIcon, ListEndIcon } from "zudoku/icons";
 import { BundlesTable } from "./BundlesTable.js";
 import { DocusaurusDocsLicense } from "./DocusaurusDocsLicense.js";
@@ -12,7 +12,16 @@ const iconStyle = { display: "inline", verticalAlign: "-0.125em" };
 const EmbeddedChat = lazy(() => import("./EmbeddedChat.js"));
 
 export const mdxComponents = {
-  Screenshot: (props: any) => <img {...props} />,
+  Framed: (props: { margin: number | undefined }) => (
+    <div
+      className="[&>p]:m-0 [&>p]:p-0 [&>p>img]:m-0 [&>p>img]:p-0 my-[32px]"
+      style={{
+        marginRight: props.margin ? `${props.margin}rem` : "auto",
+        marginLeft: props.margin ? `${props.margin}rem` : "auto",
+      }}
+      {...props}
+    />
+  ),
   DocusaurusDocsLicense,
   GithubButton,
   ZupIt: (props: any) => <ZupIt {...props} />,
@@ -51,7 +60,13 @@ export const mdxComponents = {
       }
     }
 
-    return <img {...props} srcSet={srcSet} />;
+    return (
+      <img
+        className="border border-[#eaecef] overflow-hidden rounded-sm"
+        {...props}
+        srcSet={srcSet}
+      />
+    );
   },
   PolicyOverview,
   EnterpriseFeature,