diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index 66591c9c..4ae8e338 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -5,12 +5,13 @@ site: homeUrl: &home_url /streaming/24.3/index.html components: # Agentic Data Plane component - - name: agentic-data-plane + - &adp_component + name: agentic-data-plane title: Agentic Data Plane - url: '#' + url: /agentic-data-plane/1.0/index.html versions: - &latest_version_adp - url: '#' + url: /agentic-data-plane/1.0/index.html version: '1.0' displayVersion: '1.0' asciidoc: @@ -21,6 +22,40 @@ site: color: '#7C3AED' order: 1 latestVersion: *latest_version_adp + # Data Platform umbrella component + - name: data-platform + title: Data Platform + url: '#' + versions: + - &latest_version_dp + url: '#' + version: '1.0' + displayVersion: '1.0' + asciidoc: + attributes: + component-metadata: + title: Data Platform + description: The streaming foundation for everything you build. + color: '#5239CC' + order: 2 + latestVersion: *latest_version_dp + # Self-Managed component - parent for Streaming and Connect + - name: self-managed + title: Self-Managed + url: '#' + versions: + - &latest_version_sm + url: '#' + version: '1.0' + displayVersion: '1.0' + asciidoc: + attributes: + component-metadata: + title: Self-Managed + description: Run Redpanda on your own infrastructure. + color: '#9F1239' + order: 1 + latestVersion: *latest_version_sm # Streaming component - under Data Platform (formerly Self-Managed/ROOT) - &component name: streaming @@ -103,8 +138,8 @@ page: url: *home_url home: true title: Brand’s Hardware & Software Requirements - component: *component - componentVersion: *component_version + component: *adp_component + componentVersion: *latest_version_adp version: '24.3' displayVersion: '24.3' module: ROOT diff --git a/src/css/doc.css b/src/css/doc.css index e47486a1..aa768a74 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -1765,7 +1765,7 @@ details[open] > summary { .back-to-top { /* Use fixed positioning to prevent layout shift when shown/hidden */ position: fixed; - bottom: 24px; + bottom: 100px; /* Increased to avoid overlapping pagination Next button */ right: 24px; z-index: 100; display: flex; @@ -1778,6 +1778,14 @@ details[open] > summary { transition: opacity 0.2s ease, visibility 0.2s ease; } +/* On mobile, position back-to-top even higher to clear pagination */ +@media screen and (max-width: 768px) { + .back-to-top { + bottom: 120px; + right: 16px; + } +} + .doc .button-bar { display: flex; gap: 10px; diff --git a/src/css/header.css b/src/css/header.css index 0f529831..f847d391 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -685,7 +685,7 @@ html[data-theme="dark"] .tb-overflow-divider { align-items: center; margin-left: 8px; color: var(--grey-600-new, #52525b); - font-size: calc(18 / var(--rem-base) * 1rem); + font-size: calc(15 / var(--rem-base) * 1rem); font-weight: 500; order: 1; flex: 1 1 auto; @@ -1063,6 +1063,7 @@ html[data-theme="dark"] .tb-link:hover { /* Log into Cloud link styling */ .tb-link-cloud svg { flex-shrink: 0; + margin-left: 5px; } /* Top nav dropdown (Ask a Human) */ diff --git a/src/css/nav.css b/src/css/nav.css index 446fd47a..ced5ae9b 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -179,6 +179,11 @@ html .nav-container.is-active { border-top: 1px solid var(--nav-border-color); } +/* Sidebar footer collapse button - always visible (overrides .nav-collapse display:none) */ +.sb-footer .sb-collapse-toggle.nav-collapse { + display: flex; +} + .nav-collapse:hover { opacity: 1; } @@ -228,11 +233,6 @@ html .nav-container.is-active { .nav-collapse { display: none; } - - /* Override for sidebar footer collapse button - keep it visible */ - .sb-footer .sb-collapse-toggle { - display: inline-grid; - } } .nav-container.is-active { diff --git a/src/css/product-switcher.css b/src/css/product-switcher.css index 4fee9e43..4ad394fc 100644 --- a/src/css/product-switcher.css +++ b/src/css/product-switcher.css @@ -15,25 +15,56 @@ gap: 10px; width: 100%; padding: 10px 14px; - background: var(--component-color, #4f46e5); - border: none; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; cursor: pointer; - transition: background 0.15s, filter 0.15s; + transition: background 0.15s, border-color 0.15s; text-align: left; } .sb-product-switch:hover { - filter: brightness(1.1); + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.12); } .sb-product-switch.is-open { - filter: brightness(1.15); + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.15); } -/* Small color indicator chip - hidden when button has full color bg */ +/* Color indicator icon with component color background */ .sb-product-chip { - display: none; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: var(--component-color, #4f46e5); + border-radius: 6px; + flex-shrink: 0; +} + +.sb-product-chip svg { + width: 16px; + height: 16px; + color: #fff; +} + +/* Scale SVG icons proportionally for smaller dropdown chips */ +.sb-product-opt .sb-product-chip svg { + width: 6px; + height: 6px; +} + +.sb-product-opt.sb-product-child .sb-product-chip svg { + width: 5px; + height: 5px; +} + +.sb-product-opt.sb-product-grandchild .sb-product-chip svg { + width: 4px; + height: 4px; } .sb-product-name { @@ -42,7 +73,7 @@ align-items: flex-start; gap: 1px; font-size: calc(14 / var(--rem-base) * 1rem); - color: #fff; + color: #e8eef6; font-weight: 500; flex: 1; letter-spacing: -0.01em; @@ -59,7 +90,7 @@ .sb-product-parent-label { font-size: calc(12 / var(--rem-base) * 1rem); font-weight: 500; - color: rgba(255, 255, 255, 0.6); + color: #9aa8bc; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; @@ -67,7 +98,7 @@ .sb-product-child-label { font-size: calc(16 / var(--rem-base) * 1rem); - color: #fff; + color: #e8eef6; line-height: 1.2; } @@ -124,38 +155,53 @@ color: #fff; } -/* Light theme overrides - same solid color, white text */ +/* Light theme overrides - neutral background with colored icon chip */ .sidebar[data-theme="light"] .sb-product-switch { - background: var(--component-color, #4f46e5); + background: rgba(0, 0, 0, 0.04); + border-color: rgba(0, 0, 0, 0.08); } .sidebar[data-theme="light"] .sb-product-switch:hover { - filter: brightness(1.1); + background: rgba(0, 0, 0, 0.06); + border-color: rgba(0, 0, 0, 0.12); +} + +.sidebar[data-theme="light"] .sb-product-switch.is-open { + background: rgba(0, 0, 0, 0.08); + border-color: rgba(0, 0, 0, 0.15); } .sidebar[data-theme="light"] .sb-product-name { - color: #fff; + color: var(--grey-900-new, var(--grey-900, #181818)); +} + +.sidebar[data-theme="light"] .sb-product-parent-label { + color: var(--grey-500-new, var(--grey-500, #79797d)); +} + +.sidebar[data-theme="light"] .sb-product-child-label { + color: var(--grey-900-new, var(--grey-900, #181818)); } .sidebar[data-theme="light"] .sb-product-section { - color: rgba(255, 255, 255, 0.7); + color: var(--grey-500-new, var(--grey-500, #79797d)); } .sidebar[data-theme="light"] .sb-product-title { - color: #fff; + color: var(--grey-900-new, var(--grey-900, #181818)); } .sidebar[data-theme="light"] .sb-product-caret { - color: rgba(255, 255, 255, 0.7); + color: var(--grey-500-new, var(--grey-500, #79797d)); } .sidebar[data-theme="light"] .sb-product-caret.rot { - color: #fff; + color: var(--grey-900-new, var(--grey-900, #181818)); } .sidebar[data-theme="light"] .sb-product-version { - background: rgba(255, 255, 255, 0.15); - color: #fff; + background: color-mix(in oklab, var(--component-color, #4f46e5) 15%, transparent); + color: var(--grey-700-new, var(--grey-700, #505053)); } /* Dropdown menu */ diff --git a/src/partials/algolia-script.hbs b/src/partials/algolia-script.hbs index 1025266a..b2610ff7 100644 --- a/src/partials/algolia-script.hbs +++ b/src/partials/algolia-script.hbs @@ -766,7 +766,7 @@ function initAlgolia() { return html`
No results for ${state.query}

