Refine homepage hero and typing animation#1781
Conversation
Remove excessive padding around hero demo image and typing animation. Make the typing cursor a thin, blinking block with subtle CRT-style glow effect. Left-align feature card descriptions. Constrain hero demo image to 70% width for better layout. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Dependency Review✅ No vulnerabilities or license issues found.Scanned Files
|
📝 WalkthroughWalkthroughAdds a new InstallWidget component and styles; reworks TypingAnimation cursor styling and character; adjusts landing-page layout and hero animation wrapper; shortens the typing word list; adds global smooth scrolling. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant W as InstallWidget
participant G as GlobalData (latestRelease)
participant C as Clipboard
U->>W: Select install method
W->>G: read latestRelease (on mount)
G-->>W: latestRelease (tag)
W->>W: compute dockerTag (strip leading 'v')
W-->>U: render updated command
U->>W: Click copy
W->>C: navigator.clipboard.writeText(command)
C-->>W: success
W-->>U: show "Copied!" state (2s)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1781 +/- ##
==========================================
+ Coverage 70.71% 70.74% +0.02%
==========================================
Files 432 432
Lines 39916 39916
==========================================
+ Hits 28227 28237 +10
+ Misses 9286 9277 -9
+ Partials 2403 2402 -1
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
- Create new InstallWidget component with Terminal dropdown - Add syntax highlighting for curl command (teal) and bash (blue) - Support multiple install methods: Quick Install, macOS, Windows, Docker - Implement copy-to-clipboard functionality with visual feedback - Responsive design with mobile support - Dark/light theme support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add InstallWidget to install-atmos.mdx page - Refine typing cursor width for better visual balance - Add smooth scroll behavior globally - Simplify hero demo intro animation using framer-motion - Remove redundant opacity transition CSS 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
website/src/components/InstallWidget/index.tsx (2)
27-31: Consider adding error handling for clipboard access.The clipboard API can fail in edge cases (non-HTTPS contexts, denied permissions, or unsupported browsers). Adding a try-catch would improve robustness.
const handleCopy = async () => { - await navigator.clipboard.writeText(installMethods[selectedMethod].command); - setCopied(true); - setTimeout(() => setCopied(false), 2000); + try { + await navigator.clipboard.writeText(installMethods[selectedMethod].command); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy to clipboard:', err); + // Optionally show error state to user + } };
33-53: Syntax highlighting logic works but could be more robust.The string splitting approach on line 38-39 works for the current command format but assumes a specific structure. If the curl flags or order change, this could break.
Consider a more explicit parsing approach:
const renderCommand = () => { const command = installMethods[selectedMethod].command; // Syntax highlighting for the curl command - if (command.startsWith('curl -fsSL')) { - const parts = command.split(' '); - const url = parts.slice(2).join(' ').replace(/\s*\|\s*bash$/, ''); + const curlMatch = command.match(/^(curl\s+-fsSL)\s+([^\s|]+)\s*\|\s*(bash)$/); + if (curlMatch) { + const [, curlCmd, url, bashCmd] = curlMatch; return ( <> - <span className="install-widget__command-curl">curl -fsSL</span> + <span className="install-widget__command-curl">{curlCmd}</span> {' '} <span className="install-widget__command-url">{url}</span> {' | '} - <span className="install-widget__command-bash">bash</span> + <span className="install-widget__command-bash">{bashCmd}</span> </> ); } // For other commands, just return plain text return command; };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
website/docs/quick-start/install-atmos.mdx(1 hunks)website/src/components/InstallWidget/index.css(1 hunks)website/src/components/InstallWidget/index.tsx(1 hunks)website/src/components/TypingAnimation/index.css(2 hunks)website/src/css/custom.css(1 hunks)website/src/css/landing-page.css(4 hunks)website/src/pages/index.js(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- website/src/css/custom.css
🚧 Files skipped from review as they are similar to previous changes (2)
- website/src/pages/index.js
- website/src/css/landing-page.css
🧰 Additional context used
📓 Path-based instructions (1)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in website/ when adding features
Ensure consistency between CLI help text and website documentation
Follow the website's documentation structure and style
Keep website code in website/ and follow its architecture/style; test changes locally
Keep CLI and website documentation in sync; document new features with examples and use cases
Files:
website/docs/quick-start/install-atmos.mdxwebsite/src/components/InstallWidget/index.csswebsite/src/components/TypingAnimation/index.csswebsite/src/components/InstallWidget/index.tsx
🧠 Learnings (1)
📓 Common learnings
Learnt from: Listener430
Repo: cloudposse/atmos PR: 934
File: tests/fixtures/scenarios/docs-generate/README.md.gotmpl:99-118
Timestamp: 2025-01-25T03:51:57.689Z
Learning: For the cloudposse/atmos repository, changes to template contents should be handled in dedicated PRs and are typically considered out of scope for PRs focused on other objectives.
🧬 Code graph analysis (1)
website/src/components/InstallWidget/index.tsx (1)
website/plugins/fetch-latest-release/index.js (1)
latestRelease(31-31)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (11)
- GitHub Check: Lint (golangci)
- GitHub Check: Analyze (go)
- GitHub Check: Build (macos)
- GitHub Check: Build (windows)
- GitHub Check: autofix
- GitHub Check: Analyze (go)
- GitHub Check: Lint (golangci)
- GitHub Check: website-deploy-preview
- GitHub Check: Run pre-commit hooks
- GitHub Check: Review Dependency Licenses
- GitHub Check: Summary
🔇 Additional comments (22)
website/src/components/TypingAnimation/index.css (4)
18-26: Cursor styling is well-structured for a thin block effect.The use of
scaleX(0.153)to create a thin cursor from a block character is clever. The supporting properties (font-weight, line-height, vertical-align, position: relative) align the cursor properly with text baseline. The 0.9em font-size relative to parent text is sensible.Verify that the
scaleX(0.153)value produces the intended visual width with the "█" character. If the component renders a different character, this scaling factor may need adjustment.
28-42: Glow effect implementation is performant and well-executed.Using a
::beforepseudo-element withfilter: blur(4px)andz-index: -1achieves the CRT glow without adding DOM nodes. The positioning (centered at 50%, 50%) and sizing (180% width, 140% height) create a reasonable halo around the cursor.
53-62: Pulse animation timing is synchronized with blink.The 0.8s keyframes match the blink animation duration, and the opacity curve (0% → 0.08 @ 50% → 0%) creates a subtle pulse. The slight scale change (0.95 to 1.02) prevents the glow from feeling static.
65-71: Cursor visibility over gradient text is addressed, but opacity warrants validation.The semi-transparent colors (0.3 opacity) ensure the cursor doesn't completely obscure gradient text. However, the low opacity may make the cursor difficult to track during rapid typing, especially for users with vision impairments or on lower-contrast displays.
Test cursor visibility in the hero section with actual gradient text backgrounds. If visibility is poor, consider increasing opacity to 0.5–0.7 or adjusting the glow effect to compensate.
website/src/components/InstallWidget/index.tsx (6)
1-3: Imports look good.Clean setup with the necessary React hooks and Docusaurus utilities.
5-9: Interface is well-defined.Simple and appropriate for the install methods data structure.
11-16: Global data access is well-handled.Good use of fallback for latestRelease and sensible Docker tag normalization.
17-22: Install methods are well-defined.The commands are standard for their respective platforms. The Quick Install pattern (curl piped to bash) is industry-standard but inherently relies on the security of the remote script and HTTPS connection.
24-25: State initialization looks good.Sensible defaults for the selected method and copy feedback.
55-98: Component structure is clean and accessible.The invisible select overlay pattern is a solid approach for custom dropdowns while maintaining native accessibility. Using index as key on line 66 is fine for this static array.
website/docs/quick-start/install-atmos.mdx (1)
15-17: Good integration of InstallWidget.Clean import and sensible placement at the top of the installation documentation for immediate visibility.
website/src/components/InstallWidget/index.css (11)
1-3: Base spacing looks good.
5-20: Content container styling is solid.Good use of flexbox with proper overflow handling and theme-aware colors.
22-34: Select wrapper is well-structured.Proper relative positioning for the custom select pattern with clean separators.
36-45: Label styling is appropriate.Good use of
pointer-events: noneto ensure the invisible select remains clickable.
47-60: Invisible select overlay is well-implemented.Standard pattern for custom select styling while preserving native accessibility and functionality.
62-74: Chevron styling adds polish.Good use of transitions and hover effects for a responsive feel.
76-82: Command area layout is correct.The
min-width: 0on line 80 is crucial for enabling text truncation in flex layouts.
84-96: Code styling handles overflow well.Good combination of
white-space: nowrap,overflow: hidden, andtext-overflow: ellipsisfor long commands.
99-109: Syntax highlighting colors are well-chosen.Good contrast and clear visual distinction between command parts.
111-133: Copy button styling is polished.Nice hover effects and theme-aware colors provide good user feedback.
135-157: Responsive design is well-executed.Good vertical stacking for mobile with appropriate border and sizing adjustments.
Resolved snapshot conflicts by taking main's version. User will regenerate snapshots as needed for ai-1 branch changes. Merged changes from main: - feat: add error handling infrastructure with context-aware capabilities (#1763) - fix: Resolve changelog check failures on large PRs (#1782) - Refine homepage hero and typing animation (#1781) - fix: Reduce log spam for imports outside base directory (#1780) - feat: Add custom sanitization map to test CLI for test-specific output rules (#1779) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
These changes were released in v1.199.0-rc.0. |
Summary
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style
UX