diff --git a/content/components/accordion-groups.mdx b/content/components/accordion-groups.mdx index 29f90169c..87fddf9ec 100644 --- a/content/components/accordion-groups.mdx +++ b/content/components/accordion-groups.mdx @@ -18,6 +18,8 @@ Simply add `` around your existing `` components. } ``` + Check out the [Accordion](/content/components/accordions) docs for all the supported props. + @@ -44,6 +46,7 @@ Simply add `` around your existing `` components. } ``` + Check out the [Accordion](/content/components/accordions) docs for all the supported props. @@ -58,4 +61,6 @@ Simply add `` around your existing `` components. -`AccordionGroup` does not have any props. +## Props + +`` does not have any props. diff --git a/content/components/accordions.mdx b/content/components/accordions.mdx index 46095e792..a6254b490 100644 --- a/content/components/accordions.mdx +++ b/content/components/accordions.mdx @@ -1,22 +1,35 @@ --- title: "Accordions" -description: "A dropdown component to toggle content" +description: "A dropdown component to toggle content visibility" icon: "square-caret-down" --- - You can put any content in here. Check out - [AccordionGroup](/content/components/accordion-groups) if you want to group - multiple Accordions into a single display. + 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!"); + } + } + ``` -```jsx Accordion Example +````jsx Accordion Example - You can put any content in here. + 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!"); + } + } + ``` -``` +```` @@ -35,10 +48,13 @@ icon: "square-caret-down" - A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code + A [Font Awesome icon](https://fontawesome.com/icons), [Lucide + icon](https://lucide.dev/icons), or SVG code One of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or "brands" + +Use [AccordionGroup](/content/components/accordion-groups) to create a group of Accordions. diff --git a/content/components/callouts.mdx b/content/components/callouts.mdx index 32cc7f082..ed7fed70f 100644 --- a/content/components/callouts.mdx +++ b/content/components/callouts.mdx @@ -4,6 +4,8 @@ description: 'Use callouts to add eye-catching context to your content' icon: 'circle-exclamation' --- +Callouts can be styled as a Note, Warning, Info, Tip, or Check: + ### Note Callouts This adds a note in the content diff --git a/content/components/card-groups.mdx b/content/components/card-groups.mdx index 851933802..e2fbbc6c7 100644 --- a/content/components/card-groups.mdx +++ b/content/components/card-groups.mdx @@ -4,7 +4,7 @@ description: 'Show cards side by side in a grid format' icon: 'rectangles-mixed' --- -The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards on the same column. +The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards in a grid, by specifying the number of grid columns. diff --git a/content/components/cards.mdx b/content/components/cards.mdx index 6c95cd846..b144e164d 100644 --- a/content/components/cards.mdx +++ b/content/components/cards.mdx @@ -17,18 +17,17 @@ icon: "rectangle" ``` - ```jsx Image Card Example - - Here is an example of a card with an image - - ``` - - +```jsx Image Card Example + + Here is an example of a card with an image + +``` + ### Horizontal Card -Add a `horizontal` property to a card to make it horizontally displayed. +Add a `horizontal` property to make it horizontally displayed. Here is an example of a horizontal card @@ -36,12 +35,42 @@ Add a `horizontal` property to a card to make it horizontally displayed. ### Image Card -Add an `img` property to a card to display an image on the top of the card. +Add an `img` property to display an image on the top of the card. Here is an example of a card with an image +### Link Card + +You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links. + + + This is how you use a card with an icon and a link. Clicking on this card + brings you to the Card Group page. + + + + ```jsx Card Example + + This is how you use a card with an icon and a link. Clicking on this card + brings you to the Card Group page. + + ``` + + ## Props @@ -49,7 +78,8 @@ Add an `img` property to a card to display an image on the top of the card. - A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code in `icon={}` + A [Font Awesome icon](https://fontawesome.com/icons), [Lucide + icon](https://lucide.dev/icons), or SVG code in `icon={}` @@ -70,4 +100,12 @@ Add an `img` property to a card to display an image on the top of the card. The url or local path to an image to display on the top of the card - \ No newline at end of file + + + + Label for the action button + + + + Enable or disable the link arrow icon + diff --git a/content/components/icons.mdx b/content/components/icons.mdx index dc688c138..8936024a6 100644 --- a/content/components/icons.mdx +++ b/content/components/icons.mdx @@ -26,11 +26,11 @@ The icon will be placed inline when used in a paragraph. ## Props - A [Font Awesome](https://fontawesome.com/icons) icon + A [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icon - One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands` + One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands` (only for [Font Awesome](https://fontawesome.com/icons) icons). diff --git a/content/components/responses.mdx b/content/components/responses.mdx index bde833629..53e705622 100644 --- a/content/components/responses.mdx +++ b/content/components/responses.mdx @@ -10,16 +10,12 @@ The `` component is designed to define the return values of an AP A response field example - - -```jsx ResponseField Example +```jsx A response field example ``` - - ## Props @@ -27,7 +23,7 @@ The `` component is designed to define the return values of an AP - Expected type of the response value + Expected type of the response value - this can be any arbitrary string. @@ -37,3 +33,15 @@ The `` component is designed to define the return values of an AP Show "required" beside the field name. + + + Whether a field is deprecated or not. + + + + Labels that are shown before the name of the field + + + + Labels that are shown after the name of the field + diff --git a/content/components/reusable-components.mdx b/content/components/reusable-components.mdx new file mode 100644 index 000000000..74ab298d0 --- /dev/null +++ b/content/components/reusable-components.mdx @@ -0,0 +1,65 @@ +--- +title: "Reusable Components" +description: "Reusable, custom component snippets" +icon: "recycle" +--- + +Much like custom content [snippets](/reusable-snippets) that can be added in MDX files, you can add reusable components as snippets. + +## Creating a reusable React component + +1. Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function. + +```typescript snippets/custom-component.mdx +export const MyComponent = ({ title }) => ( +
+

{title}

+

... snippet content ...

+
+); +``` + + + MDX does not compile inside the body of an arrow function. Stick to HTML + syntax when you can or use a default export if you need to use MDX inside of your component. + + +2. Import the snippet into your destination file and pass in the props + +```typescript destination-file.mdx +--- +title: My title +description: My Description +--- + +import { MyComponent } from '/snippets/custom-component.mdx'; + +Lorem ipsum dolor sit amet. + + +``` + + +## Client-Side Content + +By default, Mintlify employs server-side rendering, generating content +at build time. For client-side content loading, ensure to verify the +`document` object's availability before initiating the rendering process. + +```typescript snippets/client-component.mdx +{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */} +export const ClientComponent = () => { + if (typeof document === "undefined") { + return null; + } else { + setTimeout(() => { + const clientComponent = document.getElementById("client-component"); + if (clientComponent) { + clientComponent.innerHTML = "Hello, client-side component!"; + } + }, 1); + + return
+ } +} +``` diff --git a/content/components/tabs.mdx b/content/components/tabs.mdx index 255920e05..2c0a89736 100644 --- a/content/components/tabs.mdx +++ b/content/components/tabs.mdx @@ -1,14 +1,22 @@ --- -title: 'Tabs' -description: 'Toggle content using the Tabs component' -icon: 'window-restore' +title: "Tabs" +description: "Toggle content using the Tabs component" +icon: "window-restore" --- -You can add any number of tabs. +You can add any number of tabs, and other components inside of tabs. ☝️ Welcome to the content that you can only see inside the first Tab. + You can add any number of components inside of tabs. + ```java HelloWorld.java + class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } + } + ``` ✌️ Here's content that's only inside the second Tab. @@ -20,10 +28,17 @@ You can add any number of tabs. -```jsx Tabs Example +````jsx Tabs Example ☝️ Welcome to the content that you can only see inside the first Tab. + ```java HelloWorld.java + class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } + } + ``` ✌️ Here's content that's only inside the second Tab. @@ -32,7 +47,7 @@ You can add any number of tabs. 💪 Here's content that's only inside the third Tab. -``` +```` diff --git a/docs.json b/docs.json index 3142b96b4..e8e59216c 100644 --- a/docs.json +++ b/docs.json @@ -202,6 +202,12 @@ "content/components/update" ] }, + { + "group": "Custom Components", + "pages": [ + "content/components/reusable-components" + ] + }, { "group": "API Components", "pages": [ diff --git a/reusable-snippets.mdx b/reusable-snippets.mdx index 0ad0ee9ee..43d5bfc7a 100644 --- a/reusable-snippets.mdx +++ b/reusable-snippets.mdx @@ -28,7 +28,6 @@ should create a custom snippet to keep your content in sync. Hello world! This is my content I want to reuse across pages. ``` - 2. Import the snippet into your destination file. ```typescript destination-file.mdx @@ -96,61 +95,3 @@ import { myName, myObject } from '/snippets/path/to/custom-variables.mdx'; Hello, my name is {myName} and I like {myObject.fruit}. ``` - -### Reusable components - -1. Inside your snippet file, create a component that takes in props by exporting - your component in the form of an arrow function. - -```typescript snippets/custom-component.mdx -export const MyComponent = ({ title }) => ( -
-

{title}

-

... snippet content ...

-
-); -``` - - - MDX does not compile inside the body of an arrow function. Stick to HTML - syntax when you can or use a default export if you need to use MDX. - - -2. Import the snippet into your destination file and pass in the props - -```typescript destination-file.mdx ---- -title: My title -description: My Description ---- - -import { MyComponent } from '/snippets/custom-component.mdx'; - -Lorem ipsum dolor sit amet. - - -``` - -### Client-Side Content - -By default, Mintlify employs server-side rendering, generating content -at build time. For client-side content loading, ensure to verify the -`document` object's availability before initiating the rendering process. - -```typescript snippets/client-component.mdx -{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */} -export const ClientComponent = () => { - if (typeof document === "undefined") { - return null; - } else { - setTimeout(() => { - const clientComponent = document.getElementById("client-component"); - if (clientComponent) { - clientComponent.innerHTML = "Hello, client-side component!"; - } - }, 1); - - return
- } -} -```