From db1ac16b7c295545c62c3d81514b45435a9c7e3d Mon Sep 17 00:00:00 2001
From: Erik Osterman <erik@cloudposse.com>
Date: Tue, 18 Nov 2025 10:42:50 -0600
Subject: [PATCH 1/5] Update Slack embed with improved sizing and security
 attributes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <noreply@anthropic.com>
---
 website/docs/community/slack.mdx | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/website/docs/community/slack.mdx b/website/docs/community/slack.mdx
index 01252fa053..28c77a4c15 100644
--- a/website/docs/community/slack.mdx
+++ b/website/docs/community/slack.mdx
@@ -10,15 +10,9 @@ id: slack
 
 Atmos has a great community of active users who are all more than willing to help each other out. So, join us!
 
-<iframe src="https://slack.cloudposse.com/?theme=dark&background=00000000"
-        marginWidth="0"
-        marginHeight="0"
-        hspace="0"
-        vspace="0"
-        width="300"
-        height="330"
-        scrolling="no"
-        frameBorder="0"
-        allowtransparency="true"
-        style={{ borderRadius: '6px', display: 'flex', marginRight: 'auto', marginLeft: 'auto'}}
-        ></iframe>
+<iframe
+  src="https://cloudposse.com/embed/slack?theme=dark&bg=transparent"
+  className="h-[700px] w-full max-w-3xl mx-auto rounded-md border-0"
+  title="Join our Slack Community"
+  sandbox="allow-same-origin allow-scripts allow-forms"
+/>

From 44386a7286a9f5f93302b8818e7bcd005bbd8e66 Mon Sep 17 00:00:00 2001
From: Erik Osterman <erik@cloudposse.com>
Date: Fri, 26 Dec 2025 08:02:08 -0600
Subject: [PATCH 2/5] Update Slack and Office Hours embeds with improved sizing
 and security
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 <noreply@anthropic.com>
---
 website/docs/community/office-hours.mdx | 15 +++++----------
 website/docs/community/slack.mdx        |  4 ++--
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/website/docs/community/office-hours.mdx b/website/docs/community/office-hours.mdx
index d7edb21dc6..883fd7985e 100644
--- a/website/docs/community/office-hours.mdx
+++ b/website/docs/community/office-hours.mdx
@@ -5,15 +5,10 @@ sidebar_label: Office Hours
 description: Office Hours with Cloud Posse
 id: office-hours
 ---
-import HubspotForm from 'react-hubspot-form'
 
-# Office Hours Registration
-
-<HubspotForm
-    portalId='2197148'
-    region="na1"
-    formId='bbcd46fe-0b11-43aa-9214-33f319e52a01'
-    onSubmit={() => console.log('Submit!')}
-    onReady={(form) => console.log('Form ready!')}
-    loading={<div>Loading...</div>}
+<iframe
+  src="https://cloudposse.com/embed/office-hours?theme=dark&bg=transparent"
+  style={{height: '380px', width: '100%', maxWidth: '80rem', borderRadius: '0.375rem', border: '0'}}
+  title="Office Hours Registration"
+  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
 />
diff --git a/website/docs/community/slack.mdx b/website/docs/community/slack.mdx
index 28c77a4c15..9d7839e100 100644
--- a/website/docs/community/slack.mdx
+++ b/website/docs/community/slack.mdx
@@ -12,7 +12,7 @@ Atmos has a great community of active users who are all more than willing to hel
 
 <iframe
   src="https://cloudposse.com/embed/slack?theme=dark&bg=transparent"
-  className="h-[700px] w-full max-w-3xl mx-auto rounded-md border-0"
+  style={{height: '380px', width: '100%', maxWidth: '80rem', borderRadius: '0.375rem', border: '0'}}
   title="Join our Slack Community"
-  sandbox="allow-same-origin allow-scripts allow-forms"
+  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
 />

