@seqera/docusaurus-theme-seqera 1.0.15 → 1.0.16-next.60

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.
Files changed (7) hide show
  1. package/lib/theme/DocVersionBanner/index.js +25 -16
  2. package/lib/theme/ThemedImage/index.js +17 -12
  3. package/lib/theme/ThemedImage/styles.module.css +22 -3
  4. package/package.json +1 -1
  5. package/src/theme/DocVersionBanner/index.tsx +20 -16
  6. package/src/theme/ThemedImage/index.tsx +18 -12
  7. package/src/theme/ThemedImage/styles.module.css +22 -3
package/lib/theme/DocVersionBanner/index.js CHANGED
@@ -91,22 +91,31 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
91
91
  const latestVersionSuggestedDoc =
92
92
  latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
93
93
  return (
94
- <div
95
- className={clsx(
96
- className,
97
- ThemeClassNames.docs.docVersionBanner,
98
- 'alert alert--warning margin-bottom--md',
99
- )}
100
- role="alert">
101
- <div>
102
- <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
103
- </div>
104
- <div className="">
105
- <LatestVersionSuggestionLabel
106
- versionLabel={latestVersionSuggestion.label}
107
- to={latestVersionSuggestedDoc.path}
108
- onClick={() => savePreferredVersionName(latestVersionSuggestion.name)}
109
- />
94
+ <div className="max-w-3xl mx-auto md:pr-4">
95
+ <div
96
+ className={clsx(
97
+ className,
98
+ ThemeClassNames.docs.docVersionBanner,
99
+ 'theme-admonition theme-admonition-caution admonition_whTW alert alert--warning block shadow-none border border-gray-200',
100
+ )}
101
+ role="alert">
102
+ <div className="admonitionContent_pDMz">
103
+ <p>
104
+ <BannerLabel
105
+ siteTitle={siteTitle}
106
+ versionMetadata={versionMetadata}
107
+ />
108
+ </p>
109
+ <p>
110
+ <LatestVersionSuggestionLabel
111
+ versionLabel={latestVersionSuggestion.label}
112
+ to={latestVersionSuggestedDoc.path}
113
+ onClick={() =>
114
+ savePreferredVersionName(latestVersionSuggestion.name)
115
+ }
116
+ />
117
+ </p>
118
+ </div>
110
119
  </div>
111
120
  </div>
112
121
  );
package/lib/theme/ThemedImage/index.js CHANGED
@@ -1,17 +1,22 @@
1
1
  import React from 'react';
2
- import {ThemedComponent} from '@docusaurus/theme-common';
2
+ import clsx from 'clsx';
3
+ import styles from './styles.module.css';
3
4
  export default function ThemedImage(props) {
4
- const {sources, className: parentClassName, alt, ...propsRest} = props;
5
+ const {sources, className, alt, ...propsRest} = props;
5
6
  return (
6
- <ThemedComponent className={parentClassName}>
7
- {({theme, className}) => (
8
- <img
9
- src={sources[theme]}
10
- alt={alt}
11
- className={className}
12
- {...propsRest}
13
- />
14
- )}
15
- </ThemedComponent>
7
+ <div className={clsx(styles.themedImageWrapper, className)}>
8
+ <img
9
+ src={sources.light}
10
+ alt={alt}
11
+ className={clsx(styles.themedImage, styles['themedImage--light'])}
12
+ {...propsRest}
13
+ />
14
+ <img
15
+ src={sources.dark}
16
+ alt={alt}
17
+ className={clsx(styles.themedImage, styles['themedImage--dark'])}
18
+ {...propsRest}
19
+ />
20
+ </div>
16
21
  );
17
22
  }
package/lib/theme/ThemedImage/styles.module.css CHANGED
@@ -1,13 +1,32 @@
1
1
 
2
+ /* Wrapper ensures images are overlaid in the same space */
3
+ .themedImageWrapper {
4
+ position: relative;
5
+ display: inline-block;
6
+ max-width: 100%;
7
+ }
2
8
 
9
+ /* Base image styles - hidden by default */
3
10
  .themedImage {
4
- display: none;
11
+ display: block;
12
+ width: 100%;
13
+ height: auto;
14
+ opacity: 0;
15
+ transition: opacity 0.15s ease-in-out;
16
+ }
17
+
18
+ /* Position dark image absolutely over light image */
19
+ .themedImage--dark {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
5
23
  }
6
24
 
25
+ /* Show the appropriate image based on theme */
7
26
  [data-theme='light'] .themedImage--light {
8
- display: initial;
27
+ opacity: 1;
9
28
  }
