@docusaurus/theme-classic 0.0.0-5942 → 0.0.0-5945
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.d.ts +0 -1
- package/lib/index.js +5 -90
- package/lib/inlineScripts.d.ts +16 -0
- package/lib/inlineScripts.js +98 -0
- package/package.json +14 -14
- package/src/index.ts +8 -102
- package/src/inlineScripts.ts +114 -0
package/lib/index.d.ts
CHANGED
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
/// <reference path="../src/theme-classic.d.ts" />
|
|
8
8
|
import type { LoadContext, Plugin } from '@docusaurus/types';
|
|
9
9
|
import type { PluginOptions } from '@docusaurus/theme-classic';
|
|
10
|
-
export declare const AnnouncementBarDismissStorageKey = "docusaurus.announcement.dismiss";
|
|
11
10
|
export default function themeClassic(context: LoadContext, options: PluginOptions): Plugin<undefined>;
|
|
12
11
|
export { default as getSwizzleConfig } from './getSwizzleConfig';
|
|
13
12
|
export { validateThemeConfig, validateOptions } from './options';
|
package/lib/index.js
CHANGED
|
@@ -6,101 +6,16 @@
|
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
7
|
*/
|
|
8
8
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
-
exports.validateOptions = exports.validateThemeConfig = exports.getSwizzleConfig =
|
|
9
|
+
exports.validateOptions = exports.validateThemeConfig = exports.getSwizzleConfig = void 0;
|
|
10
10
|
const tslib_1 = require("tslib");
|
|
11
11
|
const path_1 = tslib_1.__importDefault(require("path"));
|
|
12
12
|
const module_1 = require("module");
|
|
13
13
|
const rtlcss_1 = tslib_1.__importDefault(require("rtlcss"));
|
|
14
14
|
const theme_translations_1 = require("@docusaurus/theme-translations");
|
|
15
15
|
const translations_1 = require("./translations");
|
|
16
|
+
const inlineScripts_1 = require("./inlineScripts");
|
|
16
17
|
const requireFromDocusaurusCore = (0, module_1.createRequire)(require.resolve('@docusaurus/core/package.json'));
|
|
17
18
|
const ContextReplacementPlugin = requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
|
|
18
|
-
// Support for ?docusaurus-theme=dark
|
|
19
|
-
const ThemeQueryStringKey = 'docusaurus-theme';
|
|
20
|
-
// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
|
|
21
|
-
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
|
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};
|
|
31
|
-
|
|
32
|
-
function setDataThemeAttribute(theme) {
|
|
33
|
-
document.documentElement.setAttribute('data-theme', theme);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function getQueryStringTheme() {
|
|
37
|
-
try {
|
|
38
|
-
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
|
39
|
-
} catch (e) {
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function getStoredTheme() {
|
|
44
|
-
try {
|
|
45
|
-
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
|
46
|
-
} catch (err) {
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
|
51
|
-
if (initialTheme !== null) {
|
|
52
|
-
setDataThemeAttribute(initialTheme);
|
|
53
|
-
} else {
|
|
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
|
-
}
|
|
67
|
-
}
|
|
68
|
-
})();`;
|
|
69
|
-
};
|
|
70
|
-
/* language=js */
|
|
71
|
-
const DataAttributeQueryStringInlineJavaScript = `
|
|
72
|
-
(function() {
|
|
73
|
-
try {
|
|
74
|
-
const entries = new URLSearchParams(window.location.search).entries();
|
|
75
|
-
for (var [searchKey, value] of entries) {
|
|
76
|
-
if (searchKey.startsWith('${DataQueryStringPrefixKey}')) {
|
|
77
|
-
var key = searchKey.replace('${DataQueryStringPrefixKey}',"data-")
|
|
78
|
-
document.documentElement.setAttribute(key, value);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
} catch(e) {}
|
|
82
|
-
})();
|
|
83
|
-
`;
|
|
84
|
-
// Duplicated constant. Unfortunately we can't import it from theme-common, as
|
|
85
|
-
// we need to support older nodejs versions without ESM support
|
|
86
|
-
// TODO: import from theme-common once we only support Node.js with ESM support
|
|
87
|
-
// + move all those announcementBar stuff there too
|
|
88
|
-
exports.AnnouncementBarDismissStorageKey = 'docusaurus.announcement.dismiss';
|
|
89
|
-
const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dismissed';
|
|
90
|
-
// We always render the announcement bar html on the server, to prevent layout
|
|
91
|
-
// shifts on React hydration. The theme can use CSS + the data attribute to hide
|
|
92
|
-
// the announcement bar asap (before React hydration)
|
|
93
|
-
/* language=js */
|
|
94
|
-
const AnnouncementBarInlineJavaScript = `
|
|
95
|
-
(function() {
|
|
96
|
-
function isDismissed() {
|
|
97
|
-
try {
|
|
98
|
-
return localStorage.getItem('${exports.AnnouncementBarDismissStorageKey}') === 'true';
|
|
99
|
-
} catch (err) {}
|
|
100
|
-
return false;
|
|
101
|
-
}
|
|
102
|
-
document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
|
|
103
|
-
})();`;
|
|
104
19
|
function getInfimaCSSFile(direction) {
|
|
105
20
|
return `infima/dist/css/default/default${direction === 'rtl' ? '-rtl' : ''}.css`;
|
|
106
21
|
}
|
|
@@ -175,9 +90,9 @@ function themeClassic(context, options) {
|
|
|
175
90
|
{
|
|
176
91
|
tagName: 'script',
|
|
177
92
|
innerHTML: `
|
|
178
|
-
${
|
|
179
|
-
${DataAttributeQueryStringInlineJavaScript}
|
|
180
|
-
${announcementBar ?
|
|
93
|
+
${(0, inlineScripts_1.getThemeInlineScript)({ colorMode, siteStorage })}
|
|
94
|
+
${inlineScripts_1.DataAttributeQueryStringInlineJavaScript}
|
|
95
|
+
${announcementBar ? (0, inlineScripts_1.getAnnouncementBarInlineScript)({ siteStorage }) : ''}
|
|
181
96
|
`,
|
|
182
97
|
},
|
|
183
98
|
],
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import type { SiteStorage } from '@docusaurus/types';
|
|
8
|
+
import type { ThemeConfig } from '@docusaurus/theme-common';
|
|
9
|
+
export declare function getThemeInlineScript({ colorMode: { defaultMode, respectPrefersColorScheme }, siteStorage, }: {
|
|
10
|
+
colorMode: ThemeConfig['colorMode'];
|
|
11
|
+
siteStorage: SiteStorage;
|
|
12
|
+
}): string;
|
|
13
|
+
export declare const DataAttributeQueryStringInlineJavaScript = "\n(function() {\n try {\n const entries = new URLSearchParams(window.location.search).entries();\n for (var [searchKey, value] of entries) {\n if (searchKey.startsWith('docusaurus-data-')) {\n var key = searchKey.replace('docusaurus-data-',\"data-\")\n document.documentElement.setAttribute(key, value);\n }\n }\n } catch(e) {}\n})();\n";
|
|
14
|
+
export declare function getAnnouncementBarInlineScript({ siteStorage, }: {
|
|
15
|
+
siteStorage: SiteStorage;
|
|
16
|
+
}): string;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the MIT license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
+
exports.getAnnouncementBarInlineScript = exports.DataAttributeQueryStringInlineJavaScript = exports.getThemeInlineScript = void 0;
|
|
10
|
+
// Support for ?docusaurus-theme=dark
|
|
11
|
+
const ThemeQueryStringKey = 'docusaurus-theme';
|
|
12
|
+
// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
|
|
13
|
+
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
|
14
|
+
function getThemeInlineScript({ colorMode: { defaultMode, respectPrefersColorScheme }, siteStorage, }) {
|
|
15
|
+
// Need to be inlined to prevent dark mode FOUC
|
|
16
|
+
// Make sure the key is the same as the one in the color mode React context
|
|
17
|
+
// Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
|
|
18
|
+
const themeStorageKey = `theme${siteStorage.namespace}`;
|
|
19
|
+
/* language=js */
|
|
20
|
+
return `(function() {
|
|
21
|
+
var defaultMode = '${defaultMode}';
|
|
22
|
+
var respectPrefersColorScheme = ${respectPrefersColorScheme};
|
|
23
|
+
|
|
24
|
+
function setDataThemeAttribute(theme) {
|
|
25
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function getQueryStringTheme() {
|
|
29
|
+
try {
|
|
30
|
+
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
|
31
|
+
} catch (e) {
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function getStoredTheme() {
|
|
36
|
+
try {
|
|
37
|
+
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
|
38
|
+
} catch (err) {
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
|
43
|
+
if (initialTheme !== null) {
|
|
44
|
+
setDataThemeAttribute(initialTheme);
|
|
45
|
+
} else {
|
|
46
|
+
if (
|
|
47
|
+
respectPrefersColorScheme &&
|
|
48
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
49
|
+
) {
|
|
50
|
+
setDataThemeAttribute('dark');
|
|
51
|
+
} else if (
|
|
52
|
+
respectPrefersColorScheme &&
|
|
53
|
+
window.matchMedia('(prefers-color-scheme: light)').matches
|
|
54
|
+
) {
|
|
55
|
+
setDataThemeAttribute('light');
|
|
56
|
+
} else {
|
|
57
|
+
setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
})();`;
|
|
61
|
+
}
|
|
62
|
+
exports.getThemeInlineScript = getThemeInlineScript;
|
|
63
|
+
/* language=js */
|
|
64
|
+
exports.DataAttributeQueryStringInlineJavaScript = `
|
|
65
|
+
(function() {
|
|
66
|
+
try {
|
|
67
|
+
const entries = new URLSearchParams(window.location.search).entries();
|
|
68
|
+
for (var [searchKey, value] of entries) {
|
|
69
|
+
if (searchKey.startsWith('${DataQueryStringPrefixKey}')) {
|
|
70
|
+
var key = searchKey.replace('${DataQueryStringPrefixKey}',"data-")
|
|
71
|
+
document.documentElement.setAttribute(key, value);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
} catch(e) {}
|
|
75
|
+
})();
|
|
76
|
+
`;
|
|
77
|
+
// We always render the announcement bar html on the server, to prevent layout
|
|
78
|
+
// shifts on React hydration. The theme can use CSS + the data attribute to hide
|
|
79
|
+
// the announcement bar asap (before React hydration)
|
|
80
|
+
function getAnnouncementBarInlineScript({ siteStorage, }) {
|
|
81
|
+
// Duplicated constant. Unfortunately we can't import it from theme-common, as
|
|
82
|
+
// we need to support older nodejs versions without ESM support
|
|
83
|
+
// TODO: import from theme-common once we support Node.js with ESM support
|
|
84
|
+
// + move all those announcementBar stuff there too
|
|
85
|
+
const AnnouncementBarDismissStorageKey = `docusaurus.announcement.dismiss${siteStorage.namespace}`;
|
|
86
|
+
const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dismissed';
|
|
87
|
+
/* language=js */
|
|
88
|
+
return `(function() {
|
|
89
|
+
function isDismissed() {
|
|
90
|
+
try {
|
|
91
|
+
return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
|
|
92
|
+
} catch (err) {}
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
95
|
+
document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
|
|
96
|
+
})();`;
|
|
97
|
+
}
|
|
98
|
+
exports.getAnnouncementBarInlineScript = getAnnouncementBarInlineScript;
|
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-5945",
|
|
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-5945",
|
|
24
|
+
"@docusaurus/mdx-loader": "0.0.0-5945",
|
|
25
|
+
"@docusaurus/module-type-aliases": "0.0.0-5945",
|
|
26
|
+
"@docusaurus/plugin-content-blog": "0.0.0-5945",
|
|
27
|
+
"@docusaurus/plugin-content-docs": "0.0.0-5945",
|
|
28
|
+
"@docusaurus/plugin-content-pages": "0.0.0-5945",
|
|
29
|
+
"@docusaurus/theme-common": "0.0.0-5945",
|
|
30
|
+
"@docusaurus/theme-translations": "0.0.0-5945",
|
|
31
|
+
"@docusaurus/types": "0.0.0-5945",
|
|
32
|
+
"@docusaurus/utils": "0.0.0-5945",
|
|
33
|
+
"@docusaurus/utils-common": "0.0.0-5945",
|
|
34
|
+
"@docusaurus/utils-validation": "0.0.0-5945",
|
|
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": "93d26c046a449a18fd39d96f34d08518f833cdf3"
|
|
65
65
|
}
|
package/src/index.ts
CHANGED
|
@@ -10,7 +10,12 @@ 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
|
|
13
|
+
import {
|
|
14
|
+
getThemeInlineScript,
|
|
15
|
+
getAnnouncementBarInlineScript,
|
|
16
|
+
DataAttributeQueryStringInlineJavaScript,
|
|
17
|
+
} from './inlineScripts';
|
|
18
|
+
import type {LoadContext, Plugin} from '@docusaurus/types';
|
|
14
19
|
import type {ThemeConfig} from '@docusaurus/theme-common';
|
|
15
20
|
import type {Plugin as PostCssPlugin} from 'postcss';
|
|
16
21
|
import type {PluginOptions} from '@docusaurus/theme-classic';
|
|
@@ -23,105 +28,6 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
|
|
|
23
28
|
'webpack/lib/ContextReplacementPlugin',
|
|
24
29
|
) as typeof webpack.ContextReplacementPlugin;
|
|
25
30
|
|
|
26
|
-
// Support for ?docusaurus-theme=dark
|
|
27
|
-
const ThemeQueryStringKey = 'docusaurus-theme';
|
|
28
|
-
// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
|
|
29
|
-
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
|
30
|
-
|
|
31
|
-
const noFlashColorMode = ({
|
|
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
|
-
|
|
43
|
-
/* language=js */
|
|
44
|
-
return `(function() {
|
|
45
|
-
var defaultMode = '${defaultMode}';
|
|
46
|
-
var respectPrefersColorScheme = ${respectPrefersColorScheme};
|
|
47
|
-
|
|
48
|
-
function setDataThemeAttribute(theme) {
|
|
49
|
-
document.documentElement.setAttribute('data-theme', theme);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function getQueryStringTheme() {
|
|
53
|
-
try {
|
|
54
|
-
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
|
55
|
-
} catch (e) {
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function getStoredTheme() {
|
|
60
|
-
try {
|
|
61
|
-
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
|
62
|
-
} catch (err) {
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
|
67
|
-
if (initialTheme !== null) {
|
|
68
|
-
setDataThemeAttribute(initialTheme);
|
|
69
|
-
} else {
|
|
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
|
-
}
|
|
83
|
-
}
|
|
84
|
-
})();`;
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
/* language=js */
|
|
88
|
-
const DataAttributeQueryStringInlineJavaScript = `
|
|
89
|
-
(function() {
|
|
90
|
-
try {
|
|
91
|
-
const entries = new URLSearchParams(window.location.search).entries();
|
|
92
|
-
for (var [searchKey, value] of entries) {
|
|
93
|
-
if (searchKey.startsWith('${DataQueryStringPrefixKey}')) {
|
|
94
|
-
var key = searchKey.replace('${DataQueryStringPrefixKey}',"data-")
|
|
95
|
-
document.documentElement.setAttribute(key, value);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
} catch(e) {}
|
|
99
|
-
})();
|
|
100
|
-
`;
|
|
101
|
-
|
|
102
|
-
// Duplicated constant. Unfortunately we can't import it from theme-common, as
|
|
103
|
-
// we need to support older nodejs versions without ESM support
|
|
104
|
-
// TODO: import from theme-common once we only support Node.js with ESM support
|
|
105
|
-
// + move all those announcementBar stuff there too
|
|
106
|
-
export const AnnouncementBarDismissStorageKey =
|
|
107
|
-
'docusaurus.announcement.dismiss';
|
|
108
|
-
const AnnouncementBarDismissDataAttribute =
|
|
109
|
-
'data-announcement-bar-initially-dismissed';
|
|
110
|
-
// We always render the announcement bar html on the server, to prevent layout
|
|
111
|
-
// shifts on React hydration. The theme can use CSS + the data attribute to hide
|
|
112
|
-
// the announcement bar asap (before React hydration)
|
|
113
|
-
/* language=js */
|
|
114
|
-
const AnnouncementBarInlineJavaScript = `
|
|
115
|
-
(function() {
|
|
116
|
-
function isDismissed() {
|
|
117
|
-
try {
|
|
118
|
-
return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
|
|
119
|
-
} catch (err) {}
|
|
120
|
-
return false;
|
|
121
|
-
}
|
|
122
|
-
document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
|
|
123
|
-
})();`;
|
|
124
|
-
|
|
125
31
|
function getInfimaCSSFile(direction: string) {
|
|
126
32
|
return `infima/dist/css/default/default${
|
|
127
33
|
direction === 'rtl' ? '-rtl' : ''
|
|
@@ -227,9 +133,9 @@ export default function themeClassic(
|
|
|
227
133
|
{
|
|
228
134
|
tagName: 'script',
|
|
229
135
|
innerHTML: `
|
|
230
|
-
${
|
|
136
|
+
${getThemeInlineScript({colorMode, siteStorage})}
|
|
231
137
|
${DataAttributeQueryStringInlineJavaScript}
|
|
232
|
-
${announcementBar ?
|
|
138
|
+
${announcementBar ? getAnnouncementBarInlineScript({siteStorage}) : ''}
|
|
233
139
|
`,
|
|
234
140
|
},
|
|
235
141
|
],
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import type {SiteStorage} from '@docusaurus/types';
|
|
9
|
+
import type {ThemeConfig} from '@docusaurus/theme-common';
|
|
10
|
+
|
|
11
|
+
// Support for ?docusaurus-theme=dark
|
|
12
|
+
const ThemeQueryStringKey = 'docusaurus-theme';
|
|
13
|
+
|
|
14
|
+
// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
|
|
15
|
+
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
|
16
|
+
|
|
17
|
+
export function getThemeInlineScript({
|
|
18
|
+
colorMode: {defaultMode, respectPrefersColorScheme},
|
|
19
|
+
siteStorage,
|
|
20
|
+
}: {
|
|
21
|
+
colorMode: ThemeConfig['colorMode'];
|
|
22
|
+
siteStorage: SiteStorage;
|
|
23
|
+
}): string {
|
|
24
|
+
// Need to be inlined to prevent dark mode FOUC
|
|
25
|
+
// Make sure the key is the same as the one in the color mode React context
|
|
26
|
+
// Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
|
|
27
|
+
const themeStorageKey = `theme${siteStorage.namespace}`;
|
|
28
|
+
|
|
29
|
+
/* language=js */
|
|
30
|
+
return `(function() {
|
|
31
|
+
var defaultMode = '${defaultMode}';
|
|
32
|
+
var respectPrefersColorScheme = ${respectPrefersColorScheme};
|
|
33
|
+
|
|
34
|
+
function setDataThemeAttribute(theme) {
|
|
35
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function getQueryStringTheme() {
|
|
39
|
+
try {
|
|
40
|
+
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
|
41
|
+
} catch (e) {
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function getStoredTheme() {
|
|
46
|
+
try {
|
|
47
|
+
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
|
48
|
+
} catch (err) {
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
|
53
|
+
if (initialTheme !== null) {
|
|
54
|
+
setDataThemeAttribute(initialTheme);
|
|
55
|
+
} else {
|
|
56
|
+
if (
|
|
57
|
+
respectPrefersColorScheme &&
|
|
58
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
59
|
+
) {
|
|
60
|
+
setDataThemeAttribute('dark');
|
|
61
|
+
} else if (
|
|
62
|
+
respectPrefersColorScheme &&
|
|
63
|
+
window.matchMedia('(prefers-color-scheme: light)').matches
|
|
64
|
+
) {
|
|
65
|
+
setDataThemeAttribute('light');
|
|
66
|
+
} else {
|
|
67
|
+
setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
})();`;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* language=js */
|
|
74
|
+
export const DataAttributeQueryStringInlineJavaScript = `
|
|
75
|
+
(function() {
|
|
76
|
+
try {
|
|
77
|
+
const entries = new URLSearchParams(window.location.search).entries();
|
|
78
|
+
for (var [searchKey, value] of entries) {
|
|
79
|
+
if (searchKey.startsWith('${DataQueryStringPrefixKey}')) {
|
|
80
|
+
var key = searchKey.replace('${DataQueryStringPrefixKey}',"data-")
|
|
81
|
+
document.documentElement.setAttribute(key, value);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
} catch(e) {}
|
|
85
|
+
})();
|
|
86
|
+
`;
|
|
87
|
+
|
|
88
|
+
// We always render the announcement bar html on the server, to prevent layout
|
|
89
|
+
// shifts on React hydration. The theme can use CSS + the data attribute to hide
|
|
90
|
+
// the announcement bar asap (before React hydration)
|
|
91
|
+
export function getAnnouncementBarInlineScript({
|
|
92
|
+
siteStorage,
|
|
93
|
+
}: {
|
|
94
|
+
siteStorage: SiteStorage;
|
|
95
|
+
}): string {
|
|
96
|
+
// Duplicated constant. Unfortunately we can't import it from theme-common, as
|
|
97
|
+
// we need to support older nodejs versions without ESM support
|
|
98
|
+
// TODO: import from theme-common once we support Node.js with ESM support
|
|
99
|
+
// + move all those announcementBar stuff there too
|
|
100
|
+
const AnnouncementBarDismissStorageKey = `docusaurus.announcement.dismiss${siteStorage.namespace}`;
|
|
101
|
+
const AnnouncementBarDismissDataAttribute =
|
|
102
|
+
'data-announcement-bar-initially-dismissed';
|
|
103
|
+
|
|
104
|
+
/* language=js */
|
|
105
|
+
return `(function() {
|
|
106
|
+
function isDismissed() {
|
|
107
|
+
try {
|
|
108
|
+
return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
|
|
109
|
+
} catch (err) {}
|
|
110
|
+
return false;
|
|
111
|
+
}
|
|
112
|
+
document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
|
|
113
|
+
})();`;
|
|
114
|
+
}
|