Add theme-aware CloudPosse embeds for Slack and Office Hours with UTM tracking

website/docs/community/office-hours.mdx

@@ -1,19 +1,11 @@
 ---
 title: Office Hours
+hide_title: true
 sidebar_position: 3
 sidebar_label: Office Hours
 description: Office Hours with Cloud Posse
 id: office-hours
 ---
-import HubspotForm from 'react-hubspot-form'
+import CloudPosseOfficeHoursEmbed from '@site/src/components/CloudPosseOfficeHoursEmbed';
 
-# 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>}
-/>
+<CloudPosseOfficeHoursEmbed />

website/docs/community/slack.mdx

@@ -5,20 +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://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>
+<CloudPosseSlackEmbed />

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"
+    />
+  );
+}

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"
+    />
+  );
+}