feat(website): Add interactive tool comparison matrix #2014
Conversation
…capabilities - Fix workflow capability description: remove false claims about parallel/conditional logic (verified Atmos uses sequential execution) - Fix auth tool ratings: aws-iam-authenticator, eksctl, and ECR credential helper now correctly show EKS/ECR as primary capabilities - Properly credit Terraspace: add code generation, templating, vendoring, and remote module sourcing - Add five new Atmos capabilities to the comparison matrix: - Introspection: describe/list commands for infrastructure visibility - Stack Dependencies: depends_on and automatic execution ordering - Hooks & Lifecycle: pre/post execution hooks - Store Integration: native secrets manager integration - Terminal UI: interactive infrastructure navigation - Add feature links and documentation URLs for all new capabilities - Ensure honest assessment of competitor capabilities relative to Atmos Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughAdds a new Alternatives page and interactive Tools Matrix UI (ToolGrid, ToolCard, ToolCategory, ComparisonMatrix, ToolDrawer, CapabilityDrawer) with styles and a large tools dataset; removes the old reference alternatives page, updates links, sidebar, and a redirect; minor copy tweak in terraform-plan-diff and FAQ. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Browser
participant ToolsMatrixPage
participant ToolCategory
participant ToolCard
participant ComparisonMatrix
participant ToolDrawer
participant CapabilityDrawer
User->>Browser: Navigate to /alternatives
Browser->>ToolsMatrixPage: Render page
ToolsMatrixPage->>ToolCategory: Render categories
ToolCategory->>ToolCard: Render tool cards
User->>ToolCard: Click tool card
ToolCard->>ToolsMatrixPage: notify selection
ToolsMatrixPage->>ToolDrawer: Open(selectedTool)
ToolDrawer->>User: Show tool details
User->>ToolsMatrixPage: Switch to Matrix view
ToolsMatrixPage->>ComparisonMatrix: Render matrix
User->>ComparisonMatrix: Click capability row
ComparisonMatrix->>CapabilityDrawer: Open(selectedCapability)
CapabilityDrawer->>User: Show capability details
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 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 |
osterman
added
the
no-release
|
Warning This PR exceeds the recommended limit of 1,000 lines.Large PRs are difficult to review and may be rejected due to their size. Please verify that this PR does not address multiple issues. |
Dependency Review✅ No vulnerabilities or license issues found.Scanned FilesNone |
osterman
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2014 +/- ##
==========================================
- Coverage 75.37% 75.36% -0.01%
==========================================
Files 792 792
Lines 73435 73435
==========================================
- Hits 55350 55343 -7
- Misses 14574 14584 +10
+ Partials 3511 3508 -3
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
…ernatives Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
osterman
force-pushed
the
osterman/tools-comparison-matrix
branch
from
fed0923 to
333b9b9
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@website/docs/intro/alternatives.mdx`:
- Around line 22-57: The view toggle buttons rendering the categories/matrix
switches (the elements that call setView('categories') and setView('matrix') and
reference the view state) should include an aria-pressed attribute that reflects
their active state (e.g., aria-pressed={view === 'categories'} on the category
button and aria-pressed={view === 'matrix'} on the matrix button) so assistive
tech can announce which toggle is active; update both button elements that wrap
RiLayoutGridLine and the second button accordingly.
In `@website/src/components/CapabilityDrawer/index.tsx`:
- Around line 1-95: The drawer lacks focus management: update CapabilityDrawer
to capture document.activeElement before opening, set focus to the close button
(use a ref for the button with className "capability-drawer__close") when isOpen
becomes true, and restore focus to the previously focused element when the
drawer closes or in the useEffect cleanup; keep existing handleEscape and body
overflow logic but add the focus set/restore inside the same useEffect (or a
small dedicated effect) and ensure the close button ref is used in the aria flow
so keyboard users land on the close control when the drawer opens and return to
their prior focus on close.
In `@website/src/components/ComparisonMatrix/index.tsx`:
- Around line 66-69: The Atmos check icon in the ComparisonMatrix component
renders only the <RiCheckLine /> SVG inside the element with className
"comparison-matrix__check", so screen readers receive no status; update that
wrapper to include accessible text (e.g., add an aria-label like "Available" or
"Yes" or include a visually-hidden <span> with the same text) and ensure the
icon itself has aria-hidden="true" if you provide the label on the wrapper;
modify the JSX around <RiCheckLine /> in the comparison-matrix__cell for Atmos
to include this accessible label.
In `@website/src/components/ToolDrawer/index.tsx`:
- Around line 179-199: The icon-only status cells for item.atmos and item.tool
are not accessible; update the span wrappers (the elements with classNames
"tool-drawer__check" and "tool-drawer__cross" around RiCheckLine/RiCloseFill) to
provide accessible labels by adding an appropriate aria-label or role="img" with
aria-label (e.g., "Atmos: available"/"Atmos: not available" and "Tool:
available"/"Tool: not available"), or include visually hidden text inside the
same span, so screen readers announce the feature name and its status.
🧹 Nitpick comments (10)
website/src/components/ComparisonMatrix/index.css (2)
10-12: Empty rule can be removed.This dark mode selector contains only a comment. Either add actual styles or remove the block to keep the stylesheet clean.
Suggested cleanup
-[data-theme='dark'] .comparison-matrix__table-wrapper { - /* No border in dark mode either */ -}
54-60: Empty rules add noise.These rules contain only comments with no actual styles. Consider removing them or adding the intended styles.
Suggested cleanup
-.comparison-matrix__row { - /* Clean rows without heavy borders */ -} - -[data-theme='dark'] .comparison-matrix__row { - /* Dark mode inherits clean look */ -}website/src/components/ToolCard/index.css (1)
153-162: Line clamping works but relies on webkit prefix.The
-webkit-line-clampapproach is well-supported across modern browsers. Consider adding the unprefixedline-clampproperty for future-proofing when standard support improves.Optional future-proofing
.tool-card__description { font-size: 0.875rem; color: `#6b7280`; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }website/src/data/tools.ts (3)
16-26: DuplicateToolinterface detected.This interface is also defined in
website/src/components/ToolDrawer/index.tsx. Consider exporting from a single source to avoid drift.ToolDrawer should import
Toolfrom this file rather than redefining it:// In ToolDrawer/index.tsx import type { Tool, FeatureComparison } from '../../data/tools';
1264-1267: Inconsistent indentation.The closing bracket and brace have extra indentation compared to the rest of the file.
Fix indentation
{ feature: 'Excludes/Includes', atmos: true, tool: false }, { feature: 'Stack Integration', atmos: true, tool: false }, - ], - }, + ], + }, ];
603-607: Array slicing is fragile.Using
deliveryFeatures.slice(0, 6)depends on array order remaining stable. IfdeliveryFeatureschanges, these slices may include/exclude wrong items silently.Consider explicitly listing the features or using a helper that filters by feature name for clarity and safety.
website/src/components/ToolCard/index.tsx (1)
4-4: ImportToolfrom the canonical source.
Toolis defined inwebsite/src/data/tools.ts. Importing fromToolDrawercreates unnecessary coupling and relies on a duplicate definition.Update import
-import type { Tool } from '../ToolDrawer'; +import type { Tool } from '../../data/tools';website/src/components/ToolGrid/index.tsx (1)
1-46: Consolidate theTooltype into a single source of truth.
Toolis defined in bothwebsite/src/data/tools.tsandwebsite/src/components/ToolDrawer/index.tsx, and this file re-exports the latter. That’s a drift risk (e.g., relationship typing). Prefer exporting a sharedTooltype fromwebsite/src/data/tools.tsand importing it in ToolDrawer/ToolGrid.website/src/components/ToolDrawer/index.tsx (1)
28-44: Avoid duplicating Tool/FeatureComparison types.These types already exist in
website/src/data/tools.ts, so duplicating them risks drift. Prefer importing and re-exporting the canonical types.♻️ Suggested refactor
-import { featureLinks } from '@site/src/data/tools'; +import { featureLinks, type Tool, type FeatureComparison } from '@site/src/data/tools'; @@ -export interface FeatureComparison { - feature: string; - atmos: boolean; - tool: boolean; -} - -export interface Tool { - id: string; - name: string; - url: string; - description: string; - category: string; - relationship: 'supported' | 'wrapper' | 'delivery' | 'commands' | 'workflows' | 'ecosystem' | 'inspiration'; - details: string; - atmosComparison?: string; - featureComparison?: FeatureComparison[]; -} +export type { FeatureComparison, Tool };website/src/components/ToolCategory/index.tsx (1)
87-87: Minor: Pluralization is always "tools".When
tools.length === 1, this displays "1 tools". Consider:- <span className="tool-category__count">{tools.length} tools</span> + <span className="tool-category__count">{tools.length} {tools.length === 1 ? 'tool' : 'tools'}</span>
|
Warning Release Documentation RequiredThis PR is labeled
|
…ponents - Add aria-pressed to view toggle buttons in alternatives.mdx - Add focus management to CapabilityDrawer (focus close button on open, restore focus on close) - Add role="img" and aria-label to check icons in ComparisonMatrix - Add accessible labels to feature status icons in ToolDrawer Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Warning Release Documentation RequiredThis PR is labeled
|
|
💥 This pull request now has conflicts. Could you fix it @osterman? 🙏 |
Resolved conflict in website/docusaurus.config.js by keeping both: - Our redirect from /reference/alternatives to /alternatives - Main's redirects for core concepts pages Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@website/docs/intro/alternatives.mdx`:
- Around line 65-83: The toggle button that calls setExpandAll and reads
expandAll should expose its state to assistive tech by adding the aria-pressed
attribute bound to expandAll (e.g., aria-pressed={expandAll}); update the
<button> element containing RiExpandDiagonalLine and the Expand/Collapse label
to include aria-pressed and, if needed, an explicit accessible name (aria-label)
that reflects the action so screen readers announce the toggle state correctly.
In `@website/src/components/ToolDrawer/index.tsx`:
- Around line 79-87: The cleanup currently resets document.body.style.overflow
to '' which can clobber a pre-existing value; change the useEffect that
references isOpen and handleEscape to save the previous overflow into a ref
(e.g. previousOverflowRef) when opening (previousOverflowRef.current =
document.body.style.overflow), set document.body.style.overflow = 'hidden', and
on cleanup restore document.body.style.overflow = previousOverflowRef.current
(only if we previously saved it); keep the existing
addEventListener/removeEventListener calls for handleEscape but ensure the
overflow restore only runs for the effect that set it.
- Around line 103-121: When the ToolDrawer (motion.aside with className
"tool-drawer") opens, save document.activeElement to a ref and move focus into
the drawer (preferably to the element with id "drawer-title" or the first
focusable child found inside the drawerRef); when closing (via onClose or the
close button) restore focus to the previously saved element. Implement this in
the ToolDrawer component by adding a drawerRef and prevActiveElementRef, using
useEffect to detect open state and call focus logic, and ensure the onClose
handler restores focus before/after invoking the existing onClose prop.
- Around line 14-25: The code renderer in markdownComponents.code should use the
react-markdown "inline" boolean to distinguish inline vs block instead of
relying on the className regex, and must not spread the leftover props (which
can include the react-markdown "node") into the DOM. Update the function
signature to accept the inline flag (e.g., code({ inline, className, children }:
{ inline?: boolean; className?: string; children?: React.ReactNode })), use
inline to choose between rendering a plain <code> for inline or the <CodeBlock>
for block, extract language via /language-(\w+)/.exec(className || '') when
rendering the block, and remove the ...props spread (or explicitly omit node) so
react-markdown internals are not leaked into the DOM.
🧹 Nitpick comments (1)
website/src/components/ToolDrawer/index.tsx (1)
28-44: Prefer importing shared Tool/FeatureComparison types to avoid drift.
You already consumefeatureLinksfrom the data module, so reusing the exported types keeps UI and data models in sync.♻️ Suggested refactor
-import { featureLinks } from '@site/src/data/tools'; +import { featureLinks } from '@site/src/data/tools'; +import type { Tool, FeatureComparison } from '@site/src/data/tools'; -export interface FeatureComparison { - feature: string; - atmos: boolean; - tool: boolean; -} - -export interface Tool { - id: string; - name: string; - url: string; - description: string; - category: string; - relationship: 'supported' | 'wrapper' | 'delivery' | 'commands' | 'workflows' | 'ecosystem' | 'inspiration'; - details: string; - atmosComparison?: string; - featureComparison?: FeatureComparison[]; -}
… comparison - Rewrite all category taglines to value-proposition style explaining WHY Atmos is the alternative (not just listing tool names) - Add vendir-specific feature comparison that honestly shows vendir's strengths (GitHub Releases, Helm Charts) alongside Atmos strengths (S3, Stack Integration) - Update vendir atmosComparison text to acknowledge both tools' capabilities Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@website/src/data/tools.ts`:
- Around line 1273-1281: The closing bracket/array end for the featureComparison
entry in the object (the array defined at symbol featureComparison) has extra
leading whitespace; fix by aligning the closing "]," with the other array
closures in the file—remove the extra indent so the "]," sits at the same column
as the opening of the property or other arrays in this file to keep consistent
indentation.
🧹 Nitpick comments (2)
website/src/data/tools.ts (2)
10-26: Consolidate type definitions—Tool and FeatureComparison interfaces are duplicated.The
FeatureComparisonandToolinterfaces are defined in bothwebsite/src/data/tools.tsandwebsite/src/components/ToolDrawer/index.tsx(lines 28-43). Sincetools.tsis the data source, it should be the single source of truth for these types. ToolDrawer currently imports onlyfeatureLinksfrom tools.ts, missing an opportunity to import the types as well.Export these types only from tools.ts and import them in ToolDrawer to avoid maintenance drift.
1438-1535: No duplicate interfaces found—structure is solid.The
ToolCategoryinterface intools.tsis not duplicated. TheToolCategory/index.tsxcomponent definesToolCategoryPropswhich mirrors the data shape but adds UI-specific optional properties (defaultExpanded,expandAll,index). Rather than importing and extendingToolCategory, the component redefines it. While this works fine, importingToolCategoryand extending it would reduce maintenance friction if the data structure evolves.
eksctl is primarily an EKS cluster management tool, not an authentication tool. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rewrite all category taglines to be short, scannable, without mdash - Fix expand all / collapse all to properly toggle (was only expanding) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@website/src/data/tools.ts`:
- Around line 171-180: The auth object's messaging is inconsistent: the
auth.atmosSupport string claims "Azure and GCP coming soon" while the category
tagline elsewhere mentions unified support "across AWS, Azure, GCP, and GitHub
OIDC"; update both places to be consistent by either (A) changing
auth.atmosSupport to explicitly state "AWS supported; Azure and GCP coming soon"
or (B) changing the category tagline to limit current support to AWS and note
Azure/GCP are coming soon—locate the auth object (symbol: auth) and its
atmosSupport field, and update the category/tagline string where the multi-cloud
claim appears so both messages use the same availability timeline and wording.
- Around line 32-133: The featureLinks map is missing entries for ~33 feature
keys referenced by featureComparison, causing many features to render without
documentation links; update the exported featureLinks constant to include
entries for all keys used in featureComparison (e.g., add "Parallel Execution",
"Open Source", "No Managed Platform", "Component Context", "Stack Validation",
"Typed Arguments", etc.), mapping each to the appropriate documentation path or
an existing related page; locate the featureLinks object in
website/src/data/tools.ts and add the missing string keys with their URL values
so UI consumers of featureComparison can render clickable links.
- Add aria-pressed to expand/collapse toggle for accessibility - Use react-markdown inline prop instead of regex for code blocks - Preserve and restore body overflow value in ToolDrawer - Implement focus management for keyboard navigation - Fix indentation on closing bracket in tools.ts - Add 30+ missing featureLinks entries for documentation - Align auth category tagline with capability description Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 participant
what
why
references
/reference/to/intro/for better discoverability🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation
Navigation
Style
✏️ Tip: You can customize this high-level summary in your review settings.