3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-10 07:37:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: new APITable comp to render large tables (#5891)

Browse source
This commit is contained in:
Joshua Chen 2021-11-10 18:38:23 +08:00 • committed by GitHub
parent 7a07963c42
commit ecce576bbc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 277 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

10
website/docs/api/plugins/plugin-content-blog.md
View file

@ -5,6 +5,8 @@ title: '📦 plugin-content-blog'
slug: '/api/plugins/@docusaurus/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. Provides the [Blog](blog.mdx) feature and is the default blog plugin for Docusaurus.
## Installation {#installation} ## Installation {#installation}
@ -25,7 +27,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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. | | `sortPosts` | <code>'descending' \| 'ascending' </code> | `'descending'` | Governs the direction of blog post sorting. |
</small> </APITable>
```typescript ```typescript
type EditUrlFunction = (params: { type EditUrlFunction = (params: {
@ -193,7 +195,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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: `/`. | | `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 ```typescript
type Tag = string | {label: string; permalink: string}; type Tag = string | {label: string; permalink: string};

10
website/docs/api/plugins/plugin-content-docs.md
View file

@ -5,6 +5,8 @@ title: '📦 plugin-content-docs'
slug: '/api/plugins/@docusaurus/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. Provides the [Docs](../../guides/docs/docs-introduction.md) functionality and is the default docs plugin for Docusaurus.
## Installation {#installation} ## Installation {#installation}
@ -25,7 +27,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -58,7 +60,7 @@ Accepted fields:
| `versions` | `Versions` | `{}` | Independent customization of each version's properties. | | `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. | | `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 ```typescript
type EditUrlFunction = (params: { type EditUrlFunction = (params: {
@ -239,7 +241,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | 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: /`. | | `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. | | `tags` | `Tag[]` | `undefined` | A list of strings or objects of two string fields `label` and `permalink` to tag to your docs. |
</small> </APITable>
```typescript ```typescript
type Tag = string | {label: string; permalink: string}; type Tag = string | {label: string; permalink: string};

6
website/docs/api/plugins/plugin-content-pages.md
View file

@ -5,6 +5,8 @@ title: '📦 plugin-content-pages'
slug: '/api/plugins/@docusaurus/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. 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} ## Installation {#installation}
@ -25,7 +27,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -39,7 +41,7 @@ Accepted fields:
| `beforeDefaultRemarkPlugins` | `any[]` | `[]` | Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins. | | `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. | | `beforeDefaultRehypePlugins` | `any[]` | `[]` | Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins. |
</small> </APITable>
## Example configuration {#ex-config} ## Example configuration {#ex-config}

74
website/docs/api/themes/theme-configuration.md
View file

@ -6,6 +6,8 @@ slug: '/api/themes/configuration'
toc_max_heading_level: 4 toc_max_heading_level: 4
--- ---
import APITable from '@site/src/components/APITable';
This configuration applies to all [main themes](./overview.md). This configuration applies to all [main themes](./overview.md).
## Common {#common} ## Common {#common}
@ -18,7 +20,7 @@ It is possible to customize the color mode support within the `colorMode` object
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -31,7 +33,7 @@ Accepted fields:
| `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. | | `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. |
| `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. | | `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. |
</small> </APITable>
Example configuration: Example configuration:
@ -75,13 +77,13 @@ You can configure a default image that will be used for your meta tag, in partic
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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: Example configuration:
@ -100,13 +102,13 @@ You can configure additional html metadata (and override existing ones).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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: Example configuration:
@ -125,7 +127,7 @@ Sometimes you want to announce something in your website. Just for such a case,
Accepted fields: Accepted fields:
<small> <APITable name="announcement-bar">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -135,7 +137,7 @@ Accepted fields:
| `textColor` | `string` | `'#000'` | Announcement text color. | | `textColor` | `string` | `'#000'` | Announcement text color. |
| `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. | | `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. |
</small> </APITable>
Example configuration: Example configuration:
@ -160,7 +162,7 @@ module.exports = {
Accepted fields: Accepted fields:
<small> <APITable name="navbar">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -170,7 +172,7 @@ Accepted fields:
| `hideOnScroll` | `boolean` | `false` | Whether the navbar is hidden when the user scrolls down. | | `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. | | `style` | <code>'primary' \| 'dark'</code> | Same as theme | Sets the navbar style, ignoring the dark/light theme. |
</small> </APITable>
### Navbar logo {#navbar-logo} ### 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: Accepted fields:
<small> <APITable name="navbar-logo">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -192,7 +194,7 @@ Accepted fields:
| `height` | <code>string \| number</code> | `undefined` | Specifies the `height` attribute. | | `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. | | `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: Example configuration:
@ -267,7 +269,7 @@ Outbound (external) links automatically get `target="_blank" rel="noopener noref
Accepted fields: Accepted fields:
<small> <APITable name="navbar-link">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -281,7 +283,7 @@ Accepted fields:
| `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. | | `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. |
| `className` | `string` | `''` | Custom CSS class (for styling any item). | | `className` | `string` | `''` | Custom CSS class (for styling any item). |
</small> </APITable>
:::note :::note
@ -327,7 +329,7 @@ Note that the dropdown base item is a clickable link as well, so this item can r
Accepted fields: Accepted fields:
<small> <APITable name="navbar-dropdown">
| Name | Type | Default | Description | | 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. | | `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. | | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
</small> </APITable>
Example configuration: Example configuration:
@ -376,7 +378,7 @@ If you want to link to a specific doc, this special navbar item type will render
Accepted fields: Accepted fields:
<small> <APITable name="navbar-doc-link">
| Name | Type | Default | Description | | 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. | | `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. | | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc belongs to. |
</small> </APITable>
Example configuration: Example configuration:
@ -417,7 +419,7 @@ The user will be able to switch from one version to another, while staying on th
Accepted fields: Accepted fields:
<small> <APITable name="navbar-docs-version-dropdown">
| Name | Type | Default | Description | | 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. | | `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. | | `dropdownActiveClassDisabled` | `boolean` | `false` | Do not add the link active class when browsing docs. |
</small> </APITable>
Example configuration: Example configuration:
@ -457,7 +459,7 @@ If you use docs with versioning, this special navbar item type will link to the
Accepted fields: Accepted fields:
<small> <APITable name="navbar-docs-version">
| Name | Type | Default | Description | | 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. | | `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. | | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
</small> </APITable>
Example configuration: Example configuration:
@ -498,7 +500,7 @@ The user will be able to switch from one locale to another, while staying on the
Accepted fields: Accepted fields:
<small> <APITable name="navbar-locale-dropdown">
| Name | Type | Default | Description | | 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. | | `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. | | `dropdownItemsAfter` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the end of the dropdown. |
</small> </APITable>
Example configuration: 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. However, with this special navbar item type, you can change the default location.
<small> <APITable name="navbar-search">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `type` | `'search'` | **Required** | Sets the type of this item to a search bar. | | `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. | | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
</small> </APITable>
```js title="docusaurus.config.js" ```js title="docusaurus.config.js"
module.exports = { module.exports = {
@ -604,7 +606,7 @@ Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-r
Accepted fields: Accepted fields:
<small> <APITable name="codeblock">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -612,7 +614,7 @@ Accepted fields:
| `darkTheme` | `PrismTheme` | `palenight` | The Prism theme to use for dark-theme code blocks. | | `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. | | `defaultLanguage` | `string` | `undefined` | The side of the navbar this item should appear on. |
</small> </APITable>
### Theme {#theme} ### Theme {#theme}
@ -662,7 +664,7 @@ You can add logo and a copyright to the footer via `themeConfig.footer`. Logo ca
Accepted fields: Accepted fields:
<small> <APITable name="footer">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -671,7 +673,7 @@ Accepted fields:
| `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. | | `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. |
| `items` | `FooterItem[]` | `[]` | The link groups to be present. | | `items` | `FooterItem[]` | `[]` | The link groups to be present. |
</small> </APITable>
Example configuration: Example configuration:
@ -700,18 +702,18 @@ You can add links to the footer via `themeConfig.footer.links`.
Accepted fields of each link section: Accepted fields of each link section:
<small> <APITable name="footer-links">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `title` | `string` | `undefined` | Label of the section of these links. | | `title` | `string` | `undefined` | Label of the section of these links. |
| `items` | `FooterLink[]` | `[]` | Links in this section. | | `items` | `FooterLink[]` | `[]` | Links in this section. |
</small> </APITable>
Accepted fields of each item in `items`: Accepted fields of each item in `items`:
<small> <APITable name="footer-items">
| Name | Type | Default | Description | | 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.** | | `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. | | `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: Example configuration:
@ -776,14 +778,14 @@ module.exports = {
You can adjust the default table of contents via `themeConfig.tableOfContents`. You can adjust the default table of contents via `themeConfig.tableOfContents`.
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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. | | `maxHeadingLevel` | `number` | `3` | Max heading level displayed in the TOC. Should be an integer between 2 and 6. |
</small> </APITable>
Example configuration: Example configuration:

93
website/src/components/APITable/index.tsx Normal file
View file

@ -0,0 +1,93 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, {
Children,
ComponentProps,
ReactElement,
ReactNode,
isValidElement,
useRef,
useEffect,
forwardRef,
} from 'react';
import {useHistory} from '@docusaurus/router';
import styles from './styles.module.css';
interface Props {
readonly children: ReactElement<ComponentProps<'table'>>;
readonly name?: string;
}
// ReactNode equivalent of HTMLElement#innerText
function getText(node: ReactElement): string {
let curNode: ReactNode = node;
while (isValidElement(curNode)) {
[curNode] = Children.toArray(curNode.props.children);
}
return curNode as string;
}
const APITableRow = forwardRef(
(
{
name,
children,
}: {name: string | undefined; children: ReactElement<ComponentProps<'tr'>>},
ref: React.RefObject<HTMLTableRowElement>,
) => {
const entryName = getText(children);
const anchor = name ? `#${name}-${entryName}` : `#${entryName}`;
const history = useHistory();
return (
<tr
id={entryName}
tabIndex={0}
ref={history.location.hash === anchor ? ref : undefined}
onClick={() => {
history.push(anchor);
}}
onKeyDown={(e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
history.push(anchor);
}
}}>
{children.props.children}
</tr>
);
},
);
/*
* Note: this is not a quite robust component since it makes a lot of
* assumptions about how the children looks; however, those assumptions
* should be generally correct in the MDX context.
*/
export default function APITable({children, name}: Props): JSX.Element {
const [thead, tbody] = Children.toArray(
children.props.children,
) as ReactElement[];
const highlightedRow = useRef<HTMLTableRowElement>(null);
useEffect(() => {
highlightedRow.current?.focus();
}, [highlightedRow]);
const rows = Children.map(
tbody.props.children,
(row: ReactElement<ComponentProps<'tr'>>) => (
<APITableRow name={name} ref={highlightedRow}>
{row}
</APITableRow>
),
);
return (
<table className={styles.apiTable}>
{thead}
<tbody>{rows}</tbody>
</table>
);
}

22
website/src/components/APITable/styles.module.css Normal file
View file

@ -0,0 +1,22 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.apiTable {
font-size: small;
}
.apiTable tbody tr {
transition: box-shadow 0.2s;
}
.apiTable tbody tr:focus,
.apiTable tbody tr:hover {
outline: none;
box-shadow: 0px 0px 7px 0px inset var(--ifm-color-warning);
cursor: pointer;
transition: box-shadow 0.2s;
}

10
website/versioned_docs/version-2.0.0-beta.8/api/plugins/plugin-content-blog.md
View file

@ -4,6 +4,8 @@ title: '📦 plugin-content-blog'
slug: '/api/plugins/@docusaurus/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. Provides the [Blog](blog.mdx) feature and is the default blog plugin for Docusaurus.
## Installation {#installation} ## Installation {#installation}
@ -24,7 +26,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -60,7 +62,7 @@ Accepted fields:
| `feedOptions.copyright` | `string` | `undefined` | Copyright message. | | `feedOptions.copyright` | `string` | `undefined` | Copyright message. |
| `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. | | `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. |
</small> </APITable>
```typescript ```typescript
type EditUrlFunction = (params: { type EditUrlFunction = (params: {
@ -191,7 +193,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -212,7 +214,7 @@ Accepted fields:
| `image` | `string` | `undefined` | Cover or thumbnail image that will be used when displaying the link to your post. | | `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: `/`. | | `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 ```typescript
type Tag = string | {label: string; permalink: string}; type Tag = string | {label: string; permalink: string};

10
website/versioned_docs/version-2.0.0-beta.8/api/plugins/plugin-content-docs.md
View file

@ -4,6 +4,8 @@ title: '📦 plugin-content-docs'
slug: '/api/plugins/@docusaurus/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. Provides the [Docs](../../guides/docs/docs-introduction.md) functionality and is the default docs plugin for Docusaurus.
## Installation {#installation} ## Installation {#installation}
@ -24,7 +26,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -57,7 +59,7 @@ Accepted fields:
| `versions` | `Versions` | `{}` | Independent customization of each version's properties. | | `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. | | `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 ```typescript
type EditUrlFunction = (params: { type EditUrlFunction = (params: {
@ -238,7 +240,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -262,7 +264,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: /`. | | `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. | | `tags` | `Tag[]` | `undefined` | A list of strings or objects of two string fields `label` and `permalink` to tag to your docs. |
</small> </APITable>
```typescript ```typescript
type Tag = string | {label: string; permalink: string}; type Tag = string | {label: string; permalink: string};

6
website/versioned_docs/version-2.0.0-beta.8/api/plugins/plugin-content-pages.md
View file

@ -4,6 +4,8 @@ title: '📦 plugin-content-pages'
slug: '/api/plugins/@docusaurus/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. 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} ## Installation {#installation}
@ -24,7 +26,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -38,7 +40,7 @@ Accepted fields:
| `beforeDefaultRemarkPlugins` | `any[]` | `[]` | Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins. | | `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. | | `beforeDefaultRehypePlugins` | `any[]` | `[]` | Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins. |
</small> </APITable>
## Example configuration {#ex-config} ## Example configuration {#ex-config}

74
website/versioned_docs/version-2.0.0-beta.8/api/themes/theme-configuration.md
View file

@ -5,6 +5,8 @@ slug: '/api/themes/configuration'
toc_max_heading_level: 4 toc_max_heading_level: 4
--- ---
import APITable from '@site/src/components/APITable';
This configuration applies to all [main themes](./overview.md). This configuration applies to all [main themes](./overview.md).
## Common {#common} ## Common {#common}
@ -17,7 +19,7 @@ It is possible to customize the color mode support within the `colorMode` object
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -30,7 +32,7 @@ Accepted fields:
| `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. | | `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. |
| `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. | | `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. |
</small> </APITable>
Example configuration: Example configuration:
@ -74,13 +76,13 @@ You can configure a default image that will be used for your meta tag, in partic
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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: Example configuration:
@ -99,13 +101,13 @@ You can configure additional html metadatas (and override existing ones).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `metadatas` | `Metadata[]` | `[]` | Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc. | | `metadatas` | `Metadata[]` | `[]` | Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc. |
</small> </APITable>
Example configuration: Example configuration:
@ -124,7 +126,7 @@ Sometimes you want to announce something in your website. Just for such a case,
Accepted fields: Accepted fields:
<small> <APITable name="announcement-bar">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -134,7 +136,7 @@ Accepted fields:
| `textColor` | `string` | `'#000'` | Announcement text color. | | `textColor` | `string` | `'#000'` | Announcement text color. |
| `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. | | `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. |
</small> </APITable>
Example configuration: Example configuration:
@ -159,7 +161,7 @@ module.exports = {
Accepted fields: Accepted fields:
<small> <APITable name="navbar">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -169,7 +171,7 @@ Accepted fields:
| `hideOnScroll` | `boolean` | `false` | Whether the navbar is hidden when the user scrolls down. | | `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. | | `style` | <code>'primary' \| 'dark'</code> | Same as theme | Sets the navbar style, ignoring the dark/light theme. |
</small> </APITable>
### Navbar logo {#navbar-logo} ### Navbar logo {#navbar-logo}
@ -179,7 +181,7 @@ To improve dark mode support, you can also set a different logo for this mode.
Accepted fields: Accepted fields:
<small> <APITable name="navbar-logo">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -189,7 +191,7 @@ Accepted fields:
| `href` | `string` | `siteConfig.baseUrl` | Link to navigate to when the logo is clicked. | | `href` | `string` | `siteConfig.baseUrl` | Link to navigate to when the logo is clicked. |
| `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. | | `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: Example configuration:
@ -262,7 +264,7 @@ Outbound (external) links automatically get `target="_blank" rel="noopener noref
Accepted fields: Accepted fields:
<small> <APITable name="navbar-link">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -276,7 +278,7 @@ Accepted fields:
| `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. | | `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. |
| `className` | `string` | `''` | Custom CSS class (for styling any item). | | `className` | `string` | `''` | Custom CSS class (for styling any item). |
</small> </APITable>
:::note :::note
@ -322,7 +324,7 @@ Note that the dropdown base item is a clickable link as well, so this item can r
Accepted fields: Accepted fields:
<small> <APITable name="navbar-dropdown">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -331,7 +333,7 @@ Accepted fields:
| `items` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | **Required** | The items to be contained in the dropdown. | | `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. | | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
</small> </APITable>
Example configuration: Example configuration:
@ -371,7 +373,7 @@ If you want to link to a specific doc, this special navbar item type will render
Accepted fields: Accepted fields:
<small> <APITable name="navbar-doc-link">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -381,7 +383,7 @@ Accepted fields:
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. | | `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. | | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc belongs to. |
</small> </APITable>
Example configuration: Example configuration:
@ -412,7 +414,7 @@ The user will be able to switch from one version to another, while staying on th
Accepted fields: Accepted fields:
<small> <APITable name="navbar-docs-version-dropdown">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -423,7 +425,7 @@ Accepted fields:
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. | | `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. | | `dropdownActiveClassDisabled` | `boolean` | `false` | Do not add the link active class when browsing docs. |
</small> </APITable>
Example configuration: Example configuration:
@ -452,7 +454,7 @@ If you use docs with versioning, this special navbar item type will link to the
Accepted fields: Accepted fields:
<small> <APITable name="navbar-docs-version">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -462,7 +464,7 @@ Accepted fields:
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. | | `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. | | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
</small> </APITable>
Example configuration: Example configuration:
@ -493,7 +495,7 @@ The user will be able to switch from one locale to another, while staying on the
Accepted fields: Accepted fields:
<small> <APITable name="navbar-locale-dropdown">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -502,7 +504,7 @@ Accepted fields:
| `dropdownItemsBefore` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the beginning of the dropdown. | | `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. | | `dropdownItemsAfter` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the end of the dropdown. |
</small> </APITable>
Example configuration: Example configuration:
@ -535,14 +537,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. However, with this special navbar item type, you can change the default location.
<small> <APITable name="navbar-search">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `type` | `'search'` | **Required** | Sets the type of this item to a search bar. | | `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. | | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
</small> </APITable>
```js title="docusaurus.config.js" ```js title="docusaurus.config.js"
module.exports = { module.exports = {
@ -599,7 +601,7 @@ Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-r
Accepted fields: Accepted fields:
<small> <APITable name="codeblock">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -607,7 +609,7 @@ Accepted fields:
| `darkTheme` | `PrismTheme` | `palenight` | The Prism theme to use for dark-theme code blocks. | | `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. | | `defaultLanguage` | `string` | `undefined` | The side of the navbar this item should appear on. |
</small> </APITable>
### Theme {#theme} ### Theme {#theme}
@ -657,7 +659,7 @@ You can add logo and a copyright to the footer via `themeConfig.footer`. Logo ca
Accepted fields: Accepted fields:
<small> <APITable name="footer">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -666,7 +668,7 @@ Accepted fields:
| `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. | | `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. |
| `items` | `FooterItem[]` | `[]` | The link groups to be present. | | `items` | `FooterItem[]` | `[]` | The link groups to be present. |
</small> </APITable>
Example configuration: Example configuration:
@ -693,18 +695,18 @@ You can add links to the footer via `themeConfig.footer.links`.
Accepted fields of each link section: Accepted fields of each link section:
<small> <APITable name="footer-links">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `title` | `string` | `undefined` | Label of the section of these links. | | `title` | `string` | `undefined` | Label of the section of these links. |
| `items` | `FooterLink[]` | `[]` | Links in this section. | | `items` | `FooterLink[]` | `[]` | Links in this section. |
</small> </APITable>
Accepted fields of each item in `items`: Accepted fields of each item in `items`:
<small> <APITable name="footer-items">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -713,7 +715,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.** | | `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. | | `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: Example configuration:
@ -769,14 +771,14 @@ module.exports = {
You can adjust the default table of contents via `themeConfig.tableOfContents`. You can adjust the default table of contents via `themeConfig.tableOfContents`.
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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. | | `maxHeadingLevel` | `number` | `3` | Max heading level displayed in the TOC. Should be an integer between 2 and 6. |
</small> </APITable>
Example configuration: Example configuration:

10
website/versioned_docs/version-2.0.0-beta.9/api/plugins/plugin-content-blog.md
View file

@ -4,6 +4,8 @@ title: '📦 plugin-content-blog'
slug: '/api/plugins/@docusaurus/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. Provides the [Blog](blog.mdx) feature and is the default blog plugin for Docusaurus.
## Installation {#installation} ## Installation {#installation}
@ -24,7 +26,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -60,7 +62,7 @@ Accepted fields:
| `feedOptions.copyright` | `string` | `undefined` | Copyright message. | | `feedOptions.copyright` | `string` | `undefined` | Copyright message. |
| `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. | | `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. |
</small> </APITable>
```typescript ```typescript
type EditUrlFunction = (params: { type EditUrlFunction = (params: {
@ -191,7 +193,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -212,7 +214,7 @@ Accepted fields:
| `image` | `string` | `undefined` | Cover or thumbnail image that will be used when displaying the link to your post. | | `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: `/`. | | `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 ```typescript
type Tag = string | {label: string; permalink: string}; type Tag = string | {label: string; permalink: string};

10
website/versioned_docs/version-2.0.0-beta.9/api/plugins/plugin-content-docs.md
View file

@ -4,6 +4,8 @@ title: '📦 plugin-content-docs'
slug: '/api/plugins/@docusaurus/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. Provides the [Docs](../../guides/docs/docs-introduction.md) functionality and is the default docs plugin for Docusaurus.
## Installation {#installation} ## Installation {#installation}
@ -24,7 +26,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -57,7 +59,7 @@ Accepted fields:
| `versions` | `Versions` | `{}` | Independent customization of each version's properties. | | `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. | | `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 ```typescript
type EditUrlFunction = (params: { type EditUrlFunction = (params: {
@ -238,7 +240,7 @@ Markdown documents can use the following Markdown FrontMatter metadata fields, e
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -262,7 +264,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: /`. | | `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. | | `tags` | `Tag[]` | `undefined` | A list of strings or objects of two string fields `label` and `permalink` to tag to your docs. |
</small> </APITable>
```typescript ```typescript
type Tag = string | {label: string; permalink: string}; type Tag = string | {label: string; permalink: string};

6
website/versioned_docs/version-2.0.0-beta.9/api/plugins/plugin-content-pages.md
View file

@ -4,6 +4,8 @@ title: '📦 plugin-content-pages'
slug: '/api/plugins/@docusaurus/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. 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} ## Installation {#installation}
@ -24,7 +26,7 @@ You can configure this plugin through the [preset options](#ex-config-preset).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -38,7 +40,7 @@ Accepted fields:
| `beforeDefaultRemarkPlugins` | `any[]` | `[]` | Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins. | | `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. | | `beforeDefaultRehypePlugins` | `any[]` | `[]` | Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins. |
</small> </APITable>
## Example configuration {#ex-config} ## Example configuration {#ex-config}

74
website/versioned_docs/version-2.0.0-beta.9/api/themes/theme-configuration.md
View file

@ -5,6 +5,8 @@ slug: '/api/themes/configuration'
toc_max_heading_level: 4 toc_max_heading_level: 4
--- ---
import APITable from '@site/src/components/APITable';
This configuration applies to all [main themes](./overview.md). This configuration applies to all [main themes](./overview.md).
## Common {#common} ## Common {#common}
@ -17,7 +19,7 @@ It is possible to customize the color mode support within the `colorMode` object
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -30,7 +32,7 @@ Accepted fields:
| `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. | | `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. |
| `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. | | `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. |
</small> </APITable>
Example configuration: Example configuration:
@ -74,13 +76,13 @@ You can configure a default image that will be used for your meta tag, in partic
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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: Example configuration:
@ -99,13 +101,13 @@ You can configure additional html metadatas (and override existing ones).
Accepted fields: Accepted fields:
<small> <APITable>
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `metadatas` | `Metadata[]` | `[]` | Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc. | | `metadatas` | `Metadata[]` | `[]` | Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc. |
</small> </APITable>
Example configuration: Example configuration:
@ -124,7 +126,7 @@ Sometimes you want to announce something in your website. Just for such a case,
Accepted fields: Accepted fields:
<small> <APITable name="announcement-bar">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -134,7 +136,7 @@ Accepted fields:
| `textColor` | `string` | `'#000'` | Announcement text color. | | `textColor` | `string` | `'#000'` | Announcement text color. |
| `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. | | `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. |
</small> </APITable>
Example configuration: Example configuration:
@ -159,7 +161,7 @@ module.exports = {
Accepted fields: Accepted fields:
<small> <APITable name="navbar">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -169,7 +171,7 @@ Accepted fields:
| `hideOnScroll` | `boolean` | `false` | Whether the navbar is hidden when the user scrolls down. | | `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. | | `style` | <code>'primary' \| 'dark'</code> | Same as theme | Sets the navbar style, ignoring the dark/light theme. |
</small> </APITable>
### Navbar logo {#navbar-logo} ### Navbar logo {#navbar-logo}
@ -179,7 +181,7 @@ To improve dark mode support, you can also set a different logo for this mode.
Accepted fields: Accepted fields:
<small> <APITable name="navbar-logo">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -191,7 +193,7 @@ Accepted fields:
| `height` | <code>string \| number</code> | `undefined` | Specifies the `height` attribute. | | `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. | | `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: Example configuration:
@ -266,7 +268,7 @@ Outbound (external) links automatically get `target="_blank" rel="noopener noref
Accepted fields: Accepted fields:
<small> <APITable name="navbar-link">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -280,7 +282,7 @@ Accepted fields:
| `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. | | `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. |
| `className` | `string` | `''` | Custom CSS class (for styling any item). | | `className` | `string` | `''` | Custom CSS class (for styling any item). |
</small> </APITable>
:::note :::note
@ -326,7 +328,7 @@ Note that the dropdown base item is a clickable link as well, so this item can r
Accepted fields: Accepted fields:
<small> <APITable name="navbar-dropdown">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -335,7 +337,7 @@ Accepted fields:
| `items` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | **Required** | The items to be contained in the dropdown. | | `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. | | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
</small> </APITable>
Example configuration: Example configuration:
@ -375,7 +377,7 @@ If you want to link to a specific doc, this special navbar item type will render
Accepted fields: Accepted fields:
<small> <APITable name="navbar-doc-link">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -385,7 +387,7 @@ Accepted fields:
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. | | `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. | | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc belongs to. |
</small> </APITable>
Example configuration: Example configuration:
@ -416,7 +418,7 @@ The user will be able to switch from one version to another, while staying on th
Accepted fields: Accepted fields:
<small> <APITable name="navbar-docs-version-dropdown">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -427,7 +429,7 @@ Accepted fields:
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. | | `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. | | `dropdownActiveClassDisabled` | `boolean` | `false` | Do not add the link active class when browsing docs. |
</small> </APITable>
Example configuration: Example configuration:
@ -456,7 +458,7 @@ If you use docs with versioning, this special navbar item type will link to the
Accepted fields: Accepted fields:
<small> <APITable name="navbar-docs-version">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -466,7 +468,7 @@ Accepted fields:
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. | | `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. | | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
</small> </APITable>
Example configuration: Example configuration:
@ -497,7 +499,7 @@ The user will be able to switch from one locale to another, while staying on the
Accepted fields: Accepted fields:
<small> <APITable name="navbar-locale-dropdown">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -506,7 +508,7 @@ Accepted fields:
| `dropdownItemsBefore` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the beginning of the dropdown. | | `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. | | `dropdownItemsAfter` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the end of the dropdown. |
</small> </APITable>
Example configuration: Example configuration:
@ -539,14 +541,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. However, with this special navbar item type, you can change the default location.
<small> <APITable name="navbar-search">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `type` | `'search'` | **Required** | Sets the type of this item to a search bar. | | `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. | | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
</small> </APITable>
```js title="docusaurus.config.js" ```js title="docusaurus.config.js"
module.exports = { module.exports = {
@ -603,7 +605,7 @@ Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-r
Accepted fields: Accepted fields:
<small> <APITable name="codeblock">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -611,7 +613,7 @@ Accepted fields:
| `darkTheme` | `PrismTheme` | `palenight` | The Prism theme to use for dark-theme code blocks. | | `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. | | `defaultLanguage` | `string` | `undefined` | The side of the navbar this item should appear on. |
</small> </APITable>
### Theme {#theme} ### Theme {#theme}
@ -661,7 +663,7 @@ You can add logo and a copyright to the footer via `themeConfig.footer`. Logo ca
Accepted fields: Accepted fields:
<small> <APITable name="footer">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -670,7 +672,7 @@ Accepted fields:
| `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. | | `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. |
| `items` | `FooterItem[]` | `[]` | The link groups to be present. | | `items` | `FooterItem[]` | `[]` | The link groups to be present. |
</small> </APITable>
Example configuration: Example configuration:
@ -699,18 +701,18 @@ You can add links to the footer via `themeConfig.footer.links`.
Accepted fields of each link section: Accepted fields of each link section:
<small> <APITable name="footer-links">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `title` | `string` | `undefined` | Label of the section of these links. | | `title` | `string` | `undefined` | Label of the section of these links. |
| `items` | `FooterLink[]` | `[]` | Links in this section. | | `items` | `FooterLink[]` | `[]` | Links in this section. |
</small> </APITable>
Accepted fields of each item in `items`: Accepted fields of each item in `items`:
<small> <APITable name="footer-items">
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -719,7 +721,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.** | | `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. | | `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: Example configuration:
@ -775,14 +777,14 @@ module.exports = {
You can adjust the default table of contents via `themeConfig.tableOfContents`. You can adjust the default table of contents via `themeConfig.tableOfContents`.
<small> <APITable>
| Name | Type | Default | Description | | 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. | | `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. | | `maxHeadingLevel` | `number` | `3` | Max heading level displayed in the TOC. Should be an integer between 2 and 6. |
</small> </APITable>
Example configuration: Example configuration: