Components pages docs offsite overhaul

content/components/accordion-groups.mdx

@@ -18,6 +18,7 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
     }
     ```
 
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
   </Accordion>
 
   <Accordion title="FAQ with Icon" icon="alien-8bit">
@@ -44,6 +45,7 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
     }
     ```
 
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
   </Accordion>
 
   <Accordion title="FAQ with Icon" icon="alien-8bit">

content/components/accordions.mdx

@@ -1,22 +1,37 @@
 ---
 title: "Accordions"
-description: "A dropdown component to toggle content"
+description: "A dropdown component to toggle content visibility"
 icon: "square-caret-down"
 ---
 
 <Accordion title="I am an Accordion.">
-  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!");
+        }
+    }
+    ```
 </Accordion>
 
+Check out [AccordionGroup](/content/components/accordion-groups) if you want to group multiple Accordions into a single display.
+
 <RequestExample>
 
-```jsx Accordion Example
+````jsx Accordion Example
 <Accordion title="I am an Accordion.">
-  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!");
+        }
+    }
+  ```
 </Accordion>
-```
+````
 
 </RequestExample>
 

content/components/callouts.mdx

@@ -4,7 +4,9 @@
 icon: 'circle-exclamation'
 ---
 
+Callouts can be styled as a Note, Warning, Info, Tip, or Check:
+
 ### Note Callouts
 
 <Note>This adds a note in the content</Note>
 
@@ -12,7 +14,7 @@
 <Note>This adds a note in the content</Note>
 ```
 
 ### Warning Callouts
 
 <Warning>This raises a warning to watch out for</Warning>
 
@@ -20,7 +22,7 @@
 <Warning>This raises a warning to watch out for</Warning>
 ```
 
 ### Info Callouts
 
 <Info>This draws attention to important information</Info>
 
@@ -28,7 +30,7 @@
 <Info>This draws attention to important information</Info>
 ```
 
 ### Tip Callouts
 
 <Tip>This suggests a helpful tip</Tip>
 
@@ -36,7 +38,7 @@
 <Tip>This suggests a helpful tip</Tip>
 ```
 
 ### Check Callouts
 
 <Check>This brings us a checked status</Check>
 

content/components/card-groups.mdx

@@ -4,20 +4,20 @@
 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.
 
 <CardGroup cols={2}>
   <Card title="First Card" icon="square-1">
     Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
   </Card>
   <Card title="Second Card" icon="square-2">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </Card>
   <Card title="Third Card" icon="square-3">
     Ut enim ad minim veniam, quis nostrud exercitation ullamco
   </Card>
   <Card title="Fourth Card" icon="square-4">
     Excepteur sint occaecat cupidatat non proident
   </Card>
 </CardGroup>
 

content/components/cards.mdx

@@ -24,8 +24,6 @@ icon: "rectangle"
   ```
 </RequestExample>
 
-
-
 ### Horizontal Card
 
 Add a `horizontal` property to a card to make it horizontally displayed.
@@ -42,6 +40,24 @@ Add an `img` property to a card to display an image on the top of the card.
   Here is an example of a card with an image
 </Card>
 
+### 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.
+
+<Card title="Link card" icon="link" href="/content/components/card-groups" arrow="true" cta="Click here">
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+
+<RequestExample>
+  ```jsx Card Example
+  <Card title="Link card" icon="link" href="/content/components/card-groups" arrow="true" cta="Click here">
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+  ```
+</RequestExample>
+
 ## Props
 
 <ResponseField name="title" type="string" required>
@@ -70,4 +86,12 @@ Add an `img` property to a card to display an image on the top of the card.
 
 <ResponseField name="img" type="string">
   The url or local path to an image to display on the top of the card
+</ResponseField>
+
+<ResponseField name="cta" type="string">
+  Label for the action button
+</ResponseField>
+
+<ResponseField name="arrow" type="boolean">
+  Enable or disable the link arrow icon
 </ResponseField>

content/components/icons.mdx

@@ -26,11 +26,11 @@ The icon will be placed inline when used in a paragraph.
 ## Props
 
 <ResponseField name="icon" type="string" required>
-  A [Font Awesome](https://fontawesome.com/icons) icon
+  A [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icon
 </ResponseField>
 
 <ResponseField name="iconType" type="string">
-  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).
 </ResponseField>
 
 <ResponseField name="color" type="string">

content/components/responses.mdx

@@ -10,24 +10,20 @@ The `<ResponseField>` component is designed to define the return values of an AP
   A response field example
 </ResponseField>
 
-<RequestExample>
-
-```jsx ResponseField Example
+```jsx
 <ResponseField name="response" type="string" required>
   A response field example
 </ResponseField>
 ```
 
-</RequestExample>
-
 ## Props
 
 <ResponseField name="name" type="string" required>
   The name of the response value.
 </ResponseField>
 
 <ResponseField name="type" type="string" required>
-  Expected type of the response value
+  Expected type of the response value - this can be any arbitrary string.
 </ResponseField>
 
 <ResponseField name="default" type="string">
@@ -37,3 +33,15 @@ The `<ResponseField>` component is designed to define the return values of an AP
 <ResponseField name="required" type="boolean">
   Show "required" beside the field name.
 </ResponseField>
+
+<ResponseField name="deprecated" type="boolean">
+  Whether a field is deprecated or not.
+</ResponseField>
+
+<ResponseField name="pre" type="string[]">
+  Labels that are shown before the name of the field
+</ResponseField>
+
+<ResponseField name="post" type="string[]">
+  Labels that are shown after the name of the field
+</ResponseField>

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 }) => (
+  <div>
+    <h1>{title}</h1>
+    <p>... snippet content ...</p>
+  </div>
+);
+```
+
+<Warning>
+  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.
+</Warning>
+
+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.
+
+<MyComponent title={'Custom title'} />
+```
+
+
+## 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 <div id="client-component"></div>
+  }
+}
+```

content/components/tabs.mdx

@@ -4,11 +4,18 @@ 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.
 
 <Tabs>
   <Tab title="First Tab">
     ☝️ 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!");
+          }
+      }
+    ```
   </Tab>
   <Tab title="Second Tab">
     ✌️ Here's content that's only inside the second Tab.
@@ -20,10 +27,17 @@ You can add any number of tabs.
 
 <RequestExample>
 
-```jsx Tabs Example
+````jsx Tabs Example
 <Tabs>
   <Tab title="First Tab">
     ☝️ 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!");
+          }
+      }
+    ```
   </Tab>
   <Tab title="Second Tab">
     ✌️ Here's content that's only inside the second Tab.
@@ -32,7 +46,7 @@ You can add any number of tabs.
     💪 Here's content that's only inside the third Tab.
   </Tab>
 </Tabs>
-```
+````
 
 </RequestExample>
 

docs.json

@@ -202,6 +202,12 @@
               "content/components/update"
             ]
           },
+          {
+            "group": "Custom Components",
+            "pages": [
+              "content/components/reusable-components"
+            ]
+          },
           {
             "group": "API Components",
             "pages": [

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 }) => (
-  <div>
-    <h1>{title}</h1>
-    <p>... snippet content ...</p>
-  </div>
-);
-```
-
-<Warning>
-  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.
-</Warning>
-
-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.
-
-<MyComponent title={'Custom title'} />
-```
-
-### 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 <div id="client-component"></div>
-  }
-}
-```