Add theme-aware CloudPosse embeds for Slack and Office Hours with UTM tracking #1802
Conversation
📝 WalkthroughWalkthroughReplaces hard-coded embed iframes in documentation pages with reusable React components. Two new components (CloudPosseOfficeHoursEmbed and CloudPosseSlackEmbed) encapsulate iframe rendering, theme detection via MutationObserver, and UTM parameter injection. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
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 |
Dependency Review✅ No vulnerabilities or license issues found.Scanned FilesNone |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1802 +/- ##
==========================================
- Coverage 73.58% 73.57% -0.02%
==========================================
Files 634 634
Lines 59027 59027
==========================================
- Hits 43434 43427 -7
- Misses 12602 12612 +10
+ Partials 2991 2988 -3
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
Upgraded to the new Cloud Posse Slack embed URL with better responsive design, larger dimensions (700px height, full width with 3xl max constraint), and added security sandbox attributes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Replace HubspotForm with iframe embed for Office Hours - Update Slack embed with optimized height (380px) and left-justified layout - Add allow-popups to sandbox attributes for proper link functionality - Standardize iframe styling across both embeds using inline styles 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
osterman
force-pushed
the
osterman/update-slack-embed
branch
from
25ed448 to
44386a7
Compare
The iframe embed already contains "Join Our Weekly Office Hours" heading, so we hide the Docusaurus auto-rendered title to avoid duplication. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Add utm_source=atmos-docs to identify traffic source - Add utm_medium=embed to identify the mechanism - Add utm_campaign specific to each embed (office-hours, slack-community) - Add utm_content=community-page to identify page location This enables tracking of conversion rates and traffic analytics for both embeds. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Create CloudPosseSlackEmbed component with dynamic theme detection - Create CloudPosseOfficeHoursEmbed component with dynamic theme detection - Both components watch for Docusaurus theme changes via MutationObserver - Automatically switch between light/dark theme when user toggles - Update slack.mdx and office-hours.mdx to use new components The embeds now respect the user's Docusaurus theme preference and update dynamically when the theme is changed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
osterman
changed the title
osterman
added
the
no-release
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
website/src/components/CloudPosseSlackEmbed/index.tsx (2)
4-4: Consider reading initial theme on server-side or during SSR.Hardcoding the initial state to
'dark'may cause a brief flash when the actual theme is light. TheuseEffectruns after render, so users might see the iframe load with the wrong theme momentarily.If Docusaurus supports reading theme during SSR or you can use
useStatewith a lazy initializer that reads fromdocument, you'd eliminate the flash:- const [theme, setTheme] = useState<'light' | 'dark'>('dark'); + const [theme, setTheme] = useState<'light' | 'dark'>(() => { + if (typeof window !== 'undefined') { + const currentTheme = document.documentElement.getAttribute('data-theme'); + return currentTheme === 'dark' ? 'dark' : 'light'; + } + return 'dark'; + });
27-38: Consider adding lazy loading for performance.Adding
loading="lazy"would defer loading the iframe until it's near the viewport, improving initial page load performance.Optional enhancement
<iframe src={src} + loading="lazy" style={{website/src/components/CloudPosseOfficeHoursEmbed/index.tsx (3)
3-40: Functionality looks good, but consider extracting shared logic.This component is nearly identical to
CloudPosseSlackEmbed(only the URL, campaign param, and title differ). Extracting the shared logic would reduce duplication and make future updates easier.Recommended refactor: shared embed component
You could create a base component that accepts props:
// BaseCloudPosseEmbed.tsx interface CloudPosseEmbedProps { embedType: 'slack' | 'office-hours'; title: string; utmCampaign: string; } export default function BaseCloudPosseEmbed({ embedType, title, utmCampaign }: CloudPosseEmbedProps): JSX.Element { const [theme, setTheme] = useState<'light' | 'dark'>('dark'); useEffect(() => { // ... same observer logic }, []); const src = `https://cloudposse.com/embed/${embedType}?theme=${theme}&bg=transparent&utm_source=atmos-docs&utm_medium=embed&utm_campaign=${utmCampaign}&utm_content=community-page`; return <iframe src={src} title={title} /* ... same styling */ />; }Then each specific component becomes a thin wrapper:
export default function CloudPosseOfficeHoursEmbed() { return <BaseCloudPosseEmbed embedType="office-hours" title="Office Hours Registration" utmCampaign="office-hours" />; }
4-4: Same theme initialization concern as SlackEmbed.The initial
'dark'state may cause a flash on light theme. See the suggestion inCloudPosseSlackEmbed/index.tsxfor a lazy initializer approach.
27-38: Consider lazy loading here too.Same as the Slack embed—
loading="lazy"would improve initial page load performance.
📜 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 (4)
website/docs/community/office-hours.mdxwebsite/docs/community/slack.mdxwebsite/src/components/CloudPosseOfficeHoursEmbed/index.tsxwebsite/src/components/CloudPosseSlackEmbed/index.tsx
🧰 Additional context used
📓 Path-based instructions (1)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in thewebsite/directory when adding new features, ensure consistency between CLI help text and website documentation, and follow the website's documentation structure and style
Keep website code in thewebsite/directory, follow the existing website architecture and style, and test website changes locally before committing
Keep CLI documentation and website documentation in sync and document new features on the website with examples and use cases
Files:
website/src/components/CloudPosseOfficeHoursEmbed/index.tsxwebsite/docs/community/slack.mdxwebsite/docs/community/office-hours.mdxwebsite/src/components/CloudPosseSlackEmbed/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.
⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Acceptance Tests (windows)
- GitHub Check: Acceptance Tests (linux)
- GitHub Check: Summary
🔇 Additional comments (3)
website/src/components/CloudPosseSlackEmbed/index.tsx (1)
3-22: Nice implementation of theme-aware embed.The MutationObserver pattern correctly tracks Docusaurus theme changes, and the cleanup on unmount prevents memory leaks. The logic is solid.
website/docs/community/slack.mdx (1)
8-14: Clean integration of the embed component.The import and usage are correct. Replacing the hard-coded iframe with a reusable component improves maintainability.
website/docs/community/office-hours.mdx (1)
3-11: Good call onhide_title: true.Preventing duplicate page headings improves the UX. The component integration is clean and correct.
|
These changes were released in v1.203.0-rc.3. |
what
CloudPosseSlackEmbedandCloudPosseOfficeHoursEmbedReact components that dynamically adapt to Docusaurus theme (light/dark)utm_source=atmos-docsutm_medium=embedutm_campaign=office-hours/slack-communityutm_content=community-pageallow-popupsto sandbox attributes for proper link functionalityhide_title: trueto Office Hours page to prevent duplicate headingswhy
Tooltip.tsx)references
website/docs/community/slack.mdxwebsite/docs/community/office-hours.mdxwebsite/src/components/CloudPosseSlackEmbed/index.tsxwebsite/src/components/CloudPosseOfficeHoursEmbed/index.tsxSummary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.