Finished Iframe Implementation

roles/docker-portfolio/templates/config.yaml.j2

@@ -6,8 +6,8 @@ accounts:
   icon:
     class: fa-solid fa-users
   children:
-  - name: Publishing Channels
-    description: Platforms where I share content.
+  - name: Follow Us
+    description: Follow us to stay up to recieve the newest CyMaIS updates 
     icon:
       class: fas fa-newspaper
 {% if ["mastodon", "bluesky"] | any_in(group_names) %}
@@ -32,7 +32,7 @@ accounts:
         icon:
           class: fa-brands fa-bluesky
         alternatives:
-        - link: accounts.publishingchannels.microblogs.mastodon
+        - link: accounts.followus.microblogs.mastodon
         identifier: "{{service_provider.contact.bluesky}}"
 {% endif %}
 {% endif %}
@@ -102,7 +102,6 @@ company:
 navigation:
   header:
     children:
-    - link: accounts.publishingchannels
     - name: Contact
       description: Get in touch with {{ 'us' if service_provider.type == 'legal' else 'me' }} 
       icon:
@@ -146,4 +145,10 @@ navigation:
         class: fa-solid fa-expand-arrows-alt
       onclick: "toggleFullscreen()"
 
+    - name: Open in new tab
+      description: Open the currently embedded iframe URL in a fresh browser tab
+      icon:
+        class: fa-solid fa-up-right-from-square
+      onclick: openIframeInNewTab()
+
 {% include 'footer_menu.yaml.j2' %}

roles/docker-portfolio/templates/javascript.js.j2

@@ -0,0 +1,30 @@
+window.addEventListener("message", function(event) {
+  const allowedSuffix = ".{{ primary_domain }}";
+  const origin = event.origin;
+
+  // 1. Only allow messages from *.{{ primary_domain }}
+  if (!origin.endsWith(allowedSuffix)) return;
+
+  const data = event.data;
+
+  // 2. Only process valid iframeLocationChange messages
+  if (data && data.type === "iframeLocationChange" && typeof data.href === "string") {
+    try {
+      const hrefUrl = new URL(data.href);
+
+      // 3. Only allow redirects to *.{{ primary_domain }}
+      if (!hrefUrl.hostname.endsWith(allowedSuffix)) return;
+
+      // 4. Update the ?iframe= parameter in the browser URL
+      const newUrl = new URL(window.location);
+      newUrl.searchParams.set("iframe", hrefUrl.href);
+      window.history.replaceState({}, "", newUrl);
+    } catch (e) {
+      // Invalid or malformed URL – ignore
+    }
+  }
+});
+
+{% if enable_debug | bool %}
+console.log("[iframe-sync] Listener for iframe messages is active.");
+{% endif %}

roles/docker-portfolio/vars/configuration.yml

@@ -3,7 +3,7 @@ features:
   css:              true
   portfolio_iframe: false
   simpleicons:      true  # Activate Brand Icons for your groups
-nasa_api_key:       false # Set api key to use the Nasa Picture of the Day as Background
+  javascript:       true  # Necessary for URL sync
 csp:
   whitelist:
     script-src-elem: