Add connector logos and Bloblang interactive features#359
Merged
JakeSCahill merged 8 commits intomainfrom Feb 3, 2026
Merged
Conversation
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughAdds full Bloblang support to the docs UI: new documentation pages and static bloblang docs JSON, Prism and Ace syntax definitions, new CSS for an interactive Bloblang mini-playground, a new JS module providing hover tooltips and a "Try It" playground (with on-demand WASM and Ace loading, editor wiring, run/copy/link features, caching and error handling), updates to playground partials/head scripts to use bloblang mode, a gulp task to generate Prism grammar from Connect JSON, and small nav and .gitignore adjustments. Sequence Diagram(s)sequenceDiagram
actor User
participant Page as Documentation Page
participant JS as bloblang-interactive.js
participant Docs as bloblang-docs.json / Connect JSON
participant Tooltip as Tooltip UI
User->>Page: Hover over Bloblang token
Page->>JS: Initialize/scan code block
JS->>Docs: Request function/method docs (fetch/cached)
Docs-->>JS: Return docs JSON
JS->>JS: Parse token, build tooltip content
JS->>Tooltip: Attach and show tooltip
Tooltip-->>User: Display signature, params, examples
sequenceDiagram
actor User
participant Page as Documentation Page
participant JS as bloblang-interactive.js
participant Modal as Mini-playground Modal
participant Ace as Ace Editor (input/mapping/output)
participant WASM as Bloblang WASM Runtime
User->>Page: Click "Try It" button
Page->>JS: Open playground modal
JS->>Modal: Initialize UI and editors
Modal->>Ace: Load Ace mode/theme and initialize editors
JS->>WASM: Load/instantiate WASM runtime (on-demand)
User->>Ace: Edit input and mapping
User->>Modal: Click Run
Modal->>WASM: Execute mapping with input
WASM-->>Modal: Return output or error
Modal->>Ace: Populate output editor / show status
Modal-->>User: Display result or error message
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Important Action Needed: IP Allowlist UpdateIf your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:
Failure to add the new IP will result in interrupted reviews. 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 |
JakeSCahill
changed the title
![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: 2
🤖 Fix all issues with AI agents
In `@src/js/16-bloblang-interactive.js`:
- Around line 210-275: loadBloblangDocs can throw while callers are queued,
leaving promises unresolved; ensure you always resolve every queued resolver and
clear docsLoadQueue on both success and error paths. In loadBloblangDocs, after
setting docsLoading = false and before returning (both in the main success
branch and inside the catch block), iterate over docsLoadQueue with a
lint-friendly loop (e.g., for (const resolve of docsLoadQueue)
resolve(bloblangDocs)) to call each resolver with the final bloblangDocs, then
set docsLoadQueue = []; also ensure docsLoading is cleared and bloblangDocs is
set to the fallback {} when an error occurs so queued callers receive a value.
- Around line 781-804: The runMapping function calls the WASM runner via
window.blobl(currentMapping, currentInput) but the WASM API expects a third
metadata argument; update the invocation in runMapping to pass metadata (e.g.,
an empty object or appropriate metadata object) as the third parameter so the
call matches the signature used elsewhere (refer to runMapping and
window.blobl).
🧹 Nitpick comments (2)
src/css/bloblang-playground.css (1)
1427-1650: Reduce repeated selector groups for JSON editors.
Consider consolidating the repeated#ace-input/#ace-input-metadata/#ace-output/#ace-metadataselectors with:is(...)to avoid drift and reduce CSS size.♻️ Example consolidation
-html[data-theme="dark"] .bloblang-playground `#ace-input` .ace_string, -html[data-theme="dark"] .bloblang-playground `#ace-input-metadata` .ace_string, -html[data-theme="dark"] .bloblang-playground `#ace-output` .ace_string, -html[data-theme="dark"] .bloblang-playground `#ace-metadata` .ace_string { +html[data-theme="dark"] .bloblang-playground :is(`#ace-input`, `#ace-input-metadata`, `#ace-output`, `#ace-metadata`) .ace_string { color: `#ce9178` !important; } -html[data-theme="dark"] .bloblang-playground `#ace-input` .ace_constant.ace_numeric, -html[data-theme="dark"] .bloblang-playground `#ace-input-metadata` .ace_constant.ace_numeric, -html[data-theme="dark"] .bloblang-playground `#ace-output` .ace_constant.ace_numeric, -html[data-theme="dark"] .bloblang-playground `#ace-metadata` .ace_constant.ace_numeric { +html[data-theme="dark"] .bloblang-playground :is(`#ace-input`, `#ace-input-metadata`, `#ace-output`, `#ace-metadata`) .ace_constant.ace_numeric { color: `#b5cea8` !important; }src/css/bloblang-interactive.css (1)
198-218: Add focus-visible styles for the new interactive controls.
Keyboard users currently don’t get a strong focus cue on the “Try It” button, close button, or action buttons. Consider adding focus-visible outlines.♿ Proposed focus-visible styling
.try-bloblang-button:active { transform: translateY(0); } + +.try-bloblang-button:focus-visible, +.bloblang-mini-playground .mini-playground-close:focus-visible, +.bloblang-mini-playground .mini-playground-button:focus-visible, +.bloblang-mini-playground .mini-playground-link:focus-visible { + outline: 2px solid var(--link-color, `#005cc5`); + outline-offset: 2px; +} + +html[data-theme="dark"] .try-bloblang-button:focus-visible, +html[data-theme="dark"] .bloblang-mini-playground .mini-playground-close:focus-visible, +html[data-theme="dark"] .bloblang-mini-playground .mini-playground-button:focus-visible, +html[data-theme="dark"] .bloblang-mini-playground .mini-playground-link:focus-visible { + outline-color: `#79b8ff`; +}Also applies to: 287-305, 476-520
JakeSCahill
force-pushed
the
logos
branch
2 times, most recently
from
97738f9 to
359f1d7
Compare
JakeSCahill
force-pushed
the
logos
branch
3 times, most recently
from
d66d7c3 to
bae9e18
Compare
Makes Bloblang code blocks more interactive and easier to understand: - Custom syntax highlighting for Prism (static blocks) and Ace (editors) - Hover tooltips on functions and methods showing docs from Connect JSON - "Try It" button opens a mini playground modal to run mappings instantly - Support for # In: comments to provide sample input data - Dark mode support with readable colors throughout - Mini playground links to full playground with encoded state
Replace GitHub API calls with fetches from rp-connect-docs antora.yml. This avoids rate limits and uses the same source of truth for both build-time grammar generation and runtime tooltip loading. Runtime version is cached in localStorage for 1 hour.
Feediver1
approved these changes
Feb 3, 2026
Move modal to document.body when opened to escape CSS containment context that was breaking position:fixed relative positioning. Use flexbox centering instead of margin-based centering.
Detects and highlights Bloblang code embedded in Connect pipeline configs (mapping, check, request_map, etc). Adds hover tooltips for functions/methods and a Skip directive to disable Try It buttons on specific blocks.
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/static/bloblang-docs.json`:
- Around line 19-30: The timestamp_unix entry currently documents a non-existent
signature; update the "timestamp_unix" object so its "signature" is
"timestamp_unix()", remove any "parameters" array (or set it empty), change the
"description" to state it returns the current Unix timestamp in seconds, ensure
"returns" remains "number" (clarify seconds if desired), and replace the
"example" with a no-arg invocation such as "root.ts = timestamp_unix()"; retain
the "category" and "url" but correct text to match the official Bloblang docs.
🧹 Nitpick comments (4)
src/css/bloblang-interactive.css (2)
3-13: Consider a stronger focus-visible indicator for.has-documentation.
outline: noneremoves the default keyboard focus ring; adding an explicit:focus-visiblekeeps focus discoverable.♿ Suggested focus-visible tweak
+.has-documentation:focus-visible { + outline: 2px solid var(--link-color, `#005cc5`); + outline-offset: 2px; +}
225-272: Optionally honorprefers-reduced-motionfor modal animations.This keeps the fade/slide effects friendly to motion-sensitive users.
🧘 Reduced motion option
+@media (prefers-reduced-motion: reduce) { + .bloblang-playground-overlay, + .bloblang-mini-playground { + animation: none; + } +}src/js/vendor/ace/mode-bloblang.js (1)
13-198: AddnormalizeRules()call after defining$rules.This aligns with Ace highlight rule conventions used in other modes within the repository (yaml, coffee) and helps avoid subtle tokenization edge cases.
Suggested addition
] }; + this.normalizeRules(); }; oop.inherits(BloblangHighlightRules, TextHighlightRules);src/js/16-bloblang-interactive.js (1)
584-651: Add a non‑streaming WASM fallback for servers without correct MIME type.
instantiateStreamingcan fail whenapplication/wasmisn’t set; a fallback avoids false negatives.🔁 Suggested fallback
- return WebAssembly.instantiateStreaming(response, go.importObject); + const responseClone = response.clone(); + return WebAssembly.instantiateStreaming(response, go.importObject) + .catch(async () => { + const bytes = await responseClone.arrayBuffer(); + return WebAssembly.instantiate(bytes, go.importObject); + });
- Add comprehensive test suite for mini-playground, YAML detection, and copy safety - Fix accessibility with focus-visible indicators and reduced motion support - Add WASM streaming fallback for better server compatibility - Fix timestamp_unix documentation to match actual function signature - Integrate tests into existing CI/CD workflow
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
Fixes https://redpandadata.atlassian.net/browse/DOC-703
Fixes https://redpandadata.atlassian.net/browse/DOC-781
Bloblang interactive features
Makes Bloblang code blocks more useful and easier to understand:
# In:comments to provide sample input data in code blocksHow it works
Version detection
Both build-time and runtime code fetch the latest Connect version from the same source: https://raw.githubusercontent.com/redpanda-data/rp-connect-docs/main/antora.yml
The
latest-connect-versionattribute in this file is the single source of truth. Runtime caches the version in localStorage for 1 hour to avoid repeated fetches.Syntax highlighting (Prism)
The Prism grammar (
prism-bloblang.js) is auto-generated at build time:gulp bundle, thegenerate:bloblang-grammartask runsdocs.redpanda.com/redpanda-connect/components/_attachments/connect-{version}.jsonThis keeps syntax highlighting in sync with Bloblang capabilities automatically.
Hover documentation
Tooltips load documentation dynamically at runtime:
bloblang-docs.jsonfor UI previewsThe Connect JSON contains signatures, descriptions, parameters, and examples from the actual Go source.
Syntax highlighting
prism-bloblang.js) - Highlights static code blocks in docs pagesmode-bloblang.js) - Highlights editable code in playgroundsBoth use the same color scheme to ensure consistency.
Preview
https://deploy-preview-359--docs-ui.netlify.app/bloblang-syntax-test