docs(connectors): refresh connectors UI to match website design language - #857
docs(connectors): refresh connectors UI to match website design language#857ravibits wants to merge 1 commit into
Conversation
Refine the three shared components behind the agent-connectors experience so the catalog, connector hero, and tool reference read as one clean system, inspired by scalekit.com/connectors. No content or functionality changes — search, category filtering, and tool deep-links are preserved. - ProviderCatalog: add connector/category summary line and a live result count, calmer sentence-case category headings with count badges, softer uniform cards with a larger icon tile, accent focus rings, and an initial-letter fallback when a provider logo fails to load. - PageTitle (connector hero): add an 'All connectors' back-link eyebrow, a larger padded icon tile, and refined metadata chips (accent-tinted auth, neutral categories). - ToolList: align filter input, tool cards, and param table with the refreshed card system (search icon, accent focus, subtle open state).
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
📜 Recent review details⏰ Context from checks skipped due to timeout. (4)
🧰 Additional context used📓 Path-based instructions (4)**/*.{md,mdx,astro,ts}📄 CodeRabbit inference engine (CONTRIBUTING.md)
Files:
src/components/overrides/**/*.astro📄 CodeRabbit inference engine (CONTRIBUTING.md)
Files:
src/components/**/*.astro📄 CodeRabbit inference engine (CONTRIBUTING.md)
Files:
**⚙️ CodeRabbit configuration file
Files:
🧠 Learnings (1)📚 Learning: 2026-02-25T12:04:06.383ZApplied to files:
🔇 Additional comments (3)
WalkthroughChangesThe connector catalog now displays live connector and category counts, filtered result counts, tool-aware empty states, and fallback initials for failed logos. Tool filters, cards, connector cards, and connector page headers receive updated markup and styling. Connector catalog experience
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
actor Visitor
participant ProviderCatalog
participant CatalogDOM
Visitor->>ProviderCatalog: Enter search or apply filter
ProviderCatalog->>CatalogDOM: Update category counts and result-count
ProviderCatalog->>CatalogDOM: Update no-results visibility
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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}
✅ Deploy Preview for scalekit-starlight ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
saif-at-scalekit
left a comment
saif-at-scalekit
left a comment
There was a problem hiding this comment.
This is great, thanks for working on this.
3 participants
Summary
Refreshes the agent-connectors experience in the developer docs so it reads as one clean, cohesive system, adapting the visual language of scalekit.com/connectors. This is a presentation-only change — no content, search, or filtering behavior is altered.
All 316 connector pages are generated, so the entire redesign lives in three shared components:
src/components/ProviderCatalog.astro(the/agentkit/connectors/index)src/components/overrides/PageTitle.astro(connector hero)src/components/ToolList.astro(tool reference)Design principles borrowed from the website
Colors were not hard-matched — the docs already use the same indigo accent as the site. All styling flows through existing Starlight/Nova design tokens with safe fallbacks, so light and dark themes both hold up.
What is intentionally unchanged
Preview
Once the deploy preview builds:
https://deploy-preview-{PR_NUMBER}--scalekit-starlight.netlify.app/agentkit/connectors/https://deploy-preview-{PR_NUMBER}--scalekit-starlight.netlify.app/agentkit/connectors/airtablemcp/Verification
prettier --check) for all three files.astro buildwas not run in the authoring environment; the Netlify deploy preview is the definitive render.🤖 Generated with Claude Code
https://claude.ai/code/session_01P8wBwMQLegNVpGDpz9YD9D
Generated by Claude Code
Summary by CodeRabbit
New Features
Style