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

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 +16 -25
  2. package/lib/theme/ThemedImage/index.js +12 -4
  3. package/lib/theme/ThemedImage/styles.module.css +15 -22
  4. package/package.json +1 -1
  5. package/src/theme/DocVersionBanner/index.tsx +16 -20
  6. package/src/theme/ThemedImage/index.tsx +4 -4
  7. package/src/theme/ThemedImage/styles.module.css +15 -22
package/lib/theme/DocVersionBanner/index.js CHANGED
@@ -91,31 +91,22 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
91
91
  const latestVersionSuggestedDoc =
92
92
  latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
93
93
  return (
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>
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
+ />
119
110
  </div>
120
111
  </div>
121
112
  );
package/lib/theme/ThemedImage/index.js CHANGED
@@ -4,19 +4,27 @@ 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
- <div className={clsx(styles.themedImageWrapper, className)}>
7
+ <>
8
8
  <img
9
9
  src={sources.light}
10
10
  alt={alt}
11
- className={clsx(styles.themedImage, styles['themedImage--light'])}
11
+ className={clsx(
12
+ styles.themedImage,
13
+ styles['themedImage--light'],
14
+ className,
15
+ )}
12
16
  {...propsRest}
13
17
  />
14
18
  <img
15
19
  src={sources.dark}
16
20
  alt={alt}
17
- className={clsx(styles.themedImage, styles['themedImage--dark'])}
21
+ className={clsx(
22
+ styles.themedImage,
23
+ styles['themedImage--dark'],
24
+ className,
25
+ )}
18
26
  {...propsRest}
19
27
  />
20
- </div>
28
+ </>
21
29
  );
22
30
  }
package/lib/theme/ThemedImage/styles.module.css CHANGED
@@ -1,32 +1,25 @@
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
- }
8
2
 
9
- /* Base image styles - hidden by default */
10
3
  .themedImage {
11
- display: block;
12
- width: 100%;
13
- height: auto;
14
- opacity: 0;
15
- transition: opacity 0.15s ease-in-out;
4
+ display: none;
16
5
  }
17
6
 
18
- /* Position dark image absolutely over light image */
19
- .themedImage--dark {
20
- position: absolute;
21
- top: 0;
22
- left: 0;
23
- }
24
-
25
- /* Show the appropriate image based on theme */
26
7
  [data-theme='light'] .themedImage--light {
27
- opacity: 1;
8
+ display: initial;
28
9
  }
29
10
 
30
11
  [data-theme='dark'] .themedImage--dark {
31
- opacity: 1;
12
+ display: initial;
13
+ }
14
+
15
+ /* Ensure smooth rendering during hydration */
16
+ .themedImage {
17
+ transition: opacity 0.15s ease-in-out;
18
+ }
19
+
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;
32
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seqera/docusaurus-theme-seqera",
3
- "version": "1.0.16-next.60",
3
+ "version": "1.0.16",
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,26 +136,22 @@ function DocVersionBannerEnabled({
136
136
  latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
137
137
 
138
138
  return (
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>
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
+ />
159
155
  </div>
160
156
  </div>
161
157
  );
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
- <div className={clsx(styles.themedImageWrapper, className)}>
12
+ <>
13
13
  <img
14
14
  src={sources.light}
15
15
  alt={alt}
16
- className={clsx(styles.themedImage, styles['themedImage--light'])}
16
+ className={clsx(styles.themedImage, styles['themedImage--light'], className)}
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'])}
22
+ className={clsx(styles.themedImage, styles['themedImage--dark'], className)}
23
23
  {...propsRest}
24
24
  />
25
- </div>
25
+ </>
26
26
  );
27
27
  }
package/src/theme/ThemedImage/styles.module.css CHANGED
@@ -1,32 +1,25 @@
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
- }
8
2
 
9
- /* Base image styles - hidden by default */
10
3
  .themedImage {
11
- display: block;
12
- width: 100%;
13
- height: auto;
14
- opacity: 0;
15
- transition: opacity 0.15s ease-in-out;
4
+ display: none;
16
5
  }
17
6
 
18
- /* Position dark image absolutely over light image */
19
- .themedImage--dark {
20
- position: absolute;
21
- top: 0;
22
- left: 0;
23
- }
24
-
25
- /* Show the appropriate image based on theme */
26
7
  [data-theme='light'] .themedImage--light {
27
- opacity: 1;
8
+ display: initial;
28
9
  }
29
10
 
30
11
  [data-theme='dark'] .themedImage--dark {
31
- opacity: 1;
12
+ display: initial;
13
+ }
14
+
15
+ /* Ensure smooth rendering during hydration */
16
+ .themedImage {
17
+ transition: opacity 0.15s ease-in-out;
18
+ }
19
+
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;
32
25
  }