@seqera/docusaurus-theme-seqera 1.0.34 → 1.0.35-next.110

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 (5) hide show
  1. package/lib/theme/Navbar/Content/index.js +28 -21
  2. package/lib/theme/Navbar/Content/styles.module.css +18 -0
  3. package/package.json +1 -1
  4. package/src/theme/Navbar/Content/index.tsx +28 -22
  5. package/src/theme/Navbar/Content/styles.module.css +18 -0
package/lib/theme/Navbar/Content/index.js CHANGED
@@ -1,10 +1,11 @@
1
- import React, {useState, useEffect} from 'react';
1
+ import React from 'react';
2
2
  import clsx from 'clsx';
3
3
  import {useThemeConfig, ThemeClassNames} from '@docusaurus/theme-common';
4
4
  import {
5
5
  splitNavbarItems,
6
6
  useNavbarMobileSidebar,
7
7
  } from '@docusaurus/theme-common/internal';
8
+ import {useLocation} from '@docusaurus/router';
8
9
  import NavbarItem from '@theme/NavbarItem';
9
10
  import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
10
11
  import SearchBar from '@theme/SearchBar';
@@ -50,10 +51,7 @@ function NavbarContentLayout({left, right}) {
50
51
  }
51
52
  export default function NavbarContent() {
52
53
  const mobileSidebar = useNavbarMobileSidebar();
53
- const [pathname, setPathname] = useState('');
54
- useEffect(() => {
55
- setPathname(window.location.pathname);
56
- }, []);
54
+ const {pathname} = useLocation();
57
55
  const items = useNavbarItems();
58
56
  const [leftItems, rightItems] = splitNavbarItems(items);
59
57
  return (
@@ -96,9 +94,9 @@ export default function NavbarContent() {
96
94
  <div>
97
95
  <a
98
96
  className={clsx(
99
- 'navbar__link font-normal',
97
+ styles.seqeraNavLink,
100
98
  pathname.startsWith('/platform-cloud/') &&
101
- 'navbar__link--active',
99
+ styles.seqeraNavLinkActive,
102
100
  )}
103
101
  href="/platform-cloud/"
104
102
  aria-label="Platform Cloud">
@@ -107,9 +105,10 @@ export default function NavbarContent() {
107
105
 
108
106
  <a
109
107
  className={clsx(
110
- 'navbar__link ml-8 font-normal',
108
+ styles.seqeraNavLink,
109
+ styles.seqeraNavLinkSpaced,
111
110
  pathname.startsWith('/platform-enterprise/') &&
112
- 'navbar__link--active',
111
+ styles.seqeraNavLinkActive,
113
112
  )}
114
113
  href="/platform-enterprise/"
115
114
  aria-label="Enterprise">
@@ -118,8 +117,9 @@ export default function NavbarContent() {
118
117
 
119
118
  <a
120
119
  className={clsx(
121
- 'navbar__link ml-8 font-normal',
122
- pathname.startsWith('/nextflow/') && 'navbar__link--active',
120
+ styles.seqeraNavLink,
121
+ styles.seqeraNavLinkSpaced,
122
+ pathname.startsWith('/nextflow/') && styles.seqeraNavLinkActive,
123
123
  )}
124
124
  href="/nextflow/"
125
125
  aria-label="Nextflow">
@@ -128,8 +128,9 @@ export default function NavbarContent() {
128
128
 
129
129
  <a
130
130
  className={clsx(
131
- 'navbar__link ml-8 font-normal',
132
- pathname.startsWith('/multiqc/') && 'navbar__link--active',
131
+ styles.seqeraNavLink,
132
+ styles.seqeraNavLinkSpaced,
133
+ pathname.startsWith('/multiqc/') && styles.seqeraNavLinkActive,
133
134
  )}
134
135
  href="/multiqc/"
135
136
  aria-label="MultiQC">
@@ -138,8 +139,9 @@ export default function NavbarContent() {
138
139
 
139
140
  <a
140
141
  className={clsx(
141
- 'navbar__link ml-8 font-normal',
142
- pathname.startsWith('/wave/') && 'navbar__link--active',
142
+ styles.seqeraNavLink,
143
+ styles.seqeraNavLinkSpaced,
144
+ pathname.startsWith('/wave/') && styles.seqeraNavLinkActive,
143
145
  )}
144
146
  href="/wave/"
145
147
  aria-label="Wave">
@@ -148,8 +150,9 @@ export default function NavbarContent() {
148
150
 
149
151
  <a
150
152
  className={clsx(
151
- 'navbar__link ml-8 font-normal',
152
- pathname.startsWith('/fusion/') && 'navbar__link--active',
153
+ styles.seqeraNavLink,
154
+ styles.seqeraNavLinkSpaced,
155
+ pathname.startsWith('/fusion/') && styles.seqeraNavLinkActive,
153
156
  )}
154
157
  href="/fusion/"
155
158
  aria-label="Fusion">
@@ -159,8 +162,10 @@ export default function NavbarContent() {
159
162
  <div className="mr-2">
160
163
  <a
161
164
  className={clsx(
162
- 'navbar__link ml-8 font-normal',
163
- pathname.startsWith('/platform-api/') && 'navbar__link--active',
165
+ styles.seqeraNavLink,
166
+ styles.seqeraNavLinkSpaced,
167
+ pathname.startsWith('/platform-api/') &&
168
+ styles.seqeraNavLinkActive,
164
169
  )}
165
170
  href="/platform-api/"
166
171
  aria-label="Platform API">
@@ -169,8 +174,10 @@ export default function NavbarContent() {
169
174
 
170
175
  <a
171
176
  className={clsx(
172
- 'navbar__link ml-8 font-normal',
173
- pathname.startsWith('/changelog/') && 'navbar__link--active',
177
+ styles.seqeraNavLink,
178
+ styles.seqeraNavLinkSpaced,
179
+ pathname.startsWith('/changelog/') &&
180
+ styles.seqeraNavLinkActive,
174
181
  )}
175
182
  href="/changelog/"
176
183
  aria-label="Changelog">
package/lib/theme/Navbar/Content/styles.module.css CHANGED
@@ -6,4 +6,22 @@ See https://github.com/facebook/docusaurus/pull/11142
6
6
  :global(.navbar__items--right) > :last-child {
7
7
  padding-right: 0;
8
8
  }
9
+ .seqeraNavLink {
10
+ font-weight: 400;
11
+ text-decoration: none;
12
+ border-bottom: 4px solid transparent;
13
+ }
14
+
15
+ .seqeraNavLink:hover {
16
+ text-decoration: none;
17
+ }
18
+
19
+ .seqeraNavLinkActive {
20
+ font-weight: 500;
21
+ border-bottom: 4px solid var(--color-nextflow-500);
22
+ padding-bottom: 0.1rem;
23
+ }
9
24
 
25
+ .seqeraNavLinkSpaced {
26
+ margin-left: 2rem;
27
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seqera/docusaurus-theme-seqera",
3
- "version": "1.0.34",
3
+ "version": "1.0.35-next.110",
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/Navbar/Content/index.tsx CHANGED
@@ -1,10 +1,11 @@
1
- import React, {type ReactNode, useState, useEffect} from 'react';
1
+ import React, {type ReactNode} from 'react';
2
2
  import clsx from 'clsx';
3
3
  import {useThemeConfig, ThemeClassNames} from '@docusaurus/theme-common';
4
4
  import {
5
5
  splitNavbarItems,
6
6
  useNavbarMobileSidebar,
7
7
  } from '@docusaurus/theme-common/internal';
8
+ import {useLocation} from '@docusaurus/router';
8
9
  import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
9
10
  import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
10
11
  import SearchBar from '@theme/SearchBar';
@@ -60,11 +61,7 @@ function NavbarContentLayout({
60
61
 
61
62
  export default function NavbarContent(): ReactNode {
62
63
  const mobileSidebar = useNavbarMobileSidebar();
63
- const [pathname, setPathname] = useState('');
64
-
65
- useEffect(() => {
66
- setPathname(window.location.pathname);
67
- }, []);
64
+ const {pathname} = useLocation();
68
65
 
69
66
  const items = useNavbarItems();
70
67
  const [leftItems, rightItems] = splitNavbarItems(items);
@@ -109,9 +106,9 @@ export default function NavbarContent(): ReactNode {
109
106
  <div>
110
107
  <a
111
108
  className={clsx(
112
- 'navbar__link font-normal',
109
+ styles.seqeraNavLink,
113
110
  pathname.startsWith('/platform-cloud/') &&
114
- 'navbar__link--active',
111
+ styles.seqeraNavLinkActive,
115
112
  )}
116
113
  href="/platform-cloud/"
117
114
  aria-label="Platform Cloud">
@@ -120,9 +117,10 @@ export default function NavbarContent(): ReactNode {
120
117
 
121
118
  <a
122
119
  className={clsx(
123
- 'navbar__link ml-8 font-normal',
120
+ styles.seqeraNavLink,
121
+ styles.seqeraNavLinkSpaced,
124
122
  pathname.startsWith('/platform-enterprise/') &&
125
- 'navbar__link--active',
123
+ styles.seqeraNavLinkActive,
126
124
  )}
127
125
  href="/platform-enterprise/"
128
126
  aria-label="Enterprise">
@@ -131,8 +129,9 @@ export default function NavbarContent(): ReactNode {
131
129
 
132
130
  <a
133
131
  className={clsx(
134
- 'navbar__link ml-8 font-normal',
135
- pathname.startsWith('/nextflow/') && 'navbar__link--active',
132
+ styles.seqeraNavLink,
133
+ styles.seqeraNavLinkSpaced,
134
+ pathname.startsWith('/nextflow/') && styles.seqeraNavLinkActive,
136
135
  )}
137
136
  href="/nextflow/"
138
137
  aria-label="Nextflow">
@@ -141,8 +140,9 @@ export default function NavbarContent(): ReactNode {
141
140
 
142
141
  <a
143
142
  className={clsx(
144
- 'navbar__link ml-8 font-normal',
145
- pathname.startsWith('/multiqc/') && 'navbar__link--active',
143
+ styles.seqeraNavLink,
144
+ styles.seqeraNavLinkSpaced,
145
+ pathname.startsWith('/multiqc/') && styles.seqeraNavLinkActive,
146
146
  )}
147
147
  href="/multiqc/"
148
148
  aria-label="MultiQC">
@@ -151,8 +151,9 @@ export default function NavbarContent(): ReactNode {
151
151
 
152
152
  <a
153
153
  className={clsx(
154
- 'navbar__link ml-8 font-normal',
155
- pathname.startsWith('/wave/') && 'navbar__link--active',
154
+ styles.seqeraNavLink,
155
+ styles.seqeraNavLinkSpaced,
156
+ pathname.startsWith('/wave/') && styles.seqeraNavLinkActive,
156
157
  )}
157
158
  href="/wave/"
158
159
  aria-label="Wave">
@@ -161,8 +162,9 @@ export default function NavbarContent(): ReactNode {
161
162
 
162
163
  <a
163
164
  className={clsx(
164
- 'navbar__link ml-8 font-normal',
165
- pathname.startsWith('/fusion/') && 'navbar__link--active',
165
+ styles.seqeraNavLink,
166
+ styles.seqeraNavLinkSpaced,
167
+ pathname.startsWith('/fusion/') && styles.seqeraNavLinkActive,
166
168
  )}
167
169
  href="/fusion/"
168
170
  aria-label="Fusion">
@@ -172,8 +174,10 @@ export default function NavbarContent(): ReactNode {
172
174
  <div className="mr-2">
173
175
  <a
174
176
  className={clsx(
175
- 'navbar__link ml-8 font-normal',
176
- pathname.startsWith('/platform-api/') && 'navbar__link--active',
177
+ styles.seqeraNavLink,
178
+ styles.seqeraNavLinkSpaced,
179
+ pathname.startsWith('/platform-api/') &&
180
+ styles.seqeraNavLinkActive,
177
181
  )}
178
182
  href="/platform-api/"
179
183
  aria-label="Platform API">
@@ -182,8 +186,10 @@ export default function NavbarContent(): ReactNode {
182
186
 
183
187
  <a
184
188
  className={clsx(
185
- 'navbar__link ml-8 font-normal',
186
- pathname.startsWith('/changelog/') && 'navbar__link--active',
189
+ styles.seqeraNavLink,
190
+ styles.seqeraNavLinkSpaced,
191
+ pathname.startsWith('/changelog/') &&
192
+ styles.seqeraNavLinkActive,
187
193
  )}
188
194
  href="/changelog/"
189
195
  aria-label="Changelog">
package/src/theme/Navbar/Content/styles.module.css CHANGED
@@ -6,4 +6,22 @@ See https://github.com/facebook/docusaurus/pull/11142
6
6
  :global(.navbar__items--right) > :last-child {
7
7
  padding-right: 0;
8
8
  }
9
+ .seqeraNavLink {
10
+ font-weight: 400;
11
+ text-decoration: none;
12
+ border-bottom: 4px solid transparent;
13
+ }
14
+
15
+ .seqeraNavLink:hover {
16
+ text-decoration: none;
17
+ }
18
+
19
+ .seqeraNavLinkActive {
20
+ font-weight: 500;
21
+ border-bottom: 4px solid var(--color-nextflow-500);
22
+ padding-bottom: 0.1rem;
23
+ }
9
24
 
25
+ .seqeraNavLinkSpaced {
26
+ margin-left: 2rem;
27
+ }