empty

components/iframeCommunication.js

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+
+// not used as there's no access to the parent origin. This is not ideal as anyone can embed the documentation and receive messages.
+// const allowedOrigins = ['https://alkem.io', 'https://dev-alkem.io', 'https://acc-alkem.io', 'https://sandbox-alkem.io', 'http://localhost:3000'];
+// const isOriginValid = (origin) => allowedOrigins.includes(origin);
+
+const sendMessageToParent = (message) => {
+    try {
+        // todo: check for isOriginValid here
+        window.parent.postMessage(message, '*');
+    } catch (error) {
+        console.warn('Failed to send message to parent: ', error);
+    }
+};
+
+const SupportedMessageTypes = {
+    PageHeight: 'PAGE_HEIGHT',
+    PageChange: 'PAGE_CHANGE',
+};
+
+const IframeCommunication = () => {
+    const router = useRouter();
+    const lastHeight = useRef(0);
+    const debounceTimeout = useRef(null);
+
+    const sendPageHeight = () => {
+        const pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+        // Only send if there's a meaningful difference in height
+        if (Math.abs(pageHeight - lastHeight.current) > 40) {
+            lastHeight.current = pageHeight;
+
+            // Debounce the message to avoid excessive calls
+            clearTimeout(debounceTimeout.current);
+            debounceTimeout.current = setTimeout(() => {
+                sendMessageToParent({ type: SupportedMessageTypes.PageHeight, height: pageHeight });
+            }, 50);
+        }
+    };
+
+    useEffect(() => {
+        // Send initial page height and path
+        sendMessageToParent({ type: SupportedMessageTypes.PageChange, url: router.pathname });
+        sendPageHeight();
+
+        // Observe changes to the body size
+        const resizeObserver = new ResizeObserver(sendPageHeight);
+        resizeObserver.observe(document.body);
+
+        // Cleanup
+        return () => {
+            resizeObserver.disconnect();
+            clearTimeout(debounceTimeout.current);
+        };
+    }, [router.pathname]);
+
+    return null;
+};
+
+export default IframeCommunication;

pages/_app.js

@@ -1,6 +1,7 @@
 import '../styles.css'
+import IframeCommunication from '../components/iframeCommunication';
 
 // This default export is required in a new `pages/_app.js` file.
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <><IframeCommunication /><Component {...pageProps} /></>;
 }

pages/getting-started/find-space.en-US.mdx

@@ -12,4 +12,4 @@ To change your personal details, click on the gear icon to the right of your nam
 ### Example
 ![Example Profile](/profile-example.png)
 As an employee at Alkemio, I will fill out my name, demographics, jobtitle in the tagline and some information about what I do, how I got here and what my interests are in the Bio. I also fill in some skills like Open Source, GitHub, Community Management and Customer Success in the Skills field, so people can quickly see my fields of expertise. I fill out my interests and values, like GreenTech and Sustainability in the Keywords section.
-I will also add the link to my LinkedIn profile, my GitHub page and my X profile when I have those. 
+I will also add the link to my LinkedIn profile, my GitHub page and my X profile when I have those.

styles.css

@@ -1,4 +1,5 @@
 body {
     font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
     'Arial', sans-serif;
+    overflow-y: hidden;
 }