- Believe this query should return results? + Believe this query should return results?${' '} Let us know . diff --git a/src/partials/product-switcher.hbs b/src/partials/product-switcher.hbs index 1e82632d..40c2f131 100644 --- a/src/partials/product-switcher.hbs +++ b/src/partials/product-switcher.hbs @@ -48,17 +48,23 @@ > {{!-- For Labs pages, show "Product Docs" instead of "Labs" --}} {{#if (eq page.component.name 'labs')}} - + + + View Product Docs {{else if (eq page.attributes.role 'home')}} {{!-- Home page: show ADP as current product --}} - + + + Agentic Data Plane {{else if (eq page.component.name 'cloud-data-platform')}} {{!-- Cloud pages: show hierarchy "Data Platform > Cloud" --}} {{#with (find-component site 'cloud-data-platform')}} {{#with (get-component-header-data this)}} - + + + {{/with}} {{/with}} @@ -77,7 +83,9 @@ {{!-- Self-Managed pages (Streaming, Connect, Self-Managed home): show hierarchy "Data Platform > Self-Managed" --}} {{#with (find-component site 'self-managed')}} {{#with (get-component-header-data this)}} - + + + {{/with}} {{/with}} @@ -96,7 +104,19 @@ {{!-- Data Platform landing: show "Data Platform" --}} {{#with (find-component site 'data-platform')}} {{#with (get-component-header-data this)}} - + + + + {{this.title}} + {{/with}} + {{/with}} + {{else if (eq page.component.name 'agentic-data-plane')}} + {{!-- ADP pages: show sparkles icon --}} + {{#with (find-component site 'agentic-data-plane')}} + {{#with (get-component-header-data this)}} + + + {{this.title}} {{/with}} {{/with}} @@ -104,12 +124,16 @@ {{!-- Other components: show their product name --}} {{#with page.component}} {{#with (get-header-data @root.page)}} - + + + {{#if this.title}}{{{this.title}}}{{else}}{{{../title}}}{{/if}} {{else}} - + + + {{{this.title}}} {{/with}} {{/with}}