Docs: Add Image Creation Documentation and Update Related Pages

advanced/subpath/vercel.mdx

@@ -23,8 +23,14 @@ following configuration to your `vercel.json` file.
 }
 ```
 
+<Frame>
+  <img src="/images/vercel-subpath-config.png" alt="Vercel configuration for docs subpath" />
+</Frame>
+
 <Note>
   For more information, you can also refer to Vercel's offical guide on
   rewrites: [Project Configuration:
   Rewrites](https://vercel.com/docs/projects/project-configuration#rewrites)
 </Note>
+</fileContent>
+</invoke>

api-playground/overview.mdx

@@ -8,8 +8,14 @@ icon: 'play'
 
 The API playground is an interactive environment to make requests and preview an API endpoint.
 
+<Frame>
+  <img src="/images/api-playground-example.png" alt="API Playground Interface" />
+</Frame>
+
 <Info>
   Autogenerating API pages with OpenAPI will automatically generate API
   playground. Read more about using OpenAPI with Mintlify
   [here](/api-playground/openapi).
 </Info>
+</newContent>
+</invoke>

content/components/images.mdx

@@ -0,0 +1,49 @@
+# Images
+
+Images are an essential part of creating engaging and informative content. This guide will help you understand how to work with images effectively in your project.
+
+## Adding Images
+
+To add an image to your content, you can use either Markdown or HTML syntax:
+
+### Markdown Syntax
+```markdown
+![Alt text](/path/to/image.jpg)
+```
+
+### HTML Syntax
+```html
+<img src="/path/to/image.jpg" alt="Alt text" />
+```
+
+## Best Practices
+
+1. **Always include alt text**: Provide descriptive alternative text for accessibility.
+2. **Optimize image sizes**: Compress images before uploading to improve load times.
+3. **Use appropriate formats**: Choose the right format (JPG, PNG, WebP) based on your needs.
+4. **Responsive images**: Consider using responsive image techniques for different screen sizes.
+
+## Image Dimensions
+
+- Keep images at a reasonable size that fits your layout
+- Consider using standard aspect ratios
+- Avoid uploading extremely large images that need to be scaled down
+
+## Supported Formats
+
+The following image formats are supported:
+- JPG/JPEG
+- PNG
+- GIF
+- WebP
+- SVG
+
+## Tips for Image Optimization
+
+1. Compress images before uploading
+2. Choose the appropriate format for your use case
+3. Consider lazy loading for better performance
+4. Use descriptive file names
+5. Store images in the appropriate directory structure
+
+For more specific implementation details or advanced image handling techniques, please refer to our advanced guides.

content/components/steps.mdx

@@ -6,6 +6,10 @@ icon: 'arrow-progress'
 
 Steps are the best way to display a series of actions of events to your users. You can add as many steps as desired.
 
+<Frame>
+  <img src="/images/steps-example.png" alt="Example of the Steps component showing three numbered steps with titles and content" />
+</Frame>
+
 <Steps>
   <Step title="First Step">
     These are instructions or content that only pertain to the first step.
@@ -70,4 +74,4 @@ Steps are the best way to display a series of actions of events to your users. Y
 
 <ResponseField name="titleSize" type="string" default="p">
   The size of the step titles. One of `p`, `h2` and `h3`.
-</ResponseField>
+</ResponseField>

integrations/analytics/logrocket.mdx

@@ -4,10 +4,14 @@ title: "LogRocket"
 
 Add the following to your `mint.json` file to send analytics to LogRocket.
 
+<Frame>
+  <img src="/images/integrations/logrocket-dashboard.png" alt="LogRocket Analytics Dashboard" />
+</Frame>
+
 ```json Analytics options in mint.json
 "analytics": {
     "logrocket": {
         "apiKey": "required"
     }
 }
-```
+```

integrations/analytics/pirsch.mdx

@@ -6,6 +6,10 @@ Add the following to your `mint.json` file to send analytics to Pirsch.
 
 You can get your site ID from Settings \> Developer \> Identification Code.
 
+<Frame>
+  <img src="/images/analytics/pirsch-settings.png" alt="Pirsch dashboard settings showing where to find the site ID" />
+</Frame>
+
 <CodeGroup>
 
 ```json Analytics options in mint.json
@@ -25,3 +29,4 @@ You can get your site ID from Settings \> Developer \> Identification Code.
 ```
 
 </CodeGroup>
+</fileContent>

integrations/analytics/posthog.mdx

@@ -36,3 +36,7 @@ You only need to include `apiHost` if you are self-hosting PostHog. We send even
 ## Session Recordings
 
 You need to add the URL for your docs website to Posthog's "Authorized domains for recordings" before you can receive session recordings. The option to add your URL is in Posthog's project settings.
+
+<Frame>
+  <img src="/images/posthog-authorized-domains.png" alt="PostHog Authorized Domains Settings" />
+</Frame>

integrations/privacy/osano.mdx

@@ -24,4 +24,8 @@ The `SOURCE` can be found as the `src` value in the code snippet generated by Os
 
 ```html Code snippet from Osano
 <script src="https://cmp.osano.com/placeholder/placeholder/osano.js"/>
-```
+```
+
+<Frame>
+  <img src="/images/osano-consent-banner.png" alt="Example of Osano cookie consent banner" />
+</Frame>

integrations/privacy/overview.mdx

@@ -13,6 +13,10 @@ description: "Integrate with a data privacy platform"
   </Card>
 </CardGroup>
 
+<Frame>
+  <img src="/images/privacy-integration-overview.png" alt="Diagram showing how privacy integrations connect with your documentation" />
+</Frame>
+
 ## Enabling Data Privacy Integrations
 
 You can add data privacy platforms onto your docs. Add the `integrations` field into your `mint.json` file with your respective scripts.
@@ -23,4 +27,4 @@ You can add data privacy platforms onto your docs. Add the `integrations` field
   }
 ```
 
-If you'd like to request a data privacy platform integration, please let us know in [our community](https://mintlify.com/community).
+If you'd like to request a data privacy platform integration, please let us know in [our community](https://mintlify.com/community).

integrations/sdks/stainless.mdx

@@ -10,8 +10,11 @@ openapi:
   code_samples: mintlify
 ```
 
-Configure the [OpenAPI setup](/api-playground/openapi/setup#in-the-repo) in your Mintlify docs. To integrate Stainless, modify the GitHub Action that uploads your OpenAPI spec to Stainless so that it pushes the Stainless-enhanced OpenAPI spec into your docs repo like so:
+<Frame>
+  <img src="/images/stainless-workflow.png" alt="Workflow diagram showing how Stainless integrates with GitHub Actions and Mintlify docs" />
+</Frame>
 
+Configure the [OpenAPI setup](/api-playground/openapi/setup#in-the-repo) in your Mintlify docs. To integrate Stainless, modify the GitHub Action that uploads your OpenAPI spec to Stainless so that it pushes the Stainless-enhanced OpenAPI spec into your docs repo like so:
 
 ```yaml
 name: Upload OpenAPI spec to Stainless and (Mintlify) docs repo
@@ -49,4 +52,4 @@ jobs:
 This assumes the following secrets have been [uploaded to your GitHub Actions Secrets](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions):
 
 - `secrets.STAINLESS_API_KEY`: Your Stainless API key.
-- `secrets.API_TOKEN_GITHUB`: A GitHub [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) with permissions to push to your docs repo.
+- `secrets.API_TOKEN_GITHUB`: A GitHub [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) with permissions to push to your docs repo.

reusable-snippets.mdx

@@ -131,6 +131,38 @@ Lorem ipsum dolor sit amet.
 <MyComponent title={'Custom title'} />
 ```
 
+### Reusable Images
+
+1. Create an image snippet that you can reuse across your documentation:
+
+```typescript snippets/image-snippet.mdx
+export const ImageWithCaption = ({ src, alt, caption }) => (
+  <figure>
+    <img src={src} alt={alt} />
+    <figcaption>{caption}</figcaption>
+  </figure>
+);
+```
+
+2. Import and use the image snippet in your destination file:
+
+```typescript destination-file.mdx
+---
+title: My title
+description: My Description
+---
+
+import { ImageWithCaption } from '/snippets/image-snippet.mdx';
+
+<ImageWithCaption 
+  src="/images/example.png"
+  alt="Example image"
+  caption="This is an example image with a caption"
+/>
+```
+
+You can also create more complex image components with additional features like sizing, borders, or hover effects by extending the component properties and styling.
+
 ### Client-Side Content
 
 By default, Mintlify employs server-side rendering, generating content
@@ -153,4 +185,4 @@ export const ClientComponent = () => {
     return <div id="client-component"></div>
   }
 }
-```
+```

settings/authentication-personalization/authentication-setup/choosing-a-handshake.mdx

@@ -9,6 +9,10 @@ description: 'How to decide which Handshake method is right for your docs'
 
 Before your users can access personalized content, they must be authenticated. Mintlify supports four Authentication Handshake methods:
 
+<Frame>
+  <img src="/images/authentication-handshake-methods.png" alt="Four authentication handshake methods: Password, JWT, OAuth 2.0, and Mintlify Dashboard. Each method is represented with its key characteristics and connection flow." />
+</Frame>
+
 1. **Password**: Configure a set of global passwords for your documentation site.
 2. **JWT**: Use your own login flow to authenticate your users via a JWT in the URL.
 3. **OAuth 2.0**: Integrate with your OAuth server to enable user login via the standard Authorization Code flow.
@@ -81,4 +85,4 @@ Before your users can access personalized content, they must be authenticated. M
 
     - Requires all docs readers to have an account in your Mintlify dashboard
   </Tab>
-</Tabs>
+</Tabs>

settings/authentication-personalization/authentication-setup/jwt.mdx

@@ -7,7 +7,11 @@ description: 'Use a customized login flow to authenticate users'
   This is the documentation for the JWT **Authentication** Handshake. The steps for setting up the [JWT **Personalization** Handshake](/settings/authentication-personalization/personalization-setup/jwt) are slightly different.
 </Info>
 
-If you don’t have a dashboard, or if you want to keep your dashboard and docs completely separate, you can use your own login flow to authenticate users via a JWT in the URL.
+If you don't have a dashboard, or if you want to keep your dashboard and docs completely separate, you can use your own login flow to authenticate users via a JWT in the URL.
+
+<Frame>
+  <img src="/images/jwt-auth-flow.png" alt="JWT Authentication Flow Diagram showing the process flow between User, Your Backend, and Mintlify Docs" />
+</Frame>
 
 ## Implementation
 
@@ -30,12 +34,12 @@ If you don’t have a dashboard, or if you want to keep your dashboard and docs
 ## Example
 
 I want to set up authentication for my docs hosted at `docs.foo.com`. I want my docs
-to be completely separate from my dashboard (or I don’t have a dashboard at all).
+to be completely separate from my dashboard (or I don't have a dashboard at all).
 
 To set up authentication with Mintlify, I go to my Mintlify dashboard and generate a
 JWT secret. I create a web URL `https://foo.com/docs-login` that initiates a login flow
 for my users. At the end of this login flow, once I have verified the identity of the user,
