Add Connect Tools section to TOC on Redpanda Connect pages#363
Add Connect Tools section to TOC on Redpanda Connect pages#363JakeSCahill merged 12 commits intomainfrom
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
📝 WalkthroughWalkthroughThe PR introduces a Connect Tools Floating Action Button feature on the Connect page. A new CSS module provides styling for a mobile-first FAB with expanded menu, desktop TOC integration, dark mode support, and accessibility considerations. JavaScript initializes the FAB, detects first-time users via localStorage, manages menu toggles with keyboard navigation, and handles tooltip dismissal. New Handlebars partials define the FAB markup and integrate Connect Tools links (Bloblang Playground and Claude AI Skills) into both the mobile FAB and desktop TOC sidebar. Additional changes include scroll padding calculations and resource preloading for the Bloblang interactive tool. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ 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: 1
🤖 Fix all issues with AI agents
In `@src/js/18-connect-tools-fab.js`:
- Around line 30-36: The code currently guards only for fab and trigger but not
menu, which leads to runtime errors when menu is missing; update the
early-return guard in the top-level block that references fab and trigger to
also check menu (e.g., if (!fab || !trigger || !menu) return) and/or add
null-safe checks before any later uses of menu in functions that reference
connect-tools-menu (locations using menu at/around where it's referenced later);
ensure tooltip and tooltipDismiss logic remains unchanged but any code that
calls methods on menu is protected by the new guard or explicit null checks.
🧹 Nitpick comments (4)
src/partials/connect-tools-fab.hbs (1)
13-19: Consider addingaria-hidden="true"to decorative SVG icons.The SVG icons are decorative since accompanying text labels provide meaning. Adding
aria-hidden="true"prevents screen readers from announcing them.Example for one icon
- <svg class="fab-icon fab-icon-tools" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <svg class="fab-icon fab-icon-tools" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">Also applies to: 36-39, 54-58
src/partials/toc.hbs (1)
20-23: SVG icons rely on CSS for stroke color.The SVGs don't have an explicit
strokeattribute in the markup; instead, they rely on.toc-connect-tools-list svg { stroke: currentColor; }from the CSS. This works but could cause invisible icons if CSS fails to load.Add defensive stroke attribute
- <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">Also applies to: 29-32
src/js/18-connect-tools-fab.js (2)
9-15: Preview mode may show Connect Tools on non-Connect pages.The
isPreviewcheck enables Connect Tools on all pages during local development (localhost/127.0.0.1), not just Connect pages. This could cause confusion when testing other documentation sections locally.Consider either:
- Removing the preview bypass if not needed
- Adding a query param override (e.g.,
?connectTools=true) for explicit testing
38-39: Disabled FAB still has active event handlers attached.The FAB is disabled (line 39 commented out), but all subsequent event listeners (click, keydown) are still attached. If the FAB is intentionally hidden, consider returning early after line 39 to avoid setting up unused handlers. Alternatively, if this is temporary scaffolding for future mobile support, a brief comment explaining the intent would help maintainability.
- Move component detection from JS to Handlebars templates - Components can now define toc-tools-title and toc-tools-links in antora.yml - URLs can be Antora resource IDs (resolved automatically), absolute paths, or external URLs - External URLs bypass resolution and open in new tab - Fix mobile TOC: hide sidebar properly, add indentation for dropdown items - Fix mobile nav cutoff when no version dropdown exists - Add scrollable TOC with Connect Tools pinned at bottom on desktop - Scroll active TOC item into view on page load and navigation - Add starts-with helper for URL type detection - Update preview to support component version attributes
- toc-connect-tools → toc-tools - has-connect-tools → has-toc-tools - tocConnectTools → tocTools
Add missing closing quote in URL property that was causing JSON parse error during preview build.
- Defer VWO script loading and remove body-hiding behavior - Lazy load Kapa AI widget on first interaction (Cmd+K or click) - Lazy load Algolia search scripts on search focus - Add passive event listeners to scroll handlers - Fix single-click activation for Kapa and Algolia lazy loading Key improvements: - Total Blocking Time: 2,370ms -> 110ms (-95%) - JS Execution Time: 4.5s -> 0.6s (-87%) - Unused JavaScript: 918 KiB -> 26 KiB (-97%)
Changed FAB template to use 'text' property instead of 'label' to match the desktop TOC tools section in toc.hbs. Both templates now consistently use the same property names from toc-tools-links configuration.
The h3 "On this page" title was being added inside .toc-menu, causing a 40px gap at the top of the scrollable area when Connect Tools section is visible. Now the h3 is inserted before .toc-menu so it stays fixed while the TOC content scrolls.
2 participants
https://deploy-preview-363--docs-ui.netlify.app/
Summary
How to Use
Add these attributes to your component's
antora.yml:Link Properties
texturl/foo/bar.html), or external URLiconterminalorlayersexternaltruefor external links (opens in new tab)URL Types
redpanda-connect:guides:bloblang/walkthrough.adoc) - resolved relative to current page/redpanda-connect/24.3/guides/bloblang/walkthrough.html) - used as-ishttps://example.com) - requiresexternal: trueTest plan