Skip to content

Commit b466aa7

Browse files
colegoldsmithmlr
colegoldsmith
and
mlr
authored
Global Nav (#124)
* new global nav * remove package * Add unified draft trigger workflow * Add branch to unified draft trigger push arguments * scrolling nav buttons * highlight active menu item * shift dropdown middleware * conditionally render global nav styles * version switcher, component title link, dropdown a11y improvements * title styles * page version changes * Undo unintentional changes to draft workflow * design review changes * icon color change * global nav change --------- Co-authored-by: Ronnie Miller <[email protected]>
1 parent cc59403 commit b466aa7

24 files changed

+474
-75
lines changed

‎preview-src/ui-model.yml‎

Lines changed: 94 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,102 @@ site:
88
homeUrl: &home_url http://localhost:5252
99
components:
1010
- &component
11-
name: datastax
12-
title: PREVIEW Datastax Docs
13-
url: '#'
11+
name: xyz
12+
title: &component_title Preview Docs
13+
url: /xyz/6.0/index.html
1414
versions:
15-
- &latest_version
16-
url: *home_url
17-
version: 'latest'
18-
displayVersion: 'latest'
19-
latestVersion: *latest_version
15+
- &latest_version_xyz
16+
url: /xyz/6.0/index.html
17+
version: '6.0'
18+
displayVersion: '6.0'
19+
- &component_version
20+
title: *component_title
21+
url: '#'
22+
version: '5.2'
23+
displayVersion: '5.2'
24+
- url: '#'
25+
version: '5.1'
26+
displayVersion: '5.1'
27+
- url: '#'
28+
version: '5.0'
29+
displayVersion: '5.0'
30+
latestVersion: *latest_version_xyz
31+
keys:
32+
globalNav: |
33+
[
34+
{
35+
"title": "Docs Home",
36+
"url": "#",
37+
"home": true
38+
},
39+
{
40+
"title": "Astra DB",
41+
"items": [
42+
{ "title": "Serverless", "url": "#" },
43+
{ "title": "Dedicated", "url": "#" },
44+
{ "title": "CLI", "url": "#" }
45+
]
46+
},
47+
{
48+
"title": "RAGStack",
49+
"url": "#"
50+
},
51+
{
52+
"title": "DSE",
53+
"items": [
54+
{ "title": "Mission Control", "url": "#" },
55+
{ "title": "DSE 6.8", "url": "#" },
56+
{ "title": "DSE 5.1", "url": "#" },
57+
{ "title": "CLI", "url": "#" }
58+
]
59+
},
60+
{
61+
"title": "Streaming",
62+
"items": [
63+
{ "title": "Astra Streaming", "url": "#" },
64+
{ "title": "Luna Streaming", "url": "#" }
65+
]
66+
},
67+
{
68+
"title": "Open Source",
69+
"items": [
70+
{ "title": "Apache Pulsar Connector", "url": "#" },
71+
{ "title": "CDC for Cassandra", "url": "#" },
72+
{ "title": "K8ssandra", "url": "#" },
73+
{ "title": "Stargate", "url": "#" },
74+
{ "title": "Starlight for JMS", "url": "#" },
75+
{ "title": "Starlight for Kafka", "url": "#" },
76+
{ "title": "Starlight for Rabbit MQ", "url": "#" }
77+
]
78+
}
79+
]
2080
page:
21-
src:
22-
component: *component
23-
version: *latest_version
81+
url: *home_url
82+
home: true
83+
title: Brand&#8217;s Hardware &amp; Software Requirements
84+
component: *component
85+
componentVersion: *component_version
86+
version: '5.2'
87+
displayVersion: '5.2'
88+
module: ROOT
89+
relativeSrcPath: index.adoc
90+
editUrl: http://example.com/project-xyz/blob/main/index.adoc
91+
origin:
92+
private: false
93+
versions:
94+
- version: '6.0'
95+
displayVersion: '6.0'
96+
url: '#'
97+
- version: '5.2'
98+
displayVersion: '5.2'
99+
url: '#'
100+
- version: '5.1'
101+
displayVersion: '5.1'
102+
url: '#'
103+
- version: '5.0'
104+
displayVersion: '5.0'
105+
missing: true
106+
url: '#'
24107
navigation:
25108
- content: Page Templates
26109
items:

‎src/css/asciidoc/doc.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
.doc h4 {
4141
@apply text-h4;
4242
color: var(--ds-text-tertiary);
43-
margin: calc(32/var(--rem-base)*1rem) 0 0;
43+
margin: calc(32 / var(--rem-base) * 1rem) 0 0;
4444
}
4545

4646
.doc h5 {
@@ -63,12 +63,12 @@
6363

6464
.doc h2:not(.discrete) {
6565
border-bottom: 1px solid var(--ds-divider);
66-
margin: calc(80/var(--rem-base)*1rem) 0 0;
66+
margin: calc(80 / var(--rem-base) * 1rem) 0 0;
6767
padding: 0 0 calc(16 / var(--rem-base) * 1rem);
6868
}
6969

7070
.doc h3:not(.discrete) {
71-
margin: calc(64/var(--rem-base)*1rem) 0 0;
71+
margin: calc(64 / var(--rem-base) * 1rem) 0 0;
7272
}
7373

7474
.doc h4:not(.discrete) {
@@ -85,7 +85,7 @@
8585
justify-content: flex-end;
8686
align-items: center;
8787
gap: var(--ds-space-h);
88-
scroll-margin-top: 6rem;
88+
scroll-margin-top: 9rem;
8989
}
9090

9191
.doc h1 .anchor,

‎src/css/color.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@
1111
color: var(--ds-text-tertiary);
1212
}
1313

14-
.text-link {
14+
.text-inverse {
15+
color: var(--ds-text-inverse);
16+
}
17+
18+
.text-link,
19+
.color-primary {
1520
color: var(--ds-primary-main);
1621
}
1722

‎src/css/components/btn.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
@apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] active:bg-[var(--ds-primary-solid-active-bg)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)];
1616
}
1717

