Add BYOC and Cloud platform badges for ADP documentation#376
Open
JakeSCahill wants to merge 58 commits into
Open
Add BYOC and Cloud platform badges for ADP documentation#376JakeSCahill wants to merge 58 commits into
JakeSCahill wants to merge 58 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 makes large coordinated changes across styling, templates, helpers, and client scripts: it introduces new landing-page styles and nav/topbar redesign, adds BYOC/Cloud badges and availability UI, refactors doc styling and code/listing presentation, enhances Bloblang tooling and playground UX, replaces Kapa modal triggers with a chat-panel API, adds a persistent chat drawer script and React chat mounting updates, and includes multiple helper utilities and build adjustments. Sequence Diagram(s)sequenceDiagram
participant User
participant Page as Page script / partials
participant Drawer as Chat panel (chat-panel.js + React)
participant ChatSvc as Chat backend / Kapa SDK
User->>Page: Click "Ask AI" or submit ask form
Page->>Page: Build aiPromptText from context (selection, snippet, page metadata)
Page->>Drawer: call window.openChatWithQuery(aiPromptText, true)
Drawer->>Drawer: open panel, focus textarea (restore persisted state)
Drawer->>ChatSvc: submit query (autoSubmit=true)
ChatSvc-->>Drawer: returns AI response
Drawer-->>User: render response (toasts, messages)
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.
|
- 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>
- Add Data Platform, Self-Managed, Home, Connect, Agentic Data Plane to TAGS_BY_COMPONENT - Update productParams for View All link to handle new components - Add UMBRELLA_COMPONENTS list for broader search context - Rename LATEST_ENTERPRISE to LATEST_STREAMING - Update site.components.ROOT references to site.components.streaming Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…iner - Add check for #autocomplete container before initializing - Prevents 'Cannot read properties of null' error on pages without search Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The autocomplete library needs a container element in the DOM Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Override component-specific translucent topbar colors - Use solid white (#fff) for light mode - Use solid ash-800 (#252525) for dark mode Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 13
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/js/16-bloblang-interactive.js (1)
715-725:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse the required Ace minimum height baseline.
This helper still defaults to
minLines: 4, so the mini-playground renders shorter editors than the repo standard.💡 Suggested fix
- minLines: options.minLines || 4, + minLines: options.minLines || 5,As per coding guidelines,
src/js/16-bloblang-interactive.js: Set Ace editorminLines: 5configuration to establish minimum editor height.🤖 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/js/16-bloblang-interactive.js` around lines 715 - 725, The editor options default uses minLines: options.minLines || 4 which results in a 4-line minimum; update the default to 5 so the Ace editor baseline matches repo standard by changing that expression in the editorOptions object (referencing editorOptions and the minLines property in the code that builds the Ace options) to use 5 when options.minLines is not provided.src/js/17-bloblang-yaml.js (1)
43-53:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winEarly-exit detection misses new hyphenated YAML keys.
Line 418 exits processing when
CONNECT_INDICATORSdoesn’t match. You added hyphenated keys (for example Line 36skip-on), but those variants are missing in Line 43-53 indicators, so valid configs can be skipped entirely.💡 Suggested patch
var CONNECT_INDICATORS = [ /\bmapping\s*:/, + /\bmutation\s*:/, + /\bbloblang\s*:/, /\bprocessors\s*:/, /\brequest_map\s*:/, + /\brequest-map\s*:/, /\bresult_map\s*:/, + /\bresult-map\s*:/, + /\bfields_mapping\s*:/, + /\bfields-mapping\s*:/, /\bcheck\s*:/, + /\bskip_on\s*:/, + /\bskip-on\s*:/, /\binput\s*:/, /\boutput\s*:/, /\bpipeline\s*:/, /\$\{!\s*/, ]Also applies to: 417-420
🤖 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/js/17-bloblang-yaml.js` around lines 43 - 53, The early-exit detection uses the CONNECT_INDICATORS array and misses hyphenated YAML keys (e.g., skip-on) so valid configs are skipped; update CONNECT_INDICATORS to include hyphenated variants (or change the regexes to accept optional hyphens/underscores) for keys like mapping, processors, request_map/request-map, result_map/result-map, check, input, output, pipeline and any custom keys such as skip-on, and ensure the same updated array is used by the early-exit check that references CONNECT_INDICATORS so hyphenated keys no longer cause false negatives.
🧹 Nitpick comments (2)
src/helpers/get-component-color.js (1)
22-35: ⚡ Quick winSimplify the component lookup logic.
The current approach has overlapping type checks: line 24 tests for the
findmethod (arrays have it), and line 27 teststypeof === 'object'(which is also true for arrays). Line 32 then re-checksArray.isArrayinside the object block, creating redundant branches. Consider refactoring to a clear sequence: Map → Array → plain object.♻️ Proposed refactor
- // site.components in Antora might be various collection types - // Try to find the component by name using different approaches let component - // If it's a Map if (site.components.get) { + // Map-like component = site.components.get(componentName) - } else if (site.components.find) { - // If it has a find method (array-like) + } else if (Array.isArray(site.components)) { + // Array component = site.components.find((c) => c.name === componentName) - } else if (typeof site.components === 'object') { - // If it's an object with entries - try direct access by name + } else { + // Plain object – try direct key access, then iterate values component = site.components[componentName] - // Or iterate over values if (!component) { - const components = Array.isArray(site.components) ? site.components : Object.values(site.components) - component = components.find((c) => c && c.name === componentName) + component = Object.values(site.components).find((c) => c && c.name === componentName) } }🤖 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/helpers/get-component-color.js` around lines 22 - 35, The component lookup has redundant/overlapping checks; update the logic in get-component-color.js to try Map-like access first (e.g., if site.components.get or site.components instanceof Map) using site.components.get(componentName), then check Array.isArray(site.components) and use site.components.find(c => c.name === componentName), and finally treat it as a plain object (site.components[componentName] or Object.values(site.components).find(...))—remove the nested typeof === 'object' branch and the inner Array.isArray re-check so the sequence is Map → Array → plain object and the variable component (and componentName) is assigned once in each clear branch.src/helpers/get-home-navigation.js (1)
17-19: 💤 Low valueConsider clarifying the Map-vs-array detection.
Line 19 checks
site.components.valuesto decide whether to call.values(), but this conflates a property check with a method check. Ifsite.componentsis already an array,Array.from(array)is redundant. Consider checkingsite.components instanceof Maportypeof site.components.values === 'function'for clarity.♻️ Proposed refactor
- // Convert components to array if it's a Map const components = Array.isArray(site.components) ? site.components - : Array.from(site.components.values ? site.components.values() : []) + : site.components instanceof Map + ? Array.from(site.components.values()) + : []🤖 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/helpers/get-home-navigation.js` around lines 17 - 19, The current detection for Map vs Array on site.components is ambiguous because it checks for the existence of .values instead of its type; update the logic in get-home-navigation (the site.components handling) to first test Array.isArray(site.components) and return it directly if true, otherwise check site.components instanceof Map or typeof site.components.values === 'function' and call Array.from(site.components.values()) in that case, and finally fallback to Array.from(site.components) for other iterable objects; this ensures you don't call Array.from on an array and properly detect Map-like objects.
🤖 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 606-614: The .bloblang-playground .editor-section-collapsible rule
currently sets overflow: hidden which clips the Ace editor scrollbar; remove the
overflow: hidden (or change it to overflow: visible) in the .bloblang-playground
.editor-section-collapsible selector so Ace editor parent containers do not hide
scrollbars (follow same change for any other src/css/bloblang-*.css rules that
target Ace editor wrappers).
In `@src/css/chat-panel.css`:
- Line 292: Replace deprecated and non-linted CSS: change occurrences of
"word-break: break-word;" to "overflow-wrap: anywhere;" (or "overflow-wrap:
break-word;" if you prefer broader support), replace deprecated "clip" usage
with modern "clip-path" equivalents (e.g., convert clip: rect(...) to clip-path:
inset(...)) and rename any non-kebab-case keyframe identifiers (for example
rename "`@keyframes` slideInUp" to "`@keyframes` slide-in-up" and update all
corresponding "animation" or "animation-name" references to the new kebab-case
name); after edits run "gulp lint" and fix any remaining stylelint warnings.
In `@src/css/component-home-v3.css`:
- Around line 384-389: The CSS rule for .sm-ver-row-status-dot uses the keyword
"currentColor" with incorrect casing for our stylelint config; change the
background value from currentColor to lowercase currentcolor in the
.sm-ver-row-status-dot selector and re-run gulp lint to confirm no other lint
errors before committing.
In `@src/css/nav.css`:
- Around line 1336-1360: The keyframes name bucketVersionMenuIn violates the
kebab-case style rule; rename the `@keyframes` identifier to a kebab-case name
(e.g., bucket-version-menu-in) and update the .nav-bucket-version-menu animation
property to use the new name so the selector and animation call match; ensure
you update both the `@keyframes` block and any references (animation:
bucketVersionMenuIn 0.15s ease-out) to the new kebab-case token to satisfy
Stylelint.
In `@src/css/product-switcher.css`:
- Around line 174-177: The keyframe name sbProductMenuIn violates the kebab-case
rule; rename the `@keyframes` identifier to kebab-case (e.g., sb-product-menu-in)
and update any usages — specifically the animation declaration that currently
references sbProductMenuIn — to the new kebab-case name so both the `@keyframes`
rule and the animation property match the new identifier.
In `@src/helpers/format-release-date.js`:
- Around line 7-10: The current formatting uses a Date constructed from dateStr
and then calls getMonth()/getFullYear(), which can produce timezone-induced
off-by-one months for ISO date strings; update the logic in the
format-release-date helper to use UTC accessors by replacing getMonth() with
getUTCMonth() and getFullYear() with getUTCFullYear() when building the output
(keep the months array and the existing invalid-date check intact, only change
the property accessors on the date object).
In `@src/helpers/get-page-info.js`:
- Around line 52-53: The comment above the version-checking condition is
outdated (mentions "ROOT component") and should be updated to reflect the
current logic that checks for a streaming component; update the comment that
precedes the if (urlParts[0] && page.component.name === 'streaming' &&
containsVersionNumber(urlParts[0])) line so it describes that when the page
component name is 'streaming' the first URL part may be a version (e.g.,
".../streaming/<version>/..."), referencing urlParts, page.component.name
('streaming'), and containsVersionNumber to make intent clear to future
maintainers.
In `@src/helpers/has-markdown.js`:
- Line 14: The duplicated array excludedRoles is defined twice; remove the inner
definition and declare a single const excludedRoles at module scope so both the
module-level logic and the hasMarkdown helper reference the same constant
(update any references in the hasMarkdown function or surrounding helpers to use
that module-scoped excludedRoles and delete the redundant declaration).
In `@src/js/16-bloblang-interactive.js`:
- Around line 780-789: The mini-playground drops the passed metadata after
building the initial URL: openBloblangPlayground creates initialPlaygroundUrl
with metadata but subsequent calls (runMapping and the “Open Full Playground”
link) use '{}' so meta() examples fail; update openBloblangPlayground to persist
metadata into the playground state and use that persisted metadata (not '{}')
when calling runMapping() and when composing the full-playground URL (reuse
buildPlaygroundUrl(mapping, inputData, metadata) or equivalent) so all later
operations reference the original metadata; adjust corresponding handlers
created in openBloblangPlayground (and the similar code blocks around lines
referenced) to read the stored metadata variable.
- Around line 646-688: Initialization failures currently leave wasmLoading true
and cache a rejected wasmLoadPromise, breaking subsequent attempts; update the
wasmLoadPromise creation and all rejection paths (including the "Go WASM runtime
not available" branch, fetch non-ok branch, and the final .catch) to reset
loader state by setting wasmLoading = false, wasmLoadPromise = null (and
wasmLoaded = false if applicable) before rejecting so future "Try It" attempts
can retry; apply this change inside the Promise returned by
loadRequiredScripts() and in the fetch/WebAssembly promise chains that create
and run the Go instance (references: wasmLoading, wasmLoadPromise, wasmLoaded,
loadRequiredScripts(), new Go(), wasmPath).
In `@src/js/19-chat-panel.js`:
- Around line 68-69: The code hides only the first element found by
document.querySelector for the chat open trigger (askAiBtn); change to
document.querySelectorAll and iterate over all elements to set style.display =
'none' so every [data-action="open-chat"] button is toggled; apply the same
change for the corresponding close trigger(s) referenced around lines 86-87
(e.g., any variable like closeChatBtn) so all matching elements are handled
rather than only the first match.
In `@src/js/21-breadcrumb-collapse.js`:
- Around line 124-130: The code creates an anchor element named dropdownSpan for
non-link breadcrumb items (span) and sets href="#" which causes top-of-page
jumps; instead create a non-interactive element (e.g.,
document.createElement('span')) for these fallbacks, copy span.textContent into
it, and append that span to dropdown (replace creation of 'a' and href
assignment in the block that references span, dropdownSpan, and
dropdown.appendChild).
In `@src/js/22-version-selector.js`:
- Around line 9-80: The document-level mousedown and keydown listeners are being
attached inside selectors.forEach, creating N identical handlers; remove the
document.addEventListener('mousedown', ...) and
document.addEventListener('keydown', ...) blocks from inside the loop and add
single global handlers after the selectors.forEach completes that iterate all
selector instances (or use document.querySelectorAll('.sm-ver.is-open')) and
close any open dropdowns by removing 'is-open' from the smVer and btn elements
and setting btn.setAttribute('aria-expanded','false'); keep the per-instance btn
click handler (which uses e.stopPropagation and toggles smVer/btn/is-open) and
preserve accessibility attributes when closing in the new global handlers.
---
Outside diff comments:
In `@src/js/16-bloblang-interactive.js`:
- Around line 715-725: The editor options default uses minLines:
options.minLines || 4 which results in a 4-line minimum; update the default to 5
so the Ace editor baseline matches repo standard by changing that expression in
the editorOptions object (referencing editorOptions and the minLines property in
the code that builds the Ace options) to use 5 when options.minLines is not
provided.
In `@src/js/17-bloblang-yaml.js`:
- Around line 43-53: The early-exit detection uses the CONNECT_INDICATORS array
and misses hyphenated YAML keys (e.g., skip-on) so valid configs are skipped;
update CONNECT_INDICATORS to include hyphenated variants (or change the regexes
to accept optional hyphens/underscores) for keys like mapping, processors,
request_map/request-map, result_map/result-map, check, input, output, pipeline
and any custom keys such as skip-on, and ensure the same updated array is used
by the early-exit check that references CONNECT_INDICATORS so hyphenated keys no
longer cause false negatives.
---
Nitpick comments:
In `@src/helpers/get-component-color.js`:
- Around line 22-35: The component lookup has redundant/overlapping checks;
update the logic in get-component-color.js to try Map-like access first (e.g.,
if site.components.get or site.components instanceof Map) using
site.components.get(componentName), then check Array.isArray(site.components)
and use site.components.find(c => c.name === componentName), and finally treat
it as a plain object (site.components[componentName] or
Object.values(site.components).find(...))—remove the nested typeof === 'object'
branch and the inner Array.isArray re-check so the sequence is Map → Array →
plain object and the variable component (and componentName) is assigned once in
each clear branch.
In `@src/helpers/get-home-navigation.js`:
- Around line 17-19: The current detection for Map vs Array on site.components
is ambiguous because it checks for the existence of .values instead of its type;
update the logic in get-home-navigation (the site.components handling) to first
test Array.isArray(site.components) and return it directly if true, otherwise
check site.components instanceof Map or typeof site.components.values ===
'function' and call Array.from(site.components.values()) in that case, and
finally fallback to Array.from(site.components) for other iterable objects; this
ensures you don't call Array.from on an array and properly detect Map-like
objects.
🪄 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: 2c79a190-a6e9-4383-80cd-15f1e16800bf
⛔ Files ignored due to path filters (20)
src/font/inter-display/InterDisplay-Black.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-BlackItalic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-Bold.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-BoldItalic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-ExtraBold.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-ExtraBoldItalic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-ExtraLight.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-ExtraLightItalic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-Italic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-Light.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-LightItalic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-Medium.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-MediumItalic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-Regular.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-SemiBold.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-SemiBoldItalic.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-Thin.ttfis excluded by!**/*.ttfsrc/font/inter-display/InterDisplay-ThinItalic.ttfis excluded by!**/*.ttfsrc/img/redpanda-wordmark.svgis excluded by!**/*.svgsrc/js/vendor/algolia/instantsearch.production.min.jsis excluded by!**/*.min.js
📒 Files selected for processing (129)
.gitignoreMETADATA-UX-PROPOSAL.mdcontext/header.jsongulp.d/tasks/build-preview-pages.jsgulp.d/tasks/build.jsgulp.d/tasks/generate-bloblang-grammar.jsgulpfile.jspreview-src/home.adocpreview-src/ui-model.ymlsrc/css/bloblang-playground.csssrc/css/chat-panel.csssrc/css/component-home-v3.csssrc/css/data-platform.csssrc/css/doc-bump.csssrc/css/doc.csssrc/css/footer.csssrc/css/header.csssrc/css/highlight.csssrc/css/home.csssrc/css/labs-home.csssrc/css/markdown-dropdown.csssrc/css/metadata-improved.csssrc/css/nav.csssrc/css/product-switcher.csssrc/css/typeface-inter-display.csssrc/css/typeface-inter.csssrc/css/vars.csssrc/helpers/add-suggested-labs.jssrc/helpers/extract-description.jssrc/helpers/find-component.jssrc/helpers/format-release-date.jssrc/helpers/get-component-color.jssrc/helpers/get-component-header-data.jssrc/helpers/get-header-color.jssrc/helpers/get-header-data.jssrc/helpers/get-home-navigation.jssrc/helpers/get-index-data.jssrc/helpers/get-page-info.jssrc/helpers/gte.jssrc/helpers/has-markdown.jssrc/helpers/is-byoc-feature.jssrc/helpers/is-eol.jssrc/helpers/is-external-url.jssrc/helpers/is-limited-availability-feature.jssrc/helpers/json-safe.jssrc/helpers/list-related-labs.jssrc/helpers/log-missing.jssrc/helpers/lt.jssrc/helpers/lte.jssrc/helpers/markdown-url.jssrc/helpers/resolve-resource.jssrc/helpers/sort-components.jssrc/helpers/split.jssrc/helpers/strip-trailing-slash.jssrc/helpers/subtract.jssrc/helpers/support-end-date.jssrc/helpers/version-status.jssrc/js/01-nav.jssrc/js/02-on-this-page.jssrc/js/06-copy-to-clipboard.jssrc/js/07-expand-images.jssrc/js/08-move-anchors.jssrc/js/09-linkable-line-numbers.jssrc/js/10-cloud-api-feedback.jssrc/js/11-editable-placeholders.jssrc/js/12-activate-tooltips.jssrc/js/13-open-nested-tabs.jssrc/js/14-markdown-dropdown.jssrc/js/15-optimize-images.jssrc/js/16-bloblang-interactive.jssrc/js/17-bloblang-yaml.jssrc/js/19-chat-panel.jssrc/js/20-mermaid-zoom.jssrc/js/20-product-switcher.jssrc/js/21-breadcrumb-collapse.jssrc/js/22-version-selector.jssrc/js/23-nav-bucket.jssrc/js/24-move-connector-metadata.jssrc/js/25-topbar-dropdown.jssrc/js/react/AskAI.jsxsrc/js/react/chatPersistence.jssrc/js/react/components/ChatInterface.jsxsrc/js/react/persistentApiService.jssrc/js/vendor/ace/ace.jssrc/js/vendor/ace/mode-bloblang.jssrc/js/vendor/ace/mode-coffee.jssrc/js/vendor/ace/mode-json.jssrc/js/vendor/ace/mode-yaml.jssrc/js/vendor/ace/theme-github.jssrc/js/vendor/ace/worker-json.jssrc/js/vendor/ace/worker-yaml.jssrc/js/vendor/algolia/algoliasearch-lite.umd.jssrc/js/vendor/algolia/autocomplete-js.jssrc/js/vendor/algolia/autocomplete-plugin-algolia-insights.jssrc/js/vendor/algolia/autocomplete-plugin-query-suggestions.jssrc/js/vendor/algolia/autocomplete-plugin-recent-searches.jssrc/js/vendor/algolia/autocomplete-plugin-tags.jssrc/js/vendor/prism/prism-core.jssrc/js/vendor/prism/prism-line-highlight-plugin.jssrc/js/vendor/prism/prism-line-numbers-plugin.jssrc/js/vendor/sorttable.jssrc/layouts/component-home-v3.hbssrc/layouts/data-platform.hbssrc/layouts/labs-home.hbssrc/partials/algolia-script.hbssrc/partials/article.hbssrc/partials/bloblang-playground.hbssrc/partials/breadcrumbs.hbssrc/partials/bucket-header.hbssrc/partials/chat-panel.hbssrc/partials/component-home-v3.hbssrc/partials/contributors-modal.hbssrc/partials/data-platform.hbssrc/partials/docs-footer.hbssrc/partials/footer-scripts.hbssrc/partials/head-component-color.hbssrc/partials/head-scripts.hbssrc/partials/header-content.hbssrc/partials/home.hbssrc/partials/nav-bucket-recursive.hbssrc/partials/nav-expand.hbssrc/partials/nav-explore.hbssrc/partials/nav-menu-scroll.hbssrc/partials/nav-menu.hbssrc/partials/nav.hbssrc/partials/product-switcher.hbssrc/partials/status-footer.hbssrc/partials/version-selector.hbssrc/static/bloblang-docs.json
✅ Files skipped from review due to trivial changes (28)
- src/helpers/subtract.js
- src/helpers/gte.js
- src/helpers/lte.js
- preview-src/home.adoc
- src/helpers/strip-trailing-slash.js
- src/helpers/get-header-data.js
- src/helpers/get-component-header-data.js
- src/helpers/is-external-url.js
- src/helpers/support-end-date.js
- src/js/07-expand-images.js
- src/helpers/is-limited-availability-feature.js
- src/helpers/version-status.js
- gulp.d/tasks/generate-bloblang-grammar.js
- src/js/10-cloud-api-feedback.js
- src/helpers/find-component.js
- src/helpers/log-missing.js
- src/css/highlight.css
- src/helpers/get-header-color.js
- src/css/typeface-inter-display.css
- src/helpers/get-index-data.js
- src/helpers/json-safe.js
- src/helpers/extract-description.js
- src/js/12-activate-tooltips.js
- src/js/08-move-anchors.js
- gulp.d/tasks/build-preview-pages.js
- gulpfile.js
- src/js/20-mermaid-zoom.js
- .gitignore
🚧 Files skipped from review as they are similar to previous changes (7)
- src/helpers/is-byoc-feature.js
- src/js/06-copy-to-clipboard.js
- src/css/typeface-inter.css
- src/css/footer.css
- src/js/11-editable-placeholders.js
- src/helpers/is-eol.js
- src/css/vars.css
Comment on lines
+174
to
+177
| animation: sbProductMenuIn 0.12s ease-out; | ||
| } | ||
|
|
||
| @keyframes sbProductMenuIn { |
Contributor
There was a problem hiding this comment.
Rename the keyframe to kebab-case to pass stylelint.
sbProductMenuIn violates the configured keyframe naming rule and will fail linting/bundling.
Suggested fix
-.sb-product-menu {
+.sb-product-menu {
position: absolute;
@@
- animation: sbProductMenuIn 0.12s ease-out;
+ animation: sb-product-menu-in 0.12s ease-out;
}
-@keyframes sbProductMenuIn {
+@keyframes sb-product-menu-in {
from {
opacity: 0;
transform: translateY(-4px);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| animation: sbProductMenuIn 0.12s ease-out; | |
| } | |
| @keyframes sbProductMenuIn { | |
| animation: sb-product-menu-in 0.12s ease-out; | |
| } | |
| `@keyframes` sb-product-menu-in { |
🧰 Tools
🪛 Stylelint (17.11.1)
[error] 177-177: Expected keyframe name "sbProductMenuIn" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
🤖 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/css/product-switcher.css` around lines 174 - 177, The keyframe name
sbProductMenuIn violates the kebab-case rule; rename the `@keyframes` identifier
to kebab-case (e.g., sb-product-menu-in) and update any usages — specifically
the animation declaration that currently references sbProductMenuIn — to the new
kebab-case name so both the `@keyframes` rule and the animation property match the
new identifier.
- Added --topbar-bg to existing html[data-theme=dark] block - Added --topbar-bg to existing html:not([data-theme=dark]) block - Removed duplicate theme selector blocks that caused lint error - Keeps topbar solid background for both light and dark modes
- Delete metadata-improved.css (never imported or used) - Delete METADATA-UX-PROPOSAL.md (outdated proposal document) These files were created as part of a UX exploration but were never integrated into the actual implementation.
CSS fixes: - Remove overflow:hidden from Ace editor containers to prevent scrollbar clipping - Replace deprecated word-break:break-word with overflow-wrap:anywhere - Replace deprecated clip with modern clip-path - Rename camelCase keyframes to kebab-case (toastSlideIn→toast-slide-in, etc) JavaScript fixes: - Fix timezone handling in format-release-date (use UTC accessors) - Update outdated comment referencing ROOT component - Remove duplicate excludedRoles array in has-markdown - Fix metadata persistence in Bloblang mini-playground - Fix WASM initialization state cleanup on errors - Hide all matching Ask AI buttons, not just first - Use non-interactive span for breadcrumb fallbacks - Move global event listeners outside forEach to avoid duplicates - Update Ace editor minLines default from 4 to 5 - Add hyphenated YAML key support in Connect indicators All changes validated with gulp lint and test:quick.
The topbar was using translucent backgrounds (8% opacity with transparent), making it see-through. Changed to solid backgrounds using component colors: - Light mode: color-mix(component 8%, white) - solid light tint - Dark mode: color-mix(component 30%, #0f172a) - solid dark tint Changes: - src/partials/head-component-color.hbs: Changed from 'transparent' to solid backgrounds - src/css/vars.css: Added solid topbar-bg for all 4 component-specific body selectors This maintains the component color theming while ensuring the topbar is opaque.
Add overflow: hidden to .editor-section-collapsible to clip content to border-radius. This prevents child editors from bleeding outside the rounded 8px corners of the container. The overflow: hidden here only clips visual overflow to the border-radius. The .editor elements inside have their own overflow: auto for scrollbars.
The toolbar (containing the nav-toggle button for mobile navigation) was being excluded on pages with role="home", making the navigation menu inaccessible on mobile devices. Changes: - Remove conditional that excluded toolbar on home pages - Mobile users can now access the navigation menu on all pages Testing: - Verified nav-toggle button appears on home page in mobile viewport - Confirmed navigation menu opens correctly when clicked - All lint checks pass Fixes mobile navigation accessibility issue. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit implements two major features for the home page: 1. NEW Badge System: - Add is-new-resource.js helper to check if pages have page-new attribute - Display green "NEW" badges on home page cards when linked pages are new - Works with home page product cards and intent cards - Badge styles match existing pattern from component-home-v3 2. Interim Home Page (Pre-ADP Launch): - Add has-component.js helper for automatic component detection - Wrap ADP intent card and products section in conditionals - ADP cards automatically hide when component doesn't exist - ADP cards automatically show when component exists - Restructure Cloud card with nested sub-cards (Streaming, Connect, SQL) - Cloud structure now mirrors Self-Managed with parent-child pattern - SQL sub-card displays NEW badge when page has page-new attribute 3. Bug Fix: - Fix resolve-resource.js to handle undefined resources gracefully - Prevent "Cannot read properties of undefined" errors in templates Files Changed: - src/helpers/is-new-resource.js (NEW): Check for page-new attribute - src/helpers/has-component.js (NEW): Detect component existence - src/helpers/resolve-resource.js: Add undefined safety check - src/css/home.css: Add NEW badge styles - src/partials/home.hbs: Add conditionals, restructure Cloud card - preview-src/home.adoc: Add Cloud sub-product attributes for testing All changes preserve existing code for future ADP release. The conditional logic ensures zero manual configuration - components show/hide automatically based on their existence in the site model. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes: - Add Ask AI search input to data-platform hero with suggestion chips - Add NEW badge support for Cloud BYOC SQL stat - Fix is-new-resource helper to check all components (not just current) - Fix overflow menu showing on desktop (add !important to display: none) - Add Ask AI form handler JavaScript to data-platform template This is the interim home page solution until ADP launches, highlighting Redpanda SQL in Cloud BYOC with the NEW badge. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add whats-new.css import to site.css (was missing, causing no styling) - Fix aggregate-whats-new helper to get contentCatalog from options.data.root - Update cloud-docs link to use full component prefix for proper resolution - Add conditional layout class for What's New section - Support both light and dark modes with proper CSS variables
- Add whats-new section to component-home-v3 template using get-whats-new-items helper - Add CSS styling for ch3-whats-new-wrapper with proper width and spacing - Section displays after hero and before tabs - Ready for content team to add component-whats-new attributes to pages
- Fix nav-menu.hbs to use correct attributes (has-custom-nav, custom-navigation) - Add logic to nav-menu-scroll.hbs to show home component's own navigation - Create get-component-navigation helper to retrieve component navigation - Mobile dropdown positioning fix for version selector - Remove 'Home' from breadcrumbs hierarchy - Skip pagination for home page - Revert Cloud section to simple single card structure
- Add sparkles icon to bucket-header.hbs for ADP navigation - Clean up debug comments from nav-menu-scroll.hbs - Update test-home-component helper to check contentCatalog
Makes hero sections consistent across all component landing pages (streaming, cloud, connect, self-managed) by increasing from 720px to 1100px.
Critical Fixes: - Fix undefined metadataContainer causing IntersectionObserver error in article.hbs - Fix empty version dropdown for pages with "default" version in nav-explore.hbs - Remove console.log debug statements from navigation helpers Landing Page Enhancements: - Make all landing page sections span full-width (remove max-width constraints) - Apply consistent layout across data-platform and component-home-v3 pages - Sections now extend edge-to-edge with padding, matching hero behavior - Updated: .dp-section, .ch3-section, .ch3-tabs, .ch3-hero-columns Ask AI Integration: - Add Ask AI search bar to all component-home-v3 hero sections - Add component-specific AI suggestion questions via get-ai-suggestions.js helper - Suggestions configurable per component via antora.yml attributes (ai-suggestion-1 through ai-suggestion-4) - Show Ask AI button on home page (previously hidden) - Full styling matching data-platform design with sparkle icon CSS Improvements: - Add empty line before custom properties for stylelint compliance - Consistent gutter and max-width variables across landing pages Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix issue where labs section title appears on landing pages even when no actual lab items (labs-1-title through labs-4-title) are provided. Now only renders labs section if both title and at least one lab exist. Fixes empty labs sections on streaming and connect landing pages.
- Fix HTML entities in AI suggestion questions (use triple braces) - Fix bold text not appearing bold (use proper font-weight) Fixes: 1. AI suggestions showed ' instead of apostrophes 2. Bold markup (strong, b) rendered with lighter weight instead of bold Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Makes home page layout consistent with other landing pages by removing max-width constraints from: - .home-hero-inner (was 1100px) - .home-intent-container (was 900px) - .home-products-container (was 900px) - .home-paths-container (was 1000px) - .home-nav-container (was 1200px) Now uses full-width layout with gutter padding like data-platform and component-home-v3 pages. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Updated the page options 'Ask AI about this topic' button to: - Open the new chat drawer instead of the old Kapa modal - Pre-fill the chat input with context about the current page - Focus the input field after opening This makes the page options button consistent with the new Ask AI drawer implementation. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove !important from default hide rule to allow mobile override - Add !important to mobile show rule for proper specificity - Add tb-dropdown-trigger class to overflow button for JavaScript handler - Fixes Labs and Ask a Human links not being accessible on mobile
- Add mobile breakpoint to prevent version dropdown from extending beyond viewport - Set max-width to account for nav padding and prevent cutoff on left side - Fixes version dropdown being cut off on streaming pages on mobile
- Add mobile breakpoint to reset .breadcrumbs .sm-ver-panel positioning - Allows component-home-v3 mobile centering styles to work correctly - Version dropdown now centered and visible on screens <= 640px
- Add mobile breakpoints for .component-indicator-sticky .sm-ver-panel - Add mobile breakpoints for .breadcrumbs .sm-ver-panel - Use position: fixed with top: 50%, left: 50% for mobile centering - Use !important to override default positioning rules
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.