feat: Replace community embeds with theme-aware components

docs/community/office-hours.mdx

@@ -3,22 +3,16 @@ title: Office Hours Registration
 sidebar_position: 3
 sidebar_label: Office Hours
 description: Office Hours with Cloud Posse
+hide_title: true
 id: office-hours
 tags:
  - office-hours
  - community
 ---
-import HubspotForm from 'react-hubspot-form'
+import CloudPosseOfficeHoursEmbed from '@site/src/components/CloudPosseOfficeHoursEmbed';
 import { YouTubePlaylist } from '@codesweetly/react-youtube-playlist';
 
-<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 />
 
 ## Past Recordings
 

docs/community/slack.mdx

@@ -8,21 +8,10 @@ tags:
   - slack
   - community
 ---
+import CloudPosseSlackEmbed from '@site/src/components/CloudPosseSlackEmbed';
 
 ## Join our Slack Community!
 
 Cloud Posse has a great community of active users who are more than willing to help each other. 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"
-        className="join-slack"
-        allowtransparency="true"
-        style={{ borderRadius: '6px', display: 'flex', marginRight: 'auto', marginLeft: 'auto'}}
-        ></iframe>
+<CloudPosseSlackEmbed />

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

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

versioned_docs/version-v1/community/office-hours.mdx

@@ -3,22 +3,16 @@ title: Office Hours Registration
 sidebar_position: 3
 sidebar_label: Office Hours
 description: Office Hours with Cloud Posse
+hide_title: true
 id: office-hours
 tags:
  - office-hours
  - community
 ---
-import HubspotForm from 'react-hubspot-form'
+import CloudPosseOfficeHoursEmbed from '@site/src/components/CloudPosseOfficeHoursEmbed';
 import { YouTubePlaylist } from '@codesweetly/react-youtube-playlist';
 
-<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 />
 
 ## Past Recordings
 

versioned_docs/version-v1/community/slack.mdx

@@ -8,21 +8,10 @@ tags:
   - slack
   - community
 ---
+import CloudPosseSlackEmbed from '@site/src/components/CloudPosseSlackEmbed';
 
 ## Join our Slack Community!
 
 Cloud Posse has a great community of active users who are more than willing to help each other. 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"
-        className="join-slack"
-        allowtransparency="true"
-        style={{ borderRadius: '6px', display: 'flex', marginRight: 'auto', marginLeft: 'auto'}}
-        ></iframe>
+<CloudPosseSlackEmbed />