3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-02 02:42:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(core): support TypeScript + ESM configuration (#9317)

Browse source 
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Chongyi Zheng 2023-10-13 20:46:03 -04:00 • committed by GitHub
parent 336a44f3ea
commit 45f1a669b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
126 changed files with 2054 additions and 914 deletions
Download patch file Download diff file Expand all files Collapse all files

73
website/docs/api/docusaurus.config.js.mdx
View file

@ -18,12 +18,20 @@ Refer to the Getting Started [**Configuration**](../configuration.mdx) for examp
`docusaurus.config.js` contains configurations for your site and is placed in the root directory of your site.
This file is run in Node.js using the [**CommonJS**](https://flaviocopes.com/commonjs/) module system, and should export a site configuration object, or a function that creates it.
This file is run in Node.js and should export a site configuration object, or a function that creates it.
The `docusaurus.config.js` file supports:
- [**ES Modules**](https://flaviocopes.com/es-modules/)
- [**CommonJS**](https://flaviocopes.com/commonjs/)
- [**TypeScript**](../typescript-support.mdx#typing-config)
hey
Examples:
```js title="docusaurus.config.js"
module.exports = {
export default {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// your site config ...
@ -31,13 +39,13 @@ module.exports = {
```
```js title="docusaurus.config.js"
module.exports = async function createConfigAsync() {
export default async function createConfigAsync() {
return {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// your site config ...
};
};
}
```
:::tip
@ -55,7 +63,7 @@ Refer to [**Syntax to declare `docusaurus.config.js`**](../configuration.mdx#syn
Title for your website. Will be used in metadata and as browser tab title.
```js title="docusaurus.config.js"
module.exports = {
export default {
title: 'Docusaurus',
};
```
@ -67,7 +75,7 @@ module.exports = {
URL for your website. This can also be considered the top-level hostname. For example, `https://facebook.github.io` is the URL of https://facebook.github.io/metro/, and `https://docusaurus.io` is the URL for https://docusaurus.io. This field is related to the [`baseUrl`](#baseUrl) field.
```js title="docusaurus.config.js"
module.exports = {
export default {
url: 'https://docusaurus.io',
};
```
@ -79,7 +87,7 @@ module.exports = {
Base URL for your site. Can be considered as the path after the host. For example, `/metro/` is the base URL of https://facebook.github.io/metro/. For URLs that have no path, the baseUrl should be set to `/`. This field is related to the [`url`](#url) field. Always has both leading and trailing slash.
```js title="docusaurus.config.js"
module.exports = {
export default {
baseUrl: '/',
};
```
@ -93,7 +101,7 @@ module.exports = {
Path to your site favicon; must be a URL that can be used in link's href. For example, if your favicon is in `static/img/favicon.ico`:
```js title="docusaurus.config.js"
module.exports = {
export default {
favicon: '/img/favicon.ico',
};
```
@ -127,7 +135,7 @@ Example:
{/* cSpell:ignore فارسی */}
```js title="docusaurus.config.js"
module.exports = {
export default {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fa'],
@ -171,7 +179,7 @@ This option adds `<meta name="robots" content="noindex, nofollow">` to every pag
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
noIndex: true, // Defaults to `false`
};
```
@ -213,7 +221,7 @@ By default, it displays a warning after you run `yarn start` or `yarn build`.
The tagline for your website.
```js title="docusaurus.config.js"
module.exports = {
export default {
tagline:
'Docusaurus makes it easy to maintain Open Source documentation websites.',
};
@ -226,7 +234,7 @@ module.exports = {
The GitHub user or organization that owns the repository. You don't need this if you are not using the `docusaurus deploy` command.
```js title="docusaurus.config.js"
module.exports = {
export default {
// Docusaurus' organization is facebook
organizationName: 'facebook',
};
@ -239,7 +247,7 @@ module.exports = {
The name of the GitHub repository. You don't need this if you are not using the `docusaurus deploy` command.
```js title="docusaurus.config.js"
module.exports = {
export default {
projectName: 'docusaurus',
};
```
@ -251,7 +259,7 @@ module.exports = {
The name of the branch to deploy the static files to. You don't need this if you are not using the `docusaurus deploy` command.
```js title="docusaurus.config.js"
module.exports = {
export default {
deploymentBranch: 'gh-pages',
};
```
@ -263,7 +271,7 @@ module.exports = {
The hostname of your server. Useful if you are using GitHub Enterprise. You don't need this if you are not using the `docusaurus deploy` command.
```js title="docusaurus.config.js"
module.exports = {
export default {
githubHost: 'github.com',
};
```
@ -275,7 +283,7 @@ module.exports = {
The port of your server. Useful if you are using GitHub Enterprise. You don't need this if you are not using the `docusaurus deploy` command.
```js title="docusaurus.config.js"
module.exports = {
export default {
githubPort: '22',
};
```
@ -289,7 +297,7 @@ The [theme configuration](./themes/theme-configuration.mdx) object to customize
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
docs: {
sidebar: {
@ -358,7 +366,7 @@ type PluginConfig = string | [string, any] | PluginModule | [PluginModule, any];
See [plugin method references](./plugin-methods/README.mdx) for the shape of a `PluginModule`.
```js title="docusaurus.config.js"
module.exports = {
export default {
plugins: [
'docusaurus-plugin-awesome',
['docusuarus-plugin-confetti', {fancy: false}],
@ -376,7 +384,7 @@ module.exports = {
- Type: `PluginConfig[]`
```js title="docusaurus.config.js"
module.exports = {
export default {
themes: ['@docusaurus/theme-classic'],
};
```
@ -390,7 +398,7 @@ type PresetConfig = string | [string, any];
```
```js title="docusaurus.config.js"
module.exports = {
export default {
presets: [],
};
```
@ -426,7 +434,7 @@ type MarkdownConfig = {
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
markdown: {
format: 'mdx',
mermaid: true,
@ -464,7 +472,7 @@ Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom fi
- Type: `Object`
```js title="docusaurus.config.js"
module.exports = {
export default {
customFields: {
admin: 'endi',
superman: 'lol',
@ -487,7 +495,7 @@ An array of paths, relative to the site's directory or absolute. Files under the
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
staticDirectories: ['static'],
};
```
@ -501,7 +509,7 @@ An array of tags that will be inserted in the HTML `<head>`. The values must be
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
headTags: [
{
tagName: 'link',
@ -527,7 +535,7 @@ Note that `<script>` added here are render-blocking, so you might want to add `a
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
scripts: [
// String format.
'https://docusaurus.io/script.js',
@ -549,7 +557,7 @@ An array of CSS sources to load. The values can be either strings or plain objec
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
stylesheets: [
// String format.
'https://docusaurus.io/style.css',
@ -574,11 +582,8 @@ An array of [client modules](../advanced/client.mdx#client-modules) to load glob
Example:
```js title="docusaurus.config.js"
module.exports = {
clientModules: [
require.resolve('./mySiteGlobalJs.js'),
require.resolve('./mySiteGlobalCss.css'),
],
export default {
clientModules: ['./mySiteGlobalJs.js', './mySiteGlobalCss.css'],
};
```
@ -591,7 +596,7 @@ An HTML template written in [Eta's syntax](https://eta.js.org/docs/syntax#syntax
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
ssrTemplate: `<!DOCTYPE html>
<html <%~ it.htmlAttributes %>>
<head>
@ -631,7 +636,7 @@ Will be used as title delimiter in the generated `<title>` tag.
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
titleDelimiter: '🦖', // Defaults to `|`
};
```
@ -645,7 +650,7 @@ When enabled, will show a banner in case your site can't load its CSS or JavaScr
Example:
```js title="docusaurus.config.js"
module.exports = {
export default {
baseUrlIssueBanner: true, // Defaults to `true`
};
```

12
website/docs/api/plugin-methods/README.mdx
View file

@ -47,7 +47,7 @@ Here's a mental model for a presumptuous plugin implementation.
// A JavaScript function that returns an object.
// `context` is provided by Docusaurus. Example: siteConfig can be accessed from context.
// `opts` is the user-defined options.
async function myPlugin(context, opts) {
export default async function myPlugin(context, opts) {
return {
// A compulsory field used as the namespace for directories to cache
// the intermediate data for each plugin.
@ -132,15 +132,13 @@ async function myPlugin(context, opts) {
};
}
myPlugin.validateOptions = ({options, validate}) => {
export function validateOptions({options, validate}) {
const validatedOptions = validate(myValidationSchema, options);
return validatedOptions;
};
}
myPlugin.validateThemeConfig = ({themeConfig, validate}) => {
export function validateThemeConfig({themeConfig, validate}) {
const validatedThemeConfig = validate(myValidationSchema, options);
return validatedThemeConfig;
};
module.exports = myPlugin;
}
```

45
website/docs/api/plugin-methods/extend-infrastructure.mdx
View file

@ -15,8 +15,9 @@ Use this for files that are consumed server-side, because theme files are automa
Example:
```js title="docusaurus-plugin/src/index.js"
const path = require('path');
module.exports = function (context, options) {
import path from 'path';
export default function (context, options) {
return {
name: 'docusaurus-plugin',
// highlight-start
@ -26,7 +27,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `extendCli(cli)` {#extendCli}
@ -42,7 +43,7 @@ The commander version matters! We use commander v5, and make sure you are referr
Example:
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'docusaurus-plugin',
// highlight-start
@ -56,7 +57,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `getThemePath()` {#getThemePath}
@ -66,9 +67,7 @@ Returns the path to the directory where the theme components can be found. When
For example, your `getThemePath` can be:
```js title="my-theme/src/index.js"
const path = require('path');
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'my-theme',
// highlight-start
@ -77,7 +76,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `getTypeScriptThemePath()` {#getTypeScriptThemePath}
@ -95,9 +94,7 @@ You should also format these files with Prettier. Remember—JS files can and wi
Example:
```js title="my-theme/src/index.js"
const path = require('path');
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'my-theme',
// highlight-start
@ -111,7 +108,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `getSwizzleComponentList()` {#getSwizzleComponentList}
@ -121,15 +118,15 @@ module.exports = function (context, options) {
Returns a list of stable components that are considered safe for swizzling. These components will be swizzlable without `--danger`. All components are considered unstable by default. If an empty array is returned, all components are considered unstable. If `undefined` is returned, all components are considered stable.
```js title="my-theme/src/index.js"
const swizzleAllowedComponents = [
'CodeBlock',
'DocSidebar',
'Footer',
'NotFound',
'SearchBar',
'hooks/useTheme',
'prism-include-languages',
];
myTheme.getSwizzleComponentList = () => swizzleAllowedComponents;
export function getSwizzleComponentList() {
return [
'CodeBlock',
'DocSidebar',
'Footer',
'NotFound',
'SearchBar',
'hooks/useTheme',
'prism-include-languages',
];
}
```

24
website/docs/api/plugin-methods/i18n-lifecycles.mdx
View file

@ -19,8 +19,8 @@ These files will be written by the [`write-translations` CLI](../../cli.mdx#docu
Example:
```js
module.exports = function (context, options) {
```js title="my-plugin.js"
export default function (context, options) {
return {
name: 'my-plugin',
// highlight-start
@ -40,7 +40,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `translateContent({content,translationFiles})` {#translateContent}
@ -53,8 +53,8 @@ The `contentLoaded()` lifecycle will be called with the localized plugin content
Example:
```js
module.exports = function (context, options) {
```js title="my-plugin.js"
export default function (context, options) {
return {
name: 'my-plugin',
// highlight-start
@ -69,7 +69,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `translateThemeConfig({themeConfig,translationFiles})` {#translateThemeConfig}
@ -80,8 +80,8 @@ Returns the localized `themeConfig`.
Example:
```js
module.exports = function (context, options) {
```js title="my-plugin.js"
export default function (context, options) {
return {
name: 'my-theme',
// highlight-start
@ -96,7 +96,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `async getDefaultCodeTranslationMessages()` {#getDefaultCodeTranslationMessages}
@ -107,8 +107,8 @@ It should return messages in `Record<string, string>`, where keys are translatio
Example:
```js
module.exports = function (context, options) {
```js title="my-plugin.js"
export default function (context, options) {
return {
name: 'my-theme',
// highlight-start
@ -117,5 +117,5 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```

34
website/docs/api/plugin-methods/lifecycle-apis.mdx
View file

@ -14,7 +14,7 @@ Plugins should use this lifecycle to fetch from data sources (filesystem, remote
For example, this plugin below returns a random integer between 1 and 10 as content.
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'docusaurus-plugin',
// highlight-start
@ -23,7 +23,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `async contentLoaded({content, actions})` {#contentLoaded}
@ -183,7 +183,7 @@ You may use them to return your webpack configuration conditionally.
For example, this plugin below modify the webpack config to transpile `.foo` files.
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'custom-docusaurus-plugin',
// highlight-start
@ -202,7 +202,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
### `content` {#content-1}
@ -216,7 +216,7 @@ We merge the Webpack configuration parts of plugins into the global Webpack conf
It is possible to specify the merge strategy. For example, if you want a webpack rule to be prepended instead of appended:
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'custom-docusaurus-plugin',
configureWebpack(config, isServer, utils) {
@ -228,7 +228,7 @@ module.exports = function (context, options) {
};
},
};
};
}
```
Read the [webpack-merge strategy doc](https://github.com/survivejs/webpack-merge#merging-with-strategies) for more details.
@ -238,7 +238,7 @@ Read the [webpack-merge strategy doc](https://github.com/survivejs/webpack-merge
The dev server can be configured through returning a `devServer` field.
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'custom-docusaurus-plugin',
configureWebpack(config, isServer, utils) {
@ -251,7 +251,7 @@ module.exports = function (context, options) {
};
},
};
};
}
```
## `configurePostCss(options)` {#configurePostCss}
@ -272,7 +272,7 @@ const postcssOptions = {
Example:
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'docusaurus-plugin',
// highlight-start
@ -283,7 +283,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `postBuild(props)` {#postBuild}
@ -309,7 +309,7 @@ interface Props {
Example:
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'docusaurus-plugin',
// highlight-start
@ -321,7 +321,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
## `injectHtmlTags({content})` {#injectHtmlTags}
@ -361,7 +361,7 @@ type HtmlTagObject = {
Example:
```js title="docusaurus-plugin/src/index.js"
module.exports = function (context, options) {
export default function (context, options) {
return {
name: 'docusaurus-plugin',
loadContent: async () => {
@ -394,7 +394,7 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```
Tags will be added as follows:
@ -410,9 +410,7 @@ Returns an array of paths to the [client modules](../../advanced/client.mdx#clie
As an example, to make your theme load a `customCss` or `customJs` file path from `options` passed in by the user:
```js title="my-theme/src/index.js"
const path = require('path');
module.exports = function (context, options) {
export default function (context, options) {
const {customCss, customJs} = options || {};
return {
name: 'name-of-my-theme',
@ -422,5 +420,5 @@ module.exports = function (context, options) {
},
// highlight-end
};
};
}
```

48
website/docs/api/plugin-methods/static-methods.mdx
View file

@ -22,34 +22,14 @@ Returns validated and normalized options for the plugin. This method is called b
[Joi](https://www.npmjs.com/package/joi) is recommended for validation and normalization of options.
To avoid mixing Joi versions, use `const {Joi} = require("@docusaurus/utils-validation")`
To avoid mixing Joi versions, use `import {Joi} from '@docusaurus/utils-validation'`
:::
If you don't use **[Joi](https://www.npmjs.com/package/joi)** for validation you can throw an Error in case of invalid options and return options in case of success.
```js title="my-plugin/src/index.js"
function myPlugin(context, options) {
return {
name: 'docusaurus-plugin',
// rest of methods
};
}
// highlight-start
myPlugin.validateOptions = ({options, validate}) => {
const validatedOptions = validate(myValidationSchema, options);
return validatedOptions;
};
// highlight-end
module.exports = myPlugin;
```
In TypeScript, you can also choose to export this as a separate named export.
```ts title="my-plugin/src/index.ts"
export default function (context, options) {
export default function myPlugin(context, options) {
return {
name: 'docusaurus-plugin',
// rest of methods
@ -80,34 +60,14 @@ Return validated and normalized configuration for the theme.
[Joi](https://www.npmjs.com/package/joi) is recommended for validation and normalization of theme config.
To avoid mixing Joi versions, use `const {Joi} = require("@docusaurus/utils-validation")`
To avoid mixing Joi versions, use `import {Joi} from '@docusaurus/utils-validation'`
:::
If you don't use **[Joi](https://www.npmjs.com/package/joi)** for validation you can throw an Error in case of invalid options.
```js title="my-theme/src/index.js"
function myPlugin(context, options) {
return {
name: 'docusaurus-plugin',
// rest of methods
};
}
// highlight-start
myPlugin.validateThemeConfig = ({themeConfig, validate}) => {
const validatedThemeConfig = validate(myValidationSchema, options);
return validatedThemeConfig;
};
// highlight-end
module.exports = validateThemeConfig;
```
In TypeScript, you can also choose to export this as a separate named export.
```ts title="my-theme/src/index.ts"
export default function (context, options) {
export default function myPlugin(context, options) {
return {
name: 'docusaurus-plugin',
// rest of methods

2
website/docs/api/plugins/plugin-client-redirects.mdx
View file

@ -89,7 +89,7 @@ type CreateRedirectsFn = (path: string) => string[] | string | null | undefined;
Here's an example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
plugins: [
[
'@docusaurus/plugin-client-redirects',

2
website/docs/api/plugins/plugin-content-blog.mdx
View file

@ -169,7 +169,7 @@ const config = {
blogPostComponent: '@theme/BlogPostPage',
blogTagsListComponent: '@theme/BlogTagsListPage',
blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
remarkPlugins: [require('remark-math')],
remarkPlugins: [require('./my-remark-plugin')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],

2
website/docs/api/plugins/plugin-content-docs.mdx
View file

@ -234,7 +234,7 @@ const config = {
},
docLayoutComponent: '@theme/DocPage',
docItemComponent: '@theme/DocItem',
remarkPlugins: [require('remark-math')],
remarkPlugins: [require('./my-remark-plugin')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],

2
website/docs/api/plugins/plugin-content-pages.mdx
View file

@ -72,7 +72,7 @@ const config = {
'**/__tests__/**',
],
mdxPageComponent: '@theme/MDXPage',
remarkPlugins: [require('remark-math')],
remarkPlugins: [require('./my-remark-plugin')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],

6
website/docs/api/plugins/plugin-debug.mdx
View file

@ -21,7 +21,7 @@ If you use the plugin via the classic preset, the preset will **enable the plugi
If you use a standalone plugin, you may need to achieve the same effect by checking the environment:
```js title="docusaurus.config.js"
module.exports = {
export default {
plugins: [
// highlight-next-line
process.env.NODE_ENV === 'production' && '@docusaurus/plugin-debug',
@ -75,7 +75,7 @@ Most Docusaurus users configure this plugin through the preset options.
If you use a preset, configure this plugin through the [preset options](../../using-plugins.mdx#docusauruspreset-classic):
```js title="docusaurus.config.js"
module.exports = {
export default {
presets: [
[
'@docusaurus/preset-classic',
@ -96,7 +96,7 @@ module.exports = {
If you are using a standalone plugin, provide options directly to the plugin:
```js title="docusaurus.config.js"
module.exports = {
export default {
// highlight-next-line
plugins: ['@docusaurus/plugin-debug'],
};

2
website/docs/api/plugins/plugin-ideal-image.mdx
View file

@ -73,7 +73,7 @@ Accepted fields:
Here's an example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
plugins: [
[
'@docusaurus/plugin-ideal-image',

8
website/docs/api/plugins/plugin-pwa.mdx
View file

@ -20,7 +20,7 @@ Create a [PWA manifest](https://web.dev/add-manifest/) at `./static/manifest.jso
Modify `docusaurus.config.js` with a minimal PWA config, like:
```js title="docusaurus.config.js"
module.exports = {
export default {
plugins: [
[
'@docusaurus/plugin-pwa',
@ -148,7 +148,7 @@ The [`standalone` strategy](https://petelepage.com/blog/2019/07/is-my-pwa-instal
- Default: `{}`
```js title="docusaurus.config.js"
module.exports = {
export default {
plugins: [
[
'@docusaurus/plugin-pwa',
@ -179,7 +179,7 @@ module.exports = {
Array of objects containing `tagName` and key-value pairs for attributes to inject into the `<head>` tag. Technically you can inject any head tag through this, but it's ideally used for tags to make your site PWA compliant. Here's a list of tag to make your app fully compliant:
```js
module.exports = {
export default {
plugins: [
[
'@docusaurus/plugin-pwa',
@ -288,7 +288,7 @@ The Docusaurus site manifest can serve as an inspiration:
import CodeBlock from '@theme/CodeBlock';
<CodeBlock className="language-json">
{JSON.stringify(require("@site/static/manifest.json"),null,2)}
{JSON.stringify(require('@site/static/manifest.json'),null,2)}
</CodeBlock>
```

2
website/docs/api/themes/theme-classic.mdx
View file

@ -58,6 +58,6 @@ Most Docusaurus users configure this plugin through the preset options.
// Plugin Options: @docusaurus/theme-classic
const config = {
customCss: require.resolve('./src/css/custom.css'),
customCss: './src/css/custom.css',
};
```

54
website/docs/api/themes/theme-configuration.mdx
View file

@ -38,7 +38,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
// highlight-start
colorMode: {
@ -80,7 +80,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
// highlight-next-line
image: 'img/docusaurus.png',
@ -109,7 +109,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
// highlight-next-line
metadata: [{name: 'twitter:card', content: 'summary'}],
@ -142,7 +142,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
// highlight-start
announcementBar: {
@ -209,7 +209,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
title: 'Site Title',
@ -236,7 +236,7 @@ module.exports = {
You can add items to the navbar via `themeConfig.navbar.items`.
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
// highlight-start
@ -311,7 +311,7 @@ In addition to the fields above, you can specify other arbitrary attributes that
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -368,7 +368,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -422,7 +422,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -471,7 +471,7 @@ Use this navbar item type if your sidebar is updated often and the order is not
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -490,7 +490,7 @@ module.exports = {
```
```js title="sidebars.js"
module.exports = {
export default {
tutorial: [
{
type: 'autogenerated',
@ -537,7 +537,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -580,7 +580,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -625,7 +625,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -668,7 +668,7 @@ However, with this special navbar item type, you can change the default location
```
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -704,7 +704,7 @@ You can also render your own HTML markup inside a navbar item using this navbar
```
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
items: [
@ -726,7 +726,7 @@ module.exports = {
You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up.
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
// highlight-next-line
@ -743,7 +743,7 @@ You can set the static Navbar style without disabling the theme switching abilit
Currently, there are two possible style options: `dark` and `primary` (based on the `--ifm-color-primary` color). You can see the styles preview in the [Infima documentation](https://infima.dev/docs/components/navbar/).
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
navbar: {
// highlight-next-line
@ -799,14 +799,14 @@ By default, we use [Palenight](https://github.com/FormidableLabs/prism-react-ren
Example configuration:
```js title="docusaurus.config.js"
const {themes} = require('prism-react-renderer');
import {themes as prismThemes} from 'prism-react-renderer';
module.exports = {
export default {
themeConfig: {
prism: {
// highlight-start
theme: themes.github,
darkTheme: themes.dracula,
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
// highlight-end
},
},
@ -826,7 +826,7 @@ You can set a default language for code blocks if no language is added after the
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
prism: {
// highlight-next-line
@ -860,7 +860,7 @@ Accepted fields:
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
// highlight-start
footer: {
@ -917,7 +917,7 @@ Accepted fields of each `FooterItem`:
Example multi-column configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
footer: {
// highlight-start
links: [
@ -969,7 +969,7 @@ A simple footer just has a list of `FooterItem`s displayed in a row.
Example simple configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
footer: {
// highlight-start
links: [
@ -1018,7 +1018,7 @@ You can adjust the default table of contents via `themeConfig.tableOfContents`.
Example configuration:
```js title="docusaurus.config.js"
module.exports = {
export default {
themeConfig: {
// highlight-start
tableOfContents: {

2
website/docs/api/themes/theme-live-codeblock.mdx
View file

@ -14,7 +14,7 @@ npm install --save @docusaurus/theme-live-codeblock
### Configuration {#configuration}
```js title="docusaurus.config.js"
module.exports = {
export default {
plugins: ['@docusaurus/theme-live-codeblock'],
themeConfig: {
liveCodeBlock: {

2
website/docs/api/themes/theme-mermaid.mdx
View file

@ -14,7 +14,7 @@ npm install --save @docusaurus/theme-mermaid
## Configuration {#configuration}
```js title="docusaurus.config.js"
module.exports = {
export default {
themes: ['@docusaurus/theme-mermaid'],
// In order for Mermaid code blocks in Markdown to work,
// you also need to enable the Remark plugin with this option