/
synthetic.ts
130 lines (126 loc) · 3.77 KB
/
synthetic.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/**
* 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 path from 'path';
import type {RuleSetRule} from 'webpack';
import type {HtmlTagObject, LoadedPlugin, LoadContext} from '@docusaurus/types';
/**
* Make a synthetic plugin to:
* - Inject site client modules
* - Inject scripts/stylesheets
*/
export function createBootstrapPlugin({
siteDir,
siteConfig,
}: LoadContext): LoadedPlugin {
const {
stylesheets,
scripts,
headTags,
clientModules: siteConfigClientModules,
} = siteConfig;
return {
name: 'docusaurus-bootstrap-plugin',
content: null,
options: {
id: 'default',
},
version: {type: 'synthetic'},
path: siteDir,
getClientModules() {
return siteConfigClientModules;
},
injectHtmlTags: () => {
const stylesheetsTags = stylesheets.map(
(source): string | HtmlTagObject =>
typeof source === 'string'
? `<link rel="stylesheet" href="${source}">`
: {
tagName: 'link',
attributes: {
rel: 'stylesheet',
...source,
},
},
);
const scriptsTags = scripts.map((source): string | HtmlTagObject =>
typeof source === 'string'
? `<script src="${source}"></script>`
: {
tagName: 'script',
attributes: {
...source,
},
},
);
return {
headTags: [...headTags, ...stylesheetsTags, ...scriptsTags],
};
},
};
}
/**
* Configure Webpack fallback mdx loader for md/mdx files out of content-plugin
* folders. Adds a "fallback" mdx loader for mdx files that are not processed by
* content plugins. This allows to do things such as importing repo/README.md as
* a partial from another doc. Not ideal solution, but good enough for now
*/
export function createMDXFallbackPlugin({
siteDir,
siteConfig,
}: LoadContext): LoadedPlugin {
return {
name: 'docusaurus-mdx-fallback-plugin',
content: null,
options: {
id: 'default',
},
version: {type: 'synthetic'},
// Synthetic, the path doesn't matter much
path: '.',
configureWebpack(config, isServer, {getJSLoader}) {
// We need the mdx fallback loader to exclude files that were already
// processed by content plugins mdx loaders. This works, but a bit
// hacky... Not sure there's a way to handle that differently in webpack
function getMDXFallbackExcludedPaths(): string[] {
const rules: RuleSetRule[] = config.module?.rules as RuleSetRule[];
return rules.flatMap((rule) => {
const isMDXRule =
rule.test instanceof RegExp && rule.test.test('x.mdx');
return isMDXRule ? (rule.include as string[]) : [];
});
}
const mdxLoaderOptions = {
admonitions: true,
staticDirs: siteConfig.staticDirectories.map((dir) =>
path.resolve(siteDir, dir),
),
siteDir,
// External MDX files are always meant to be imported as partials
isMDXPartial: () => true,
// External MDX files might have front matter, just disable the warning
isMDXPartialFrontMatterWarningDisabled: true,
};
return {
module: {
rules: [
{
test: /\.mdx?$/i,
exclude: getMDXFallbackExcludedPaths(),
use: [
getJSLoader({isServer}),
{
loader: require.resolve('@docusaurus/mdx-loader'),
options: mdxLoaderOptions,
},
],
},
],
},
};
},
};
}