mirror of
https://gitlab.com/KenanZhu/AutoLibraryManuals.git
synced 2026-11-05 05:35:51 +08:00
Initial commit
This commit is contained in:
35 files changed
+2020
No files matched your search
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: 'Code blocks'
|
||||
description: 'Display inline code and code blocks'
|
||||
icon: 'code'
|
||||
---
|
||||
|
||||
## Inline code
|
||||
|
||||
To denote a `word` or `phrase` as code, enclose it in backticks (`).
|
||||
|
||||
```
|
||||
To denote a `word` or `phrase` as code, enclose it in backticks (`).
|
||||
```
|
||||
|
||||
## Code blocks
|
||||
|
||||
Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Optionally, you can also write the name of your code after the programming language.
|
||||
|
||||
```java HelloWorld.java
|
||||
class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
````md
|
||||
```java HelloWorld.java
|
||||
class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
## Code groups
|
||||
|
||||
To display the same snippet in multiple languages as tabs, use the `CodeGroup` component. See [Components](/essentials/components#code-groups) for usage.
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
title: 'Components'
|
||||
description: 'Callouts, cards, steps, tabs, and more'
|
||||
icon: 'puzzle-piece'
|
||||
---
|
||||
|
||||
Mintlify components let you build rich, interactive documentation pages using MDX. Here are some commonly used ones.
|
||||
|
||||
See the [components overview](https://mintlify.com/docs/components) in the Mintlify documentation for a complete list.
|
||||
|
||||
## Callouts
|
||||
|
||||
Use callouts to draw attention to important information.
|
||||
|
||||
<Note>A **Note** is for general information that helps the reader.</Note>
|
||||
|
||||
<Tip>A **Tip** highlights a helpful shortcut or best practice.</Tip>
|
||||
|
||||
<Warning>A **Warning** flags something that could cause problems.</Warning>
|
||||
|
||||
<Info>An **Info** callout provides supplementary context.</Info>
|
||||
|
||||
```mdx
|
||||
<Note>A **Note** is for general information that helps the reader.</Note>
|
||||
|
||||
<Tip>A **Tip** highlights a helpful shortcut or best practice.</Tip>
|
||||
|
||||
<Warning>A **Warning** flags something that could cause problems.</Warning>
|
||||
|
||||
<Info>An **Info** callout provides supplementary context.</Info>
|
||||
```
|
||||
|
||||
## Cards
|
||||
|
||||
Cards link readers to other pages or resources.
|
||||
|
||||
<Columns cols={2}>
|
||||
<Card title="API Reference" icon="terminal" href="/api-reference/introduction">
|
||||
Auto-generated docs from your OpenAPI spec.
|
||||
</Card>
|
||||
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
||||
Get your docs running in three steps.
|
||||
</Card>
|
||||
</Columns>
|
||||
|
||||
```mdx
|
||||
<Columns cols={2}>
|
||||
<Card title="API Reference" icon="terminal" href="/api-reference/introduction">
|
||||
Auto-generated docs from your OpenAPI spec.
|
||||
</Card>
|
||||
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
||||
Get your docs running in three steps.
|
||||
</Card>
|
||||
</Columns>
|
||||
```
|
||||
|
||||
Use `<Columns cols={N}>` to control the grid width. Cards without `href` render as informational panels.
|
||||
|
||||
## Steps
|
||||
|
||||
Steps present numbered procedures clearly.
|
||||
|
||||
<Steps>
|
||||
<Step title="Install the package">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Step>
|
||||
<Step title="Initialize">
|
||||
Run the init command in your project root.
|
||||
```bash
|
||||
npx my-package init
|
||||
```
|
||||
</Step>
|
||||
<Step title="You're ready">
|
||||
Start using the package in your code.
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
````mdx
|
||||
<Steps>
|
||||
<Step title="Install the package">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Step>
|
||||
<Step title="Initialize">
|
||||
Run the init command in your project root.
|
||||
</Step>
|
||||
<Step title="You're ready">
|
||||
Start using the package in your code.
|
||||
</Step>
|
||||
</Steps>
|
||||
````
|
||||
|
||||
## Tabs
|
||||
|
||||
Tabs let readers switch between alternative content — different languages, environments, or platforms.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="npm">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="yarn">
|
||||
```bash
|
||||
yarn add my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="pnpm">
|
||||
```bash
|
||||
pnpm add my-package
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
````mdx
|
||||
<Tabs>
|
||||
<Tab title="npm">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="yarn">
|
||||
```bash
|
||||
yarn add my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="pnpm">
|
||||
```bash
|
||||
pnpm add my-package
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
````
|
||||
|
||||
## Accordions
|
||||
|
||||
Accordions collapse content behind a toggle — useful for FAQs or optional detail.
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="What does this product do?">
|
||||
A brief answer to the first question. Keep it concise.
|
||||
</Accordion>
|
||||
<Accordion title="How is pricing calculated?">
|
||||
Another answer here. Use as much space as you need.
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
```mdx
|
||||
<AccordionGroup>
|
||||
<Accordion title="What does this product do?">
|
||||
A brief answer to the first question.
|
||||
</Accordion>
|
||||
<Accordion title="How is pricing calculated?">
|
||||
Another answer here.
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
```
|
||||
|
||||
## Frames
|
||||
|
||||
Wrap images or other content in a `Frame` to add a styled border and rounded corners.
|
||||
|
||||
<Frame>
|
||||
<img src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Big Bend landscape" />
|
||||
</Frame>
|
||||
|
||||
```mdx
|
||||
<Frame>
|
||||
<img src="/images/screenshot.png" alt="App screenshot" />
|
||||
</Frame>
|
||||
```
|
||||
|
||||
## Code groups
|
||||
|
||||
`CodeGroup` displays multiple code snippets as tabs — ideal for showing the same example in multiple languages.
|
||||
|
||||
<CodeGroup>
|
||||
```typescript TypeScript
|
||||
const response = await fetch('https://api.example.com/users');
|
||||
const users = await response.json();
|
||||
```
|
||||
|
||||
```python Python
|
||||
import requests
|
||||
response = requests.get('https://api.example.com/users')
|
||||
users = response.json()
|
||||
```
|
||||
|
||||
```bash curl
|
||||
curl https://api.example.com/users
|
||||
```
|
||||
</CodeGroup>
|
||||
|
||||
````mdx
|
||||
<CodeGroup>
|
||||
```typescript TypeScript
|
||||
const response = await fetch('https://api.example.com/users');
|
||||
```
|
||||
|
||||
```python Python
|
||||
response = requests.get('https://api.example.com/users')
|
||||
```
|
||||
</CodeGroup>
|
||||
````
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: 'Images and embeds'
|
||||
description: 'Add image, video, and other HTML elements'
|
||||
icon: 'image'
|
||||
---
|
||||
|
||||
<img
|
||||
style={{ borderRadius: '0.5rem' }}
|
||||
src="https://mintlify-assets.b-cdn.net/bigbend.jpg"
|
||||
/>
|
||||
|
||||
## Image
|
||||
|
||||
### Using Markdown
|
||||
|
||||
The [markdown syntax](https://www.markdownguide.org/basic-syntax/#images) lets you add images using the following code
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
Note that the image file size must be less than 5MB. Otherwise, we recommend hosting on a service like [Cloudinary](https://cloudinary.com/) or [S3](https://aws.amazon.com/s3/). You can then use that URL and embed.
|
||||
|
||||
### Using embeds
|
||||
|
||||
To get more customizability with images, you can also use [embeds](/writing-content/embed) to add images
|
||||
|
||||
```html
|
||||
<img height="200" src="/path/image.jpg" />
|
||||
```
|
||||
|
||||
## Embeds and HTML elements
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
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
|
||||
style={{ width: '100%', borderRadius: '0.5rem' }}
|
||||
></iframe>
|
||||
|
||||
<br />
|
||||
|
||||
<Tip>
|
||||
|
||||
Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html). This is helpful if you prefer HTML tags to Markdown syntax, and lets you create documentation with infinite flexibility.
|
||||
|
||||
</Tip>
|
||||
|
||||
### iFrames
|
||||
|
||||
Loads another HTML page within the document. Most commonly used for embedding videos.
|
||||
|
||||
```html
|
||||
<iframe src="https://www.youtube.com/embed/4KzFe50RQkQ"> </iframe>
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: 'Markdown syntax'
|
||||
description: 'Text, title, and styling in standard markdown'
|
||||
icon: 'text-size'
|
||||
---
|
||||
|
||||
## Titles
|
||||
|
||||
Best used for section headers.
|
||||
|
||||
```md
|
||||
## Titles
|
||||
```
|
||||
|
||||
### Subtitles
|
||||
|
||||
Best used for subsection headers.
|
||||
|
||||
```md
|
||||
### Subtitles
|
||||
```
|
||||
|
||||
<Tip>
|
||||
|
||||
Each **title** and **subtitle** creates an anchor and also shows up on the table of contents on the right.
|
||||
|
||||
</Tip>
|
||||
|
||||
## Text formatting
|
||||
|
||||
We support most markdown formatting. Simply add `**`, `_`, or `~` around text to format it.
|
||||
|
||||
| Style | How to write it | Result |
|
||||
| ------------- | ----------------- | --------------- |
|
||||
| Bold | `**bold**` | **bold** |
|
||||
| Italic | `_italic_` | _italic_ |
|
||||
| Strikethrough | `~strikethrough~` | ~strikethrough~ |
|
||||
|
||||
You can combine these. For example, write `**_bold and italic_**` to get **_bold and italic_** text.
|
||||
|
||||
You need to use HTML to write superscript and subscript text. That is, add `<sup>` or `<sub>` around your text.
|
||||
|
||||
| Text Size | How to write it | Result |
|
||||
| ----------- | ------------------------ | ---------------------- |
|
||||
| Superscript | `<sup>superscript</sup>` | <sup>superscript</sup> |
|
||||
| Subscript | `<sub>subscript</sub>` | <sub>subscript</sub> |
|
||||
|
||||
## Linking to pages
|
||||
|
||||
You can add a link by wrapping text in `[]()`. You would write `[link to google](https://google.com)` to [link to google](https://google.com).
|
||||
|
||||
Links to pages in your docs need to be root-relative. Basically, you should include the entire folder path. For example, `[link to text](/writing-content/text)` links to the page "Text" in our components section.
|
||||
|
||||
Relative links like `[link to text](../text)` will open slower because we cannot optimize them as easily.
|
||||
|
||||
## Blockquotes
|
||||
|
||||
### Singleline
|
||||
|
||||
To create a blockquote, add a `>` in front of a paragraph.
|
||||
|
||||
> Dorothy followed her through many of the beautiful rooms in her castle.
|
||||
|
||||
```md
|
||||
> Dorothy followed her through many of the beautiful rooms in her castle.
|
||||
```
|
||||
|
||||
### Multiline
|
||||
|
||||
> Dorothy followed her through many of the beautiful rooms in her castle.
|
||||
>
|
||||
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
|
||||
|
||||
```md
|
||||
> Dorothy followed her through many of the beautiful rooms in her castle.
|
||||
>
|
||||
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
|
||||
```
|
||||
|
||||
### LaTeX
|
||||
|
||||
Mintlify supports [LaTeX](https://www.latex-project.org) through the Latex component.
|
||||
|
||||
<Latex>8 x (vk x H1 - H2) = (0,1)</Latex>
|
||||
|
||||
```md
|
||||
<Latex>8 x (vk x H1 - H2) = (0,1)</Latex>
|
||||
```
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
title: 'Navigation'
|
||||
description: 'The navigation field in docs.json defines the pages that go in the navigation menu'
|
||||
icon: 'map'
|
||||
---
|
||||
|
||||
The navigation menu is the list of links on every website.
|
||||
|
||||
You will likely update `docs.json` every time you add a new page. Pages do not show up automatically.
|
||||
|
||||
## Navigation syntax
|
||||
|
||||
Our navigation syntax is recursive which means you can make nested navigation groups. You don't need to include `.mdx` in page names.
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```json Regular Navigation
|
||||
"navigation": {
|
||||
"tabs": [
|
||||
{
|
||||
"tab": "Docs",
|
||||
"groups": [
|
||||
{
|
||||
"group": "Getting Started",
|
||||
"pages": ["quickstart"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```json Nested Navigation
|
||||
"navigation": {
|
||||
"tabs": [
|
||||
{
|
||||
"tab": "Docs",
|
||||
"groups": [
|
||||
{
|
||||
"group": "Getting Started",
|
||||
"pages": [
|
||||
"quickstart",
|
||||
{
|
||||
"group": "Nested Reference Pages",
|
||||
"pages": ["nested-reference-page"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Folders
|
||||
|
||||
Simply put your MDX files in folders and update the paths in `docs.json`.
|
||||
|
||||
For example, to have a page at `https://yoursite.com/your-folder/your-page` you would make a folder called `your-folder` containing an MDX file called `your-page.mdx`.
|
||||
|
||||
<Warning>
|
||||
|
||||
You cannot use `api` for the name of a folder unless you nest it inside another folder. Mintlify uses Next.js which reserves the top-level `api` folder for internal server calls. A folder name such as `api-reference` would be accepted.
|
||||
|
||||
</Warning>
|
||||
|
||||
```json Navigation With Folder
|
||||
"navigation": {
|
||||
"tabs": [
|
||||
{
|
||||
"tab": "Docs",
|
||||
"groups": [
|
||||
{
|
||||
"group": "Group Name",
|
||||
"pages": ["your-folder/your-page"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Hidden pages
|
||||
|
||||
MDX files not included in `docs.json` will not show up in the sidebar but are accessible through the search bar and by linking directly to them.
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
title: "Reusable snippets"
|
||||
description: "Write once, reuse everywhere. Use snippets to keep content in sync across pages"
|
||||
icon: "recycle"
|
||||
---
|
||||
|
||||
Any content you find yourself repeating across pages is a good candidate for a snippet. Create the file once in the `snippets/` directory, import it wherever you need it, and updates propagate everywhere automatically.
|
||||
|
||||
<Note>
|
||||
Files inside `snippets/` are not rendered as standalone pages. They only appear where you import them.
|
||||
</Note>
|
||||
|
||||
## Content snippets
|
||||
|
||||
The simplest pattern: write MDX content in a snippet file and import it as a component.
|
||||
|
||||
```mdx snippets/prerequisites.mdx
|
||||
Before you begin, make sure you have:
|
||||
- Node.js 18 or higher
|
||||
- An API key from your [dashboard](https://dashboard.example.com)
|
||||
```
|
||||
|
||||
Import it into any page using a root-relative path:
|
||||
|
||||
```mdx your-page.mdx
|
||||
---
|
||||
title: Install the SDK
|
||||
---
|
||||
|
||||
import Prerequisites from '/snippets/prerequisites.mdx';
|
||||
|
||||
<Prerequisites />
|
||||
|
||||
## Installation
|
||||
...
|
||||
```
|
||||
|
||||
You can also use relative imports, which enables CMD+click navigation to the snippet in your editor:
|
||||
|
||||
```mdx
|
||||
import Prerequisites from '../snippets/prerequisites.mdx';
|
||||
```
|
||||
|
||||
## Variable snippets
|
||||
|
||||
Export named constants from a snippet file to reuse values like product names, version numbers, or URLs.
|
||||
|
||||
```mdx snippets/vars.mdx
|
||||
export const sdkVersion = '3.2.0';
|
||||
export const baseUrl = 'https://api.example.com/v1';
|
||||
```
|
||||
|
||||
Import and use them inline:
|
||||
|
||||
```mdx your-page.mdx
|
||||
import { sdkVersion, baseUrl } from '/snippets/vars.mdx';
|
||||
|
||||
The current SDK version is **{sdkVersion}**.
|
||||
|
||||
All requests go to `{baseUrl}`.
|
||||
```
|
||||
|
||||
## Component snippets
|
||||
|
||||
For snippets that need to vary based on where they're used, export an arrow function component that accepts props.
|
||||
|
||||
```mdx snippets/endpoint-note.mdx
|
||||
export const EndpointNote = ({ method, path }) => (
|
||||
<Note>
|
||||
This guide covers the <code>{method} {path}</code> endpoint.
|
||||
See the <a href="/api-reference/introduction">API reference</a> for full details.
|
||||
</Note>
|
||||
);
|
||||
```
|
||||
|
||||
* Use arrow function syntax (`const Foo = () => ...`).
|
||||
* The `function` keyword is not supported in snippet files.
|
||||
* MDX syntax doesn't compile inside arrow function bodies. Use plain HTML tags there, or use a default export instead.
|
||||
|
||||
Pass props when you render it:
|
||||
|
||||
```mdx your-page.mdx
|
||||
import { EndpointNote } from '/snippets/endpoint-note.mdx';
|
||||
|
||||
<EndpointNote method="POST" path="/v1/users" />
|
||||
```
|
||||
|
||||
## Snippets importing snippets
|
||||
|
||||
Snippets can import other snippets, which is useful for composing larger shared sections from smaller pieces.
|
||||
|
||||
```mdx snippets/auth-intro.mdx
|
||||
import AuthNote from '/snippets/auth-note.mdx';
|
||||
|
||||
## Authentication
|
||||
|
||||
All endpoints require a bearer token.
|
||||
|
||||
<AuthNote />
|
||||
```
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
title: 'Configuration'
|
||||
description: 'Customize your site with the `docs.json` file'
|
||||
icon: 'gear'
|
||||
---
|
||||
|
||||
Every Mintlify site is configured through a `docs.json` file in your project root. Changes take effect immediately in local preview.
|
||||
|
||||
## Identity
|
||||
|
||||
Set the name, theme, and visual identity of your site.
|
||||
|
||||
```json docs.json
|
||||
{
|
||||
"name": "Acme Docs",
|
||||
"theme": "mint",
|
||||
"favicon": "/favicon.svg",
|
||||
"logo": {
|
||||
"light": "/logo/light.svg",
|
||||
"dark": "/logo/dark.svg"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<ResponseField name="name" type="string" required>
|
||||
Your project name. Appears in the browser tab title and site metadata.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="theme" type="string">
|
||||
The visual theme. Options: `mint`, `maple`, `willow`, `sequoia`, `prism`.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="favicon" type="string">
|
||||
Path to your favicon. SVG recommended for crisp rendering at all sizes.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="logo" type="object">
|
||||
<Expandable title="Logo">
|
||||
<ResponseField name="light" type="string">Logo shown in light mode.</ResponseField>
|
||||
<ResponseField name="dark" type="string">Logo shown in dark mode.</ResponseField>
|
||||
<ResponseField name="href" type="string" default="/">URL the logo links to.</ResponseField>
|
||||
</Expandable>
|
||||
</ResponseField>
|
||||
|
||||
## Colors
|
||||
|
||||
```json docs.json
|
||||
{
|
||||
"colors": {
|
||||
"primary": "#16A34A",
|
||||
"light": "#07C983",
|
||||
"dark": "#15803D"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<ResponseField name="colors.primary" type="string" required>
|
||||
Primary brand color. Used for highlights, active states, and accents in light mode.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="colors.light" type="string">
|
||||
Primary color for dark mode.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="colors.dark" type="string">
|
||||
Used for buttons and important interactive elements.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="colors.background" type="object">
|
||||
Override the default page background color.
|
||||
<Expandable title="Background">
|
||||
<ResponseField name="light" type="string">Background hex color in light mode.</ResponseField>
|
||||
<ResponseField name="dark" type="string">Background hex color in dark mode.</ResponseField>
|
||||
</Expandable>
|
||||
</ResponseField>
|
||||
|
||||
## Navbar
|
||||
|
||||
Configure the top navigation bar links and primary call-to-action.
|
||||
|
||||
```json docs.json
|
||||
{
|
||||
"navbar": {
|
||||
"links": [
|
||||
{ "label": "Support", "href": "mailto:support@example.com" }
|
||||
],
|
||||
"primary": {
|
||||
"type": "button",
|
||||
"label": "Dashboard",
|
||||
"href": "https://dashboard.example.com"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<ResponseField name="navbar.links" type="array">
|
||||
Text links displayed in the top navigation bar.
|
||||
<Expandable title="Link">
|
||||
<ResponseField name="label" type="string">Display text for the link.</ResponseField>
|
||||
<ResponseField name="href" type="string">URL the link points to.</ResponseField>
|
||||
</Expandable>
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="navbar.primary" type="object">
|
||||
The prominent call-to-action in the top-right corner.
|
||||
<Expandable title="Primary">
|
||||
<ResponseField name="type" type='"button" | "github"'>
|
||||
`button` renders a CTA button. `github` renders a star count badge.
|
||||
</ResponseField>
|
||||
<ResponseField name="label" type="string">Button label. Required when type is `button`.</ResponseField>
|
||||
<ResponseField name="href" type="string">URL the button or badge links to.</ResponseField>
|
||||
</Expandable>
|
||||
</ResponseField>
|
||||
|
||||
## Navigation
|
||||
|
||||
Organize your pages into tabs and groups. See the [Navigation](/essentials/navigation) guide for full details.
|
||||
|
||||
```json docs.json
|
||||
{
|
||||
"navigation": {
|
||||
"tabs": [
|
||||
{
|
||||
"tab": "Guides",
|
||||
"groups": [
|
||||
{
|
||||
"group": "Getting started",
|
||||
"pages": ["index", "quickstart"]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"global": {
|
||||
"anchors": [
|
||||
{
|
||||
"anchor": "Blog",
|
||||
"href": "https://example.com/blog",
|
||||
"icon": "newspaper"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Contextual toolbar
|
||||
|
||||
The contextual toolbar floats on every page and gives readers one-click access to AI tools and integrations. See [Contextual toolbar](/agent-ready/contextual) for the full list of options.
|
||||
|
||||
```json docs.json
|
||||
{
|
||||
"contextual": {
|
||||
"options": ["copy", "view", "claude", "mcp", "cursor", "vscode"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Footer
|
||||
|
||||
```json docs.json
|
||||
{
|
||||
"footer": {
|
||||
"socials": {
|
||||
"x": "https://x.com/yourhandle",
|
||||
"github": "https://github.com/yourorg",
|
||||
"linkedin": "https://linkedin.com/company/yourco"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<ResponseField name="footer.socials" type="object">
|
||||
Social links shown in the footer. Supported keys: `x`, `github`, `linkedin`, `discord`, `slack`, `facebook`, `instagram`, `website`.
|
||||
</ResponseField>
|
||||
Reference in new issue
Block a user