refactor(v2): change plugin format within docusaurus.config.js to be like plugins (#1568)

* refactor(v2): change plugin format within `docusaurus.config.js` to be like presets

* docs(v2): mention customizing CSS
This commit is contained in:
Yangshun Tay 2019-06-05 21:35:54 -07:00 committed by GitHub
parent 0226b892bd
commit 6a905dd736
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 221 additions and 242 deletions

View file

@ -8,31 +8,14 @@
module.exports = function preset(context, opts = {}) {
return {
themes: [
{
module: '@docusaurus/theme-classic',
options: opts.theme,
},
{
module: '@docusaurus/theme-search-algolia',
},
['@docusaurus/theme-classic', opts.theme],
'@docusaurus/theme-search-algolia',
],
plugins: [
{
module: '@docusaurus/plugin-content-docs',
options: opts.docs,
},
{
module: '@docusaurus/plugin-content-blog',
options: opts.blog,
},
{
module: '@docusaurus/plugin-content-pages',
options: opts.pages,
},
{
module: '@docusaurus/plugin-sitemap',
options: opts.sitemap,
},
['@docusaurus/plugin-content-docs', opts.docs],
['@docusaurus/plugin-content-blog', opts.blog],
['@docusaurus/plugin-content-pages', opts.pages],
['@docusaurus/plugin-sitemap', opts.sitemap],
],
};
};

View file

@ -2,9 +2,31 @@
## 2.0.0-alpha.19
- Changed plugin definitions from classes to functions. Refer to the new plugin docs.
- Added sun and moon emoji to the dark mode toggle.
- Add a sensible default for browserslist config.
- UI
- Added sun and moon emoji to the dark mode toggle.
- Mobile responsive menu.
- Right table of contents for docs is now sticky.
- Plugins
- Changed plugin definitions from classes to functions. Refer to the new plugin docs.
- Implement Clients module API.
- Change format within `docusaurus.config.js` to be like presets.
- Infima CSS is now locked down to specific versions and not relying upon the CDN which reads from trunk.
- Customize the CSS by passing options into the classic preset:
```
presets: [
[
'@docusaurus/preset-classic',
{
theme: {
customCss: require.resolve('./css/custom.css'),
},
...
},
],
],
```
## V2 Changelog

View file

@ -14,15 +14,13 @@ module.exports = {
url: 'https://docusaurus.io',
favicon: 'img/docusaurus.ico',
plugins: [
[
'@docusaurus/plugin-content-docs',
{
module: '@docusaurus/plugin-content-docs',
options: {
path: '../docs',
sidebarPath: require.resolve('./sidebars.json'),
},
},
{
module: '@docusaurus/plugin-content-pages',
},
],
'@docusaurus/plugin-content-pages',
],
};

View file

@ -14,15 +14,13 @@ module.exports = {
url: 'https://docusaurus.io',
favicon: 'img/docusaurus.ico',
plugins: [
[
'@docusaurus/plugin-content-docs',
{
module: '@docusaurus/plugin-content-docs',
options: {
path: '../docs',
sidebarPath: require.resolve('./sidebars.json'),
},
},
{
module: '@docusaurus/plugin-content-pages',
},
],
'@docusaurus/plugin-content-pages',
],
};

View file

@ -29,10 +29,7 @@ export interface Plugin<T> {
getClientModules?(): string[];
}
export interface PluginConfig {
module: string;
options?: Object;
}
export type PluginConfig = [string, Object | undefined] | string;
export interface PluginContentLoadedActions {
addRoute(config: RouteConfig): void;
@ -50,10 +47,18 @@ export async function loadPlugins({
pluginsRouteConfigs: RouteConfig[];
}> {
// 1. Plugin Lifecycle - Initialization/Constructor
const plugins: Plugin<any>[] = pluginConfigs.map(({module, options}) => {
const plugins: Plugin<any>[] = pluginConfigs.map(pluginItem => {
let pluginModuleImport;
let pluginOptions = {};
if (typeof pluginItem === 'string') {
pluginModuleImport = pluginItem;
} else if (Array.isArray(pluginItem)) {
pluginModuleImport = pluginItem[0];
pluginOptions = pluginItem[1] || {};
}
// module is any valid module identifier - npm package or locally-resolved path.
const plugin = importFresh(module);
return plugin(context, options);
const pluginModule = importFresh(pluginModuleImport);
return pluginModule(context, pluginOptions);
});
// 2. Plugin lifecycle - loadContent

View file

@ -1,14 +1,8 @@
module.exports = function preset(context, opts = {}) {
return {
plugins: [
{
name: '@docusaurus/plugin-content-docs',
options: opts.docs,
},
{
name: '@docusaurus/plugin-content-blog',
options: opts.blog,
},
['@docusaurus/plugin-content-docs', opts.docs],
['@docusaurus/plugin-content-blog', opts.blog],
],
};
};

View file

@ -1,14 +1,8 @@
module.exports = function preset(context, opts = {}) {
return {
plugins: [
{
name: '@docusaurus/plugin-content-pages',
options: opts.pages,
},
{
name: '@docusaurus/plugin-sitemap',
options: opts.sitemap,
},
['@docusaurus/plugin-content-pages', opts.pages],
['@docusaurus/plugin-sitemap', opts.sitemap],
],
};
};

View file

@ -1,16 +1,6 @@
module.exports = function preset(context, opts = {}) {
return {
themes: [
{
name: '@docusaurus/theme-classic',
options: opts.test,
},
],
plugins: [
{
name: '@docusaurus/plugin-test',
options: opts.test,
},
],
themes: [['@docusaurus/theme-classic', opts.test]],
plugins: [['@docusaurus/plugin-test', opts.test]],
};
};

View file

@ -32,14 +32,14 @@ Object {
expect(presets).toMatchInlineSnapshot(`
Object {
"plugins": Array [
Object {
"name": "@docusaurus/plugin-content-docs",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-content-blog",
"options": undefined,
},
Array [
"@docusaurus/plugin-content-docs",
undefined,
],
Array [
"@docusaurus/plugin-content-blog",
undefined,
],
],
"themes": Array [],
}
@ -59,22 +59,22 @@ Object {
expect(presets).toMatchInlineSnapshot(`
Object {
"plugins": Array [
Object {
"name": "@docusaurus/plugin-content-docs",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-content-blog",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-content-pages",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-sitemap",
"options": undefined,
},
Array [
"@docusaurus/plugin-content-docs",
undefined,
],
Array [
"@docusaurus/plugin-content-blog",
undefined,
],
Array [
"@docusaurus/plugin-content-pages",
undefined,
],
Array [
"@docusaurus/plugin-sitemap",
undefined,
],
],
"themes": Array [],
}
@ -91,14 +91,14 @@ Object {
expect(presets).toMatchInlineSnapshot(`
Object {
"plugins": Array [
Object {
"name": "@docusaurus/plugin-content-docs",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-content-blog",
"options": undefined,
},
Array [
"@docusaurus/plugin-content-docs",
undefined,
],
Array [
"@docusaurus/plugin-content-blog",
undefined,
],
],
"themes": Array [],
}
@ -120,16 +120,16 @@ Object {
expect(presets).toMatchInlineSnapshot(`
Object {
"plugins": Array [
Array [
"@docusaurus/plugin-content-docs",
Object {
"name": "@docusaurus/plugin-content-docs",
"options": Object {
"path": "../",
},
},
Object {
"name": "@docusaurus/plugin-content-blog",
"options": undefined,
},
],
Array [
"@docusaurus/plugin-content-blog",
undefined,
],
],
"themes": Array [],
}
@ -155,26 +155,26 @@ Object {
expect(presets).toMatchInlineSnapshot(`
Object {
"plugins": Array [
Array [
"@docusaurus/plugin-content-docs",
Object {
"name": "@docusaurus/plugin-content-docs",
"options": Object {
"path": "../",
},
},
],
Array [
"@docusaurus/plugin-content-blog",
undefined,
],
Array [
"@docusaurus/plugin-content-pages",
Object {
"name": "@docusaurus/plugin-content-blog",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-content-pages",
"options": Object {
"path": "../",
},
},
Object {
"name": "@docusaurus/plugin-sitemap",
"options": undefined,
},
],
Array [
"@docusaurus/plugin-sitemap",
undefined,
],
],
"themes": Array [],
}
@ -197,24 +197,24 @@ Object {
expect(presets).toMatchInlineSnapshot(`
Object {
"plugins": Array [
Array [
"@docusaurus/plugin-content-docs",
Object {
"name": "@docusaurus/plugin-content-docs",
"options": Object {
"path": "../",
},
},
Object {
"name": "@docusaurus/plugin-content-blog",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-content-pages",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-sitemap",
"options": undefined,
},
],
Array [
"@docusaurus/plugin-content-blog",
undefined,
],
Array [
"@docusaurus/plugin-content-pages",
undefined,
],
Array [
"@docusaurus/plugin-sitemap",
undefined,
],
],
"themes": Array [],
}
@ -238,34 +238,34 @@ Object {
expect(presets).toMatchInlineSnapshot(`
Object {
"plugins": Array [
Array [
"@docusaurus/plugin-content-docs",
Object {
"name": "@docusaurus/plugin-content-docs",
"options": Object {
"path": "../",
},
},
Object {
"name": "@docusaurus/plugin-content-blog",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-content-pages",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-sitemap",
"options": undefined,
},
Object {
"name": "@docusaurus/plugin-test",
"options": undefined,
},
],
Array [
"@docusaurus/plugin-content-blog",
undefined,
],
Array [
"@docusaurus/plugin-content-pages",
undefined,
],
Array [
"@docusaurus/plugin-sitemap",
undefined,
],
Array [
"@docusaurus/plugin-test",
undefined,
],
],
"themes": Array [
Object {
"name": "@docusaurus/theme-classic",
"options": undefined,
},
Array [
"@docusaurus/theme-classic",
undefined,
],
],
}
`);

View file

@ -16,7 +16,7 @@ export interface Preset {
themes?: PluginConfig[];
}
export type PresetConfig = [string, Object] | string;
export type PresetConfig = [string, Object | undefined] | string;
export function loadPresets(
context: LoadContext,
@ -34,7 +34,8 @@ export function loadPresets(
if (typeof presetItem === 'string') {
presetModuleImport = presetItem;
} else if (Array.isArray(presetItem)) {
[presetModuleImport, presetOptions] = presetItem;
presetModuleImport = presetItem[0];
presetOptions = presetItem[1] || {};
}
const presetModule = importFresh(presetModuleImport);

View file

@ -18,17 +18,15 @@ Then you add it in your site's `docusaurus.config.js` plugin arrays:
```jsx
module.exports = {
plugins: [
{
module: '@docusaurus/plugin-content-pages',
},
{
'@docusaurus/plugin-content-pages',
[
// Plugin with options
module: '@docusaurus/plugin-content-blog',
options: {
'@docusaurus/plugin-content-blog',
{
include: ['*.md', '*.mdx'],
path: 'blog',
},
},
],
],
};
```
@ -39,11 +37,7 @@ Docusaurus can also load plugins from your local directory, you can do something
const path = require('path');
module.exports = {
plugins: [
{
module: path.resolve(__dirname, '/path/to/docusaurus-local-plugin'),
},
],
plugins: [path.resolve(__dirname, '/path/to/docusaurus-local-plugin')],
};
```