-I create a JWT containing the user’s custom data according to Mintlify’s specification.
+I create a JWT containing the user's custom data according to Mintlify's specification.
 I use a JWT library to sign this JWT with my Mintlify secret, create a redirect URL of the
 form `https://docs.foo.com/login/jwt-callback#{SIGNED_JWT}`, and redirect the user.
 
@@ -99,4 +103,4 @@ async def return_mintlify_auth_status(current_user):
 
   return RedirectResponse(url=f'https://docs.foo.com/login/jwt-callback#{jwt_token}', status_code=302)
 ```
-</CodeGroup>
+</CodeGroup>

settings/authentication-personalization/personalization-setup/oauth.mdx

@@ -29,11 +29,15 @@ If you have an existing OAuth server that supports the PKCE flow, you can integr
   </Step>
 </Steps>
 
+<Frame>
+  <img src="/images/oauth-personalization-flow.png" alt="OAuth PKCE Flow Configuration Diagram" />
+</Frame>
+
 ## Example
 
 I have an existing OAuth server that supports the PKCE flow. I want to set up authentication for my docs hosted at `foo.com/docs`.
 
-To set up authentication with Mintlify, I create an endpoint `api.foo.com/docs/user-info` which requires an OAuth access token with the `docs-user-info` scope, and responds with the user's custom data according to Mintlify’s specification.
+To set up authentication with Mintlify, I create an endpoint `api.foo.com/docs/user-info` which requires an OAuth access token with the `docs-user-info` scope, and responds with the user's custom data according to Mintlify's specification.
 
 I then go to the Mintlify dashboard settings, navigate to the Personalization settings, select OAuth, and enter the relevant values for the OAuth flow and Info API endpoint:
 - **Authorization URL**: `https://auth.foo.com/authorization`
@@ -42,4 +46,4 @@ I then go to the Mintlify dashboard settings, navigate to the Personalization se
 - **Token URL**: `https://auth.foo.com/exchange`
 - **Info API URL**: `https://api.foo.com/docs/user-info`
 
-Finally, I copy the Redirect URL displayed in the dashboard settings and add it as an authorized redirect URL in my OAuth client configuration settings.
+Finally, I copy the Redirect URL displayed in the dashboard settings and add it as an authorized redirect URL in my OAuth client configuration settings.

text.mdx

@@ -104,3 +104,23 @@ Paragraph 1
 
 Paragraph 2
 ```
+
+## Images
+
+You can add images using standard markdown syntax. The format is similar to links but with an exclamation mark (!) at the beginning:
+
+```md
+![Alt text for the image](path/to/image.jpg)
+```
+
+You can also add images using HTML for more control over sizing and attributes:
+
+```html
+<img src="path/to/image.jpg" alt="Alt text" width="300" height="200" />
+```
+
+When adding images to your documentation, make sure to:
+- Use descriptive alt text for accessibility
+- Store images in an appropriate directory within your project
+- Use relative paths when referencing local images
+- Consider image file size for optimal loading performance