diff --git a/components/accordions.mdx b/components/accordions.mdx index 8e541b847..b825409dd 100644 --- a/components/accordions.mdx +++ b/components/accordions.mdx @@ -9,6 +9,8 @@ Accordions allow users to expand and collapse content sections. Use accordions f ## Single accordion +hello + You can put any content in here, including other components, like code: ```java HelloWorld.java @@ -24,13 +26,14 @@ Accordions allow users to expand and collapse content sections. Use accordions f 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!"); + } + } +``` + ```` @@ -49,6 +52,7 @@ Group related accordions together using ``. This creates a cohes } } ``` + @@ -72,12 +76,15 @@ Group related accordions together using ``. This creates a cohes } } ``` - - - Add icons to make accordions more visually distinct and scannable. +{" "} + + + Add icons to make accordions more visually distinct and scannable. + + Keep related content organized into groups. diff --git a/components/examples.mdx b/components/examples.mdx index fd2a4aab4..5e23d7ee9 100644 --- a/components/examples.mdx +++ b/components/examples.mdx @@ -3,6 +3,8 @@ title: "Examples" description: "Display code blocks in the right sidebar on desktop devices" --- +hello + The `` and `` 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. Common use cases: diff --git a/components/icons.mdx b/components/icons.mdx deleted file mode 100644 index 2a26b9ebd..000000000 --- a/components/icons.mdx +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: "Icons" -description: "Use icons from popular icon libraries" ---- - -import IconsRequired from "/snippets/icons-required.mdx"; - -Use icons from Font Awesome, Lucide, SVGs, external URLs, or files in your project to enhance your documentation. - - - -```mdx Icon example - -``` - -## Inline icons - -Icons are placed inline when used within a sentence, paragraph, or heading. Use icons for decoration or to add visual emphasis. - -```markdown Inline icon example -Icons are placed inline when used within a sentence, paragraph, or heading. Use icons for decoration or to add visual emphasis. -``` - -## Properties - - - - - The color of the icon as a hex code (for example, `#FF5733`). - - - - The size of the icon in pixels. - diff --git a/components/new-component.mdx b/components/new-component.mdx new file mode 100644 index 000000000..f4081f2b3 --- /dev/null +++ b/components/new-component.mdx @@ -0,0 +1,6 @@ +--- +title: "New Component" +description: "New Component" +--- + +hello diff --git a/components/view.mdx b/components/view.mdx index 409d3308c..20dc76496 100644 --- a/components/view.mdx +++ b/components/view.mdx @@ -3,22 +3,26 @@ title: "View" 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. This content is only visible when JavaScript is selected. - ```javascript - console.log("Hello from JavaScript!"); - ``` +```javascript +console.log("Hello from JavaScript!"); +``` + This content is only visible when Python is selected. - ```python - print("Hello from Python!") - ``` +```python +print("Hello from Python!") +``` + ## Example @@ -27,30 +31,36 @@ Use the View component to create content that changes based on the selected view This content is only visible when JavaScript is selected. - ```javascript - console.log("Hello from JavaScript!"); - ``` +```javascript +console.log("Hello from JavaScript!"); +``` + This content is only visible when Python is selected. - ```python - print("Hello from Python!") - ``` +```python +print("Hello from Python!") +``` + ```` ## Properties - 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. - 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. - 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`. diff --git a/create/image-embeds.mdx b/create/image-embeds.mdx index f99435dc6..6740a3eca 100644 --- a/create/image-embeds.mdx +++ b/create/image-embeds.mdx @@ -3,14 +3,16 @@ title: "Images and embeds" description: "Add images, videos, and iframes" --- +hello + Add images, embed videos, and include interactive content with iframes to your documentation. -Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds. + Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds. ## Images @@ -26,7 +28,8 @@ Use [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images) to add ``` - 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 + text should clearly describe what the image shows. 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). @@ -36,10 +39,10 @@ Image files must be less than 20 MB. For larger files, host them on a CDN servic For more control over image display, use HTML `` tags: ```jsx -Main dashboard interface ``` @@ -51,7 +54,7 @@ Use JSX inline styles with the `style` attribute to resize images: ```jsx Diagram showing the architecture of the system ``` @@ -61,11 +64,7 @@ Use JSX inline styles with the `style` attribute to resize images: To disable the default zoom on click for images, add the `noZoom` property: ```html highlight="4" -Descriptive alt text +Descriptive alt text ``` #### Link images @@ -74,16 +73,13 @@ To make an image a clickable link, wrap the image in an anchor tag and add the ` ```html - Mintlify logo + Mintlify logo ``` - 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. #### Light and dark mode images @@ -92,16 +88,16 @@ To display different images for light and dark themes, use Tailwind CSS classes: ```html -Light mode interface -Dark mode interface ``` @@ -111,7 +107,8 @@ To display different images for light and dark themes, use Tailwind CSS classes: Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html), giving you flexibility to create rich content. - 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. ### YouTube embeds @@ -123,21 +120,21 @@ Embed YouTube videos using iframe elements: 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" - allowFullScreen + allowfullscreen > ``` - + ### Self-hosted videos @@ -158,17 +155,18 @@ To autoplay a video, use: ```html ``` - 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`. ## iframes @@ -176,8 +174,8 @@ To autoplay a video, use: Embed external content using iframe elements: ```html - @@ -185,6 +183,11 @@ Embed external content using iframe elements: ## Related resources - + Learn how to use the Frame component for presenting images. diff --git a/docs.json b/docs.json index 8cad8e8e5..e48da226d 100644 --- a/docs.json +++ b/docs.json @@ -76,6 +76,7 @@ "group": "Components", "pages": [ "components/accordions", + "components/new-component", "components/banner", "components/callouts", "components/cards", @@ -85,7 +86,6 @@ "components/expandables", "components/fields", "components/frames", - "components/icons", "components/mermaid-diagrams", "components/panel", "components/responses", @@ -169,10 +169,7 @@ }, { "group": "Insights", - "pages": [ - "insights/overview", - "insights/feedback" - ] + "pages": ["insights/overview", "insights/feedback"] }, "optimize/seo", "optimize/pdf-exports", @@ -245,9 +242,7 @@ { "group": "API docs", "icon": "file-json", - "pages": [ - "guides/migrating-from-mdx" - ] + "pages": ["guides/migrating-from-mdx"] }, { "group": "Best practices", @@ -267,10 +262,7 @@ { "group": "Git", "icon": "git-merge", - "pages": [ - "guides/git-concepts", - "guides/branches" - ] + "pages": ["guides/git-concepts", "guides/branches"] } ] }, @@ -280,17 +272,12 @@ { "group": "API reference", "icon": "file-json", - "pages": [ - "api/introduction" - ] + "pages": ["api/introduction"] }, { "group": "Admin", "icon": "activity", - "pages": [ - "api/update/trigger", - "api/update/status" - ] + "pages": ["api/update/trigger", "api/update/status"] }, { "group": "Agent", @@ -317,9 +304,7 @@ { "group": "Changelog", "icon": "calendar", - "pages": [ - "changelog" - ] + "pages": ["changelog"] } ] } @@ -479,10 +464,7 @@ }, { "group": "洞察", - "pages": [ - "zh/insights/overview", - "zh/insights/feedback" - ] + "pages": ["zh/insights/overview", "zh/insights/feedback"] }, "zh/optimize/seo", "zh/optimize/pdf-exports", @@ -554,9 +536,7 @@ { "group": "API 文档", "icon": "file-json", - "pages": [ - "zh/guides/migrating-from-mdx" - ] + "pages": ["zh/guides/migrating-from-mdx"] }, { "group": "最佳实践", @@ -576,10 +556,7 @@ { "group": "Git", "icon": "git-merge", - "pages": [ - "zh/guides/git-concepts", - "zh/guides/branches" - ] + "pages": ["zh/guides/git-concepts", "zh/guides/branches"] } ] }, @@ -589,17 +566,12 @@ { "group": "API 参考", "icon": "file-json", - "pages": [ - "zh/api/introduction" - ] + "pages": ["zh/api/introduction"] }, { "group": "管理员", "icon": "activity", - "pages": [ - "zh/api/update/trigger", - "zh/api/update/status" - ] + "pages": ["zh/api/update/trigger", "zh/api/update/status"] }, { "group": "代理", @@ -626,9 +598,7 @@ { "group": "更新日志", "icon": "calendar", - "pages": [ - "zh/changelog" - ] + "pages": ["zh/changelog"] } ] } @@ -788,10 +758,7 @@ }, { "group": "Información detallada", - "pages": [ - "es/insights/overview", - "es/insights/feedback" - ] + "pages": ["es/insights/overview", "es/insights/feedback"] }, "es/optimize/seo", "es/optimize/pdf-exports", @@ -863,9 +830,7 @@ { "group": "Documentación de la API", "icon": "file-json", - "pages": [ - "es/guides/migrating-from-mdx" - ] + "pages": ["es/guides/migrating-from-mdx"] }, { "group": "Mejores prácticas", @@ -885,10 +850,7 @@ { "group": "Git", "icon": "git-merge", - "pages": [ - "es/guides/git-concepts", - "es/guides/branches" - ] + "pages": ["es/guides/git-concepts", "es/guides/branches"] } ] }, @@ -898,17 +860,12 @@ { "group": "Referencia de la API", "icon": "file-json", - "pages": [ - "es/api/introduction" - ] + "pages": ["es/api/introduction"] }, { "group": "Administrador", "icon": "activity", - "pages": [ - "es/api/update/trigger", - "es/api/update/status" - ] + "pages": ["es/api/update/trigger", "es/api/update/status"] }, { "group": "Agente", @@ -935,9 +892,7 @@ { "group": "Cambios", "icon": "calendar", - "pages": [ - "es/changelog" - ] + "pages": ["es/changelog"] } ] } @@ -1097,10 +1052,7 @@ }, { "group": "Analyses", - "pages": [ - "fr/insights/overview", - "fr/insights/feedback" - ] + "pages": ["fr/insights/overview", "fr/insights/feedback"] }, "fr/optimize/seo", "fr/optimize/pdf-exports", @@ -1172,9 +1124,7 @@ { "group": "Documentation de l’API", "icon": "file-json", - "pages": [ - "fr/guides/migrating-from-mdx" - ] + "pages": ["fr/guides/migrating-from-mdx"] }, { "group": "Bonnes pratiques", @@ -1194,10 +1144,7 @@ { "group": "Git", "icon": "git-merge", - "pages": [ - "fr/guides/git-concepts", - "fr/guides/branches" - ] + "pages": ["fr/guides/git-concepts", "fr/guides/branches"] } ] }, @@ -1207,17 +1154,12 @@ { "group": "référence de l’API", "icon": "file-json", - "pages": [ - "fr/api/introduction" - ] + "pages": ["fr/api/introduction"] }, { "group": "Admin", "icon": "activity", - "pages": [ - "fr/api/update/trigger", - "fr/api/update/status" - ] + "pages": ["fr/api/update/trigger", "fr/api/update/status"] }, { "group": "Agent", @@ -1244,9 +1186,7 @@ { "group": "Journal des modifications", "icon": "calendar", - "pages": [ - "fr/changelog" - ] + "pages": ["fr/changelog"] } ] } @@ -1363,13 +1303,7 @@ "background": "/images/thumbnail/background.svg" }, "contextual": { - "options": [ - "copy", - "chatgpt", - "claude", - "cursor", - "vscode" - ] + "options": ["copy", "chatgpt", "claude", "cursor", "vscode"] }, "redirects": [ { @@ -1740,4 +1674,4 @@ "google-site-verification": "YRuJgIxsRnMkiRTYTo_tEsJSFyIE3AraEiukTbeV4Ag" } } -} \ No newline at end of file +}