3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-29 00:47:03 +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'
---
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};

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'
---
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};

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'
---
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}

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

@ -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: