3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-03 08:49:51 +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

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
---
import APITable from '@site/src/components/APITable';
This configuration applies to all [main themes](./overview.md).
## Common {#common}
@ -17,7 +19,7 @@ It is possible to customize the color mode support within the `colorMode` object
Accepted fields:
<small>
<APITable>
| Name | Type | Default | Description |
| --- | --- | --- | --- |
@ -30,7 +32,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:
@ -74,13 +76,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:
@ -99,13 +101,13 @@ You can configure additional html metadatas (and override existing ones).
Accepted fields:
<small>
<APITable>
| 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. |
</small>
</APITable>
Example configuration:
@ -124,7 +126,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 |
| --- | --- | --- | --- |
@ -134,7 +136,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:
@ -159,7 +161,7 @@ module.exports = {
Accepted fields:
<small>
<APITable name="navbar">
| Name | Type | Default | Description |
| --- | --- | --- | --- |
@ -169,7 +171,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}
@ -179,7 +181,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 |
| --- | --- | --- | --- |
@ -191,7 +193,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:
@ -266,7 +268,7 @@ Outbound (external) links automatically get `target="_blank" rel="noopener noref
Accepted fields:
<small>
<APITable name="navbar-link">
| Name | Type | Default | Description |
| --- | --- | --- | --- |
@ -280,7 +282,7 @@ Accepted fields:
| `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. |
| `className` | `string` | `''` | Custom CSS class (for styling any item). |
</small>
</APITable>
:::note
@ -326,7 +328,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 |
| --- | --- | --- | --- |
@ -335,7 +337,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:
@ -375,7 +377,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 |
| --- | --- | --- | --- |
@ -385,7 +387,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:
@ -416,7 +418,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 |
| --- | --- | --- | --- |
@ -427,7 +429,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:
@ -456,7 +458,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 |
| --- | --- | --- | --- |
@ -466,7 +468,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:
@ -497,7 +499,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 |
| --- | --- | --- | --- |
@ -506,7 +508,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:
@ -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.
<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 = {
@ -603,7 +605,7 @@ Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-r
Accepted fields:
<small>
<APITable name="codeblock">
| Name | Type | Default | Description |
| --- | --- | --- | --- |
@ -611,7 +613,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}
@ -661,7 +663,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 |
| --- | --- | --- | --- |
@ -670,7 +672,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:
@ -699,18 +701,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 |
| --- | --- | --- | --- |
@ -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.** |
| `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:
@ -775,14 +777,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: