Add BYOC and Cloud platform badges for ADP documentation#376
Open
JakeSCahill wants to merge 9 commits intomainfrom
Open
Add BYOC and Cloud platform badges for ADP documentation#376JakeSCahill wants to merge 9 commits intomainfrom
JakeSCahill wants to merge 9 commits intomainfrom
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 failed. Why did it fail? →
|
Contributor
📝 WalkthroughWalkthroughThis pull request introduces UI components for displaying BYOC (Bring Your Own Cloud) and Cloud availability information across documentation pages. The changes add:
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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
Comment on lines
153
to
+155
| .navbar-item, | ||
| .navbar-link { | ||
| color: var(--navbar-menu-font-color); | ||
| color: var(--nav-text-color, var(--navbar-menu-font-color)); |
Contributor
There was a problem hiding this comment.
Apply --nav-text-color to the desktop .navbar-end override too.
The later desktop rule for .navbar-end > .navbar-item, .navbar-end .navbar-link still uses var(--navbar-font-color), so custom header text colors won’t apply to right-side desktop nav items.
🎨 Proposed fix
.navbar-end > .navbar-item,
.navbar-end .navbar-link {
- color: var(--navbar-font-color);
+ color: var(--nav-text-color, var(--navbar-font-color));
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/css/header.css` around lines 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.
Comment on lines
+185
to
+195
| /* Dark mode overrides */ | ||
| html[data-theme=dark] { | ||
| /* BYOC badge - brighter blue for dark mode visibility */ | ||
| --byoc-label-background: #4da8da; | ||
| --byoc-highlight-background-color: rgba(77, 168, 218, 0.15); | ||
| /* Cloud badge - brighter purple for dark mode visibility */ | ||
| --cloud-label-background: #9d97ff; | ||
| --cloud-highlight-background-color: rgba(157, 151, 255, 0.15); | ||
| /* Availability block - brighter for dark mode */ | ||
| --availability-block-background: rgba(173, 181, 189, 0.15); | ||
| --availability-block-border: #adb5bd; |
Contributor
There was a problem hiding this comment.
Override dark-mode badge text colors with the bright backgrounds.
The dark-mode BYOC/Cloud backgrounds are lightened, but the label text stays #fff from Lines 130 and 134. That makes the pill text low-contrast in dark mode.
♿ Proposed contrast fix
html[data-theme=dark] {
/* BYOC badge - brighter blue for dark mode visibility */
+ --byoc-label-color: var(--slate-900);
--byoc-label-background: `#4da8da`;
--byoc-highlight-background-color: rgba(77, 168, 218, 0.15);
/* Cloud badge - brighter purple for dark mode visibility */
+ --cloud-label-color: var(--slate-900);
--cloud-label-background: `#9d97ff`;
--cloud-highlight-background-color: rgba(157, 151, 255, 0.15);
/* Availability block - brighter for dark mode */
--availability-block-background: rgba(173, 181, 189, 0.15);
--availability-block-border: `#adb5bd`;
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/css/vars.css` around lines 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.
Comment on lines
+55
to
+71
| <div class="availability-block"> | ||
| <strong>Available in:</strong> | ||
| {{#if page.attributes.byoc}} | ||
| {{#unless page.attributes.cloud-only}} | ||
| BYOC | ||
| {{/unless}} | ||
| {{/if}} | ||
| {{#if page.attributes.cloud-only}} | ||
| {{#unless page.attributes.byoc}} | ||
| Cloud | ||
| {{/unless}} | ||
| {{/if}} | ||
| {{#unless page.attributes.byoc}} | ||
| {{#unless page.attributes.cloud-only}} | ||
| Cloud, BYOC | ||
| {{/unless}} | ||
| {{/unless}} |
Contributor
There was a problem hiding this comment.
Availability block renders empty when both byoc and cloud-only are set.
The current chain only handles three of four combinations:
byoc |
cloud-only |
Output |
|---|---|---|
| true | false | BYOC |
| false | true | Cloud |
| false | false | Cloud, BYOC |
| true | true | (nothing — label shows "Available in:" with no value) |
If both attributes are ever set on an ADP page, readers will see a broken-looking Available in: with no platforms listed. Even if that state is considered semantically unusual, failing closed to "both platforms" is safer than emitting an empty value. The nested if/unless is also harder to read than an explicit fallback.
🛠️ Suggested simplification that also handles the both-set case
<div class="availability-block">
<strong>Available in:</strong>
- {{`#if` page.attributes.byoc}}
- {{`#unless` page.attributes.cloud-only}}
- BYOC
- {{/unless}}
- {{/if}}
- {{`#if` page.attributes.cloud-only}}
- {{`#unless` page.attributes.byoc}}
- Cloud
- {{/unless}}
- {{/if}}
- {{`#unless` page.attributes.byoc}}
- {{`#unless` page.attributes.cloud-only}}
- Cloud, BYOC
- {{/unless}}
- {{/unless}}
+ {{`#if` page.attributes.byoc}}
+ {{`#if` page.attributes.cloud-only}}Cloud, BYOC{{else}}BYOC{{/if}}
+ {{else}}
+ {{`#if` page.attributes.cloud-only}}Cloud{{else}}Cloud, BYOC{{/if}}
+ {{/if}}📝 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
| <div class="availability-block"> | |
| <strong>Available in:</strong> | |
| {{#if page.attributes.byoc}} | |
| {{#unless page.attributes.cloud-only}} | |
| BYOC | |
| {{/unless}} | |
| {{/if}} | |
| {{#if page.attributes.cloud-only}} | |
| {{#unless page.attributes.byoc}} | |
| Cloud | |
| {{/unless}} | |
| {{/if}} | |
| {{#unless page.attributes.byoc}} | |
| {{#unless page.attributes.cloud-only}} | |
| Cloud, BYOC | |
| {{/unless}} | |
| {{/unless}} | |
| <div class="availability-block"> | |
| <strong>Available in:</strong> | |
| {{`#if` page.attributes.byoc}} | |
| {{`#if` page.attributes.cloud-only}}Cloud, BYOC{{else}}BYOC{{/if}} | |
| {{else}} | |
| {{`#if` page.attributes.cloud-only}}Cloud{{else}}Cloud, BYOC{{/if}} | |
| {{/if}} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/partials/article.hbs` around lines 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.
| <div id="topbar-nav" class="navbar-menu" {{#if isStandaloneWidget}}style="background-color: inherit;"{{else if page.component.latest.asciidoc.attributes.page-header-data}}{{#with page.component.latest.asciidoc.attributes.page-header-data}}style="background-color: {{this.color}}; {{#if this.text-color}}--nav-text-color: {{this.text-color}};{{/if}}"{{/with}}{{else}}style="background-color: var(--default-header-color)"{{/if}}> | ||
| {{#each (sort-components site.components)}} | ||
| <a class="navbar-item {{#if (eq this.title @root.page.component.title)}}is-current{{/if}}" {{#if @root.isStandaloneWidget}}style="color: white;"{{/if}} href="{{{this.url}}}">{{this.title}}</a> | ||
| <a class="navbar-item {{#if (eq this.title @root.page.component.title)}}is-current{{/if}}" {{#if @root.isStandaloneWidget}}style="color: white;"{{else if @root.page.component.latest.asciidoc.attributes.page-header-data.text-color}}style="color: {{@root.page.component.latest.asciidoc.attributes.page-header-data.text-color}};"{{/if}} href="{{{this.url}}}">{{this.title}}</a> |
Contributor
There was a problem hiding this comment.
Remove the redundant inline link color so hover/current states still work.
Line 18 overrides stylesheet states like .navbar-item:hover and .navbar-item.is-current. Since Lines 3 and 16 already set --nav-text-color, the non-standalone inline color is unnecessary.
🎨 Proposed fix
- <a class="navbar-item {{`#if` (eq this.title `@root.page.component.title`)}}is-current{{/if}}" {{`#if` `@root.isStandaloneWidget`}}style="color: white;"{{else if `@root.page.component.latest.asciidoc.attributes.page-header-data.text-color`}}style="color: {{`@root.page.component.latest.asciidoc.attributes.page-header-data.text-color`}};"{{/if}} href="{{{this.url}}}">{{this.title}}</a>
+ <a class="navbar-item {{`#if` (eq this.title `@root.page.component.title`)}}is-current{{/if}}" {{`#if` `@root.isStandaloneWidget`}}style="color: white;"{{/if}} href="{{{this.url}}}">{{this.title}}</a>📝 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
| <a class="navbar-item {{#if (eq this.title @root.page.component.title)}}is-current{{/if}}" {{#if @root.isStandaloneWidget}}style="color: white;"{{else if @root.page.component.latest.asciidoc.attributes.page-header-data.text-color}}style="color: {{@root.page.component.latest.asciidoc.attributes.page-header-data.text-color}};"{{/if}} href="{{{this.url}}}">{{this.title}}</a> | |
| <a class="navbar-item {{`#if` (eq this.title `@root.page.component.title`)}}is-current{{/if}}" {{`#if` `@root.isStandaloneWidget`}}style="color: white;"{{/if}} href="{{{this.url}}}">{{this.title}}</a> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/partials/header-content.hbs` at 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.
| <div class="item {{#if (eq ./url @root.page.url)}}is-current-page{{/if}} {{#if ./items.length}}dropdown{{/if}}"> | ||
| {{#if ./url}} | ||
| <a class="nav-link {{~#if (is-beta-feature ./url)}} cloud-beta{{~/if}}{{~#if (is-limited-availability-feature ./url)}} cloud-limited-availability{{~/if}}" href=" | ||
| <a class="nav-link {{~#if (is-beta-feature ./url)}} cloud-beta{{~/if}}{{~#if (is-limited-availability-feature ./url)}} cloud-limited-availability{{~/if}}{{~#unless @root.page.attributes.adp}}{{~#if (is-byoc-feature ./url)}} cloud-byoc{{~/if}}{{~#if (is-cloud-feature ./url)}} cloud-only{{~/if}}{{~/unless}}" href=" |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Inspect navigation helper definitions/usages to confirm whether ADP can be checked per nav target URL.
# Expected: A helper or nav metadata source that can classify ./url as ADP before suppressing cloud-byoc/cloud-only.
rg -n -C3 'is-(byoc|cloud|adp)-feature|cloud-byoc|cloud-only|attributes\.adp' --type js --type hbsRepository: redpanda-data/docs-ui
Length of output: 5120
🏁 Script executed:
#!/bin/bash
# Find helper definitions for feature checkers
echo "=== Helper definitions for feature checks ==="
fd -e js | xargs grep -l 'is-beta-feature\|is-byoc-feature\|is-cloud-feature\|is-adp-feature' | head -5
echo -e "\n=== Search for helper registration/definitions ==="
rg -n 'registerHelper.*is-(byoc|cloud|adp|beta)-feature' --type js -A 3
echo -e "\n=== Search for feature helper function bodies ==="
rg -n 'function.*is-(byoc|cloud|adp|beta)-feature|const.*is-(byoc|cloud|adp|beta)-feature|is-(byoc|cloud|adp|beta)-feature.*=' --type js -A 5Repository: redpanda-data/docs-ui
Length of output: 213
🏁 Script executed:
#!/bin/bash
# Broader search for helper definitions
echo "=== Search all files for feature helper registration ==="
rg -n 'is-beta-feature|is-byoc-feature|is-cloud-feature' -i | head -30
echo -e "\n=== Look for registerHelper or Handlebars setup ==="
rg -n 'registerHelper|hbs\.registerHelper' | head -20
echo -e "\n=== Check for helpers directory/files ==="
find . -type f -name '*helper*' -o -name '*helpers*' 2>/dev/null | grep -v node_modules | head -20
echo -e "\n=== Check common config locations ==="
ls -la src/ | head -20Repository: redpanda-data/docs-ui
Length of output: 2283
🏁 Script executed:
#!/bin/bash
# List helpers in src/helpers
echo "=== Files in src/helpers/ ==="
ls -la src/helpers/
echo -e "\n=== Content of is-byoc-feature.js ==="
cat src/helpers/is-byoc-feature.js
echo -e "\n=== Content of is-cloud-feature.js ==="
cat src/helpers/is-cloud-feature.js
echo -e "\n=== Content of is-beta-feature.js ==="
cat src/helpers/is-beta-feature.js
echo -e "\n=== Content of is-limited-availability-feature.js ==="
cat src/helpers/is-limited-availability-feature.jsRepository: redpanda-data/docs-ui
Length of output: 4953
🏁 Script executed:
#!/bin/bash
# The is-byoc-feature and is-cloud-feature helpers don't exist!
# Let's check what attribute names are used for BYOC/Cloud
echo "=== Search for byoc attribute usage ==="
rg -n 'byoc|cloud-only' --type hbs -B 1 -A 1 | head -40
echo -e "\n=== Check page-attribute.js helper ==="
cat src/helpers/page-attribute.js
echo -e "\n=== Search for is-enterprise pattern (similar feature helper) ==="
cat src/helpers/is-enterprise.jsRepository: redpanda-data/docs-ui
Length of output: 4621
🏁 Script executed:
#!/bin/bash
# Check if these helpers are mentioned in any documentation or TODOs
echo "=== Search for is-byoc-feature or is-cloud-feature in all files ==="
rg -n 'is-byoc-feature|is-cloud-feature' --no-heading
echo -e "\n=== Check git status to see if files were deleted ==="
git log --oneline --all -- src/helpers/is-byoc-feature.js src/helpers/is-cloud-feature.js 2>/dev/null | head -10
echo -e "\n=== Search for TODO/FIXME comments related to byoc/cloud ==="
rg -n 'TODO|FIXME|XXX|HACK' src/partials/nav-tree.hbs
echo -e "\n=== Check nav-tree.hbs full context around line 8 ==="
cat -n src/partials/nav-tree.hbs | sed -n '1,20p'Repository: redpanda-data/docs-ui
Length of output: 1906
🏁 Script executed:
#!/bin/bash
# Check how undefined helpers are handled in Handlebars
echo "=== Check if these helpers are maybe created dynamically or conditionally ==="
rg -n 'is-byoc-feature|is-cloud-feature' src/ --type js
echo -e "\n=== Check if there's a pattern in how helpers handle undefined targets ==="
rg -n 'registerHelper|handlebars' --type js | head -10
echo -e "\n=== Look for any test files that might reveal expected behavior ==="
find . -type f -name '*.test.*' -o -name '*.spec.*' 2>/dev/null | head -10Repository: redpanda-data/docs-ui
Length of output: 7068
Create is-byoc-feature.js and is-cloud-feature.js helpers; fix the ADP guard.
The helpers is-byoc-feature and is-cloud-feature do not exist in src/helpers/, so the conditional classes will never be applied. Create these helpers following the pattern of is-beta-feature.js and is-enterprise.js to check target page attributes via contentCatalog (e.g., page-byoc, page-cloud-only).
Additionally, the guard @root.page.attributes.adp checks the currently viewed page, not the target nav item. This suppresses BYOC/Cloud badges for all navigation links on ADP pages, even links to non-ADP targets. Instead, check whether the target URL is an ADP page (via helper or direct attribute lookup) before suppressing the badges.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/partials/nav-tree.hbs` at 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.
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
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.
Summary
Adds inline status badges in the sticky header for ADP pages when features are limited to specific platforms.
Page Attributes for ADP Pages
For ADP pages (
:adp: trueset in antora.yml), use these attributes to display platform restriction badges::page-byoc-only: true:page-cloud-only: trueNote: These attributes are mutually exclusive. Set only one to indicate platform restriction. If neither is set, no badge appears (feature is available on all platforms).
Visual Design
Other Changes