10
29
 
11
30
  [data-theme='dark'] .themedImage--dark {
12
- display: initial;
31
+ opacity: 1;
13
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seqera/docusaurus-theme-seqera",
3
- "version": "1.0.15",
3
+ "version": "1.0.16-next.60",
4
4
  "description": "Seqera docs theme for Docusaurus",
5
5
  "author": "Seqera docs team <education@seqera.io>",
6
6
  "license": "Apache-2.0",
package/src/theme/DocVersionBanner/index.tsx CHANGED
@@ -136,22 +136,26 @@ function DocVersionBannerEnabled({
136
136
  latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
137
137
 
138
138
  return (
139
- <div
140
- className={clsx(
141
- className,
142
- ThemeClassNames.docs.docVersionBanner,
143
- 'alert alert--warning margin-bottom--md',
144
- )}
145
- role="alert">
146
- <div>
147
- <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
148
- </div>
149
- <div className="">
150
- <LatestVersionSuggestionLabel
151
- versionLabel={latestVersionSuggestion.label}
152
- to={latestVersionSuggestedDoc.path}
153
- onClick={() => savePreferredVersionName(latestVersionSuggestion.name)}
154
- />
139
+ <div className="max-w-3xl mx-auto md:pr-4">
140
+ <div
141
+ className={clsx(
142
+ className,
143
+ ThemeClassNames.docs.docVersionBanner,
144
+ 'theme-admonition theme-admonition-caution admonition_whTW alert alert--warning block shadow-none border border-gray-200',
145
+ )}
146
+ role="alert">
147
+ <div className="admonitionContent_pDMz">
148
+ <p>
149
+ <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
150
+ </p>
151
+ <p>
152
+ <LatestVersionSuggestionLabel
153
+ versionLabel={latestVersionSuggestion.label}
154
+ to={latestVersionSuggestedDoc.path}
155
+ onClick={() => savePreferredVersionName(latestVersionSuggestion.name)}
156
+ />
157
+ </p>
158
+ </div>
155
159
  </div>
156
160
  </div>
157
161
  );
package/src/theme/ThemedImage/index.tsx CHANGED
@@ -1,21 +1,27 @@
1
1
 
2
2
 
3
3
  import React, {type ReactNode} from 'react';
4
- import {ThemedComponent} from '@docusaurus/theme-common';
4
+ import clsx from 'clsx';
5
5
  import type {Props} from '@theme/ThemedImage';
6
6
 
7
+ import styles from './styles.module.css';
8
+
7
9
  export default function ThemedImage(props: Props): ReactNode {
8
- const {sources, className: parentClassName, alt, ...propsRest} = props;
10
+ const {sources, className, alt, ...propsRest} = props;
9
11
  return (
10
- <ThemedComponent className={parentClassName}>
11
- {({theme, className}) => (
12
- <img
13
- src={sources[theme]}
14
- alt={alt}
15
- className={className}
16
- {...propsRest}
17
- />
18
- )}
19
- </ThemedComponent>
12
+ <div className={clsx(styles.themedImageWrapper, className)}>
13
+ <img
14
+ src={sources.light}
15
+ alt={alt}
16
+ className={clsx(styles.themedImage, styles['themedImage--light'])}
17
+ {...propsRest}
18
+ />
19
+ <img
20
+ src={sources.dark}
21
+ alt={alt}
22
+ className={clsx(styles.themedImage, styles['themedImage--dark'])}
23
+ {...propsRest}
24
+ />
25
+ </div>
20
26
  );
21
27
  }
package/src/theme/ThemedImage/styles.module.css CHANGED
@@ -1,13 +1,32 @@
1
1
 
2
+ /* Wrapper ensures images are overlaid in the same space */
3
+ .themedImageWrapper {
4
+ position: relative;
5
+ display: inline-block;
6
+ max-width: 100%;
7
+ }
2
8
 
9
+ /* Base image styles - hidden by default */
3
10
  .themedImage {
4
- display: none;
11
+ display: block;
12
+ width: 100%;
13
+ height: auto;
14
+ opacity: 0;
15
+ transition: opacity 0.15s ease-in-out;
16
+ }
17
+
18
+ /* Position dark image absolutely over light image */
19
+ .themedImage--dark {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
5
23
  }
6
24
 
25
+ /* Show the appropriate image based on theme */
7
26
  [data-theme='light'] .themedImage--light {
8
- display: initial;
27
+ opacity: 1;
9
28
  }
10
29
 
11
30
  [data-theme='dark'] .themedImage--dark {
12
- display: initial;
31
+ opacity: 1;
13
32
  }