From bded1bb23415c202e603e8b0e0e2e855b2e30852 Mon Sep 17 00:00:00 2001
From: Erik Osterman <erik@cloudposse.com>
Date: Fri, 26 Dec 2025 21:39:02 -0600
Subject: [PATCH 3/5] Add hide_title to Office Hours page to prevent duplicate
 headings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <noreply@anthropic.com>
---
 website/docs/community/office-hours.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/docs/community/office-hours.mdx b/website/docs/community/office-hours.mdx
index 883fd7985e..9decf760d5 100644
--- a/website/docs/community/office-hours.mdx
+++ b/website/docs/community/office-hours.mdx
@@ -1,5 +1,6 @@
 ---
 title: Office Hours
+hide_title: true
 sidebar_position: 3
 sidebar_label: Office Hours
 description: Office Hours with Cloud Posse

From ff50380653c1f985f778aeaf8f045d5313b9f59d Mon Sep 17 00:00:00 2001
From: Erik Osterman <erik@cloudposse.com>
Date: Fri, 26 Dec 2025 22:05:20 -0600
Subject: [PATCH 4/5] Add UTM tracking parameters to Office Hours and Slack
 embeds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 <noreply@anthropic.com>
---
 website/docs/community/office-hours.mdx | 2 +-
 website/docs/community/slack.mdx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/docs/community/office-hours.mdx b/website/docs/community/office-hours.mdx
index 9decf760d5..487e0e455e 100644
--- a/website/docs/community/office-hours.mdx
+++ b/website/docs/community/office-hours.mdx
@@ -8,7 +8,7 @@ id: office-hours
 ---
 
 <iframe
-  src="https://cloudposse.com/embed/office-hours?theme=dark&bg=transparent"
+  src="https://cloudposse.com/embed/office-hours?theme=dark&bg=transparent&utm_source=atmos-docs&utm_medium=embed&utm_campaign=office-hours&utm_content=community-page"
   style={{height: '380px', width: '100%', maxWidth: '80rem', borderRadius: '0.375rem', border: '0'}}
   title="Office Hours Registration"
   sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
diff --git a/website/docs/community/slack.mdx b/website/docs/community/slack.mdx
index 9d7839e100..aae3f37bfa 100644
--- a/website/docs/community/slack.mdx
+++ b/website/docs/community/slack.mdx
@@ -11,7 +11,7 @@ id: slack
 Atmos has a great community of active users who are all more than willing to help each other out. So, join us!
 
 <iframe
-  src="https://cloudposse.com/embed/slack?theme=dark&bg=transparent"
+  src="https://cloudposse.com/embed/slack?theme=dark&bg=transparent&utm_source=atmos-docs&utm_medium=embed&utm_campaign=slack-community&utm_content=community-page"
   style={{height: '380px', width: '100%', maxWidth: '80rem', borderRadius: '0.375rem', border: '0'}}
   title="Join our Slack Community"
   sandbox="allow-same-origin allow-scripts allow-forms allow-popups"

From 18054ebf36e475291c6ed2958b8af904d10674d7 Mon Sep 17 00:00:00 2001
From: Erik Osterman <erik@cloudposse.com>
Date: Fri, 26 Dec 2025 23:16:25 -0600
Subject: [PATCH 5/5] Add theme-aware CloudPosse embed components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 <noreply@anthropic.com>
---
 website/docs/community/office-hours.mdx       |  8 +---
 website/docs/community/slack.mdx              |  8 +---
 .../CloudPosseOfficeHoursEmbed/index.tsx      | 40 +++++++++++++++++++
 .../components/CloudPosseSlackEmbed/index.tsx | 40 +++++++++++++++++++
 4 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 website/src/components/CloudPosseOfficeHoursEmbed/index.tsx
 create mode 100644 website/src/components/CloudPosseSlackEmbed/index.tsx

diff --git a/website/docs/community/office-hours.mdx b/website/docs/community/office-hours.mdx
index 487e0e455e..8d15c819c5 100644
--- a/website/docs/community/office-hours.mdx
+++ b/website/docs/community/office-hours.mdx
@@ -6,10 +6,6 @@ sidebar_label: Office Hours
 description: Office Hours with Cloud Posse
 id: office-hours
 ---
