From 74b4f330075a254ded5b455135b5fa672a8641ac Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 30 Oct 2025 19:42:51 +0000 Subject: [PATCH 01/13] Update component docs to new format with example-first structure - Move visual examples to the top of each component page - Add Usage section with markdown code blocks - Convert sections to Variants subsections - Keep Properties section at the end - Remove Tabs wrappers around examples - Updated all 23 component pages in default-components directory Co-Authored-By: Kapil Gowru --- .../default-components/accordion-groups.mdx | 88 +- .../default-components/accordions.mdx | 46 +- .../default-components/anchor.mdx | 59 +- .../default-components/aside.mdx | 12 +- .../default-components/badges.mdx | 15 +- .../default-components/button.mdx | 136 ++- .../default-components/callouts.mdx | 23 +- .../default-components/card-groups.mdx | 95 +-- .../default-components/cards.mdx | 86 +- .../default-components/code-blocks.mdx | 776 ++++++++---------- .../default-components/embed.mdx | 51 +- .../endpoint-request-snippet.mdx | 12 +- .../endpoint-response-snippet.mdx | 9 +- .../endpoint-schema-snippet.mdx | 168 ++-- .../default-components/frames.mdx | 54 +- .../default-components/icons.mdx | 86 +- .../default-components/parameter-fields.mdx | 82 +- .../default-components/runnable-endpoint.mdx | 13 +- .../default-components/steps.mdx | 102 ++- .../default-components/sticky-tables.mdx | 54 +- .../default-components/tabs.mdx | 38 +- .../default-components/tooltips.mdx | 66 +- 22 files changed, 889 insertions(+), 1182 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/accordion-groups.mdx b/fern/products/docs/pages/component-library/default-components/accordion-groups.mdx index 407fe37f9..4bb061ab6 100644 --- a/fern/products/docs/pages/component-library/default-components/accordion-groups.mdx +++ b/fern/products/docs/pages/component-library/default-components/accordion-groups.mdx @@ -6,46 +6,15 @@ description: Display expandable/collapsible options that reveal more information Accordion Groups allow you to organize content into collapsible sections, making it easier for users to navigate through information. With recent updates, our Accordion component now supports improved search functionality using the browser's built-in search feature. - - Accordion Groups can contain multiple Accordion items. Each Accordion has a title and content that can be expanded or collapsed. You can use the `defaultOpen` prop to expand specific accordions by default when the page loads. - - ```jsx - - - Content for section 1, expanded by default - - - Content for section 2 - - - ``` - - - - Accordion components use HTML5 `
` and `` elements, enabling browser search (Cmd+F / Ctrl+F) so users can find content within collapsed sections. - - - - - The Accordion component supports keyboard navigation and screen readers. - - - - -## Usage examples - - - - This is a basic example with text content. It's open by default when the page loads. - You can embed images, videos, and other media within accordions for rich interactive content. + You can embed images, videos, and other media within accordions for rich interactive content. - - A sample image - + + A sample image + Accordions can contain other components, such as code blocks and callouts. @@ -59,41 +28,28 @@ Accordion Groups allow you to organize content into collapsible sections, making Here's a nested callout. - - + - - - - ````jsx - - - This is a basic example with text content. It's open by default when the page loads. - - - You can embed images, videos, and other media within accordions for rich interactive content. +## Usage - - A sample image - +```jsx + + + Content for section 1, expanded by default - - Accordions can contain other components, such as code blocks and callouts. + + Content for section 2 + + +``` - ```ts - export function greet(name: string) { - return `Hello, ${name}!`; - } - ``` +## Variants - - Here's a nested callout. - +### Searchable content - - - ```` - - - +Accordion components use HTML5 `
` and `` elements, enabling browser search (Cmd+F / Ctrl+F) so users can find content within collapsed sections. + +### Accessibility + +The Accordion component supports keyboard navigation and screen readers. diff --git a/fern/products/docs/pages/component-library/default-components/accordions.mdx b/fern/products/docs/pages/component-library/default-components/accordions.mdx index f41afd63d..e1f7036b4 100644 --- a/fern/products/docs/pages/component-library/default-components/accordions.mdx +++ b/fern/products/docs/pages/component-library/default-components/accordions.mdx @@ -5,27 +5,31 @@ description: 'Expand or collapse to reveal more information' The Accordion component allows you to create expandable sections in your documentation. Content within accordions is searchable using browser search (cmd+f) even when collapsed. The component is optimized for SEO with server-side HTML generation, ensuring search engines can properly index all content within accordions. - - - - This is an example of an accordion component. When clicked, it expands to reveal this additional content. - - - You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content. - - - - ```jsx - - This is an example of an accordion component. When clicked, it expands to reveal this additional content. - - - - You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content. - - ``` - - + + This is an example of an accordion component. When clicked, it expands to reveal this additional content. + + +## Usage + +```jsx + + This is an example of an accordion component. When clicked, it expands to reveal this additional content. + +``` + +## Variants + +### Default open + + + You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content. + + +```jsx + + You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content. + +``` ## Properties diff --git a/fern/products/docs/pages/component-library/default-components/anchor.mdx b/fern/products/docs/pages/component-library/default-components/anchor.mdx index b38f5a678..33965e15b 100644 --- a/fern/products/docs/pages/component-library/default-components/anchor.mdx +++ b/fern/products/docs/pages/component-library/default-components/anchor.mdx @@ -9,88 +9,81 @@ Use the `` component to create links to specific paragraphs, tables, and Headings automatically generate anchor links based on their text content, so you don't need to use the `` component for headings. - - - This sentence has a custom anchor You can link to it using `#data` in the URL. - - + +## Usage ```jsx This sentence has a custom anchor You can link to it using `#data` in the URL. ``` - - - - +## Variants + +### Anchor a table + | Endpoint | Method | Description | |----------|--------|-------------| -| `/users` | GET | Retrieve all users | -| `/users/:id` | GET | Retrieve a specific user | -| `/users` | POST | Create a new user | +| `/plants` | GET | Retrieve all plants | +| `/plants/:id` | GET | Retrieve a specific plant | +| `/plants` | POST | Create a new plant | You can link directly to the [API endpoints table](#api-endpoints). - - ```jsx | Endpoint | Method | Description | |----------|--------|-------------| -| `/users` | GET | Retrieve all users | -| `/users/:id` | GET | Retrieve a specific user | -| `/users` | POST | Create a new user | +| `/plants` | GET | Retrieve all plants | +| `/plants/:id` | GET | Retrieve a specific plant | +| `/plants` | POST | Create a new plant | You can link directly to the [API endpoints table](#api-endpoints). ``` - - - - +### Anchor a code block + ```python -def authenticate(api_key): - """Authenticate using your API key""" +def water_plant(plant_id, amount): + """Water a plant with specified amount""" headers = {"Authorization": f"Bearer {api_key}"} - return requests.get("https://api.example.com/auth", headers=headers) + return requests.post(f"https://api.example.com/plants/{plant_id}/water", + json={"amount": amount}, + headers=headers) ``` -Reference the [authentication code example](#example-code) in your implementation. - - +Reference the [watering code example](#example-code) in your implementation. ````jsx ```python -def authenticate(api_key): - """Authenticate using your API key""" +def water_plant(plant_id, amount): + """Water a plant with specified amount""" headers = {"Authorization": f"Bearer {api_key}"} - return requests.get("https://api.example.com/auth", headers=headers) + return requests.post(f"https://api.example.com/plants/{plant_id}/water", + json={"amount": amount}, + headers=headers) ``` -Reference the [authentication code example](#example-code) in your implementation. +Reference the [watering code example](#example-code) in your implementation. ```` - - ## Properties diff --git a/fern/products/docs/pages/component-library/default-components/aside.mdx b/fern/products/docs/pages/component-library/default-components/aside.mdx index d84f16417..bb8e41b19 100644 --- a/fern/products/docs/pages/component-library/default-components/aside.mdx +++ b/fern/products/docs/pages/component-library/default-components/aside.mdx @@ -5,14 +5,14 @@ description: 'Push any content inside the Aside component to the right of the pa The Aside component creates a sticky container that floats content to the right of your page. Use it to showcase code examples, API snippets, or any supplementary content that should stay visible as users scroll. - -```jsx -``` - +## Usage + +```jsx +``` diff --git a/fern/products/docs/pages/component-library/default-components/badges.mdx b/fern/products/docs/pages/component-library/default-components/badges.mdx index e08ba9f4b..7584cd18e 100644 --- a/fern/products/docs/pages/component-library/default-components/badges.mdx +++ b/fern/products/docs/pages/component-library/default-components/badges.mdx @@ -7,22 +7,15 @@ Use the `Badge` component to display small pieces of information, such as status To display longer notes, use the [Callouts component](/docs/writing-content/components/callouts) instead. - - - ### Plant Care API v2.1.0 New - - +## Usage ```jsx -### Plant Care API v2.1.0 New +### Plant Care API v2.1.0 New ``` - - - -## Badge varieties +## Variants ### Success @@ -121,4 +114,4 @@ Customize your Badges using the following properties: Minimal and outlined ``` - \ No newline at end of file + diff --git a/fern/products/docs/pages/component-library/default-components/button.mdx b/fern/products/docs/pages/component-library/default-components/button.mdx index 22b195c8d..a0dcdb440 100644 --- a/fern/products/docs/pages/component-library/default-components/button.mdx +++ b/fern/products/docs/pages/component-library/default-components/button.mdx @@ -5,76 +5,70 @@ description: 'Interactive button component with multiple variants and intents' The `Button` component provides a flexible way to create interactive buttons with various styles, sizes, and intents. -## Example - - - -
-
- - - - -
- -
- - -
- -
- - - -
- -
- - - -
- -
- - -
-
- - - ```jsx -
-
- - - - -
- -
- - -
- -
- - - -
- -
- - - -
- -
- - -
-
- ``` - - +
+
+ + + + +
+ +
+ + +
+
+ +## Usage + +```jsx + + + + +``` + +## Variants + +### Sizes + +
+ + + +
+ +```jsx + + + +``` + +### With icons + +
+ + + +
+ +```jsx + + + +``` + +### Link and disabled states + +
+ + +
+ +```jsx + + +``` ## Properties @@ -140,4 +134,4 @@ The `Button` component provides a flexible way to create interactive buttons wit Additional CSS classes - \ No newline at end of file + \ No newline at end of file diff --git a/fern/products/docs/pages/component-library/default-components/callouts.mdx b/fern/products/docs/pages/component-library/default-components/callouts.mdx index 4a87a2eb7..f22586cd9 100644 --- a/fern/products/docs/pages/component-library/default-components/callouts.mdx +++ b/fern/products/docs/pages/component-library/default-components/callouts.mdx @@ -7,17 +7,17 @@ Callouts help highlight important information, warnings, or tips in your documen To display very short pieces of information like status indicators and version numbers, use the [Badges component](/docs/writing-content/components/badges) -## Callout varieties - -### Note callouts - This adds a note in the content +## Usage + ```jsx This adds a note in the content ``` -### Warning callouts +## Variants + +### Warning This raises a warning to watch out for @@ -25,7 +25,7 @@ To display very short pieces of information like status indicators and version n This raises a warning to watch out for ``` -### Success callouts +### Success This indicates a successful operation or positive outcome @@ -33,7 +33,7 @@ To display very short pieces of information like status indicators and version n This indicates a successful operation or positive outcome ``` -### Error callouts +### Error This indicates a potential error @@ -41,7 +41,7 @@ To display very short pieces of information like status indicators and version n This indicates a potential error ``` -### Info callouts +### Info This draws attention to important information @@ -49,7 +49,7 @@ To display very short pieces of information like status indicators and version n This draws attention to important information ``` -### Launch callouts +### Launch This celebrates a product launch or other announcement @@ -57,8 +57,7 @@ To display very short pieces of information like status indicators and version n This celebrates an announcement ``` - -### Tip callouts +### Tip This suggests a helpful tip @@ -66,7 +65,7 @@ To display very short pieces of information like status indicators and version n This suggests a helpful tip ``` -### Check callouts +### Check This brings us a checked status diff --git a/fern/products/docs/pages/component-library/default-components/card-groups.mdx b/fern/products/docs/pages/component-library/default-components/card-groups.mdx index cb30305d5..9a3cec0ac 100644 --- a/fern/products/docs/pages/component-library/default-components/card-groups.mdx +++ b/fern/products/docs/pages/component-library/default-components/card-groups.mdx @@ -5,74 +5,57 @@ description: 'Show cards side by side in a grid format' The `CardGroup` component lets you organize multiple [`Card` components](/docs/writing-content/components/cards) in a responsive grid layout. You can use this component to organize related content like feature lists, navigation options, or step-by-step guides. - - - + - Generate a Python SDK and publish to PyPi + Learn how to properly water your plants - Generate a PHP SDK and publish to Packagist + Understand sunlight requirements for different plants - Generate a Java SDK and publish to Maven Central + Choose the right soil for optimal plant growth - Generate a Go SDK and publish as a module + Apply fertilizer to keep your plants healthy - - - - ```jsx - - - Generate a Python SDK and publish to PyPi - - - Generate a PHP SDK and publish to Packagist - - - Generate a Java SDK and publish to Maven Central - - - Generate a Go SDK and publish as a module - - - ``` - - + + +## Usage + +```jsx + + + Learn how to properly water your plants + + + Understand sunlight requirements for different plants + + +``` ## Properties diff --git a/fern/products/docs/pages/component-library/default-components/cards.mdx b/fern/products/docs/pages/component-library/default-components/cards.mdx index c37b19711..90ccbd1af 100644 --- a/fern/products/docs/pages/component-library/default-components/cards.mdx +++ b/fern/products/docs/pages/component-library/default-components/cards.mdx @@ -7,55 +7,50 @@ Cards are container components that group related content and actions together. You can use individual cards or [use the `CardGroup` component](/docs/writing-content/components/card-groups) to arrange multiple cards in a responsive grid layout. - - - The icon field references a Font Awesome icon. - - + +## Usage + ```jsx The icon field references a Font Awesome icon. ``` - - - - +## Variants + +### Custom icon + } - href="https://github.com/fern-api/fern/tree/main/generators/python" + title="Plant care" + icon={Plant icon} + href="/learn/docs/writing-content/components/cards" > Pass in an image tag to use a custom icon. - - + ```jsx } - href="https://github.com/fern-api/fern/tree/main/generators/python" + title="Plant care" + icon={Plant icon} + href="/learn/docs/writing-content/components/cards" > Pass in an image tag to use a custom icon. ``` - - - - +### Icon position + You can set the icon position as `left` or `top`. - - + ```jsx ``` - - -## Adding images to cards +### With images Cards support displaying images alongside content. The image automatically resizes to fit the card dimensions, so you typically don't need to specify `imageWidth` or `imageHeight` unless you want to override the default behavior. - - Display an image alongside your card content. The image automatically scales to fit the card. - - + ```jsx Display an image alongside your card content. The image automatically scales to fit the card. ``` - - - - Position the image at the top of the card for a banner-style layout. - - + ```jsx Position the image at the top of the card for a banner-style layout. ``` - - ## Properties diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx index 90efb4d18..55619cba9 100644 --- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx +++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx @@ -7,121 +7,100 @@ max-toc-depth: 2 Fern uses [Shiki](https://shiki.matsu.io/) for syntax highlighting in code blocks. It's reliable and performant. Below are examples of how you can configure syntax highlighting in code snippets. -## Basic +```js +console.log("hello world") +``` + +## Usage To create a code snippet, you need to wrap your code in three backticks. You can also specify the language for syntax highlighting after the opening backticks. - - - ```js - console.log("hello world") - ``` - - - ````mdx - ```js - console.log("hello world") - ``` - ```` - - +````mdx +```js +console.log("hello world") +``` +```` +## Variants -## Titles +### Titles You can add a title to your code snippet by adding a title after the language identifier. - - - ```js Hello World Snippet - console.log("hello world") - ``` - - - ````mdx - ```js Hello World Snippet - console.log("hello world") - ``` - ```` +```js Hello World Snippet +console.log("hello world") +``` - - You may also use a `title` prop or `filename` prop to achieve the same result. - - For example, `title="Hello World Snippet"` or `filename="Hello World Snippet"`. - - - +````mdx +```js Hello World Snippet +console.log("hello world") +``` +```` -## Line highlighting + + You may also use a `title` prop or `filename` prop to achieve the same result. + + For example, `title="Hello World Snippet"` or `filename="Hello World Snippet"`. + + +### Line highlighting You can highlight specific lines in your code snippet by placing a numeric range inside `{}` after the language identifier. - - - ```js {2-4} - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - ``` - - - ````markdown - ```javascript {2-4} - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - ``` - ```` +```js {2-4} +console.log("Line 1"); +console.log("Line 2"); +console.log("Line 3"); +console.log("Line 4"); +console.log("Line 5"); +``` + +````markdown +```javascript {2-4} +console.log("Line 1"); +console.log("Line 2"); +console.log("Line 3"); +console.log("Line 4"); +console.log("Line 5"); +``` +```` - - The range is inclusive and can be a single number, a comma-separated list of numbers, or ranges. + + The range is inclusive and can be a single number, a comma-separated list of numbers, or ranges. - For example, `{1,3,5-7}` will highlight lines 1, 3, 5, 6, and 7. - - - + For example, `{1,3,5-7}` will highlight lines 1, 3, 5, 6, and 7. + -## Line focusing +### Line focusing Instead of highlighting lines, you can focus on specific lines by adding a comment `[!code focus]` or by adding a `focus` attribute after the language identifier. The `focus` attribute works the same way as the `highlight` attribute. - - - ```javascript focus={2-4} - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - ``` - - - ````markdown - ```javascript focus={2-4} - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - ``` - ```` - - +```javascript focus={2-4} +console.log("Line 1"); +console.log("Line 2"); +console.log("Line 3"); +console.log("Line 4"); +console.log("Line 5"); +``` + +````markdown +```javascript focus={2-4} +console.log("Line 1"); +console.log("Line 2"); +console.log("Line 3"); +console.log("Line 4"); +console.log("Line 5"); +``` +```` -## Start line +### Start line You can control which line appears first in your code block by adding a `startLine` attribute after the language identifier. This is particularly useful for longer code snippets where you want to highlight the main logic while still providing the complete context. - - - ```javascript startLine={6} +```javascript startLine={6} console.log("Line 1"); console.log("Line 2"); console.log("Line 3"); @@ -151,44 +130,41 @@ You can control which line appears first in your code block by adding a `startLi console.log("Line 27"); console.log("Line 28") ``` - - - ````markdown - ```javascript startLine={6} - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - console.log("Line 6"); - console.log("Line 7"); - console.log("Line 8"); - console.log("Line 9"); - console.log("Line 10"); - console.log("Line 11"); - console.log("Line 12"); - console.log("Line 13"); - console.log("Line 14"); - console.log("Line 15"); - console.log("Line 16"); - console.log("Line 17"); - console.log("Line 18"); - console.log("Line 19"); - console.log("Line 20"); - console.log("Line 21"); - console.log("Line 22"); - console.log("Line 23"); - console.log("Line 24"); - console.log("Line 25"); - console.log("Line 26"); - console.log("Line 27"); - console.log("Line 28") - ``` - ```` - - -## Max height +````markdown +```javascript startLine={6} +console.log("Line 1"); +console.log("Line 2"); +console.log("Line 3"); +console.log("Line 4"); +console.log("Line 5"); +console.log("Line 6"); +console.log("Line 7"); +console.log("Line 8"); +console.log("Line 9"); +console.log("Line 10"); +console.log("Line 11"); +console.log("Line 12"); +console.log("Line 13"); +console.log("Line 14"); +console.log("Line 15"); +console.log("Line 16"); +console.log("Line 17"); +console.log("Line 18"); +console.log("Line 19"); +console.log("Line 20"); +console.log("Line 21"); +console.log("Line 22"); +console.log("Line 23"); +console.log("Line 24"); +console.log("Line 25"); +console.log("Line 26"); +console.log("Line 27"); +console.log("Line 28") +``` +```` + +### Max height You can control the max height of the code block by adding a `maxLines` attribute after the language identifier. The @@ -197,66 +173,61 @@ number of lines to display. By default, the code block will display up to 20 lin When you use `maxLines`, an expand button automatically appears on hover in the top-right corner, allowing users to view the full code content in an expanded overlay that displays over the page. - - - ```python maxLines=10 - def is_prime(num): - """Check if a number is prime.""" - if num <= 1: +```python maxLines=10 +def is_prime(num): + """Check if a number is prime.""" + if num <= 1: + return False + for i in range(2, num): + if num % i == 0: return False - for i in range(2, num): - if num % i == 0: - return False - return True + return True - start = 10 - end = 50 +start = 10 +end = 50 - print(f"Prime numbers between {start} and {end} are:") +print(f"Prime numbers between {start} and {end} are:") - prime_numbers = [] +prime_numbers = [] - for num in range(start, end+1): - if is_prime(num): - prime_numbers.append(num) +for num in range(start, end+1): + if is_prime(num): + prime_numbers.append(num) - for prime in prime_numbers: - print(prime) - ``` - - - ````markdown maxLines=10 - ```python maxLines=10 - def is_prime(num): - """Check if a number is prime.""" - if num <= 1: +for prime in prime_numbers: + print(prime) +``` + +````markdown maxLines=10 +```python maxLines=10 +def is_prime(num): + """Check if a number is prime.""" + if num <= 1: + return False + for i in range(2, num): + if num % i == 0: return False - for i in range(2, num): - if num % i == 0: - return False - return True + return True - start = 10 - end = 50 +start = 10 +end = 50 - print(f"Prime numbers between {start} and {end} are:") +print(f"Prime numbers between {start} and {end} are:") - prime_numbers = [] +prime_numbers = [] - for num in range(start, end+1): - if is_prime(num): - prime_numbers.append(num) +for num in range(start, end+1): + if is_prime(num): + prime_numbers.append(num) - for prime in prime_numbers: - print(prime) - ``` - ```` +for prime in prime_numbers: + print(prime) +``` +```` - - To disable the default 20 lines limit, you can set `maxLines` to `0`. - - - + + To disable the default 20 lines limit, you can set `maxLines` to `0`. + To hide the expand button or add custom styling, target the `.fern-expand-button` selector: @@ -267,41 +238,31 @@ To hide the expand button or add custom styling, target the `.fern-expand-button } ``` -## Wrap overflow +### Wrap overflow By default, long lines that exceed the width of the code block become scrollable: - - - ```txt title="Without wordWrap" - A very very very long line of text that may cause the code block to overflow and scroll as a result. - ``` - - - ````markdown - ```txt title="Without wordWrap" - A very very very long line of text that may cause the code block to overflow and scroll as a result. - ``` - ```` - - +```txt title="Without wordWrap" +A very very very long line of text that may cause the code block to overflow and scroll as a result. +``` + +````markdown +```txt title="Without wordWrap" +A very very very long line of text that may cause the code block to overflow and scroll as a result. +``` +```` To disable scrolling and wrap overflow onto the next line, use the `wordWrap` prop: - - - ```txt title="With wordWrap" wordWrap - A very very very long line of text that may cause the code block to overflow and scroll as a result. - ``` - - - ````markdown - ```txt title="With wordWrap" wordWrap - A very very very long line of text that may cause the code block to overflow and scroll as a result. - ``` - ```` - - +```txt title="With wordWrap" wordWrap +A very very very long line of text that may cause the code block to overflow and scroll as a result. +``` + +````markdown +```txt title="With wordWrap" wordWrap +A very very very long line of text that may cause the code block to overflow and scroll as a result. +``` +```` ## Deep linking @@ -312,44 +273,39 @@ The `links` property accepts a map where keys are matching patterns (exact strin ### Exact string matching - - - - ```typescript - import { PlantClient } from "@plantstore/sdk"; - - const client = new PlantClient({ apiKey: "YOUR_API_KEY" }); - const plant = await client.createPlant({ - name: "Monstera", - species: "Monstera deliciosa" - }); - ``` - - - - ````markdown - - ```typescript - import { PlantClient } from "@plantstore/sdk"; - - const client = new PlantClient({ apiKey: "YOUR_API_KEY" }); - const plant = await client.createPlant({ - name: "Monstera", - species: "Monstera deliciosa" - }); - ``` - - ```` - - + +```typescript +import { PlantClient } from "@plantstore/sdk"; + +const client = new PlantClient({ apiKey: "YOUR_API_KEY" }); +const plant = await client.createPlant({ + name: "Monstera", + species: "Monstera deliciosa" +}); +``` + + +````markdown + +```typescript +import { PlantClient } from "@plantstore/sdk"; + +const client = new PlantClient({ apiKey: "YOUR_API_KEY" }); +const plant = await client.createPlant({ + name: "Monstera", + species: "Monstera deliciosa" +}); +``` + +```` - The `links` property uses JSON format. Each key in the map is matched exactly against text in the Code Block, and matching text becomes a clickable link to the corresponding URL. - + The `links` property uses JSON format. Each key in the map is matched exactly against text in the Code Block, and matching text becomes a clickable link to the corresponding URL. + ### Regex pattern matching @@ -357,131 +313,115 @@ You can use regex patterns for more flexible matching. This is useful when you w In the example below, the pattern `/get\\w+/` matches both `getPlant` and `getGarden`, while `/Plant(Store|Client)/` matches both `PlantStore` and `PlantClient`. - - - - ```python - from plantstore import PlantStore, PlantClient + +```python +from plantstore import PlantStore, PlantClient - store = PlantStore(api_key="YOUR_API_KEY") - client = PlantClient(store) +store = PlantStore(api_key="YOUR_API_KEY") +client = PlantClient(store) - plant = store.getPlant(plant_id="123") - garden = store.getGarden(garden_id="456") - ``` - - - - ````markdown - - ```python - from plantstore import PlantStore, PlantClient - - store = PlantStore(api_key="YOUR_API_KEY") - client = PlantClient(store) - - plant = store.getPlant(plant_id="123") - garden = store.getGarden(garden_id="456") - ``` - - ```` - - +plant = store.getPlant(plant_id="123") +garden = store.getGarden(garden_id="456") +``` + + +````markdown + +```python +from plantstore import PlantStore, PlantClient + +store = PlantStore(api_key="YOUR_API_KEY") +client = PlantClient(store) + +plant = store.getPlant(plant_id="123") +garden = store.getGarden(garden_id="456") +``` + +```` - When using regex patterns, remember to escape special characters with double backslashes (e.g., `\\w+`, `\\d+`) in the JSON string. - + When using regex patterns, remember to escape special characters with double backslashes (e.g., `\\w+`, `\\d+`) in the JSON string. + -## Combining props +### Combining props You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, `wordWrap`, and `links` props to create a code block with a title, highlighted lines, specific starting line, a maximum height, and clickable links. - - - ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}} - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - console.log("Line 6"); - console.log("Line 7"); - console.log("Line 8"); - console.log("Line 9"); - console.log("Line 10"); - ``` - - - ````markdown - ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}} - console.log("Line 1"); - console.log("Line 2"); - console.log("Line 3"); - console.log("Line 4"); - console.log("Line 5"); - console.log("Line 6"); - console.log("Line 7"); - console.log("Line 8"); - console.log("Line 9"); - console.log("Line 10"); - ``` - ```` - - +```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}} +console.log("Line 1"); +console.log("Line 2"); +console.log("Line 3"); +console.log("Line 4"); +console.log("Line 5"); +console.log("Line 6"); +console.log("Line 7"); +console.log("Line 8"); +console.log("Line 9"); +console.log("Line 10"); +``` +````markdown +```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}} +console.log("Line 1"); +console.log("Line 2"); +console.log("Line 3"); +console.log("Line 4"); +console.log("Line 5"); +console.log("Line 6"); +console.log("Line 7"); +console.log("Line 8"); +console.log("Line 9"); +console.log("Line 10"); +``` +```` ## Code Blocks with Tabs The `CodeBlocks` component allows you to display multiple code blocks in a tabbed interface. - - - - ```ruby title="hello_world.rb" - puts "Hello World" - ``` - - ```php title="hello_world.php" - - ``` - - ```rust title="hello_world.rs" - fn main() { - println!("Hello World"); - } - ``` - - - - ````jsx maxLines=0 - - ```ruby title="hello_world.rb" - puts "Hello World" - ``` - - ```php title="hello_world.php" - - ``` - - ```rust title="hello_world.rs" - fn main() { - println!("Hello World"); - } - ``` - - ```` - - + + ```ruby title="hello_world.rb" + puts "Hello World" + ``` + + ```php title="hello_world.php" + + ``` + + ```rust title="hello_world.rs" + fn main() { + println!("Hello World"); + } + ``` + + +````jsx maxLines=0 + + ```ruby title="hello_world.rb" + puts "Hello World" + ``` + + ```php title="hello_world.php" + + ``` + + ```rust title="hello_world.rs" + fn main() { + println!("Hello World"); + } + ``` + +```` ## Language synchronization @@ -558,82 +498,72 @@ either set of `CodeBlocks` will automatically update both sets to match: You can override the synchronization of code blocks by setting the `for` prop. - - - - ```bash title="Install using npm" for="npm" - npm install plantstore - ``` - ```bash title="Install using pnpm" for="pnpm" - pnpm add plantstore - ``` - ```bash title="Install using yarn" for="yarn" - yarn add plantstore - ``` - - - - ```bash title="Uninstall using npm" for="npm" - npm uninstall plantstore - ``` - ```bash title="Uninstall using pnpm" for="pnpm" - pnpm remove plantstore - ``` - ```bash title="Uninstall using yarn" for="yarn" - yarn remove plantstore - ``` - - - - ````md - - ```bash title="Install using npm" for="npm" - npm install plantstore - ``` - ```bash title="Install using pnpm" for="pnpm" - pnpm add plantstore - ``` - ```bash title="Install using yarn" for="yarn" - yarn add plantstore - ``` - - - - ```bash title="Uninstall using npm" for="npm" - npm uninstall plantstore - ``` - ```bash title="Uninstall using pnpm" for="pnpm" - pnpm remove plantstore - ``` - ```bash title="Uninstall using yarn" for="yarn" - yarn remove plantstore - ``` - - ```` - - + + ```bash title="Install using npm" for="npm" + npm install plantstore + ``` + ```bash title="Install using pnpm" for="pnpm" + pnpm add plantstore + ``` + ```bash title="Install using yarn" for="yarn" + yarn add plantstore + ``` + + + + ```bash title="Uninstall using npm" for="npm" + npm uninstall plantstore + ``` + ```bash title="Uninstall using pnpm" for="pnpm" + pnpm remove plantstore + ``` + ```bash title="Uninstall using yarn" for="yarn" + yarn remove plantstore + ``` + + +````md + + ```bash title="Install using npm" for="npm" + npm install plantstore + ``` + ```bash title="Install using pnpm" for="pnpm" + pnpm add plantstore + ``` + ```bash title="Install using yarn" for="yarn" + yarn add plantstore + ``` + + + + ```bash title="Uninstall using npm" for="npm" + npm uninstall plantstore + ``` + ```bash title="Uninstall using pnpm" for="pnpm" + pnpm remove plantstore + ``` + ```bash title="Uninstall using yarn" for="yarn" + yarn remove plantstore + ``` + +```` ## Embed local code files - - - Option A - ```js - - ``` - - Option B - - - - Option A - - Embedding local files via markdown - - - Option B - - Embedding local files via markdown - - - +Option A +```js + +``` + +Option B + + +Option A + +Embedding local files via markdown + + +Option B + + Embedding local files via markdown + diff --git a/fern/products/docs/pages/component-library/default-components/embed.mdx b/fern/products/docs/pages/component-library/default-components/embed.mdx index 0deacd302..3c25018e1 100644 --- a/fern/products/docs/pages/component-library/default-components/embed.mdx +++ b/fern/products/docs/pages/component-library/default-components/embed.mdx @@ -12,50 +12,39 @@ Fern also implements a custom component for embedding downloadable assets: - `` - read more about it [below](#downloadable-assets). -## Properties + - - Path to your local asset (relative to current MDX file) - - - - MIME type of the asset (e.g. 'video/mp4', 'application/pdf') - +## Usage ```jsx ``` -## Examples +## Variants -### Video file +### Video file with embed - - - + - ```jsx - - ``` +```jsx + +``` - - Videos with audio will automatically play when the page loads. If you want to prevent this behavior, consider using the [` + + Videos with audio will automatically play when the page loads. If you want to prevent this behavior, consider using the [` - - - +### Video file with video tag - ```jsx - - ``` + - - +```jsx + +``` ### PDF document diff --git a/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx b/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx index caa9f3366..41d4cb6cd 100644 --- a/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx +++ b/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx @@ -6,15 +6,15 @@ description: 'Reference an endpoint request from your API Reference' The `EndpointRequestSnippet` component is used to reference an endpoint request from your API Reference. Below is an example of referencing the request for the `POST /chat/{domain}` endpoint. - - ```jsx - - ``` - + -will be rendered as: +## Usage +```jsx +``` + +## Variants ### Reference particular examples diff --git a/fern/products/docs/pages/component-library/default-components/endpoint-response-snippet.mdx b/fern/products/docs/pages/component-library/default-components/endpoint-response-snippet.mdx index 604bf72ee..065494750 100644 --- a/fern/products/docs/pages/component-library/default-components/endpoint-response-snippet.mdx +++ b/fern/products/docs/pages/component-library/default-components/endpoint-response-snippet.mdx @@ -7,16 +7,15 @@ The `EndpointResponseSnippet` component is used to reference an endpoint response from your API Reference. Below is an example of referencing the response for the `POST /chat/{domain}` endpoint. - -```jsx -``` - -will be rendered as +## Usage +```jsx +``` +## Variants ### Reference particular examples diff --git a/fern/products/docs/pages/component-library/default-components/endpoint-schema-snippet.mdx b/fern/products/docs/pages/component-library/default-components/endpoint-schema-snippet.mdx index eaa26e691..440cc83b0 100644 --- a/fern/products/docs/pages/component-library/default-components/endpoint-schema-snippet.mdx +++ b/fern/products/docs/pages/component-library/default-components/endpoint-schema-snippet.mdx @@ -10,113 +10,67 @@ If you want to reference a particular piece of the schema, you can use the optio to specify the path to the schema you want to reference. The available selectors are: `request`, `request.path`, `request.query`, `request.body`, `response`, and `response.body`. - - - - - -

