Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions components/accordions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ Accordions allow users to expand and collapse content sections. Use accordions f

## Single accordion

hello

<Accordion title="I am an Accordion.">
You can put any content in here, including other components, like code:
```java HelloWorld.java
Expand All @@ -24,13 +26,14 @@ Accordions allow users to expand and collapse content sections. Use accordions f
<Accordion title="I am an Accordion.">
You can put any content in here, including other components, like code:

```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```

</Accordion>
````

Expand All @@ -49,6 +52,7 @@ Group related accordions together using `<AccordionGroup>`. This creates a cohes
}
}
```

</Accordion>

<Accordion title="Advanced features" icon="bot">
Expand All @@ -72,12 +76,15 @@ Group related accordions together using `<AccordionGroup>`. This creates a cohes
}
}
```
</Accordion>

<Accordion title="Advanced features" icon="alien-8bit">
Add icons to make accordions more visually distinct and scannable.
</Accordion>

{" "}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Documentation examples: Remove hidden formatting.

The JSX expression {" "} was added to the code example block showing users how to use AccordionGroup. This appears in the documentation example that users would copy, not in actual rendered code. It's likely leftover debug or formatting code that shouldn't be part of the user-facing example.

Fix in Cursor Fix in Web


<Accordion title="Advanced features" icon="alien-8bit">
Add icons to make accordions more visually distinct and scannable.
</Accordion>

<Accordion title="Troubleshooting">
Keep related content organized into groups.
</Accordion>
Expand Down
2 changes: 2 additions & 0 deletions components/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
description: "Display code blocks in the right sidebar on desktop devices"
---

hello

The `<RequestExample>` and `<ResponseExample>` components display code blocks in the right sidebar to create a two-column layout that keeps examples visible while users scroll through your content. These components are designed for API documentation, but they work on all pages.

Check warning on line 8 in components/examples.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/examples.mdx#L8

In general, use active voice instead of passive voice ('are designed').

Common use cases:

Expand All @@ -12,7 +14,7 @@
- Code samples that users reference while following instructions
- Before and after examples in tutorials

On mobile devices, `<RequestExample>` and `<ResponseExample>` components display as regular code blocks and can be scrolled past.

Check warning on line 17 in components/examples.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/examples.mdx#L17

In general, use active voice instead of passive voice ('be scrolled').

<RequestExample>

Expand Down
34 changes: 0 additions & 34 deletions components/icons.mdx

This file was deleted.

6 changes: 6 additions & 0 deletions components/new-component.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
title: "New Component"
description: "New Component"
---

hello
40 changes: 25 additions & 15 deletions components/view.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,26 @@
description: "Create multi-view content for different programming languages or frameworks"
---

hello

Use the View component to create content that changes based on the selected view in a multi-view dropdown. This is particularly useful for showing code examples or documentation specific to different programming languages or frameworks.

<View title="JavaScript" icon="js">
This content is only visible when JavaScript is selected.

Check warning on line 11 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L11

In general, use active voice instead of passive voice ('is selected').

```javascript
console.log("Hello from JavaScript!");
```
```javascript
console.log("Hello from JavaScript!");
```

</View>

<View title="Python" icon="python">
This content is only visible when Python is selected.

Check warning on line 20 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L20

In general, use active voice instead of passive voice ('is selected').

```python
print("Hello from Python!")
```
```python
print("Hello from Python!")
```

</View>

## Example
Expand All @@ -27,30 +31,36 @@
<View title="JavaScript" icon="js">
This content is only visible when JavaScript is selected.

```javascript
console.log("Hello from JavaScript!");
```
```javascript
console.log("Hello from JavaScript!");
```

</View>

<View title="Python" icon="python">
This content is only visible when Python is selected.

Check warning on line 41 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L41

In general, use active voice instead of passive voice ('is selected').

```python
print("Hello from Python!")
```
```python
print("Hello from Python!")
```

</View>
````

## Properties

<ResponseField name="title" type="string" required>
The title that identifies this view. Must match one of the options in the multi-view dropdown.
The title that identifies this view. Must match one of the options in the
multi-view dropdown.
</ResponseField>

<ResponseField name="icon" type="string">
A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon.
A [Font Awesome](https://fontawesome.com/icons) icon,
[Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to
an icon.
</ResponseField>

<ResponseField name="iconType" type="string">
For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`,
`sharp-solid`, `duotone`, `brands`.
</ResponseField>
91 changes: 47 additions & 44 deletions create/image-embeds.mdx
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
---
title: "Images and embeds"
description: "Add images, videos, and iframes"

Check warning on line 3 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L3

'iframes' should use sentence-style capitalization.
---

hello

Add images, embed videos, and include interactive content with iframes to your documentation.

<Frame>
<img
className="rounded-xl"
src="https://mintlify-assets.b-cdn.net/bigbend.jpg"
alt="Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds."
/>
<img
className="rounded-xl"
src="https://mintlify-assets.b-cdn.net/bigbend.jpg"
alt="Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds."
/>
</Frame>

