Release v0.1.1

.travis.yml

@@ -0,0 +1,13 @@
+dist: focal
+language: node_js
+node_js:
+  - v20.13.1
+cache:
+  directories:
+    - node_modules
+before_install:
+  - npm i -g [email protected]
+install:
+  - npm install
+script:
+  - npm run build

README.md

@@ -5,7 +5,7 @@
 `npm i`
 `npm run dev`
 
-###### prerequisits
+###### prerequisites
 
 It's recommended to use [volta](https://docs.volta.sh/guide/getting-started)
 ```
@@ -53,4 +53,24 @@ _meta.en-US.json
 
 At the moment the i18n is done manually by the nextra guide - https://nextra.site/docs/guide/i18n
 
-We'll explore the option to use Crowdin instead.
+We'll explore the option to use Crowdin instead.
+
+### Build & Deployment
+
+The build and deployments are automatic on merge.
+
+In order to deploy it to dev/acc, merge to `develop` branch.
+
+For production release you need to merge to `main` branch.
+For proper redeployment make sure you bump the version on every merge to main.
+
+Use the following:
+```
+npm version patch
+```
+this will bump the patch version and make a commit (e.g. 0.0.1 -> 0.0.2).
+
+Or manually update the npm version in the package.json file.
+Then run `npm install` and commit the changes.
+
+Once merged into `main`, make sure to merge `main` back to `develop` (to sync the version). 

components/iframeCommunication.js

@@ -0,0 +1,79 @@
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+
+const HEIGHT_DIFFERENCE_THRESHOLD = 130; // ~30 locally and 122 on Sandbox (Donna PC)
+
+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 getCurrentOrigin = () => {
+    const { protocol, hostname, origin, port } = window.location;
+    if (port) {
+        return `${protocol}//${hostname}:3000`; // local client port
+    }
+
+    return origin;
+};
+
+const sendMessageToParent = (message) => {
+    try {
+        const origin = getCurrentOrigin();
+
+        if (!isOriginValid(origin)) {
+            console.warn('Invalid origin: ', origin);
+            return;
+        }
+
+        window.parent.postMessage(message, getCurrentOrigin());
+    } 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;
+        console.log('Scroll change new/old: ', pageHeight, lastHeight.current);
+
+        // Only send if there's a meaningful difference in height
+        if (Math.abs(pageHeight - lastHeight.current) > HEIGHT_DIFFERENCE_THRESHOLD) {
+            lastHeight.current = pageHeight;
+
+            // Debounce the message to avoid excessive calls
+            clearTimeout(debounceTimeout.current);
+            debounceTimeout.current = setTimeout(() => {
+                console.log('Scroll change SENT: ', pageHeight, lastHeight.current);
+                sendMessageToParent({ type: SupportedMessageTypes.PageHeight, height: pageHeight });
+            }, 50);
+        }
+    };
+
+
+    useEffect(() => {
+        // Send path
+        sendMessageToParent({ type: SupportedMessageTypes.PageChange, url: router.pathname });
+
+        // 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;

crowdin.yml

@@ -0,0 +1,9 @@
+"files": [
+  {
+    "source": "/pages/**/*.en-US.mdx",
+    "translation": "/pages/**/%file_name%.%locale%.mdx",
+    "translation_replace": {
+      ".en-US": ""
+    }
+  }
+]

next.config.js

@@ -6,7 +6,7 @@ const withNextra = require('nextra')({
 module.exports = withNextra({
     // output: 'export', not working with i18n
     i18n: {
-        locales: ['en-US', 'de-DE'],
+        locales: ['en-US', 'nl-NL'],
         defaultLocale: 'en-US'
     },
     images: {

package.json

@@ -1 +1,31 @@
-{"name":"@alkemio/documentation","version":"0.0.3","description":"Alkemio platform documentation","author":"Alkemio Foundation","repository":{"type":"git","url":"https://github.com/alkem-io/documentation"},"license":"EUPL-1.2","scripts":{"dev":"next -p 3010","build":"next build","start":"next start -p 3010","export":"next export"},"dependencies":{"next":"^14.2.5","nextra":"^2.13.4","nextra-theme-docs":"^2.13.4","react":"^18.3.1","react-dom":"^18.3.1"},"engines":{"node":">=20.9.0","npm":">=10"},"volta":{"node":"20.13.1"}}
+{
+  "name": "@alkemio/documentation",
+  "version": "0.1.1",
+  "description": "Alkemio platform documentation",
+  "author": "Alkemio Foundation",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alkem-io/documentation"
+  },
+  "license": "EUPL-1.2",
+  "scripts": {
+    "dev": "next -p 3010",
+    "build": "next build",
+    "start": "next start -p 3010",
+    "export": "next export"
+  },
+  "dependencies": {
+    "next": "^14.2.5",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "engines": {
+    "node": ">=20.9.0",
+    "npm": ">=10"
+  },
+  "volta": {
+    "node": "20.13.1"
+  }
+}

pages/_app.js

@@ -1,6 +1,20 @@
-import '../styles.css'
-
-// This default export is required in a new `pages/_app.js` file.
+import { useEffect } from 'react';
+import '../styles.css';
+import IframeCommunication from '../components/iframeCommunication';
+
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  useEffect(() => {
+    try {
+      if (window.self === window.top) {
+        document.body.classList.add("not-in-iframe");
+      }
+    } catch (e) {}
+  }, []);
+
+  return (
+    <>
+      <IframeCommunication />
+      <Component {...pageProps} />
+    </>
+  );
 }

pages/_meta.en-US.json

@@ -19,6 +19,10 @@
             "pagination": true
         },
         "submenus": [
+            {
+                "title": "First Steps",
+                "path": "/getting-started/first-steps"
+            },
             {
                 "title": "Create an Account",
                 "path": "/getting-started/create-account"