18+
.btn-primary.btn-soft {
19+
@apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] active:bg-[var(--ds-primary-soft-active-bg)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)];
20+
}
21+
1822
.btn-neutral.btn-outlined {
1923
@apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] active:border-[var(--ds-neutral-outlined-active-border)] active:bg-[var(--ds-neutral-outlined-active-bg)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)];
2024
}
@@ -31,6 +35,10 @@
3135
@apply h-10 w-10 p-0;
3236
}
3337

38+
.btn-small {
39+
@apply h-8 px-2 py-1;
40+
}
41+
3442
.btn-leading-icon {
3543
@apply mr-2 flex;
3644
}

‎src/css/components/dropdown.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@layer components {
2+
.dropdown .dropdown-content {
3+
@apply invisible fixed left-0 top-0 origin-top scale-95 transform opacity-0 motion-safe:transition motion-safe:duration-300 motion-safe:ease-in-out;
4+
5+
/* Shadow-100 */
6+
box-shadow:
7+
0px 4px 5px 0px rgba(10, 10, 10, 0.08),
8+
0px 1px 10px 0px rgba(10, 10, 10, 0.08),
9+
0px 2px 4px 0px rgba(32, 41, 58, 0.14);
10+
}
11+
12+
.dropdown .dropdown-content.active {
13+
@apply visible scale-100 opacity-100;
14+
}
15+
}