## Images
Expand All @@ -26,20 +28,21 @@
```

<Tip>
Always include descriptive alt text to improve accessibility and SEO. The alt text should clearly describe what the image shows.
Always include descriptive alt text to improve accessibility and SEO. The alt

Check warning on line 31 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L31

Spell out 'SEO', if it's unfamiliar to the audience.
text should clearly describe what the image shows.
</Tip>

Image files must be less than 20 MB. For larger files, host them on a CDN service like [Amazon S3](https://aws.amazon.com/s3) or [Cloudinary](https://cloudinary.com).

Check warning on line 35 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L35

Spell out 'CDN', if it's unfamiliar to the audience.

### HTML image embeds

Check warning on line 37 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L37

'HTML image embeds' should use sentence-style capitalization.

For more control over image display, use HTML `<img>` tags:

```jsx
<img
src="/images/dashboard.png"
<img
src="/images/dashboard.png"
alt="Main dashboard interface"
style={{height: "300px", width: "400px"}}
style={{ height: "300px", width: "400px" }}
className="rounded-lg"
/>
```
Expand All @@ -51,21 +54,17 @@
```jsx
<img
src="/images/architecture.png"
style={{width: "450px", height: "auto"}}
style={{ width: "450px", height: "auto" }}
alt="Diagram showing the architecture of the system"
/>
```

#### Disable zoom functionality

Check warning on line 62 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L62

Use 'capability' or 'feature' instead of 'functionality'.

To disable the default zoom on click for images, add the `noZoom` property:

Check warning on line 64 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L64

Use 'turn off' or 'off' instead of 'disable'.

```html highlight="4"
<img
src="/images/screenshot.png"
alt="Descriptive alt text"
noZoom
/>
<img src="/images/screenshot.png" alt="Descriptive alt text" noZoom />
```

#### Link images
Expand All @@ -74,16 +73,13 @@

```html
<a href="https://mintlify.com" target="_blank">
<img
src="/images/logo.png"
alt="Mintlify logo"
noZoom
/>
<img src="/images/logo.png" alt="Mintlify logo" noZoom />
</a>
```

<Note>
Images within anchor tags automatically display a pointer cursor to indicate they are clickable.
Images within anchor tags automatically display a pointer cursor to indicate
they are clickable.

Check warning on line 82 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L82

Use 'they're' instead of 'they are'.
</Note>

#### Light and dark mode images
Expand All @@ -92,16 +88,16 @@

```html
<!-- Light mode image -->
<img
className="block dark:hidden"
src="/images/light-mode.png"
<img
className="block dark:hidden"
src="/images/light-mode.png"
alt="Light mode interface"
/>

<!-- Dark mode image -->
<img
className="hidden dark:block"
src="/images/dark-mode.png"
<img
className="hidden dark:block"
src="/images/dark-mode.png"
alt="Dark mode interface"
/>
```
Expand All @@ -111,7 +107,8 @@
Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html), giving you flexibility to create rich content.

<Tip>
Always include fallback text content within video elements for browsers that don't support video playback.
Always include fallback text content within video elements for browsers that
don't support video playback.
</Tip>

### YouTube embeds
Expand All @@ -123,21 +120,21 @@
className="w-full aspect-video rounded-xl"
src="https://www.youtube.com/embed/4KzFe50RQkQ"
title="YouTube video player"
frameBorder="0"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

Check warning on line 124 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L124

Use semicolons judiciously.

Check warning on line 124 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L124

Use semicolons judiciously.

Check warning on line 124 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L124

Use semicolons judiciously.

Check warning on line 124 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L124

Use semicolons judiciously.

Check warning on line 124 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L124

Use semicolons judiciously.
allowFullScreen
allowfullscreen
></iframe>
```

<Frame>
<iframe
className="w-full aspect-video rounded-xl"
src="https://www.youtube.com/embed/4KzFe50RQkQ"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
<iframe
className="w-full aspect-video rounded-xl"
src="https://www.youtube.com/embed/4KzFe50RQkQ"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</Frame>

### Self-hosted videos
Expand All @@ -152,39 +149,45 @@
></video>
```

### Autoplay videos

Check warning on line 152 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L152

'Autoplay videos' should use sentence-style capitalization.

To autoplay a video, use:

```html
<video
autoPlay
autoplay
muted
loop
playsInline
playsinline
className="w-full aspect-video rounded-xl"
src="/videos/demo.mp4"
></video>
```

<Note>
When using JSX syntax, write double-word attributes in camelCase: `autoPlay`, `playsInline`, `allowFullScreen`.
When using JSX syntax, write double-word attributes in camelCase: `autoPlay`,
`playsInline`, `allowFullScreen`.
</Note>

## iframes

Embed external content using iframe elements:

```html
<iframe
src="https://example.com/embed"
<iframe
src="https://example.com/embed"
title="Embedded content"
className="w-full h-96 rounded-xl"
></iframe>
```

## Related resources

<Card title="Frame component reference" icon="frame" horizontal href="/components/frames">
<Card
title="Frame component reference"
icon="frame"
horizontal
href="/components/frames"
>
Learn how to use the Frame component for presenting images.
</Card>
Loading
Loading