@docusaurus/theme-classic 0.0.0-5932 → 0.0.0-5936
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +44 -40
- package/lib/theme/DocCard/index.js +1 -1
- package/package.json +14 -14
- package/src/index.ts +50 -41
- package/src/theme/DocCard/index.tsx +1 -1
package/lib/index.js
CHANGED
|
@@ -15,54 +15,58 @@ const theme_translations_1 = require("@docusaurus/theme-translations");
|
|
|
15
15
|
const translations_1 = require("./translations");
|
|
16
16
|
const requireFromDocusaurusCore = (0, module_1.createRequire)(require.resolve('@docusaurus/core/package.json'));
|
|
17
17
|
const ContextReplacementPlugin = requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
|
|
18
|
-
// Need to be inlined to prevent dark mode FOUC
|
|
19
|
-
// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
|
|
20
|
-
const ThemeStorageKey = 'theme';
|
|
21
18
|
// Support for ?docusaurus-theme=dark
|
|
22
19
|
const ThemeQueryStringKey = 'docusaurus-theme';
|
|
23
20
|
// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
|
|
24
21
|
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
|
25
|
-
const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) =>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
const noFlashColorMode = ({ colorMode: { defaultMode, respectPrefersColorScheme }, siteStorage, }) => {
|
|
23
|
+
// Need to be inlined to prevent dark mode FOUC
|
|
24
|
+
// Make sure the key is the same as the one in the color mode React context
|
|
25
|
+
// Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
|
|
26
|
+
const themeStorageKey = `theme${siteStorage.namespace}`;
|
|
27
|
+
/* language=js */
|
|
28
|
+
return `(function() {
|
|
29
|
+
var defaultMode = '${defaultMode}';
|
|
30
|
+
var respectPrefersColorScheme = ${respectPrefersColorScheme};
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
function setDataThemeAttribute(theme) {
|
|
33
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
34
|
+
}
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
function getQueryStringTheme() {
|
|
37
|
+
try {
|
|
38
|
+
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
|
39
|
+
} catch (e) {
|
|
40
|
+
}
|
|
41
|
+
}
|
|
40
42
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
function getStoredTheme() {
|
|
44
|
+
try {
|
|
45
|
+
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
|
46
|
+
} catch (err) {
|
|
47
|
+
}
|
|
48
|
+
}
|
|
46
49
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
} else {
|
|
51
|
-
if (
|
|
52
|
-
respectPrefersColorScheme &&
|
|
53
|
-
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
54
|
-
) {
|
|
55
|
-
setDataThemeAttribute('dark');
|
|
56
|
-
} else if (
|
|
57
|
-
respectPrefersColorScheme &&
|
|
58
|
-
window.matchMedia('(prefers-color-scheme: light)').matches
|
|
59
|
-
) {
|
|
60
|
-
setDataThemeAttribute('light');
|
|
50
|
+
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
|
51
|
+
if (initialTheme !== null) {
|
|
52
|
+
setDataThemeAttribute(initialTheme);
|
|
61
53
|
} else {
|
|
62
|
-
|
|
54
|
+
if (
|
|
55
|
+
respectPrefersColorScheme &&
|
|
56
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
57
|
+
) {
|
|
58
|
+
setDataThemeAttribute('dark');
|
|
59
|
+
} else if (
|
|
60
|
+
respectPrefersColorScheme &&
|
|
61
|
+
window.matchMedia('(prefers-color-scheme: light)').matches
|
|
62
|
+
) {
|
|
63
|
+
setDataThemeAttribute('light');
|
|
64
|
+
} else {
|
|
65
|
+
setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
|
|
66
|
+
}
|
|
63
67
|
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
68
|
+
})();`;
|
|
69
|
+
};
|
|
66
70
|
/* language=js */
|
|
67
71
|
const DataAttributeQueryStringInlineJavaScript = `
|
|
68
72
|
(function() {
|
|
@@ -101,7 +105,7 @@ function getInfimaCSSFile(direction) {
|
|
|
101
105
|
return `infima/dist/css/default/default${direction === 'rtl' ? '-rtl' : ''}.css`;
|
|
102
106
|
}
|
|
103
107
|
function themeClassic(context, options) {
|
|
104
|
-
const { i18n: { currentLocale, localeConfigs }, } = context;
|
|
108
|
+
const { i18n: { currentLocale, localeConfigs }, siteStorage, } = context;
|
|
105
109
|
const themeConfig = context.siteConfig.themeConfig;
|
|
106
110
|
const { announcementBar, colorMode, prism: { additionalLanguages }, } = themeConfig;
|
|
107
111
|
const { customCss } = options;
|
|
@@ -171,7 +175,7 @@ function themeClassic(context, options) {
|
|
|
171
175
|
{
|
|
172
176
|
tagName: 'script',
|
|
173
177
|
innerHTML: `
|
|
174
|
-
${noFlashColorMode(colorMode)}
|
|
178
|
+
${noFlashColorMode({ colorMode, siteStorage })}
|
|
175
179
|
${DataAttributeQueryStringInlineJavaScript}
|
|
176
180
|
${announcementBar ? AnnouncementBarInlineJavaScript : ''}
|
|
177
181
|
`,
|
|
@@ -23,7 +23,7 @@ function useCategoryItemsPlural() {
|
|
|
23
23
|
count,
|
|
24
24
|
translate(
|
|
25
25
|
{
|
|
26
|
-
message: '{count} items',
|
|
26
|
+
message: '1 item|{count} items',
|
|
27
27
|
id: 'theme.docs.DocCard.categoryDescription.plurals',
|
|
28
28
|
description:
|
|
29
29
|
'The default description for a category card in the generated index about how many items this category includes',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docusaurus/theme-classic",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-5936",
|
|
4
4
|
"description": "Classic theme for Docusaurus",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/theme-classic.d.ts",
|
|
@@ -20,18 +20,18 @@
|
|
|
20
20
|
"copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@docusaurus/core": "0.0.0-
|
|
24
|
-
"@docusaurus/mdx-loader": "0.0.0-
|
|
25
|
-
"@docusaurus/module-type-aliases": "0.0.0-
|
|
26
|
-
"@docusaurus/plugin-content-blog": "0.0.0-
|
|
27
|
-
"@docusaurus/plugin-content-docs": "0.0.0-
|
|
28
|
-
"@docusaurus/plugin-content-pages": "0.0.0-
|
|
29
|
-
"@docusaurus/theme-common": "0.0.0-
|
|
30
|
-
"@docusaurus/theme-translations": "0.0.0-
|
|
31
|
-
"@docusaurus/types": "0.0.0-
|
|
32
|
-
"@docusaurus/utils": "0.0.0-
|
|
33
|
-
"@docusaurus/utils-common": "0.0.0-
|
|
34
|
-
"@docusaurus/utils-validation": "0.0.0-
|
|
23
|
+
"@docusaurus/core": "0.0.0-5936",
|
|
24
|
+
"@docusaurus/mdx-loader": "0.0.0-5936",
|
|
25
|
+
"@docusaurus/module-type-aliases": "0.0.0-5936",
|
|
26
|
+
"@docusaurus/plugin-content-blog": "0.0.0-5936",
|
|
27
|
+
"@docusaurus/plugin-content-docs": "0.0.0-5936",
|
|
28
|
+
"@docusaurus/plugin-content-pages": "0.0.0-5936",
|
|
29
|
+
"@docusaurus/theme-common": "0.0.0-5936",
|
|
30
|
+
"@docusaurus/theme-translations": "0.0.0-5936",
|
|
31
|
+
"@docusaurus/types": "0.0.0-5936",
|
|
32
|
+
"@docusaurus/utils": "0.0.0-5936",
|
|
33
|
+
"@docusaurus/utils-common": "0.0.0-5936",
|
|
34
|
+
"@docusaurus/utils-validation": "0.0.0-5936",
|
|
35
35
|
"@mdx-js/react": "^3.0.0",
|
|
36
36
|
"clsx": "^2.0.0",
|
|
37
37
|
"copy-text-to-clipboard": "^3.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"engines": {
|
|
62
62
|
"node": ">=18.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "81d636811c314ae20dff95589df890d8bfe1b574"
|
|
65
65
|
}
|
package/src/index.ts
CHANGED
|
@@ -10,7 +10,7 @@ import {createRequire} from 'module';
|
|
|
10
10
|
import rtlcss from 'rtlcss';
|
|
11
11
|
import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
|
|
12
12
|
import {getTranslationFiles, translateThemeConfig} from './translations';
|
|
13
|
-
import type {LoadContext, Plugin} from '@docusaurus/types';
|
|
13
|
+
import type {LoadContext, Plugin, SiteStorage} from '@docusaurus/types';
|
|
14
14
|
import type {ThemeConfig} from '@docusaurus/theme-common';
|
|
15
15
|
import type {Plugin as PostCssPlugin} from 'postcss';
|
|
16
16
|
import type {PluginOptions} from '@docusaurus/theme-classic';
|
|
@@ -23,58 +23,66 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
|
|
|
23
23
|
'webpack/lib/ContextReplacementPlugin',
|
|
24
24
|
) as typeof webpack.ContextReplacementPlugin;
|
|
25
25
|
|
|
26
|
-
// Need to be inlined to prevent dark mode FOUC
|
|
27
|
-
// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
|
|
28
|
-
const ThemeStorageKey = 'theme';
|
|
29
26
|
// Support for ?docusaurus-theme=dark
|
|
30
27
|
const ThemeQueryStringKey = 'docusaurus-theme';
|
|
31
28
|
// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
|
|
32
29
|
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
|
33
30
|
|
|
34
31
|
const noFlashColorMode = ({
|
|
35
|
-
defaultMode,
|
|
36
|
-
|
|
37
|
-
}:
|
|
32
|
+
colorMode: {defaultMode, respectPrefersColorScheme},
|
|
33
|
+
siteStorage,
|
|
34
|
+
}: {
|
|
35
|
+
colorMode: ThemeConfig['colorMode'];
|
|
36
|
+
siteStorage: SiteStorage;
|
|
37
|
+
}) => {
|
|
38
|
+
// Need to be inlined to prevent dark mode FOUC
|
|
39
|
+
// Make sure the key is the same as the one in the color mode React context
|
|
40
|
+
// Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
|
|
41
|
+
const themeStorageKey = `theme${siteStorage.namespace}`;
|
|
42
|
+
|
|
38
43
|
/* language=js */
|
|
39
|
-
`(function() {
|
|
40
|
-
|
|
41
|
-
|
|
44
|
+
return `(function() {
|
|
45
|
+
var defaultMode = '${defaultMode}';
|
|
46
|
+
var respectPrefersColorScheme = ${respectPrefersColorScheme};
|
|
42
47
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
function setDataThemeAttribute(theme) {
|
|
49
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
50
|
+
}
|
|
46
51
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
function getQueryStringTheme() {
|
|
53
|
+
try {
|
|
54
|
+
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
|
55
|
+
} catch (e) {
|
|
56
|
+
}
|
|
57
|
+
}
|
|
52
58
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
59
|
+
function getStoredTheme() {
|
|
60
|
+
try {
|
|
61
|
+
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
|
62
|
+
} catch (err) {
|
|
63
|
+
}
|
|
64
|
+
}
|
|
58
65
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
} else {
|
|
63
|
-
if (
|
|
64
|
-
respectPrefersColorScheme &&
|
|
65
|
-
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
66
|
-
) {
|
|
67
|
-
setDataThemeAttribute('dark');
|
|
68
|
-
} else if (
|
|
69
|
-
respectPrefersColorScheme &&
|
|
70
|
-
window.matchMedia('(prefers-color-scheme: light)').matches
|
|
71
|
-
) {
|
|
72
|
-
setDataThemeAttribute('light');
|
|
66
|
+
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
|
67
|
+
if (initialTheme !== null) {
|
|
68
|
+
setDataThemeAttribute(initialTheme);
|
|
73
69
|
} else {
|
|
74
|
-
|
|
70
|
+
if (
|
|
71
|
+
respectPrefersColorScheme &&
|
|
72
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
73
|
+
) {
|
|
74
|
+
setDataThemeAttribute('dark');
|
|
75
|
+
} else if (
|
|
76
|
+
respectPrefersColorScheme &&
|
|
77
|
+
window.matchMedia('(prefers-color-scheme: light)').matches
|
|
78
|
+
) {
|
|
79
|
+
setDataThemeAttribute('light');
|
|
80
|
+
} else {
|
|
81
|
+
setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
|
|
82
|
+
}
|
|
75
83
|
}
|
|
76
|
-
}
|
|
77
|
-
}
|
|
84
|
+
})();`;
|
|
85
|
+
};
|
|
78
86
|
|
|
79
87
|
/* language=js */
|
|
80
88
|
const DataAttributeQueryStringInlineJavaScript = `
|
|
@@ -126,6 +134,7 @@ export default function themeClassic(
|
|
|
126
134
|
): Plugin<undefined> {
|
|
127
135
|
const {
|
|
128
136
|
i18n: {currentLocale, localeConfigs},
|
|
137
|
+
siteStorage,
|
|
129
138
|
} = context;
|
|
130
139
|
const themeConfig = context.siteConfig.themeConfig as ThemeConfig;
|
|
131
140
|
const {
|
|
@@ -218,7 +227,7 @@ export default function themeClassic(
|
|
|
218
227
|
{
|
|
219
228
|
tagName: 'script',
|
|
220
229
|
innerHTML: `
|
|
221
|
-
${noFlashColorMode(colorMode)}
|
|
230
|
+
${noFlashColorMode({colorMode, siteStorage})}
|
|
222
231
|
${DataAttributeQueryStringInlineJavaScript}
|
|
223
232
|
${announcementBar ? AnnouncementBarInlineJavaScript : ''}
|
|
224
233
|
`,
|
|
@@ -32,7 +32,7 @@ function useCategoryItemsPlural() {
|
|
|
32
32
|
count,
|
|
33
33
|
translate(
|
|
34
34
|
{
|
|
35
|
-
message: '{count} items',
|
|
35
|
+
message: '1 item|{count} items',
|
|
36
36
|
id: 'theme.docs.DocCard.categoryDescription.plurals',
|
|
37
37
|
description:
|
|
38
38
|
'The default description for a category card in the generated index about how many items this category includes',
|