‎src/css/global-nav.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.global-nav > .scroll-btn-left,
2+
.global-nav > .scroll-btn-right {
3+
@apply invisible absolute opacity-0 motion-safe:transition-all;
4+
5+
&.active {
6+
@apply visible opacity-100;
7+
}
8+
}
9+
10+
.global-nav > .scroll-btn-left {
11+
@apply left-0 rounded-tl py-3 pl-2 pr-4;
12+
}
13+
14+
.global-nav > .scroll-btn-right {
15+
@apply right-0 rounded-tr py-3 pl-4 pr-2;
16+
}
17+
18+
html[data-theme="light"] .global-nav > .scroll-btn-left {
19+
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255) 50%);
20+
}
21+
22+
html[data-theme="dark"] .global-nav > .scroll-btn-left {
23+
background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
24+
}
25+
26+
html[data-theme="light"] .global-nav > .scroll-btn-right {
27+
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255) 50%);
28+
}
29+
30+
html[data-theme="dark"] .global-nav > .scroll-btn-right {
31+
background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
32+
}

‎src/css/site.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import "components/input.css";
1111
@import "components/drawer.css";
1212
@import "components/collapse.css";
13+
@import "components/dropdown.css";
1314
@import "typeface/typeface-material-icons-outlined.css";
1415
@import "typeface/typeface-roboto-flex.css";
1516
@import "typeface/typeface-sora.css";
@@ -23,6 +24,7 @@
2324
@import "highlight.css";
2425
@import "print.css";
2526
@import "docsearch.css";
27+
@import "global-nav.css";
2628

2729
@tailwind base;
2830
@tailwind components;

‎src/css/vars/light.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
--ds-focus-visible: var(--ds-neutral-900);
44
--ds-background-body: var(--ds-common-white);
55
--ds-background-level1: var(--ds-neutral-0);
6-
--ds-background-level2: var(--ds-neutral-50);
7-
--ds-background-level3: var(--ds-neutral-100);
6+
--ds-background-level2: var(--ds-neutral-100);
7+
--ds-background-level3: var(--ds-neutral-300);
88
--ds-background-surface: var(--ds-common-white);
99
--ds-background-tooltip: var(--ds-neutral-900);
1010
--ds-background-backdrop: rgba(0, 0, 0, 0.6);
@@ -42,10 +42,10 @@
4242
--ds-neutral-outlined-disabled-color: var(--ds-neutral-300);
4343
--ds-neutral-outlined-hover-bg: var(--ds-neutral-0);
4444
--ds-neutral-outlined-hover-border: var(--ds-neutral-900);
45-
--ds-neutral-plain-active-bg: var(--ds-neutral-200);
45+
--ds-neutral-plain-active-bg: var(--ds-neutral-100);
4646
--ds-neutral-plain-color: var(--ds-neutral-900);
4747
--ds-neutral-plain-disabled-color: var(--ds-neutral-200);
48-
--ds-neutral-plain-hover-bg: var(--ds-neutral-100);
48+
--ds-neutral-plain-hover-bg: var(--ds-neutral-0);
4949
--ds-neutral-soft-active-bg: var(--ds-neutral-300);
5050
--ds-neutral-soft-bg: var(--ds-neutral-0);
5151
--ds-neutral-soft-color: var(--ds-neutral-900);

‎src/css/vars/vars.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
--ds-neutral-200: #ced0d2;
4242
--ds-neutral-300: #a6aaae;
4343
--ds-neutral-400: #898d91;
44-
--ds-neutral-50: #edeeee;
4544
--ds-neutral-500: #6b6f73;
4645
--ds-neutral-600: #5a5d60;
4746
--ds-neutral-700: #494a4d;

‎src/helpers/global-nav-active.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use strict'
2+
3+
module.exports = module.exports = (navItem, {
4+
data: {
5+
root: { page },
6+
},
7+
}) => {
8+
const pageVersion = page.componentVersion?.version
9+
const pageComponent = page.component?.name
10+
11+
const matchesComponentAndVersion = (item) => {
12+
if (pageVersion) {
13+
return item.component === pageComponent && item.version === pageVersion
14+
} else {
15+
return item.component === pageComponent
16+
}
17+
}
18+
19+
if (navItem.component) {
20+
return matchesComponentAndVersion(navItem)
21+
}
22+
23+
if (navItem.items) {
24+
return navItem.items.some(matchesComponentAndVersion)
25+
}
26+
27+
return false
28+
}

0 commit comments

Comments
 (0)