@docusaurus/theme-classic 0.0.0-5539 → 0.0.0-5545

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.
@@ -5,35 +5,19 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import React from 'react';
8
- import clsx from 'clsx';
9
- import useIsBrowser from '@docusaurus/useIsBrowser';
10
- import {useColorMode} from '@docusaurus/theme-common';
11
- import styles from './styles.module.css';
8
+ import {ThemedComponent} from '@docusaurus/theme-common';
12
9
  export default function ThemedImage(props) {
13
- const isBrowser = useIsBrowser();
14
- const {colorMode} = useColorMode();
15
- const {sources, className, alt, ...propsRest} = props;
16
- const clientThemes = colorMode === 'dark' ? ['dark'] : ['light'];
17
- const renderedSourceNames = isBrowser
18
- ? clientThemes
19
- : // We need to render both images on the server to avoid flash
20
- // See https://github.com/facebook/docusaurus/pull/3730
21
- ['light', 'dark'];
10
+ const {sources, className: parentClassName, alt, ...propsRest} = props;
22
11
  return (
23
- <>
24
- {renderedSourceNames.map((sourceName) => (
12
+ <ThemedComponent className={parentClassName}>
13
+ {({theme, className}) => (
25
14
  <img
26
- key={sourceName}
27
- src={sources[sourceName]}
15
+ src={sources[theme]}
28
16
  alt={alt}
29
- className={clsx(
30
- styles.themedImage,
31
- styles[`themedImage--${sourceName}`],
32
- className,
33
- )}
17
+ className={className}
34
18
  {...propsRest}
35
19
  />
36
- ))}
37
- </>
20
+ )}
21
+ </ThemedComponent>
38
22
  );
39
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-classic",
3
- "version": "0.0.0-5539",
3
+ "version": "0.0.0-5545",
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-5539",
24
- "@docusaurus/mdx-loader": "0.0.0-5539",
25
- "@docusaurus/module-type-aliases": "0.0.0-5539",
26
- "@docusaurus/plugin-content-blog": "0.0.0-5539",
27
- "@docusaurus/plugin-content-docs": "0.0.0-5539",
28
- "@docusaurus/plugin-content-pages": "0.0.0-5539",
29
- "@docusaurus/theme-common": "0.0.0-5539",
30
- "@docusaurus/theme-translations": "0.0.0-5539",
31
- "@docusaurus/types": "0.0.0-5539",
32
- "@docusaurus/utils": "0.0.0-5539",
33
- "@docusaurus/utils-common": "0.0.0-5539",
34
- "@docusaurus/utils-validation": "0.0.0-5539",
23
+ "@docusaurus/core": "0.0.0-5545",
24
+ "@docusaurus/mdx-loader": "0.0.0-5545",
25
+ "@docusaurus/module-type-aliases": "0.0.0-5545",
26
+ "@docusaurus/plugin-content-blog": "0.0.0-5545",
27
+ "@docusaurus/plugin-content-docs": "0.0.0-5545",
28
+ "@docusaurus/plugin-content-pages": "0.0.0-5545",
29
+ "@docusaurus/theme-common": "0.0.0-5545",
30
+ "@docusaurus/theme-translations": "0.0.0-5545",
31
+ "@docusaurus/types": "0.0.0-5545",
32
+ "@docusaurus/utils": "0.0.0-5545",
33
+ "@docusaurus/utils-common": "0.0.0-5545",
34
+ "@docusaurus/utils-validation": "0.0.0-5545",
35
35
  "@mdx-js/react": "^1.6.22",
36
36
  "clsx": "^1.2.1",
37
37
  "copy-text-to-clipboard": "^3.0.1",
@@ -62,5 +62,5 @@
62
62
  "engines": {
63
63
  "node": ">=16.14"
64
64
  },
65
- "gitHead": "15195c116ce27217559490ce190e747918056d09"
65
+ "gitHead": "862e4be6c3aea4d26fce77e3ef31f644ce386962"
66
66
  }
@@ -6,44 +6,21 @@
6
6
  */
7
7
 
8
8
  import React from 'react';
9
- import clsx from 'clsx';
10
- import useIsBrowser from '@docusaurus/useIsBrowser';
11
- import {useColorMode} from '@docusaurus/theme-common';
9
+ import {ThemedComponent} from '@docusaurus/theme-common';
12
10
  import type {Props} from '@theme/ThemedImage';
13
11
 
14
- import styles from './styles.module.css';
15
-
16
12
  export default function ThemedImage(props: Props): JSX.Element {
17
- const isBrowser = useIsBrowser();
18
- const {colorMode} = useColorMode();
19
- const {sources, className, alt, ...propsRest} = props;
20
-
21
- type SourceName = keyof Props['sources'];
22
-
23
- const clientThemes: SourceName[] =
24
- colorMode === 'dark' ? ['dark'] : ['light'];
25
-
26
- const renderedSourceNames: SourceName[] = isBrowser
27
- ? clientThemes
28
- : // We need to render both images on the server to avoid flash
29
- // See https://github.com/facebook/docusaurus/pull/3730
30
- ['light', 'dark'];
31
-
13
+ const {sources, className: parentClassName, alt, ...propsRest} = props;
32
14
  return (
33
- <>
34
- {renderedSourceNames.map((sourceName) => (
15
+ <ThemedComponent className={parentClassName}>
16
+ {({theme, className}) => (
35
17
  <img
36
- key={sourceName}
37
- src={sources[sourceName]}
18
+ src={sources[theme]}
38
19
  alt={alt}
39
- className={clsx(
40
- styles.themedImage,
41
- styles[`themedImage--${sourceName}`],
42
- className,
43
- )}
20
+ className={className}
44
21
  {...propsRest}
45
22
  />
46
- ))}
47
- </>
23
+ )}
24
+ </ThemedComponent>
48
25
  );
49
26
  }