+import CloudPosseOfficeHoursEmbed from '@site/src/components/CloudPosseOfficeHoursEmbed';
 
-<iframe
-  src="https://cloudposse.com/embed/office-hours?theme=dark&bg=transparent&utm_source=atmos-docs&utm_medium=embed&utm_campaign=office-hours&utm_content=community-page"
-  style={{height: '380px', width: '100%', maxWidth: '80rem', borderRadius: '0.375rem', border: '0'}}
-  title="Office Hours Registration"
-  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
-/>
+<CloudPosseOfficeHoursEmbed />
diff --git a/website/docs/community/slack.mdx b/website/docs/community/slack.mdx
index aae3f37bfa..2e49a80650 100644
--- a/website/docs/community/slack.mdx
+++ b/website/docs/community/slack.mdx
@@ -5,14 +5,10 @@ sidebar_label: Slack
 description: Cloud Posse's SweetOps Slack Community
 id: slack
 ---
+import CloudPosseSlackEmbed from '@site/src/components/CloudPosseSlackEmbed';
 
 ## Join our Slack Community!
 
 Atmos has a great community of active users who are all more than willing to help each other out. So, join us!
 
-<iframe
-  src="https://cloudposse.com/embed/slack?theme=dark&bg=transparent&utm_source=atmos-docs&utm_medium=embed&utm_campaign=slack-community&utm_content=community-page"
-  style={{height: '380px', width: '100%', maxWidth: '80rem', borderRadius: '0.375rem', border: '0'}}
-  title="Join our Slack Community"
-  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
-/>
+<CloudPosseSlackEmbed />
diff --git a/website/src/components/CloudPosseOfficeHoursEmbed/index.tsx b/website/src/components/CloudPosseOfficeHoursEmbed/index.tsx
new file mode 100644
index 0000000000..ba733bdb20
--- /dev/null
+++ b/website/src/components/CloudPosseOfficeHoursEmbed/index.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+
+export default function CloudPosseOfficeHoursEmbed(): JSX.Element {
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+
+  useEffect(() => {
+    const checkTheme = () => {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      setTheme(currentTheme === 'dark' ? 'dark' : 'light');
+    };
+
+    checkTheme();
+
+    // Watch for theme changes
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const src = `https://cloudposse.com/embed/office-hours?theme=${theme}&bg=transparent&utm_source=atmos-docs&utm_medium=embed&utm_campaign=office-hours&utm_content=community-page`;
+
+  return (
+    <iframe
+      src={src}
+      style={{
+        height: '380px',
+        width: '100%',
+        maxWidth: '80rem',
+        borderRadius: '0.375rem',
+        border: '0',
+      }}
+      title="Office Hours Registration"
+      sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+    />
+  );
+}
diff --git a/website/src/components/CloudPosseSlackEmbed/index.tsx b/website/src/components/CloudPosseSlackEmbed/index.tsx
new file mode 100644
index 0000000000..12e847df61
--- /dev/null
+++ b/website/src/components/CloudPosseSlackEmbed/index.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+
+export default function CloudPosseSlackEmbed(): JSX.Element {
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+
+  useEffect(() => {
+    const checkTheme = () => {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      setTheme(currentTheme === 'dark' ? 'dark' : 'light');
+    };
+
+    checkTheme();
+
+    // Watch for theme changes
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const src = `https://cloudposse.com/embed/slack?theme=${theme}&bg=transparent&utm_source=atmos-docs&utm_medium=embed&utm_campaign=slack-community&utm_content=community-page`;
+
+  return (
+    <iframe
+      src={src}
+      style={{
+        height: '380px',
+        width: '100%',
+        maxWidth: '80rem',
+        borderRadius: '0.375rem',
+        border: '0',
+      }}
+      title="Join our Slack Community"
+      sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+    />
+  );
+}