add limited availability badge #365
Conversation
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
📝 WalkthroughWalkthroughThis pull request introduces a "Limited Availability" badge feature across the documentation UI, mirroring the existing beta badge pattern. It adds documentation for the feature in a new AsciiDoc page, updates configuration with new navigation items and page-level attributes, introduces CSS variables and styling for the badge appearance, creates helper functions to detect limited availability status and extract descriptions from content, and modifies Handlebars templates to conditionally render the badge in the article metadata, sticky table-of-contents, and navigation areas. A new social-meta partial consolidates Open Graph and Twitter Card metadata handling. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
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}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@src/helpers/extract-description.js`:
- Around line 11-14: The exported helper (module.exports) is receiving
Handlebars' options hash as the second argument so maxLength becomes an object;
update the helper to detect when the second argument is an options hash (check
for an object with a "hash" property), extract a numeric maxLength from
options.hash.maxLength (fall back to the default 160 if missing or not a
number), and coerce it to a Number before using it in the description.length >
maxLength comparison (also keep the existing guard for non-string content); this
preserves calling from templates like {{extract-description page.contents
maxLength=200}} and ensures truncation works.
In `@src/helpers/is-limited-availability-feature.js`:
- Around line 18-22: Loop currently assumes navGroup.pub and navGroup.asciidoc
exist and directly reads navGroup.pub.url and navGroup.asciidoc.attributes,
which can throw TypeError for unpublishable or unpopulated entries; update the
loop over navGroupCache to guard these properties (e.g., check navGroup.pub &&
navGroup.pub.url === navUrl and navGroup.asciidoc &&
navGroup.asciidoc.attributes &&
navGroup.asciidoc.attributes['page-limited-availability']) before accessing them
so only safe accesses return true.
In `@src/partials/article.hbs`:
- Around line 73-93: The limited-availability tooltip initialization omits the
Tippy.js option to append tooltips to body, which can cause clipping/stacking
issues; update the two tippy(...) calls that target topLimitedAvailabilityBadge
and navLimitedAvailabilityBadge to include appendTo: () => document.body
(matching the beta tooltip usage) so the popper elements are appended to
document.body rather than their parent containers.
In `@src/partials/social-meta.hbs`:
- Around line 15-20: The meta title tags use unescaped triple-stache expressions
({{{this}}} and {{{`@root.page.component.title`}}}) which can inject raw HTML and
break content="..." attributes; replace these with HTML-escaped double-stache
expressions ({{this}} and {{`@root.page.component.title`}}) or pass the values
through the existing detag/escape helper (e.g., detag or an escape helper)
before interpolation so titles are sanitized when rendered in the meta
property="og:title" and similar meta tag content attributes.
- Around line 40-48: The OG image currently points to an SVG
(redpanda-docs-logo.svg) which many social platforms don't render; update the
template in social-meta.hbs to reference a raster fallback (e.g.,
redpanda-docs-logo.png at 1200x630) in both branches that build the URL (the
{{`#if` site.url}} branch and the else branch) by replacing the SVG filename with
the PNG fallback (preserve use of {{site.url}} and {{uiRootPath}}), and ensure
the meta tags (og:image and any twitter:image equivalents) point to that PNG and
maintain the width/height/meta-alt entries already present.
🧹 Nitpick comments (6)
src/partials/nav-tree.hbs (1)
8-8: Bothcloud-betaandcloud-limited-availabilitycan apply simultaneously.If a page has both
page-beta(or equivalent) andpage-limited-availabilityattributes, both::afterpseudo-elements would try to render. Since an element can only have one::after, only the last rule in CSS specificity order would take effect. This is fine if mutual exclusivity is intended — but if a page could legitimately carry both flags, only the limited-availability badge would render (it comes later in the stylesheet). Worth confirming this is the desired behavior.src/helpers/extract-description.js (2)
29-33: Line 32 regex is unreachable — newlines are already replaced on line 31.
/\s+/gon line 31 replaces all whitespace (including\n) with a single space. By the time line 32 executes, there are no newlines left, so/\n\s*\n/gcan never match.♻️ Swap the order or remove the dead regex
cleanText = cleanText - .replace(/\s+/g, ' ') // Replace multiple spaces with single space - .replace(/\n\s*\n/g, ' ') // Remove line breaks + .replace(/\n\s*\n/g, ' ') // Collapse paragraph breaks first + .replace(/\s+/g, ' ') // Then normalize all remaining whitespace .trim()
36-50: First-sentence extraction discards the period/punctuation.
cleanText.split(/[.!?]+/)drops the sentence-ending punctuation. The extracted description will read as an incomplete fragment (e.g.,"This page tests the Limited Availability badge in the UI preview"without the trailing period). For a meta description this is cosmetically fine, but if you want grammatically complete sentences, capture the delimiter too.src/helpers/is-limited-availability-feature.js (1)
3-4: Module-level caches persist across the process lifetime.The
navGroupCacheandcomponentCachevariables at lines 3–4 are module-level and persist for the entire Node.js process. In watch/serve mode, if pages are added or attributes change, the cache will serve stale data until a different component name is encountered. This matches the existing caching pattern inis-beta-feature.js, confirming this is an established approach in the codebase.src/css/metadata.css (1)
232-283: Consider consolidating duplicated badge styles.The limited-availability styles (lines 232–283) are nearly identical to the beta styles (lines 180–230), differing only in class names, CSS variable references, and
min-width. You could reduce duplication by extracting shared properties into a common class (e.g.,.badge-label,.nav-badge-container,.nav-badge-label) and layering only the differing values via modifier classes.This is a low-priority cleanup and fine to defer.
src/partials/social-meta.hbs (1)
22-37: Description fallback logic is repeated three times (OG, Twitter, itemprop).The same cascade (page.description → extract-description → ROOT/component fallback) is duplicated across OG (lines 23–37), Twitter (lines 62–76), and partially for itemprop (lines 89–93). Additionally,
head-info.hbshas a fourth copy for the<meta name="description">tag. Consider computing the description once and reusing it, e.g., via a Handlebars variable or a dedicated helper.Also applies to: 61-76, 88-98
1 participant
This PR introduces a new limited availability badge to be used in pages.
Pages that have the attribute
:page-limited-availability: truewill haveDocs how to use it redpanda-data/docs-site#158
Mobile
