@seqera/docusaurus-theme-seqera 1.0.16 → 1.0.17

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 +4 -12
  3. package/lib/theme/ThemedImage/styles.module.css +22 -15
  4. package/package.json +1 -1
  5. package/src/theme/DocVersionBanner/index.tsx +20 -16
  6. package/src/theme/ThemedImage/index.tsx +4 -4
  7. package/src/theme/ThemedImage/styles.module.css +22 -15
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
@@ -4,27 +4,19 @@ import styles from './styles.module.css';
4
4
  export default function ThemedImage(props) {
5
5
  const {sources, className, alt, ...propsRest} = props;
6
6
  return (
7
- <>
7
+ <div className={clsx(styles.themedImageWrapper, className)}>
8
8
  <img
9
9
  src={sources.light}
10
10
  alt={alt}
11
- className={clsx(
12
- styles.themedImage,
13
- styles['themedImage--light'],
14
- className,
15
- )}
11
+ className={clsx(styles.themedImage, styles['themedImage--light'])}
16
12
  {...propsRest}
17
13
  />
18
14
  <img
19
15
  src={sources.dark}
20
16
  alt={alt}
21
- className={clsx(
22
- styles.themedImage,
23
- styles['themedImage--dark'],
24
- className,
25
- )}
17
+ className={clsx(styles.themedImage, styles['themedImage--dark'])}
26
18
  {...propsRest}
27
19
  />
28
- </>
20
+ </div>
29
21
  );
30
22
  }
package/lib/theme/ThemedImage/styles.module.css CHANGED
@@ -1,25 +1,32 @@
1
1
 
2
-
3
- .themedImage {
4
- display: none;
2
+ /* Wrapper ensures images are overlaid in the same space */
3
+ .themedImageWrapper {
4
+ position: relative;
5
+ display: inline-block;
6
+ max-width: 100%;
5
7
  }
6
8
 
7
- [data-theme='light'] .themedImage--light {
8
- display: initial;
9
+ /* Base image styles - hidden by default */
10
+ .themedImage {
11
+ display: block;
12
+ width: 100%;
13
+ height: auto;
14
+ opacity: 0;
15
+ transition: opacity 0.15s ease-in-out;
9
16
  }
10
17
 
11
- [data-theme='dark'] .themedImage--dark {
12
- display: initial;
18
+ /* Position dark image absolutely over light image */
19
+ .themedImage--dark {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
13
23
  }
14
24
 
15
- /* Ensure smooth rendering during hydration */
16
- .themedImage {
17
- transition: opacity 0.15s ease-in-out;
25
+ /* Show the appropriate image based on theme */
26
+ [data-theme='light'] .themedImage--light {
27
+ opacity: 1;
18
28
  }
19
29
 
20
- /* Prevent layout shift by ensuring both images occupy the same space */
21
- .themedImage--light,
22
- .themedImage--dark {
23
- max-width: 100%;
24
- height: auto;
30
+ [data-theme='dark'] .themedImage--dark {
31
+ opacity: 1;
25
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seqera/docusaurus-theme-seqera",
3
- "version": "1.0.16",
3
+ "version": "1.0.17",
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
@@ -9,19 +9,19 @@ import styles from './styles.module.css';
9
9
  export default function ThemedImage(props: Props): ReactNode {
10
10
  const {sources, className, alt, ...propsRest} = props;
11
11
  return (
12
- <>
12
+ <div className={clsx(styles.themedImageWrapper, className)}>
13
13
  <img
14
14
  src={sources.light}
15
15
  alt={alt}
16
- className={clsx(styles.themedImage, styles['themedImage--light'], className)}
16
+ className={clsx(styles.themedImage, styles['themedImage--light'])}
17
17
  {...propsRest}
18
18
  />
19
19
  <img
20
20
  src={sources.dark}
21
21
  alt={alt}
22
- className={clsx(styles.themedImage, styles['themedImage--dark'], className)}
22
+ className={clsx(styles.themedImage, styles['themedImage--dark'])}
23
23
  {...propsRest}
24
24
  />
25
- </>
25
+ </div>
26
26
  );
27
27
  }
package/src/theme/ThemedImage/styles.module.css CHANGED
@@ -1,25 +1,32 @@
1
1
 
2
-
3
- .themedImage {
4
- display: none;
2
+ /* Wrapper ensures images are overlaid in the same space */
3
+ .themedImageWrapper {
4
+ position: relative;
5
+ display: inline-block;
6
+ max-width: 100%;
5
7
  }
6
8
 
7
- [data-theme='light'] .themedImage--light {
8
- display: initial;
9
+ /* Base image styles - hidden by default */
10
+ .themedImage {
11
+ display: block;
12
+ width: 100%;
13
+ height: auto;
14
+ opacity: 0;
15
+ transition: opacity 0.15s ease-in-out;
9
16
  }
10
17
 
11
- [data-theme='dark'] .themedImage--dark {
12
- display: initial;
18
+ /* Position dark image absolutely over light image */
19
+ .themedImage--dark {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
13
23
  }
14
24
 
15
- /* Ensure smooth rendering during hydration */
16
- .themedImage {
17
- transition: opacity 0.15s ease-in-out;
25
+ /* Show the appropriate image based on theme */
26
+ [data-theme='light'] .themedImage--light {
27
+ opacity: 1;
18
28
  }
19
29
 
20
- /* Prevent layout shift by ensuring both images occupy the same space */
21
- .themedImage--light,
22
- .themedImage--dark {
23
- max-width: 100%;
24
- height: auto;
30
+ [data-theme='dark'] .themedImage--dark {
31
+ opacity: 1;
25
32
  }