From e099b50031ef457b23e9931152cf62d90d8a3f70 Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Fri, 26 Apr 2024 14:26:27 -0500 Subject: [PATCH 01/15] new global nav --- package-lock.json | 51 +++++++++++++ package.json | 1 + preview-src/ui-model.yml | 68 ++++++++++++++++++ src/css/components/dropdown.css | 15 ++++ src/css/site.css | 1 + src/css/vars/light.css | 8 +-- src/css/vars/vars.css | 1 - src/helpers/global-nav-active.js | 11 +++ src/helpers/global-nav.js | 41 +++++++++++ src/helpers/{isLast.js => is-last.js} | 0 ...ontainsUrl.js => nav-tree-contains-url.js} | 0 src/js/09-dropdown.js | 72 +++++++++++++++++++ src/partials/body-end-scripts.hbs | 2 + src/partials/body-start-scripts.hbs | 14 ++-- src/partials/body.hbs | 4 +- src/partials/breadcrumbs.hbs | 2 +- src/partials/global-nav.hbs | 34 +++++++++ src/partials/nav-tree.hbs | 4 +- src/partials/navbar.hbs | 59 +++++++-------- src/partials/toc.hbs | 2 +- 20 files changed, 345 insertions(+), 45 deletions(-) create mode 100644 src/css/components/dropdown.css create mode 100644 src/helpers/global-nav-active.js create mode 100644 src/helpers/global-nav.js rename src/helpers/{isLast.js => is-last.js} (100%) rename src/helpers/{navTreeContainsUrl.js => nav-tree-contains-url.js} (100%) create mode 100644 src/js/09-dropdown.js create mode 100644 src/partials/global-nav.hbs diff --git a/package-lock.json b/package-lock.json index 4a56d4da..0cec960f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "@antora/logger": "^3.1.4", "@asciidoctor/core": "~2.2", "@asciidoctor/tabs": "1.0.0-beta.6", + "@floating-ui/dom": "^1.6.3", "@fontsource-variable/roboto-flex": "~5.0", "@fontsource-variable/sora": "^5.0.15", "@fontsource/material-icons-outlined": "~5.0", @@ -423,6 +424,31 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "dev": true, + "dependencies": { + "@floating-ui/utils": "^0.2.1" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==", + "dev": true + }, "node_modules/@fontsource-variable/roboto-flex": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-flex/-/roboto-flex-5.0.8.tgz", @@ -16558,6 +16584,31 @@ "integrity": "sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==", "dev": true }, + "@floating-ui/core": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "dev": true, + "requires": { + "@floating-ui/utils": "^0.2.1" + } + }, + "@floating-ui/dom": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "dev": true, + "requires": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==", + "dev": true + }, "@fontsource-variable/roboto-flex": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-flex/-/roboto-flex-5.0.8.tgz", diff --git a/package.json b/package.json index 1ab70bb1..fc3da55f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@antora/logger": "^3.1.4", "@asciidoctor/core": "~2.2", "@asciidoctor/tabs": "1.0.0-beta.6", + "@floating-ui/dom": "^1.6.3", "@fontsource-variable/roboto-flex": "~5.0", "@fontsource-variable/sora": "^5.0.15", "@fontsource/material-icons-outlined": "~5.0", diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index 8a45c132..45e69a31 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -17,6 +17,74 @@ site: version: 'latest' displayVersion: 'latest' latestVersion: *latest_version + keys: + # globalNav: | + # [ + # { + # "title": "Docs Home", + # "url": "#" + # }, + # { + # "title": "Neat", + # "url": "https://google.com" + # }, + # { + # "title": "Astra DB", + # "items": [ + # { "title": "Serverless", "url": "#" }, + # { "title": "Dedicated", "url": "#" }, + # { "title": "CLI", "url": "#" }, + # { "title": "Cool", "url": "https://google.com" } + # ] + # } + # ] + globalNav: | + [ + { + "title": "Docs Home", + "url": "#" + }, + { + "title": "Astra DB", + "items": [ + { "title": "Serverless", "url": "#" }, + { "title": "Dedicated", "url": "#" }, + { "title": "CLI", "url": "#" } + ] + }, + { + "title": "RAGStack", + "url": "#" + }, + { + "title": "DSE", + "items": [ + { "title": "Mission Control", "url": "#" }, + { "title": "DSE 6.8", "url": "#" }, + { "title": "DSE 5.1", "url": "#" }, + { "title": "CLI", "url": "#" } + ] + }, + { + "title": "Streaming", + "items": [ + { "title": "Astra Streaming", "url": "#" }, + { "title": "Luna Streaming", "url": "#" } + ] + }, + { + "title": "Open Source", + "items": [ + { "title": "Apache Pulsar Connector", "url": "#" }, + { "title": "CDC for Cassandra", "url": "#" }, + { "title": "K8ssandra", "url": "#" }, + { "title": "Stargate", "url": "#" }, + { "title": "Starlight for JMS", "url": "#" }, + { "title": "Starlight for Kafka", "url": "#" }, + { "title": "Starlight for Rabbit MQ", "url": "#" } + ] + } + ] page: src: component: *component diff --git a/src/css/components/dropdown.css b/src/css/components/dropdown.css new file mode 100644 index 00000000..584db937 --- /dev/null +++ b/src/css/components/dropdown.css @@ -0,0 +1,15 @@ +@layer components { + .dropdown .dropdown-content { + @apply fixed top-0 left-0 invisible opacity-0 origin-top scale-95 transform transition duration-200 ease-out; + + /* shadow-300 */ + box-shadow: + 0px 8px 10px 0px rgba(10, 10, 10, 0.08), + 0px 4px 14px 0px rgba(10, 10, 10, 0.08), + 0px 6px 16px 0px rgba(10, 10, 10, 0.12); + } + + .dropdown .dropdown-content.active { + @apply visible opacity-100 scale-100; + } +} diff --git a/src/css/site.css b/src/css/site.css index b710a1c5..5caa8e62 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -10,6 +10,7 @@ @import "components/input.css"; @import "components/drawer.css"; @import "components/collapse.css"; +@import "components/dropdown.css"; @import "typeface/typeface-material-icons-outlined.css"; @import "typeface/typeface-roboto-flex.css"; @import "typeface/typeface-sora.css"; diff --git a/src/css/vars/light.css b/src/css/vars/light.css index 11e013b4..3840271c 100644 --- a/src/css/vars/light.css +++ b/src/css/vars/light.css @@ -3,8 +3,8 @@ --ds-focus-visible: var(--ds-neutral-900); --ds-background-body: var(--ds-common-white); --ds-background-level1: var(--ds-neutral-0); - --ds-background-level2: var(--ds-neutral-50); - --ds-background-level3: var(--ds-neutral-100); + --ds-background-level2: var(--ds-neutral-100); + --ds-background-level3: var(--ds-neutral-300); --ds-background-surface: var(--ds-common-white); --ds-background-tooltip: var(--ds-neutral-900); --ds-background-backdrop: rgba(0, 0, 0, 0.6); @@ -42,10 +42,10 @@ --ds-neutral-outlined-disabled-color: var(--ds-neutral-300); --ds-neutral-outlined-hover-bg: var(--ds-neutral-0); --ds-neutral-outlined-hover-border: var(--ds-neutral-900); - --ds-neutral-plain-active-bg: var(--ds-neutral-200); + --ds-neutral-plain-active-bg: var(--ds-neutral-100); --ds-neutral-plain-color: var(--ds-neutral-900); --ds-neutral-plain-disabled-color: var(--ds-neutral-200); - --ds-neutral-plain-hover-bg: var(--ds-neutral-100); + --ds-neutral-plain-hover-bg: var(--ds-neutral-0); --ds-neutral-soft-active-bg: var(--ds-neutral-300); --ds-neutral-soft-bg: var(--ds-neutral-0); --ds-neutral-soft-color: var(--ds-neutral-900); diff --git a/src/css/vars/vars.css b/src/css/vars/vars.css index 63439ca5..db294d1c 100644 --- a/src/css/vars/vars.css +++ b/src/css/vars/vars.css @@ -41,7 +41,6 @@ --ds-neutral-200: #ced0d2; --ds-neutral-300: #a6aaae; --ds-neutral-400: #898d91; - --ds-neutral-50: #edeeee; --ds-neutral-500: #6b6f73; --ds-neutral-600: #5a5d60; --ds-neutral-700: #494a4d; diff --git a/src/helpers/global-nav-active.js b/src/helpers/global-nav-active.js new file mode 100644 index 00000000..90584a17 --- /dev/null +++ b/src/helpers/global-nav-active.js @@ -0,0 +1,11 @@ +'use strict' + +module.exports = module.exports = (navItem, { + data: { + root: { page }, + }, +}) => { + if (navItem.component) return navItem.component === page.component?.name + if (navItem.items) return navItem.items.some((item) => item.component && item.component === page.component?.name) + return false +} diff --git a/src/helpers/global-nav.js b/src/helpers/global-nav.js new file mode 100644 index 00000000..2d5845b3 --- /dev/null +++ b/src/helpers/global-nav.js @@ -0,0 +1,41 @@ +'use strict' + +const mapNavList = (list, contentCatalog) => { + return list.map((item) => { + if (item.xref) { + const page = contentCatalog.resolvePage(item.xref) + if (page) item.url = page.pub.url + if (page?.src?.component) { + item.component = page.src.component + } + item.urlType = 'internal' + delete item.xref + } + if (item.url && item.url.startsWith('http')) item.urlType = 'external' + if (item.items) { + item.items = mapNavList(item.items, contentCatalog) + } + return item + }) +} + +module.exports = ({ + data: { + root: { + contentCatalog = { resolvePage: () => undefined, getComponent: () => undefined }, + site, + }, + }, +}) => { + let globalNav = site.keys.globalNav + + if (!globalNav) return [] + if (globalNav._compiled) return globalNav + + globalNav = mapNavList(JSON.parse(globalNav), contentCatalog) + + globalNav._compiled = true + + site.keys.globalNav = globalNav + return globalNav +} diff --git a/src/helpers/isLast.js b/src/helpers/is-last.js similarity index 100% rename from src/helpers/isLast.js rename to src/helpers/is-last.js diff --git a/src/helpers/navTreeContainsUrl.js b/src/helpers/nav-tree-contains-url.js similarity index 100% rename from src/helpers/navTreeContainsUrl.js rename to src/helpers/nav-tree-contains-url.js diff --git a/src/js/09-dropdown.js b/src/js/09-dropdown.js new file mode 100644 index 00000000..dad9ed3e --- /dev/null +++ b/src/js/09-dropdown.js @@ -0,0 +1,72 @@ +;(function () { + 'use strict' + + const { computePosition, autoPlacement } = window.FloatingUIDOM + + const dropdownFn = (trigger, dropdown, triggerType = 'click') => { + const update = () => { + computePosition(trigger, dropdown, { + strategy: 'fixed', + middleware: [ + autoPlacement({ alignment: 'start', allowedPlacements: ['bottom', 'bottom-start', 'bottom-end'] }), + ], + }).then(({ x, y }) => { + dropdown.style.left = `${x}px` + dropdown.style.top = `${y}px` + }) + } + + const show = () => { + dropdown.classList.add('active') + trigger.classList.add('active') + trigger.ariaExpanded = true + update() + } + + const hide = () => { + dropdown.classList.remove('active') + trigger.classList.remove('active') + trigger.ariaExpanded = false + } + + const toggle = () => { + dropdown.classList.toggle('active') + trigger.classList.toggle('active') + trigger.ariaExpanded = trigger.ariaExpanded !== 'true' + update() + } + + const clickOutside = (event) => { + if (event.target !== trigger && !trigger.contains(event.target)) { + hide() + } + } + + const blur = (event) => { + if (event.target !== dropdown && !dropdown.contains(event.target)) { + hide() + } + } + + if (triggerType === 'hover') { + [ + ['mouseenter', show], + ['mouseleave', hide], + ].forEach(([event, listener]) => { + trigger.addEventListener(event, listener) + dropdown.addEventListener(event, listener) + }) + } + + trigger.addEventListener('click', toggle) + document.body.addEventListener('click', clickOutside) + dropdown.addEventListener('blur', blur) + } + + document.querySelectorAll('.dropdown').forEach((dropdown) => { + const triggerType = dropdown.dataset.triggerType + const trigger = dropdown.querySelector('.dropdown-trigger') + const content = dropdown.querySelector('.dropdown-content') + dropdownFn(trigger, content, triggerType) + }) +})() diff --git a/src/partials/body-end-scripts.hbs b/src/partials/body-end-scripts.hbs index 3b44294a..bb7c184a 100644 --- a/src/partials/body-end-scripts.hbs +++ b/src/partials/body-end-scripts.hbs @@ -1,3 +1,5 @@ + + diff --git a/src/partials/body-start-scripts.hbs b/src/partials/body-start-scripts.hbs index adc8a48a..4e53990c 100644 --- a/src/partials/body-start-scripts.hbs +++ b/src/partials/body-start-scripts.hbs @@ -1,7 +1,11 @@ -{{!-- Add header scripts here --}} +{{! Add header scripts here }} {{#with site.keys.googleAnalytics}} - - - + + + {{/with}} diff --git a/src/partials/body.hbs b/src/partials/body.hbs index a79d94f4..6a31b570 100644 --- a/src/partials/body.hbs +++ b/src/partials/body.hbs @@ -2,10 +2,10 @@ {{> navbar}}
-
+
{{> main}}
-
+
{{> nav}}
diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs index 13628f84..5f46ccd5 100644 --- a/src/partials/breadcrumbs.hbs +++ b/src/partials/breadcrumbs.hbs @@ -9,7 +9,7 @@ {{/with}} {{#each page.breadcrumbs}} {{#if (and ./url (eq ./urlType 'internal'))}} - {{#if (isLast this ../page.breadcrumbs)}} + {{#if (is-last this ../page.breadcrumbs)}}
  • {{{./content}}}
    • {{else}}
  • diff --git a/src/partials/global-nav.hbs b/src/partials/global-nav.hbs new file mode 100644 index 00000000..bdcce059 --- /dev/null +++ b/src/partials/global-nav.hbs @@ -0,0 +1,34 @@ +{{#with (global-nav)}} + +{{/with}} \ No newline at end of file diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs index 5cdea06f..dca349b0 100644 --- a/src/partials/nav-tree.hbs +++ b/src/partials/nav-tree.hbs @@ -4,7 +4,7 @@ {{#if ./content}} {{#if ./items.length}}
  • - +
    {{{./content}}} expand_more @@ -16,7 +16,7 @@ {{else}}
  • {{#if ./url}} - diff --git a/src/partials/navbar.hbs b/src/partials/navbar.hbs index a80c226d..2e6ecf89 100644 --- a/src/partials/navbar.hbs +++ b/src/partials/navbar.hbs @@ -1,29 +1,30 @@ - \ No newline at end of file +
    + + {{> global-nav}} +
    \ No newline at end of file diff --git a/src/partials/toc.hbs b/src/partials/toc.hbs index 2762c520..8fc5ce55 100644 --- a/src/partials/toc.hbs +++ b/src/partials/toc.hbs @@ -1,6 +1,6 @@ {{#unless (or (eq page.layout 'full') (eq page.layout 'landing'))}}
    • {{/with}} diff --git a/src/partials/toc.hbs b/src/partials/toc.hbs index 1d9cfe1c..0d6aeb22 100644 --- a/src/partials/toc.hbs +++ b/src/partials/toc.hbs @@ -1,6 +1,6 @@ {{#unless (or (eq page.layout 'full') (eq page.layout 'landing'))}}
    {{/if}} - {{#if page.versions}} -

    Developer Resources

    -
    - {{> page-versions}} -
    - {{/if}}
    {{/unless}} From 14e5217582fcf685dd9bd85a37ec13cb2cd3c647 Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Wed, 1 May 2024 16:26:57 -0500 Subject: [PATCH 10/15] title styles --- src/css/color.css | 4 ++++ src/partials/global-nav.hbs | 6 +++--- src/partials/nav.hbs | 4 ++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/css/color.css b/src/css/color.css index f776aa77..740c0c19 100644 --- a/src/css/color.css +++ b/src/css/color.css @@ -11,6 +11,10 @@ color: var(--ds-text-tertiary); } + .text-inverse { + color: var(--ds-text-inverse); + } + .text-link, .color-primary { color: var(--ds-primary-main); diff --git a/src/partials/global-nav.hbs b/src/partials/global-nav.hbs index 1978e78c..38099ad3 100644 --- a/src/partials/global-nav.hbs +++ b/src/partials/global-nav.hbs @@ -3,7 +3,7 @@ {{#each this}} {{#if ./url}} {{{./title}}} @@ -11,9 +11,9 @@ {{/if}} {{#if ./items}}
    -