Add BYOC and Cloud platform badges for ADP documentation#376
Open
JakeSCahill wants to merge 32 commits into
Open
Add BYOC and Cloud platform badges for ADP documentation#376JakeSCahill wants to merge 32 commits into
JakeSCahill wants to merge 32 commits into
Conversation
- Add badge--byoc CSS class with blue styling for BYOC-only features - Add badge--cloud CSS class with purple styling for Cloud features - Define CSS variables for badge colors and backgrounds Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add availability block showing Cloud/BYOC support on ADP pages - Add info icon with Tippy.js tooltip explaining availability - Add BYOC and Cloud badge CSS variables for light/dark modes - Update article.hbs to render availability block for ADP pages - Minor fixes to header, nav, and TOC styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThis PR adds extensive UI and behavioral changes across docs: new badges and an availability block for BYOC/Cloud with theme-aware CSS variables and dark-mode overrides; a redesigned topbar, sidebar, breadcrumbs, footer, home page, and many component styles; updates to Bloblang Prism grammar; new Handlebars template branches and tooltip initialization for BYOC/Cloud badges; helper modules for BYOC/cloud/EOL detection and resource resolution; updated JS for Ask-AI/chat integration (window.openChatWithQuery), markdown dropdown positioning, nav show/hide, and chat React improvements; and build/task tweaks (PostCSS variable preservation, font globs). Sequence Diagram(s)sequenceDiagram
participant User as User
participant Page as Page Script (Ask UI)
participant Drawer as Chat Drawer (chat-panel)
participant Backend as Chat Service
User->>Page: Click "Ask AI" / submit ask form
Page->>Page: build aiPromptText from context (selection/code)
Page->>Drawer: call window.openChatWithQuery(aiPromptText, true)
Drawer->>Page: confirm opened / focus textarea
Drawer->>Backend: submit query (autoSubmit=true)
Backend-->>Drawer: respond with AI result
Drawer-->>User: display response
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests (beta)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
src/css/doc.css (1)
1012-1018: Add the same fallback for the info icon color.Line 1017 uses
--availability-block-borderwithout the fallback used on Line 993, so the icon color can become invalid if a theme omits that variable.🎨 Proposed fallback
.doc .availability-block .availability-info { display: inline-flex; align-items: center; margin-left: 0.5rem; cursor: help; - color: var(--availability-block-border); + color: var(--availability-block-border, var(--note-border-color)); vertical-align: middle; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/css/doc.css` around lines 1012 - 1018, The color declaration inside the .doc .availability-block .availability-info rule uses var(--availability-block-border) without a fallback; update the color property to use the same fallback pattern as earlier (e.g. var(--availability-block-border, var(--availability-border))) so the info icon color remains valid when --availability-block-border is not defined. Locate the .doc .availability-block .availability-info selector and replace the color value to include the fallback variable.src/partials/article.hbs (1)
80-96: Consider attribute-driving the tooltip content and consolidating the init script.Two small consistency nits for this new inline block:
- The tooltip copy is hardcoded in the template, whereas the existing BYOC/Cloud/beta/limited-availability tooltips read from page attributes (e.g.,
page.attributes.byoc-textat Line 170,page.attributes.cloud-only-textat Line 196). Using something likepage.attributes.availability-textwith a sensible default keeps content editable without a UI rebuild and matches the pattern already established in this file.- Initialization is split across two
DOMContentLoadedhandlers (here and the one starting at Line 103). Folding this tippy init into the existing handler reduces duplicate listeners and keeps all tooltip setup in one place. Note that the existing handler bails early at Line 107–109 if.metadata--main/.metadata--navare missing, so if you consolidate, initialize the availability-info tooltip before that early return (or adjust the guard) so ADP pages still get it.Both are optional; leaving as-is is functional.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/partials/article.hbs` around lines 80 - 96, Replace the hardcoded tooltip text and separate listener by reading content from page.attributes.availability-text (with the current hardcoded string as a sensible default) when creating the tooltip for the element selected as availabilityInfo, and move the tippy initialization into the existing DOMContentLoaded handler that already sets up other tooltips; ensure you reference availabilityInfo and call tippy(...) with the same options but initialize it before the early return that checks for .metadata--main/.metadata--nav (or adjust that guard) so ADP pages still get the availability tooltip.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/css/header.css`:
- Around line 153-155: The desktop override for right-side nav items still uses
var(--navbar-font-color) so custom header text colors from --nav-text-color
aren't applied; update the selector .navbar-end > .navbar-item and .navbar-end
.navbar-link to use color: var(--nav-text-color, var(--navbar-menu-font-color))
(matching the other .navbar-item/.navbar-link rule) so desktop right-side nav
items inherit the custom header text color.
In `@src/css/vars.css`:
- Around line 185-195: Override the badge label text color variables in the
dark-theme block so the bright BYOC/Cloud backgrounds keep good contrast:
add/override --byoc-label-color and --cloud-label-color inside
html[data-theme=dark] (matching the existing --byoc-label-background and
--cloud-label-background variables) and set them to a dark, high-contrast color
instead of inheriting `#fff`; update any usages of these badges that read the
label color variable (e.g., the BYOC/Cloud badge styles that reference
--byoc-label-color / --cloud-label-color) to ensure the new variables are
applied.
In `@src/partials/article.hbs`:
- Around line 55-71: The availability block (class "availability-block" in
article.hbs) fails to render any platform when both page.attributes.byoc and
page.attributes.cloud-only are true; change the conditional logic to explicitly
handle all four states (both true, only byoc, only cloud-only, neither) so the
both-true case emits a sensible label (e.g., "Cloud, BYOC"); implement this by
replacing the nested if/unless chain with an explicit sequence: if both
page.attributes.byoc and page.attributes.cloud-only => "Cloud, BYOC", else if
page.attributes.byoc => "BYOC", else if page.attributes.cloud-only => "Cloud",
else => "Cloud, BYOC" (or equivalent join of computed platforms) so the
availability-block always shows a value.
In `@src/partials/header-content.hbs`:
- Line 18: The anchor element rendering the navbar item currently injects an
inline style for non-standalone pages (using
`@root.page.component.latest.asciidoc.attributes.page-header-data.text-color`),
which overrides stylesheet hover/current states; update the template so the
inline style is only applied for standalone widgets (keep the existing
`@root.isStandaloneWidget` branch that sets style="color: white;") and remove the
else-if branch that sets color from page-header-data.text-color, relying on the
existing --nav-text-color set elsewhere to control non-standalone link color and
hover/is-current states; locate the anchor with class "navbar-item {{`#if` (eq
this.title `@root.page.component.title`)}}is-current{{/if}}" and remove the
non-standalone inline color injection.
In `@src/partials/nav-tree.hbs`:
- Line 8: Add two new helpers is-byoc-feature.js and is-cloud-feature.js in
src/helpers modeled after is-beta-feature.js and is-enterprise.js that use
contentCatalog to look up the target page by URL and return true when target
page attributes include page-byoc and page-cloud-only respectively; then update
the ADP guard logic used in nav-tree.hbs so it checks the target nav item's
attributes (via the same helper/lookup) rather than `@root.page.attributes.adp`,
ensuring BYOC/Cloud badge classes are suppressed only when the target page is an
ADP page.
---
Nitpick comments:
In `@src/css/doc.css`:
- Around line 1012-1018: The color declaration inside the .doc
.availability-block .availability-info rule uses
var(--availability-block-border) without a fallback; update the color property
to use the same fallback pattern as earlier (e.g.
var(--availability-block-border, var(--availability-border))) so the info icon
color remains valid when --availability-block-border is not defined. Locate the
.doc .availability-block .availability-info selector and replace the color value
to include the fallback variable.
In `@src/partials/article.hbs`:
- Around line 80-96: Replace the hardcoded tooltip text and separate listener by
reading content from page.attributes.availability-text (with the current
hardcoded string as a sensible default) when creating the tooltip for the
element selected as availabilityInfo, and move the tippy initialization into the
existing DOMContentLoaded handler that already sets up other tooltips; ensure
you reference availabilityInfo and call tippy(...) with the same options but
initialize it before the early return that checks for
.metadata--main/.metadata--nav (or adjust that guard) so ADP pages still get the
availability tooltip.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2920838c-1e2e-46cf-b4e4-3cf4e6cf2378
📒 Files selected for processing (10)
src/css/doc.csssrc/css/header.csssrc/css/metadata.csssrc/css/nav.csssrc/css/vars.csssrc/js/vendor/prism/prism-bloblang.jssrc/partials/article.hbssrc/partials/header-content.hbssrc/partials/nav-tree.hbssrc/partials/toc.hbs
This was referenced Apr 23, 2026
- Add is-byoc-feature.js helper to detect page-byoc attribute - Add is-cloud-feature.js helper to detect page-cloud-only attribute - These helpers enable nav badge display for ADP documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix header.css: Use --nav-text-color for navbar-end items - Fix vars.css: Add dark mode label color overrides for BYOC/Cloud badges - Fix article.hbs: Handle case when both byoc and cloud-only attributes are true - Fix header-content.hbs: Remove inline color that overrides CSS hover states - Fix doc.css: Add fallback for availability info icon color Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
ADP Cloud is descoped from the 2026-06-15 GA. With BYOC as the only deployment shape, the "Available in: Cloud, BYOC" / "Available in: BYOC" admonition no longer informs the reader and adds visual noise on every ADP page. Drop the entire `page.attributes.adp` availability block from src/partials/article.hbs. Other badges (beta, limited-availability, context-switcher, BYOC/Cloud labels for non-ADP pages) keep working unchanged. Companion PR: redpanda-data/adp-docs#13 ships the same change locally via Antora's supplemental_files mechanism so the deploy preview is fixed immediately. Once a new docs-ui release tag is cut from this branch and the adp-docs / docs-site playbooks are bumped to it, the supplemental override in adp-docs becomes redundant and can be deleted. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ature/badge-byoc-only
JakeSCahill
force-pushed
the
feature/badge-byoc-only
branch
from
699c046 to
2a4cff4
Compare
Adds inline status badges in the sticky header for ADP pages when features are limited to specific platforms: - "Only in BYOC" badge when :page-byoc-only: true is set - "Only in Cloud" badge when :page-cloud-only: true is set Both attributes require :adp: true (set in ADP component antora.yml). Badges are mutually exclusive - set only one. Also includes: - Version dropdown alignment fix (aligns left with button) - Removed the availability block in favor of compact inline badges
JakeSCahill
force-pushed
the
feature/badge-byoc-only
branch
from
2a4cff4 to
30917d0
Compare
JakeSCahill
changed the title
This was referenced May 7, 2026
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 12
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/partials/nav-explore.hbs (1)
16-33:⚠️ Potential issue | 🟠 Major | ⚡ Quick winThe default-version path renders an empty dropdown.
When the current version is
'default'andpage.versions.length > 1, line 6 still makes this a dropdown, but lines 19-32 skip rendering every option. That leaves a visible chevron with an empty menu. Remove that inner guard or render the default-version alternatives there as well.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/partials/nav-explore.hbs` around lines 16 - 33, The dropdown shows a chevron but no items because the inner guard "{{`#if` (ne page.componentVersion.displayVersion 'default')}}" prevents rendering when the current displayVersion is 'default'; remove that guard (or change the logic to always iterate page.versions) so the template always runs the "{{`#each` page.versions}}" block and emits version links (still skipping the current version via "{{`#if` (ne ./version `@root.page.version`)}}" and using "{{`#with` (resolve-resource ./url) as |targetPage|}}", the "{{{relativize ../url}}}" href, and the existing "{{../displayVersion}}"/"{{`#if` (is-eol ../asciidoc.attributes)}}" handling).src/partials/article.hbs (1)
95-220:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winCritical: undefined
metadataContainerbreaks all tooltip/observer setup.
metadataContaineris used on Line 154, Line 180, and Line 219 but never defined. This will throw at runtime and abort the entireDOMContentLoadedhandler. Also,navMetadataContainer.querySelector(...)is called without guarding null.💡 Suggested fix
document.addEventListener("DOMContentLoaded", () => { const stickyHeader = document.querySelector(".component-indicator-sticky"); + const metadataContainer = document.querySelector(".metadata--main"); const navMetadataContainer = document.querySelector(".metadata--nav"); @@ - const topByocBadge = metadataContainer.querySelector(".byoc-label p"); - const navByocBadge = navMetadataContainer.querySelector(".nav-byoc-label"); + const topByocBadge = metadataContainer?.querySelector(".byoc-label p"); + const navByocBadge = navMetadataContainer?.querySelector(".nav-byoc-label"); @@ - const topCloudBadge = metadataContainer.querySelector(".cloud-label p"); - const navCloudBadge = navMetadataContainer.querySelector(".nav-cloud-label"); + const topCloudBadge = metadataContainer?.querySelector(".cloud-label p"); + const navCloudBadge = navMetadataContainer?.querySelector(".nav-cloud-label"); @@ - observer.observe(metadataContainer); + if (metadataContainer && navMetadataContainer) { + observer.observe(metadataContainer); + } });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/partials/article.hbs` around lines 95 - 220, The handler uses an undefined metadataContainer and calls querySelector on navMetadataContainer without null checks, causing runtime failures; define and assign metadataContainer at the top of the DOMContentLoaded block (e.g., const metadataContainer = document.querySelector(".metadata") or the actual selector used elsewhere), guard uses of navMetadataContainer (and metadataContainer) before calling .querySelector or accessing properties (wrap tippy initializations for topByocBadge/topCloudBadge and nav*Badge initializations in if (metadataContainer) / if (navMetadataContainer) checks), and only call observer.observe(metadataContainer) when metadataContainer is non-null to avoid errors. Ensure you update references to topByocBadge/topCloudBadge to query from metadataContainer only after that null check.
🧹 Nitpick comments (1)
src/partials/head-scripts.hbs (1)
117-128: 💤 Low valueConsider extracting theme toggle logic to reduce duplication.
The sidebar theme toggle handler (lines 118-128) duplicates the logic from the main theme toggle handler (lines 71-77). Both handlers toggle between light and dark themes, update localStorage, and call
setTheme.♻️ Optional refactor to share toggle logic
+ function toggleTheme() { + const currentTheme = document.documentElement.getAttribute('data-theme') || 'light'; + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + localStorage.setItem('theme', newTheme); + setTheme(newTheme); + } + window.addEventListener('DOMContentLoaded', function() { const switchButton = document.getElementById('switch-theme'); // ... existing code ... if (switchButton) { setTheme(initialTheme); // Apply initial theme on load switchButton.addEventListener('click', function() { - // Toggle theme on button click - const currentTheme = document.body.getAttribute('data-theme'); - const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; - localStorage.setItem('theme', newTheme); - setTheme(newTheme); + toggleTheme(); }); } // ... existing code ... }); // Connect sidebar theme toggle to main theme switcher window.addEventListener('DOMContentLoaded', function() { const sidebarThemeToggle = document.getElementById('sidebar-theme-toggle'); if (sidebarThemeToggle) { - sidebarThemeToggle.addEventListener('click', function() { - const currentTheme = document.documentElement.getAttribute('data-theme') || 'light'; - const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; - localStorage.setItem('theme', newTheme); - setTheme(newTheme); - }); + sidebarThemeToggle.addEventListener('click', toggleTheme); } });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/partials/head-scripts.hbs` around lines 117 - 128, Extract the duplicated toggle logic into a reusable function (e.g., toggleTheme) and call it from both the sidebar handler and the main theme handler: move the code that reads data-theme from document.documentElement, computes newTheme, sets localStorage('theme'), and calls setTheme into a single function (referencing setTheme and the new toggleTheme helper), then replace the inline click callbacks on the sidebarThemeToggle element and the main theme toggle element to just call toggleTheme; keep the DOMContentLoaded listener but update it to attach the click handlers to their elements (sidebar-theme-toggle and the main toggle) which both invoke toggleTheme.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/css/bloblang-playground.css`:
- Around line 1203-1209: The CSS rule .bloblang-playground .validation-error
uses the deprecated property value `word-break: break-word`; remove that
declaration and replace it with the modern wrapping rule `overflow-wrap:
anywhere` (keeping existing properties like `white-space: normal` and
`word-break` entirely removed) so lint no longer flags it and text still wraps
correctly. Ensure you update the .bloblang-playground .validation-error block to
drop `word-break: break-word` and add `overflow-wrap: anywhere`.
In `@src/css/header.css`:
- Around line 209-213: Rename the keyframe identifier bcDropdownIn to a
kebab-case name (e.g., bc-dropdown-in) wherever it appears: update the
`@keyframes` rule name and all references to it (for example the animation
property that currently uses bcDropdownIn) to match the kebab-case name so
linting passes; ensure both the declaration (`@keyframes` bc-dropdown-in { ... })
and uses (animation: bc-dropdown-in 0.15s ease-out;) are updated consistently.
In `@src/css/home.css`:
- Around line 394-400: The CSS has stylelint failures: the keyframe name casing
(toastSlideIn) and keyword case in color-mix usage (in sRGB). Rename the
keyframes to follow the configured pattern (e.g., toast-slide-in or other
project keyframes convention) wherever referenced (look for toastSlideIn usage
in `@keyframes` and animation names) and change all occurrences of "in sRGB"
inside color-mix(...) to "in srgb" (apply to the shown block and the other
reported locations) so value-keyword-case passes; run gulp lint to verify.
In `@src/css/nav.css`:
- Around line 329-342: Rename the keyframes and their animation references from
camelCase to kebab-case to satisfy stylelint: change `@keyframes` versionMenuIn
and `@keyframes` statusPulse to `@keyframes` version-menu-in and `@keyframes`
status-pulse, and update every corresponding animation: versionMenuIn ... and
animation: statusPulse ... usages to animation: version-menu-in ... and
animation: status-pulse ... (also apply the same changes in the other occurrence
around lines 721-755).
In `@src/css/toc.css`:
- Line 245: The CSS uses the deprecated property word-wrap: break-word; —
replace that declaration with the modern equivalent overflow-wrap: break-word;
(remove or replace the word-wrap line in src/css/toc.css so the selector that
currently contains "word-wrap" instead uses "overflow-wrap: break-word;") to
clear the Stylelint failure.
In `@src/css/typeface-inter.css`:
- Line 8: The six `@font-face` blocks in src/css/typeface-inter.css use quoted
font-family values (e.g., font-family: "Inter") which triggers stylelint errors;
update each `@font-face` block to use an unquoted identifier (font-family: Inter)
for all occurrences in the file (the font-family declarations inside the
`@font-face` rules at the six blocks) so gulp lint passes.
In `@src/helpers/is-byoc-feature.js`:
- Line 20: The BYOC detection uses the wrong page attribute key; update the
check in the urlCache.set call (currently using the expression
urlCache.set(p.pub.url, !!p.asciidoc?.attributes?.['page-byoc'])) to use the
documented attribute 'page-byoc-only' instead so BYOC-only pages are detected
(i.e., replace 'page-byoc' with 'page-byoc-only' in that expression).
In `@src/js/react/AskAI.jsx`:
- Around line 49-59: The code currently calls createRoot(...).render(<App />)
for both element queries (homeEl and panelEl), which can mount two App instances
if both `#kapa-chat-root` and `#chat-panel-kapa-root` exist; change the logic to
mount to exactly one target by selecting a single element (for example prefer
panelEl over homeEl or use the first non-null) and only call
createRoot(...).render(<App />) once — update the block that references homeEl,
panelEl, createRoot, and App to use an if/else (or a single chosenEl variable)
so only one App is rendered.
In `@src/partials/bloblang-playground.hbs`:
- Around line 1643-1648: The "Ask AI" button still appears when
window.openChatWithQuery isn't available — instead of merely console.warn-ing in
the click handlers (the block that checks typeof window.openChatWithQuery ===
'function'), proactively disable or hide the CTA at render/time and update the
two click-handler locations to not show a non-functional button; specifically,
check typeof window.openChatWithQuery !== 'function' early and either add a
disabled attribute/class and aria-disabled to the Ask AI button (querySelector
for the button element or template variable controlling visibility) or call the
previous modal fallback if you want to preserve behavior; apply this change to
both places where window.openChatWithQuery is checked so the button is never
visible/active when the chat API is absent.
In `@src/partials/head-scripts.hbs`:
- Around line 23-28: The JS sets CSS variable --announcement-bar-height to
'50px' for mobile when announcementType !== 'bloblang' but the CSS for
.announcement-bar.is-active uses max-height: 60px, causing a 10px mismatch and
potential layout shift; fix by making the reserved height match the actual
animated max height — either change the JS assignment for mobile in the if block
where announcementType is checked (the code that sets --announcement-bar-height
and --announcement-bar-height--desktop) to '60px', or change the CSS max-height
in the announcement banner stylesheet (.announcement-bar.is-active) from 60px to
50px so both values are identical.
In `@src/partials/nav-explore.hbs`:
- Around line 6-17: The version selector is currently rendered as non-focusable
spans (container with class "container" and the span "current-version" plus the
material-symbols icon), which prevents keyboard users from opening the versions
menu; replace the clickable trigger (the span.current-version and the adjacent
material icon) with a real <button> element that is focusable and toggles an
aria-expanded attribute and references the menu via aria-controls, ensure the
button keeps the existing classes/markup semantics (e.g., "current-version"
styling) and that the dropdown container retains the "has-dropdown" behavior,
and update any JS that toggles the menu to read/write aria-expanded on that
button and to open/close the element with the matching id used by aria-controls.
In `@src/partials/nav.hbs`:
- Around line 22-28: Replace the non-semantic div used as the search trigger
with a native button element: change the element with class "sb-search" and
data-action="open-search" from <div> to <button type="button">, remove the
redundant tabindex and role attributes, keep the aria-label="Search docs" and
the inner SVG and span.sb-search-text intact, and ensure any JS that queries
".sb-search" still works (or update selectors to target the button) so keyboard
activation and accessibility work correctly.
---
Outside diff comments:
In `@src/partials/article.hbs`:
- Around line 95-220: The handler uses an undefined metadataContainer and calls
querySelector on navMetadataContainer without null checks, causing runtime
failures; define and assign metadataContainer at the top of the DOMContentLoaded
block (e.g., const metadataContainer = document.querySelector(".metadata") or
the actual selector used elsewhere), guard uses of navMetadataContainer (and
metadataContainer) before calling .querySelector or accessing properties (wrap
tippy initializations for topByocBadge/topCloudBadge and nav*Badge
initializations in if (metadataContainer) / if (navMetadataContainer) checks),
and only call observer.observe(metadataContainer) when metadataContainer is
non-null to avoid errors. Ensure you update references to
topByocBadge/topCloudBadge to query from metadataContainer only after that null
check.
In `@src/partials/nav-explore.hbs`:
- Around line 16-33: The dropdown shows a chevron but no items because the inner
guard "{{`#if` (ne page.componentVersion.displayVersion 'default')}}" prevents
rendering when the current displayVersion is 'default'; remove that guard (or
change the logic to always iterate page.versions) so the template always runs
the "{{`#each` page.versions}}" block and emits version links (still skipping the
current version via "{{`#if` (ne ./version `@root.page.version`)}}" and using
"{{`#with` (resolve-resource ./url) as |targetPage|}}", the "{{{relativize
../url}}}" href, and the existing "{{../displayVersion}}"/"{{`#if` (is-eol
../asciidoc.attributes)}}" handling).
---
Nitpick comments:
In `@src/partials/head-scripts.hbs`:
- Around line 117-128: Extract the duplicated toggle logic into a reusable
function (e.g., toggleTheme) and call it from both the sidebar handler and the
main theme handler: move the code that reads data-theme from
document.documentElement, computes newTheme, sets localStorage('theme'), and
calls setTheme into a single function (referencing setTheme and the new
toggleTheme helper), then replace the inline click callbacks on the
sidebarThemeToggle element and the main theme toggle element to just call
toggleTheme; keep the DOMContentLoaded listener but update it to attach the
click handlers to their elements (sidebar-theme-toggle and the main toggle)
which both invoke toggleTheme.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0ae3d5c1-a924-44aa-96d1-a2cc63b9835e
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (51)
gulp.d/tasks/build.jspreview-src/ui-model.ymlsrc/css/announcement-banner.csssrc/css/bloblang-playground.csssrc/css/body.csssrc/css/breadcrumbs.csssrc/css/dark-mode.csssrc/css/doc.csssrc/css/footer.csssrc/css/header.csssrc/css/home.csssrc/css/main.csssrc/css/markdown-dropdown.csssrc/css/nav.csssrc/css/pagination.csssrc/css/search-bump.csssrc/css/search.csssrc/css/site.csssrc/css/toc.csssrc/css/toolbar.csssrc/css/typeface-inter.csssrc/css/vars.csssrc/helpers/is-byoc-feature.jssrc/helpers/is-cloud-feature.jssrc/helpers/is-eol.jssrc/helpers/resolve-resource.jssrc/js/01-nav.jssrc/js/06-copy-to-clipboard.jssrc/js/11-editable-placeholders.jssrc/js/14-markdown-dropdown.jssrc/js/react/AskAI.jsxsrc/js/react/components/ChatInterface.jsxsrc/layouts/default.hbssrc/layouts/index.hbssrc/layouts/lab.hbssrc/layouts/labs-search.hbssrc/layouts/search.hbssrc/partials/algolia-script.hbssrc/partials/article.hbssrc/partials/bloblang-playground.hbssrc/partials/body.hbssrc/partials/breadcrumbs.hbssrc/partials/footer.hbssrc/partials/head-scripts.hbssrc/partials/head-styles.hbssrc/partials/header-content.hbssrc/partials/home.hbssrc/partials/nav-explore.hbssrc/partials/nav-menu.hbssrc/partials/nav.hbssrc/partials/toc.hbs
✅ Files skipped from review due to trivial changes (5)
- src/partials/footer.hbs
- src/partials/head-styles.hbs
- src/layouts/search.hbs
- src/css/dark-mode.css
- src/css/site.css
Major UI updates for hierarchical navigation system: Navigation System: - Add unified navigation with bucket structure (Self-Managed → Streaming/Connect) - New bucket-header.hbs partial with icons, titles, and per-bucket version selectors - nav-bucket.js for expand/collapse and version selector interactions - Bucket theming with custom CSS properties for colors Layouts & Templates: - component-home-v3.hbs layout for new landing page design - data-platform.hbs layout for umbrella pages - labs-home.hbs layout for labs directory - Updated article.hbs to move page options to sticky header eyebrow - Updated nav-menu-scroll.hbs for unified navigation rendering Styling: - chat-panel.css for Ask AI sidebar - component-home-v3.css for new landing page layouts - data-platform.css for umbrella page styling - labs-home.css for labs directory - product-switcher.css for top-level destination switcher - Updated nav.css with bucket theming - Updated markdown-dropdown.css for eyebrow positioning - Inter Display font for landing pages Components: - product-switcher.hbs partial for three-destination switcher - version-selector.hbs partial for per-bucket version dropdowns - chat-panel.hbs with correct sparkle icon - status-footer.hbs for version status information Helpers: - get-component-color.js, get-header-color.js, get-header-data.js - get-component-header-data.js, get-home-navigation.js - format-release-date.js, support-end-date.js, version-status.js - Utility helpers: gte.js, lt.js, split.js, subtract.js JavaScript: - 19-chat-panel.js for Ask AI interactions - 20-product-switcher.js for destination switching - 21-breadcrumb-collapse.js for responsive breadcrumbs - 22-version-selector.js for version dropdown - 23-nav-bucket.js for bucket interactions - Updated 14-markdown-dropdown.js to remove positioning logic Fixes: - Page options font consistency (11px, 600 weight) - Focus outline visibility with proper padding - Dropdown menu alignment - Icon consistency (Connect plug-connected, Ask AI sparkle) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
Exclude *.png files from repository root while preserving legitimate images in /src/img/. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contributor
Author
|
Jira: DOC-2180 |
- Fix markdown dropdown positioning (focus outline cutoff, right overflow, mobile visibility) - Add toolbar to component-home-v3 layout for mobile nav toggle - Add new icon options: plug-connected, kubernetes, docker, linux - Update helpers to support preview mode without contentCatalog - Update preview-src/ui-model.yml with renamed components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
JakeSCahill
added a commit
to redpanda-data/docs-site
that referenced
this pull request
May 12, 2026
Adds Antora resource ID attributes for home page product card navigation: - :page-cloud-quickstart: / :page-cloud-docs: - Cloud product links - :page-self-managed-quickstart: / :page-self-managed-docs: - Self-Managed links - :page-connect-quickstart: / :page-connect-docs: - Connect product links - :page-adp-quickstart: / :page-adp-docs: - Agentic Data Plane links These attributes allow the UI template to dynamically resolve navigation links rather than hardcoding them. Related: redpanda-data/docs-ui#376
4 tasks
Change SVG dimensions from width='16' height='16' to width='24' height='24' to match viewBox='0 0 24 24'. This fixes visual distortion where icons appeared compressed because the coordinate system didn't match the render size. Affects: Kubernetes, Linux, Docker deployment option icons and Streaming/Connect component card icons on Self-Managed landing page.
- Use same plug icon as nav tree for Connect (plug-connected) - Replace kubernetes icon with shield/helm badge shape - Replace docker icon with stacked containers Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Previously styled first 3 consecutive paragraphs as intro text. Now only the first paragraph (or paragraphs with .lead class) gets the larger intro styling. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- chatPersistence.js: Save/restore conversation to localStorage with 24hr expiry - persistentApiService.js: Wrap Kapa API to inject saved threadId - AskAI.jsx: Use custom apiService, save conversation on answer completion - ChatInterface.jsx: Restore conversation display on mount, clear on reset Users can now navigate between pages and continue their chat conversation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The component-indicator-sticky element has a negative top margin that was causing it to overlap the H1 title on the playground page. This adds a margin-top override specifically for the playground to prevent the overlap.
The component indicator was overlapping the H1 title on the playground page due to the page's unique layout with a banner element. Since the breadcrumbs already show the location (Connect > Bloblang > Playground), the indicator is redundant and hiding it resolves the overlap issue while keeping the H1 clearly visible.
- Remove display: none that was hiding the indicator - Override negative top margin to prevent overlap - Add margin-top to H1 for proper spacing - Indicator now sticks correctly like on other pages
Increase component indicator bottom margin from 24px to 48px to ensure proper spacing between the eyebrow and H1 title. Both elements are now fully visible without overlap.
JakeSCahill
added a commit
to redpanda-data/docs-extensions-and-macros
that referenced
this pull request
May 14, 2026
Adds :page-support-months: attribute to pages processed by the EOL extension. This attribute contains the configured support period in months, enabling templates to display support duration information. Bumps version to 4.17.3. Related: redpanda-data/docs-ui#376
- Cloud card now appears first (left position) - Self-Managed card now appears second (right position) - Maintains all functionality and styling Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Handlebars helper to check if a URL is external (http/https). Used in templates to conditionally handle external URLs vs Antora resource IDs. Returns true for URLs starting with http:// or https:// Returns false for Antora resource IDs (component:module:page.adoc) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Log detailed error context when resource resolution fails
- Include component, version, module, and page info in error
- Helps identify broken links during build
- Returns unresolved resource string as fallback
Errors format: [resolve-resource] Unresolved resource: "..." in context: {...}
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Use is-external-url helper to detect URL type - External URLs: add target="_blank" and rel="noopener noreferrer" - Antora resource IDs: resolve through resolve-resource helper - Applies to all 4 labs links on component home pages Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove path icons, deploy icons, feature icons, popular icons - Icons don't provide meaningful value, clean up visual design - Only diagonal arrows remain for external lab links (indicates new tab) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove product bullet icons and popular topic icons - Cleaner visual design without decorative elements - Consistent with Cloud landing page icon removal Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Update all helper functions to use new attribute name - More accurate: this is component-level metadata, not page-level - Affected helpers: get-component-header-data, get-header-data, get-header-color, get-component-color, sort-components Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Update product switcher template - Update breadcrumbs template - Update head component color template - Consistent with helper function renames Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Fix mobile nav not reopening after collapse: Reset navToggle is-active state and remove is-clipped--nav from html when using sidebar collapse - Add explicit light mode styles for nav-expand button with 2px border and stronger shadow for better visibility - Make topbar fully opaque (remove 92% transparency) for better readability when scrolling over colored content - Reduce gap between product selector and nav items in mobile nav - Add mobile overflow menu for header actions - Various CSS improvements for light/dark mode consistency Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Update wasm_exec.js to match Go GOROOT version - Use semantic button for search trigger in nav.hbs - Use semantic button for version selector trigger in nav-explore.hbs - Add aria-expanded toggle for version dropdown in JS - Fix announcement bar height mismatch (50px to 60px for mobile) - Add focus-visible styles for new button elements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove quotes from font-family in typeface-inter.css (stylelint fix) - Use correct page attribute 'page-byoc-only' in is-byoc-feature.js - Prevent mounting duplicate App instances in AskAI.jsx - Remove AI help buttons when chat panel unavailable in bloblang-playground Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements unified navigation system for Redpanda documentation with Data Platform hierarchy, component-themed navigation buckets, and enhanced user experience features.
Overview
This PR introduces a complete redesign of the documentation navigation to support a unified sidebar for Data Platform that combines Streaming and Connect navigation in a single, collapsible bucket structure. The implementation includes 77 files with 9,046 additions across templates, styles, and JavaScript.
Major Features
1. Unified Navigation System
New files:
src/partials/bucket-header.hbs- Bucket header with icon, title, version selectorsrc/partials/nav-menu-scroll.hbs- Unified navigation rendering logicsrc/js/23-nav-bucket.js- Bucket expand/collapse and version selector interactionssrc/css/nav.css- Updated with bucket theming styles2. Product Switcher
New files:
src/partials/product-switcher.hbs- Product switching UIsrc/js/20-product-switcher.js- Dropdown interactionssrc/css/product-switcher.css- Product switcher styling3. Version Selector
New files:
src/partials/version-selector.hbs- Version selector UIsrc/js/22-version-selector.js- Version selector logicsrc/css/version-selector.css- Version selector styling4. Component Home Pages (v3 Layout)
New files:
src/layouts/component-home-v3.hbs- New home page layoutsrc/partials/component-home-v3.hbs- Component home partialsrc/css/component-home-v3.css- Component home styling5. Data Platform Landing Page
New files:
src/layouts/data-platform.hbs- Data Platform layoutsrc/partials/data-platform.hbs- Data Platform content partialsrc/css/data-platform.css- Data Platform page styling6. Labs Home Page
New files:
src/layouts/labs-home.hbs- Labs landing page layoutsrc/css/labs-home.css- Labs home styling7. Ask AI Chat Panel
New files:
src/partials/chat-panel.hbs- Chat panel structuresrc/js/19-chat-panel.js- Chat panel interactionssrc/js/react/AskAI.jsx- React chat interface (updated)src/css/chat-panel.css- Chat panel styling8. Enhanced Header Features
New files:
src/js/21-breadcrumb-collapse.js- Breadcrumb collapse logicsrc/css/markdown-dropdown.css- Page options dropdown styling (updated)9. Typography Improvements
New files:
src/css/typeface-inter-display.css- Inter Display font definitionssrc/font/inter-display/- Inter Display font files (24 .ttf files)Design System
Component Colors
Each component has a defined color used across the UI:
#4b44ff(purple) - Umbrella component#107569(teal) - Self-Managed docs#54478C(purple) - Connect docs#0ea5e9(blue) - Cloud docs#e24328(orange) - ADP docsDark Mode
All new features include full dark mode support with appropriate contrast adjustments.
Accessibility
Updated Files
Templates
src/partials/header-content.hbs- Updated header structuresrc/partials/nav.hbs- Updated for unified navigationsrc/partials/home.hbs- Updated home page linksHelpers
src/helpers/get-component-color.js- Component color lookupsrc/helpers/get-header-data.js- Header data extractionsrc/helpers/get-component-header-data.js- Component-specific header datasrc/helpers/get-page-info.js- Updated page info extractionsrc/helpers/add-suggested-labs.js- Updated component referencessrc/helpers/list-related-labs.js- Updated component referencesStyles
src/css/doc.css- Article page improvementssrc/css/home.css- Home page styling updatessrc/css/nav.css- Unified navigation bucket stylessrc/css/vars.css- New component color variablesScripts
src/js/06-copy-to-clipboard.js- Updated for new layoutssrc/js/16-bloblang-interactive.js- Updated for chat panelBreaking Changes
Component Renames (Anticipated)
This UI is designed to work with renamed components:
ROOT→streamingredpanda-cloud→cloud-data-platformredpanda-connect→connectredpanda-labs→labsThe UI bundle includes fallback logic to handle both old and new component names during transition.
Related PRs
Antora Extension
Content Repository Updates
docs-site Playbook
Playbook updates needed to:
Testing
Local Testing
Test Scenarios
Deployment Notes
This UI bundle is compatible with existing Antora content but requires:
page-header-dataattributes (section, color, order, icon)The bundle can be deployed independently for visual testing before content/extension PRs are merged.