Full Request

-
- Passing `request` as the selector will only render the request schema. - - The following markdown: - ```jsx - - ``` - will be rendered as: -
- - - - - -

Request Path

-
- The following markdown: - ```jsx - - ``` - will be rendered as: -
- - - - - -

Request Query

-
- The following markdown: - ```jsx - - ``` - will be rendered as: -
- - - - - -

Request Body

-
- The following markdown: - ```jsx - - ``` - will be rendered as: -
- - - - - - - - - - -

Full Response

-
- Passing `response` as the selector will only render the response schema. - - The following markdown: - ```jsx - - ``` - will be rendered as: -
- - - - - -

Response Body

-
- The following markdown: - ```jsx - - ``` - will be rendered as: -
- - - - - - - - -

Full Schema

-
- Passing no selector will render the entire schema. The following markdown: - ```jsx - - ``` - will be rendered as: -
- - - - + + +## Usage + +```jsx + +``` + +## Variants + +### Full request + +Passing `request` as the selector will only render the request schema. + + + +```jsx + +``` + +### Request path + + + +```jsx + +``` + +### Request query + + + +```jsx + +``` + +### Request body + + + +```jsx + +``` + +### Full response + +Passing `response` as the selector will only render the response schema. + + + +```jsx + +``` + +### Response body + + + +```jsx + +``` The EndpointSchemaSnippet component does not yet support rendering markdown-rich field descriptions. diff --git a/fern/products/docs/pages/component-library/default-components/frames.mdx b/fern/products/docs/pages/component-library/default-components/frames.mdx index ea12d459d..3f292cbee 100644 --- a/fern/products/docs/pages/component-library/default-components/frames.mdx +++ b/fern/products/docs/pages/component-library/default-components/frames.mdx @@ -5,35 +5,31 @@ description: 'Wrap images in a container with the frame component' The Frame component provides a container for images and other media with optional captions and backgrounds. - - - - Sample photo of mountains - - - - ```jsx - - Sample photo of mountains - - ``` - - - - - - - Sample photo of mountains - - - - ```jsx - - Sample photo of mountains - - ``` - - + + Sample photo of mountains + + +## Usage + +```jsx + + Sample photo of mountains + +``` + +## Variants + +### Frame with subtle background + + + Sample photo of mountains + + +```jsx + + Sample photo of mountains + +``` ## Properties diff --git a/fern/products/docs/pages/component-library/default-components/icons.mdx b/fern/products/docs/pages/component-library/default-components/icons.mdx index c6f98e712..0065a4afe 100644 --- a/fern/products/docs/pages/component-library/default-components/icons.mdx +++ b/fern/products/docs/pages/component-library/default-components/icons.mdx @@ -5,22 +5,19 @@ description: 'Use Font Awesome icons in your documentation' Add Font Awesome icons to your docs with customizable styles, colors and sizes using the `Icon` component. All Font Awesome Pro styles are supported. - - -
-
Basic icon
-
Colored icon
-
Large icon
-
- - - ```jsx - Basic icon - Colored icon - Large icon - ``` - - +
+
Basic icon
+
Colored icon
+
Large icon
+
+ +## Usage + +```jsx + Basic icon + Colored icon + Large icon +``` ## Properties @@ -36,43 +33,30 @@ Add Font Awesome icons to your docs with customizable styles, colors and sizes u Size in 0.25rem increments (e.g., 4 = 1rem) -## Font Awesome styles +## Variants + +### Font Awesome styles You can use any Font Awesome style by using either: - Short syntax: `icon="heart"` (defaults to solid) - Full syntax: `icon="fa-regular fa-heart"` (specific style) -
- - - -
-
Default (Solid)
-
Regular
-
Light
-
Thin
-
Duotone
-
Sharp Solid
-
Brands
-
- - - ```jsx - Default (Solid) - Regular - Light - Thin - Duotone - Sharp Solid - Brands - ``` - - - -## Best practices - -- Use icons consistently throughout your documentation -- Keep icon sizes appropriate for their context (16-24px for inline, larger for featured items) -- Ensure sufficient color contrast for accessibility -- Use semantic icons that reinforce your message (e.g., warning icon for cautions) -- Avoid using too many different icons which can create visual noise +
+
Default (Solid)
+
Regular
+
Light
+
Thin
+
Duotone
+
Sharp Solid
+
Brands
+
+ +```jsx + Default (Solid) + Regular + Light + Thin + Duotone + Sharp Solid + Brands +``` diff --git a/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx b/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx index 6117582b0..1cc22067d 100644 --- a/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx +++ b/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx @@ -5,45 +5,51 @@ description: 'Display API parameter information with metadata like type, require The `ParamField` component documents API parameters and properties with consistent formatting. It displays the parameter name, type, requirements, and description in a structured layout. + + The user's display name + + + + Maximum number of items to return + + +## Usage + +```jsx + + The user's display name + + + + Maximum number of items to return + +``` + +## Variants - - - - The user's display name - - - - Maximum number of items to return - - - - Use OAuth authentication instead - - - - The current status of the user account - - - - ```jsx - - The user's display name - - - - Maximum number of items to return - - - - Use OAuth authentication instead - - - - The current status of the user account - - ``` - - +### Deprecated parameter + + + Use OAuth authentication instead + + +```jsx + + Use OAuth authentication instead + +``` + +### Union types + + + The current status of the user account + + +```jsx + + The current status of the user account + +``` ## Properties diff --git a/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx index 86416ca7b..8489724e7 100644 --- a/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx +++ b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx @@ -5,18 +5,13 @@ description: Test API endpoints directly from your documentation with an interac The `` component enables users to make real HTTP requests to your APIs directly in the API Reference. It auto-detects endpoint definitions from your API specification and provides a request builder with inputs for headers, path parameters, query parameters, and request bodies. - - - ![Runnable Endpoint component example](runnable-endpoint.png) - - -````jsx +## Usage + +```jsx -```` - - +``` ## Features diff --git a/fern/products/docs/pages/component-library/default-components/steps.mdx b/fern/products/docs/pages/component-library/default-components/steps.mdx index 60156a695..5b60e2423 100644 --- a/fern/products/docs/pages/component-library/default-components/steps.mdx +++ b/fern/products/docs/pages/component-library/default-components/steps.mdx @@ -5,59 +5,55 @@ description: 'Display a sequence of instructions or tasks with automatic numberi The Steps component helps organize sequential content with automatic numbering, anchor links, and clickable step numbers that copy direct URLs to that step with visual feedback. Hover interactions reveal helpful link icons, making it ideal for tutorials, walkthroughs, or any content that needs to be followed in order. - - - - - Log in to your account and navigate to Settings. - - - - - ```jsx - - - Log in to your account and navigate to Settings. - - - ``` - - - - - - - - Initial instructions. - - - - More instructions. - - - - Final Instructions - - - - - ```jsx - - - Initial instructions. - - - - More instructions. - - - - Final Instructions - - - ``` - - + + + Log in to your account and navigate to Settings. + + + +## Usage + +```jsx + + + Log in to your account and navigate to Settings. + + +``` + +## Variants + +### Multiple steps + + + + Initial instructions. + + + + More instructions. + + + + Final Instructions + + + +```jsx + + + Initial instructions. + + + + More instructions. + + + + Final Instructions + + +``` ## Properties diff --git a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx index 40b31b18b..6464ab60a 100644 --- a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx +++ b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx @@ -5,29 +5,6 @@ description: Display tables with sticky headers that remain visible while scroll The `StickyTable` component provides a way to display tabular data with a fixed header that remains visible while scrolling through table rows. This is particularly useful for longer tables where users need to reference column headers while viewing data further down the table. -Below is an example of a **normal Markdown table**. As you scroll down the page, the entire table, including the header, scrolls out of view. - -| Plant | Light Requirements | Water | -|-------|-------------------|-------| -| Fern | Partial shade | Weekly | -| Snake Plant | Low to bright indirect | Bi-weekly | -| Monstera | Bright indirect | Weekly | -| Pothos | Low to bright indirect | Weekly | -| Fiddle Leaf Fig | Bright indirect | Weekly | -| Peace Lily | Low to medium indirect | Weekly | -| Rubber Plant | Bright indirect | Weekly | -| ZZ Plant | Low to bright indirect | Bi-weekly | -| Philodendron | Medium to bright indirect | Weekly | -| Aloe Vera | Bright direct | Bi-weekly | -| Boston Fern | Partial shade | 2-3x weekly | -| Spider Plant | Medium to bright indirect | Weekly | -| Dracaena | Medium indirect | Weekly | -| Bird of Paradise | Bright indirect to direct | Weekly | -| Calathea | Medium indirect | Weekly | - - -Below is an example of a **sticky table**. As you scroll down the page, the header row remains frozen at the top of the table. - | Plant | Light Requirements | Water | |-------|-------------------|-------| @@ -48,15 +25,10 @@ Below is an example of a **sticky table**. As you scroll down the page, the head | Calathea | Medium indirect | Weekly | -## Create a sticky table - -### Using Markdown +## Usage Simply wrap any Markdown table with `` tags to make the header sticky. No changes to your table syntax are needed. - - - ```markdown @@ -67,24 +39,13 @@ Simply wrap any Markdown table with `` tags to make the header stic ``` - - - -| Plant | Light Requirements | Water | -|-------|-------------------|-------| -| Fern | Partial shade | Weekly | -| Snake Plant | Low to bright indirect | Bi-weekly | - - + +## Variants ### Using HTML Simply add the `sticky` attribute to the opening `` tag. No further changes to your table syntax are needed. - - - -```markdown
@@ -106,10 +67,8 @@ Simply add the `sticky` attribute to the opening `
` tag. No further chang
-``` - - - + +```markdown @@ -131,8 +90,7 @@ Simply add the `sticky` attribute to the opening `
` tag. No further chang
- - +``` ## Style a sticky table diff --git a/fern/products/docs/pages/component-library/default-components/tabs.mdx b/fern/products/docs/pages/component-library/default-components/tabs.mdx index d48c12c4c..09a780eda 100644 --- a/fern/products/docs/pages/component-library/default-components/tabs.mdx +++ b/fern/products/docs/pages/component-library/default-components/tabs.mdx @@ -17,7 +17,8 @@ The Tabs component organizes content into separate tabs that users can switch be - +## Usage + ```jsx @@ -31,25 +32,10 @@ The Tabs component organizes content into separate tabs that users can switch be ``` - - -## Properties - - - The title displayed in the tab header - - - The language associated with the code block. Any arbitrary string may be used. - - When specified, enables global language synchronization across all tabs and code blocks with the same language value. - - - - The content to be displayed when the tab is selected. Can include text, markdown, and components. - +## Variants -## Language synchronization +### Language synchronization Multiple `Tabs` with a `language` property automatically synchronize. This means when a user selects a tab with a specific language, all other tabs across your @@ -190,3 +176,19 @@ either set of tabs doesn't affect the other set of tabs: +## Properties + + + The title displayed in the tab header + + + + The language associated with the code block. Any arbitrary string may be used. + + When specified, enables global language synchronization across all tabs and code blocks with the same language value. + + + + The content to be displayed when the tab is selected. Can include text, markdown, and components. + + diff --git a/fern/products/docs/pages/component-library/default-components/tooltips.mdx b/fern/products/docs/pages/component-library/default-components/tooltips.mdx index f94de698b..93514094e 100644 --- a/fern/products/docs/pages/component-library/default-components/tooltips.mdx +++ b/fern/products/docs/pages/component-library/default-components/tooltips.mdx @@ -12,8 +12,6 @@ values within your code examples. When users hover over highlighted code, they can see explanations, documentation links, or additional context without leaving the code example. - -