mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-29 00:47:03 +02:00
docs: new APITable comp to render large tables (#5891)
This commit is contained in:
parent
7a07963c42
commit
ecce576bbc
14 changed files with 277 additions and 138 deletions
|
@ -5,6 +5,8 @@ title: '📦 plugin-content-blog'
|
|||
slug: '/api/plugins/@docusaurus/plugin-content-blog'
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Provides the [Blog](blog.mdx) feature and is the default blog plugin for Docusaurus.
|
||||
|
||||
## Installation {#installation}
|
||||
|
@ -25,7 +27,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -62,7 +64,7 @@ Accepted fields:
|
|||
| `feedOptions.language` | `string` (See [documentation](http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes) for possible values) | `undefined` | Language metadata of the feed. |
|
||||
| `sortPosts` | <code>'descending' \| 'ascending' </code> | `'descending'` | Governs the direction of blog post sorting. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type EditUrlFunction = (params: {
|
||||
|
@ -193,7 +195,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -214,7 +216,7 @@ Accepted fields:
|
|||
| `image` | `string` | `undefined` | Cover or thumbnail image that will be used when displaying the link to your post. |
|
||||
| `slug` | `string` | File path | Allows to customize the blog post url (`/<routeBasePath>/<slug>`). Support multiple patterns: `slug: my-blog-post`, `slug: /my/path/to/blog/post`, slug: `/`. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type Tag = string | {label: string; permalink: string};
|
||||
|
|
|
@ -5,6 +5,8 @@ title: '📦 plugin-content-docs'
|
|||
slug: '/api/plugins/@docusaurus/plugin-content-docs'
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Provides the [Docs](../../guides/docs/docs-introduction.md) functionality and is the default docs plugin for Docusaurus.
|
||||
|
||||
## Installation {#installation}
|
||||
|
@ -25,7 +27,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -58,7 +60,7 @@ Accepted fields:
|
|||
| `versions` | `Versions` | `{}` | Independent customization of each version's properties. |
|
||||
| `onlyIncludeVersions` | `string[]` | All versions available | Only include a subset of all available versions. <br /> Tip: limit to 2 or 3 versions to improve startup and build time in dev and deploy previews. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type EditUrlFunction = (params: {
|
||||
|
@ -239,7 +241,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -263,7 +265,7 @@ Accepted fields:
|
|||
| `slug` | `string` | File path | Allows to customize the document url (`/<routeBasePath>/<slug>`). Support multiple patterns: `slug: my-doc`, `slug: /my/path/myDoc`, `slug: /`. |
|
||||
| `tags` | `Tag[]` | `undefined` | A list of strings or objects of two string fields `label` and `permalink` to tag to your docs. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type Tag = string | {label: string; permalink: string};
|
||||
|
|
|
@ -5,6 +5,8 @@ title: '📦 plugin-content-pages'
|
|||
slug: '/api/plugins/@docusaurus/plugin-content-pages'
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides [creating pages](guides/creating-pages.md) functionality.
|
||||
|
||||
## Installation {#installation}
|
||||
|
@ -25,7 +27,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -39,7 +41,7 @@ Accepted fields:
|
|||
| `beforeDefaultRemarkPlugins` | `any[]` | `[]` | Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins. |
|
||||
| `beforeDefaultRehypePlugins` | `any[]` | `[]` | Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
## Example configuration {#ex-config}
|
||||
|
||||
|
|
|
@ -6,6 +6,8 @@ slug: '/api/themes/configuration'
|
|||
toc_max_heading_level: 4
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
This configuration applies to all [main themes](./overview.md).
|
||||
|
||||
## Common {#common}
|
||||
|
@ -18,7 +20,7 @@ It is possible to customize the color mode support within the `colorMode` object
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -31,7 +33,7 @@ Accepted fields:
|
|||
| `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. |
|
||||
| `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -75,13 +77,13 @@ You can configure a default image that will be used for your meta tag, in partic
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `image` | `string` | `undefined` | The meta image URL for the site. Relative to your site's "static" directory. Cannot be SVGs. Can be external URLs too. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -100,13 +102,13 @@ You can configure additional html metadata (and override existing ones).
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `metadata` | `Metadata[]` | `[]` | Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -125,7 +127,7 @@ Sometimes you want to announce something in your website. Just for such a case,
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="announcement-bar">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -135,7 +137,7 @@ Accepted fields:
|
|||
| `textColor` | `string` | `'#000'` | Announcement text color. |
|
||||
| `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -160,7 +162,7 @@ module.exports = {
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -170,7 +172,7 @@ Accepted fields:
|
|||
| `hideOnScroll` | `boolean` | `false` | Whether the navbar is hidden when the user scrolls down. |
|
||||
| `style` | <code>'primary' \| 'dark'</code> | Same as theme | Sets the navbar style, ignoring the dark/light theme. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
### Navbar logo {#navbar-logo}
|
||||
|
||||
|
@ -180,7 +182,7 @@ To improve dark mode support, you can also set a different logo for this mode.
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-logo">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -192,7 +194,7 @@ Accepted fields:
|
|||
| `height` | <code>string \| number</code> | `undefined` | Specifies the `height` attribute. |
|
||||
| `target` | `string` | Calculated based on `href` (external links will open in a new tab, all others in the current one). | The `target` attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -267,7 +269,7 @@ Outbound (external) links automatically get `target="_blank" rel="noopener noref
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-link">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -281,7 +283,7 @@ Accepted fields:
|
|||
| `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. |
|
||||
| `className` | `string` | `''` | Custom CSS class (for styling any item). |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
:::note
|
||||
|
||||
|
@ -327,7 +329,7 @@ Note that the dropdown base item is a clickable link as well, so this item can r
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-dropdown">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -336,7 +338,7 @@ Accepted fields:
|
|||
| `items` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | **Required** | The items to be contained in the dropdown. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -376,7 +378,7 @@ If you want to link to a specific doc, this special navbar item type will render
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-doc-link">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -386,7 +388,7 @@ Accepted fields:
|
|||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc belongs to. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -417,7 +419,7 @@ The user will be able to switch from one version to another, while staying on th
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-docs-version-dropdown">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -428,7 +430,7 @@ Accepted fields:
|
|||
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
|
||||
| `dropdownActiveClassDisabled` | `boolean` | `false` | Do not add the link active class when browsing docs. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -457,7 +459,7 @@ If you use docs with versioning, this special navbar item type will link to the
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-docs-version">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -467,7 +469,7 @@ Accepted fields:
|
|||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -498,7 +500,7 @@ The user will be able to switch from one locale to another, while staying on the
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-locale-dropdown">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -507,7 +509,7 @@ Accepted fields:
|
|||
| `dropdownItemsBefore` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the beginning of the dropdown. |
|
||||
| `dropdownItemsAfter` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the end of the dropdown. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -540,14 +542,14 @@ If you use the [search](../../search.md), the search bar will be the rightmost e
|
|||
|
||||
However, with this special navbar item type, you can change the default location.
|
||||
|
||||
<small>
|
||||
<APITable name="navbar-search">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'search'` | **Required** | Sets the type of this item to a search bar. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
|
@ -604,7 +606,7 @@ Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-r
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="codeblock">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -612,7 +614,7 @@ Accepted fields:
|
|||
| `darkTheme` | `PrismTheme` | `palenight` | The Prism theme to use for dark-theme code blocks. |
|
||||
| `defaultLanguage` | `string` | `undefined` | The side of the navbar this item should appear on. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
### Theme {#theme}
|
||||
|
||||
|
@ -662,7 +664,7 @@ You can add logo and a copyright to the footer via `themeConfig.footer`. Logo ca
|
|||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
<APITable name="footer">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -671,7 +673,7 @@ Accepted fields:
|
|||
| `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. |
|
||||
| `items` | `FooterItem[]` | `[]` | The link groups to be present. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -700,18 +702,18 @@ You can add links to the footer via `themeConfig.footer.links`.
|
|||
|
||||
Accepted fields of each link section:
|
||||
|
||||
<small>
|
||||
<APITable name="footer-links">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `title` | `string` | `undefined` | Label of the section of these links. |
|
||||
| `items` | `FooterLink[]` | `[]` | Links in this section. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Accepted fields of each item in `items`:
|
||||
|
||||
<small>
|
||||
<APITable name="footer-items">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
|
@ -720,7 +722,7 @@ Accepted fields of each item in `items`:
|
|||
| `href` | `string` | **Required** | A full-page navigation, used for navigating outside of the website. **Only one of `to` or `href` should be used.** |
|
||||
| `html` | `string` | `undefined` | Renders the html pass-through instead of a simple link. In case `html` is used, no other options should be provided. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
@ -776,14 +778,14 @@ module.exports = {
|
|||
|
||||
You can adjust the default table of contents via `themeConfig.tableOfContents`.
|
||||
|
||||
<small>
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `minHeadingLevel` | `number` | `2` | The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value. |
|
||||
| `maxHeadingLevel` | `number` | `3` | Max heading level displayed in the TOC. Should be an integer between 2 and 6. |
|
||||
|
||||
</small>
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue