diff --git a/advanced/subpath/vercel.mdx b/advanced/subpath/vercel.mdx
index 859395776..de4825471 100644
--- a/advanced/subpath/vercel.mdx
+++ b/advanced/subpath/vercel.mdx
@@ -23,8 +23,14 @@ following configuration to your `vercel.json` file.
}
```
+
+
+
+
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)
+
+
\ No newline at end of file
diff --git a/api-playground/overview.mdx b/api-playground/overview.mdx
index c222ffedf..a7a5a95e0 100644
--- a/api-playground/overview.mdx
+++ b/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.
+
+
+
+
Autogenerating API pages with OpenAPI will automatically generate API
playground. Read more about using OpenAPI with Mintlify
[here](/api-playground/openapi).
+
+
\ No newline at end of file
diff --git a/content/components/images.mdx b/content/components/images.mdx
new file mode 100644
index 000000000..c6a4a8822
--- /dev/null
+++ b/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
+
+```
+
+### HTML Syntax
+```html
+
+```
+
+## 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.
\ No newline at end of file
diff --git a/content/components/steps.mdx b/content/components/steps.mdx
index 09700a488..c916d2bb2 100644
--- a/content/components/steps.mdx
+++ b/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.
+
+
+
+
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
The size of the step titles. One of `p`, `h2` and `h3`.
-
+
\ No newline at end of file
diff --git a/integrations/analytics/logrocket.mdx b/integrations/analytics/logrocket.mdx
index 702de184b..e008bbb6c 100644
--- a/integrations/analytics/logrocket.mdx
+++ b/integrations/analytics/logrocket.mdx
@@ -4,10 +4,14 @@ title: "LogRocket"
Add the following to your `mint.json` file to send analytics to LogRocket.
+
+
+
+
```json Analytics options in mint.json
"analytics": {
"logrocket": {
"apiKey": "required"
}
}
-```
+```
\ No newline at end of file
diff --git a/integrations/analytics/pirsch.mdx b/integrations/analytics/pirsch.mdx
index e4b3e3085..66af87ebf 100644
--- a/integrations/analytics/pirsch.mdx
+++ b/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.
+
+
+
+
```json Analytics options in mint.json
@@ -25,3 +29,4 @@ You can get your site ID from Settings \> Developer \> Identification Code.
```
+
\ No newline at end of file
diff --git a/integrations/analytics/posthog.mdx b/integrations/analytics/posthog.mdx
index b78cabb18..cb8b930d7 100644
--- a/integrations/analytics/posthog.mdx
+++ b/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.
+
+
+
+
\ No newline at end of file
diff --git a/integrations/privacy/osano.mdx b/integrations/privacy/osano.mdx
index ded3d2d59..00f3db41e 100644
--- a/integrations/privacy/osano.mdx
+++ b/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
-```
\ No newline at end of file
+```
+
+
+
+
\ No newline at end of file
diff --git a/integrations/privacy/overview.mdx b/integrations/privacy/overview.mdx
index 737baebe5..47c322cc8 100644
--- a/integrations/privacy/overview.mdx
+++ b/integrations/privacy/overview.mdx
@@ -13,6 +13,10 @@ description: "Integrate with a data privacy platform"
+
+
+
+
## 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).
\ No newline at end of file
diff --git a/integrations/sdks/stainless.mdx b/integrations/sdks/stainless.mdx
index 8a21bfab4..c39918279 100644
--- a/integrations/sdks/stainless.mdx
+++ b/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:
+
+
+
+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.
\ No newline at end of file
diff --git a/reusable-snippets.mdx b/reusable-snippets.mdx
index 0ad0ee9ee..dda72b857 100644
--- a/reusable-snippets.mdx
+++ b/reusable-snippets.mdx
@@ -131,6 +131,38 @@ Lorem ipsum dolor sit amet.
```
+### 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 }) => (
+
+
+ {caption}
+
+);
+```
+
+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';
+
+
+```
+
+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
}
}
-```
+```
\ No newline at end of file
diff --git a/settings/authentication-personalization/authentication-setup/choosing-a-handshake.mdx b/settings/authentication-personalization/authentication-setup/choosing-a-handshake.mdx
index c3f7afd6e..12b4e480c 100644
--- a/settings/authentication-personalization/authentication-setup/choosing-a-handshake.mdx
+++ b/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:
+
+
+
+
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
-
+
\ No newline at end of file
diff --git a/settings/authentication-personalization/authentication-setup/jwt.mdx b/settings/authentication-personalization/authentication-setup/jwt.mdx
index d35fd7e3a..90e8c0419 100644
--- a/settings/authentication-personalization/authentication-setup/jwt.mdx
+++ b/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.
-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.
+
+
+
+
## 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)
```
-
+
\ No newline at end of file
diff --git a/settings/authentication-personalization/personalization-setup/oauth.mdx b/settings/authentication-personalization/personalization-setup/oauth.mdx
index d786a042f..055db7bd7 100644
--- a/settings/authentication-personalization/personalization-setup/oauth.mdx
+++ b/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
+
+
+
+
## 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.
\ No newline at end of file
diff --git a/text.mdx b/text.mdx
index 45cec9193..2d9768066 100644
--- a/text.mdx
+++ b/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
+
+```
+
+You can also add images using HTML for more control over sizing and attributes:
+
+```html
+
+```
+
+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
\ No newline at end of file
+
+
+
+
+```
+
+## 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.
\ No newline at end of file
diff --git a/content/components/steps.mdx b/content/components/steps.mdx
index 09700a488..c916d2bb2 100644
--- a/content/components/steps.mdx
+++ b/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.
+
+ 
+
+
+
+
```json Analytics options in mint.json
"analytics": {
"logrocket": {
"apiKey": "required"
}
}
-```
+```
\ No newline at end of file
diff --git a/integrations/analytics/pirsch.mdx b/integrations/analytics/pirsch.mdx
index e4b3e3085..66af87ebf 100644
--- a/integrations/analytics/pirsch.mdx
+++ b/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.
+
+ 
+
+
+
\ No newline at end of file
diff --git a/integrations/privacy/osano.mdx b/integrations/privacy/osano.mdx
index ded3d2d59..00f3db41e 100644
--- a/integrations/privacy/osano.mdx
+++ b/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
-```
\ No newline at end of file
+```
+
+
+ 
+
\ No newline at end of file
diff --git a/integrations/privacy/overview.mdx b/integrations/privacy/overview.mdx
index 737baebe5..47c322cc8 100644
--- a/integrations/privacy/overview.mdx
+++ b/integrations/privacy/overview.mdx
@@ -13,6 +13,10 @@ description: "Integrate with a data privacy platform"
+
+ 
+
+
## 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).
\ No newline at end of file
diff --git a/integrations/sdks/stainless.mdx b/integrations/sdks/stainless.mdx
index 8a21bfab4..c39918279 100644
--- a/integrations/sdks/stainless.mdx
+++ b/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:
+
+ 
+
+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.
\ No newline at end of file
diff --git a/reusable-snippets.mdx b/reusable-snippets.mdx
index 0ad0ee9ee..dda72b857 100644
--- a/reusable-snippets.mdx
+++ b/reusable-snippets.mdx
@@ -131,6 +131,38 @@ Lorem ipsum dolor sit amet.
+
+
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
-
+
\ No newline at end of file
diff --git a/settings/authentication-personalization/authentication-setup/jwt.mdx b/settings/authentication-personalization/authentication-setup/jwt.mdx
index d35fd7e3a..90e8c0419 100644
--- a/settings/authentication-personalization/authentication-setup/jwt.mdx
+++ b/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.
-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.
+
+
+ 
+
## 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)
```
-
+
\ No newline at end of file
diff --git a/settings/authentication-personalization/personalization-setup/oauth.mdx b/settings/authentication-personalization/personalization-setup/oauth.mdx
index d786a042f..055db7bd7 100644
--- a/settings/authentication-personalization/personalization-setup/oauth.mdx
+++ b/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
+
+
## 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.
\ No newline at end of file
diff --git a/text.mdx b/text.mdx
index 45cec9193..2d9768066 100644
--- a/text.mdx
+++ b/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
+
+```
+
+You can also add images using HTML for more control over sizing and attributes:
+
+```html
+
+```
+
+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
\ No newline at end of file