Huge role refactoring/cleanup. Other commits will propably follow. Because some bugs will exist. Still important for longrun and also for auto docs/help/slideshow generation

roles/web-app-portfolio/templates/config.yaml.j2

@@ -0,0 +1,30 @@
+{# The Linebreak here are intentional due to tab bugs #}
+---
+cards:
+{{ portfolio_cards | to_nice_yaml(indent=2) }}
+
+{% include 'menu/applications.yml.j2' %}
+{% include 'menu/followus.yml.j2' %}
+{% include 'menu/contact.yml.j2' %}
+{% include 'menu/support.yml.j2' %}
+
+platform:
+  titel:    {{service_provider.platform.titel}}
+  subtitel: {{service_provider.platform.subtitel}}
+  logo:
+    source: {{service_provider.platform.logo}}
+  favicon:
+    source: {{service_provider.platform.favicon}}
+company:
+  titel: {{service_provider.company.titel}}
+  subtitel: {{service_provider.company.slogan}}
+  logo:
+    source: {{service_provider.company.logo}}
+  address:
+{{ service_provider.company.address | to_nice_yaml(indent=4) | indent(4, true) }}
+  imprint_url: {{service_provider.legal.imprint}}
+navigation:
+
+{% include 'menu/header.yml.j2' %}
+
+{% include 'menu/footer.yml.j2' %}

roles/web-app-portfolio/templates/docker-compose.yml.j2

@@ -0,0 +1,17 @@
+{% include 'roles/docker-compose/templates/base.yml.j2' %}
+  portfolio:
+{% set container_port = 5000 %}
+    build:
+      context: {{docker_repository_path}}
+      dockerfile: Dockerfile
+    image: application-portfolio
+    container_name: portfolio
+    ports:
+      - 127.0.0.1:{{ports.localhost.http[application_id]}}:{{ container_port }}
+    volumes:
+      - {{docker_repository_path}}app:/app
+    restart: unless-stopped
+{% include 'roles/docker-container/templates/networks.yml.j2' %}
+{% include 'roles/docker-container/templates/healthcheck/tcp.yml.j2' %}
+
+{% include 'roles/docker-compose/templates/networks.yml.j2' %}

roles/web-app-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/web-app-portfolio/templates/menu/applications.yml.j2

@@ -0,0 +1,77 @@
+applications:
+{% if (portfolio_menu_data.categorized is mapping and portfolio_menu_data.categorized | length > 0) 
+   or (portfolio_menu_data.uncategorized is sequence and portfolio_menu_data.uncategorized | length > 0) %}
+
+    - name: Applications
+      description: Browse, configure and launch all available applications
+      icon:
+          class: fa fa-th-large
+      children:
+
+    {# Render all categories #}
+    {% for category, apps in portfolio_menu_data.categorized.items() %}
+
+      - name: {{ category }}
+        description: {{ portfolio_menu_categories[category].description }}
+        icon:
+          class: {{ portfolio_menu_categories[category].icon }}
+        children:
+        
+        {% for app in apps %}
+
+          - name: {{ app.title }}
+            description: {{ app.text }}
+            icon: {{ app.icon }}
+            url: {{ app.url }}
+            iframe: {{ app.iframe }}
+            
+            {% if app.title == 'Keycloak' %}
+
+            children:
+              - name: Administration
+                description: Access the central admin console
+                icon:
+                  class: fa-solid fa-shield-halved
+                url: https://{{domains | get_domain('keycloak')}}/admin
+                iframe: {{ applications | is_feature_enabled('portfolio_iframe','keycloak') }}
+              - name: Profile
+                description: Update your personal admin settings
+                icon:
+                  class: fa-solid fa-user-gear
+                url: https://{{ domains | get_domain('keycloak') }}/realms/{{oidc.client.id}}/account
+                iframe: {{ applications | is_feature_enabled('portfolio_iframe','keycloak') }}
+              - name: Logout
+                description: End your admin session securely
+                icon:
+                  class: fa-solid fa-right-from-bracket
+                url: https://{{ domains | get_domain('keycloak') }}/realms/{{oidc.client.id}}/protocol/openid-connect/logout
+                iframe: false
+
+            {% endif %}
+
+        {% endfor %}
+
+    {% endfor %}
+
+{# Render Uncategorized #}
+{% if portfolio_menu_data.uncategorized %}
+
+      - name: Uncategorized
+        description: Tools without a defined category
+        icon:
+          class: fa-solid fa-question
+        children:
+
+{% for app in portfolio_menu_data.uncategorized %}
+
+        - name: {{ app.title }}
+          description: {{ app.text }}
+          icon: {{ app.icon }}
+          url: {{ app.url }}
+          iframe: {{ app.iframe }}
+
+{% endfor %}
+
+{% endif %}
+
+{% endif %}

roles/web-app-portfolio/templates/menu/contact.yml.j2

@@ -0,0 +1,37 @@
+contact:
+    name: Contact
+    description: Get in touch with {{ 'us' if service_provider.type == 'legal' else 'me' }} 
+    icon:
+        class: fa-solid fa-envelope
+    children:
+
+{% if service_provider.contact.email is defined %}
+
+    - name: Email
+      description: Send {{ 'us' if service_provider.type == 'legal' else 'me' }} an email
+      icon:
+        class: fa-solid fa-envelope
+      url: mailto:{{service_provider.contact.email}}
+      identifier: {{service_provider.contact.email}}
+
+{% endif %}
+{% if service_provider.contact.phone is defined %}
+
+    - name: Mobile
+      description: Call {{ 'us' if service_provider.type == 'legal' else 'me' }}
+      icon:
+        class: fa-solid fa-phone
+      url: "tel:{{service_provider.contact.phone}}"
+      identifier: "{{service_provider.contact.phone}}"
+      target: _top
+
+{% endif %}
+{% if service_provider.contact.matrix is defined %}
+
+    - name: Matrix
+      description: Chat with {{ 'us' if service_provider.type == 'legal' else 'me' }} on Matrix
+      icon:
+        class: fa-solid fa-cubes
+      identifier: "{{service_provider.contact.matrix}}"
+
+{% endif %}

roles/web-app-portfolio/templates/menu/followus.yml.j2

@@ -0,0 +1,62 @@
+followus:
+  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) %}
+  children:
+{% if service_provider.contact.mastodon is defined and service_provider.contact.mastodon != "" %}
+    - name: Mastodon
+      description: Follow {{ 'our' if service_provider.type == 'legal' else 'my' }} updates on Mastodon.
+      icon:
+        class: fa-brands fa-mastodon
+      url: "{{ web_protocol }}://{{ service_provider.contact.mastodon.split('@')[2] }}/@{{ service_provider.contact.mastodon.split('@')[1] }}"
+      identifier: "{{service_provider.contact.mastodon}}"
+      iframe: {{ applications | is_feature_enabled('portfolio_iframe','mastodon') }}
+{% endif %}
+{% if service_provider.contact.bluesky is defined and service_provider.contact.bluesky != "" %}
+    - name: Bluesky
+      description: Follow {{ 'our' if service_provider.type == 'legal' else 'my' }} on Bluesky.
+      icon:
+        class: fa-brands fa-bluesky
+      alternatives:
+      - link: followus.microblogs.mastodon
+      identifier: "{{service_provider.contact.bluesky}}"
+{% endif %}
+{% endif %}
+{% if service_provider.contact.pixelfed  is defined and service_provider.contact.pixelfed  != "" %}
+    - name: Pixelfed    
+      description: Explore {{ 'our' if service_provider.type == 'legal' else 'my' }} photo gallery on Pixelfed.
+      icon:
+          class: fa-solid fa-camera
+      identifier: "{{service_provider.contact.pixelfed}}"
+      url: "{{ web_protocol }}://{{ service_provider.contact.pixelfed.split('@')[2] }}/@{{ service_provider.contact.pixelfed.split('@')[1] }}"
+      iframe: {{ applications | is_feature_enabled('portfolio_iframe','pixelfed') }}
+{% endif %}
+{% if service_provider.contact.peertube  is defined and service_provider.contact.peertube  != "" %}
+    - name: Peertube
+      description: Discover {{ 'our' if service_provider.type == 'legal' else 'my' }} videos on Peertube.
+      icon:
+        class: fa-solid fa-video
+      identifier: "{{service_provider.contact.peertube}}"
+      url: "{{ web_protocol }}://{{ service_provider.contact.peertube.split('@')[2] }}/@{{ service_provider.contact.peertube.split('@')[1] }}"
+      iframe: {{ applications | is_feature_enabled('portfolio_iframe','peertube') }}
+{% endif %}
+{% if service_provider.contact.wordpress is defined and service_provider.contact.wordpress != "" %}
+    - name: Wordpress
+      description: Read {{ 'our' if service_provider.type == 'legal' else 'my' }} articles and stories.
+      icon:
+        class: fa-solid fa-blog
+      identifier: "{{service_provider.contact.wordpress}}"
+      url: "{{ web_protocol }}://{{ service_provider.contact.wordpress.split('@')[2] }}/@{{ service_provider.contact.wordpress.split('@')[1] }}"
+      iframe: {{ applications | is_feature_enabled('portfolio_iframe','wordpress') }}
+{% endif %}
+{% if service_provider.contact.friendica is defined and service_provider.contact.friendica != "" %}
+    - name: Friendica
+      description: Visit {{ 'our' if service_provider.type == 'legal' else 'my' }} friendica profile
+      icon:
+        class: fas fa-network-wired
+      identifier: "{{service_provider.contact.friendica}}"
+      url: "{{ web_protocol }}://{{ service_provider.contact.friendica.split('@')[2] }}/@{{ service_provider.contact.friendica.split('@')[1] }}"
+      iframe: {{ applications | is_feature_enabled('portfolio_iframe','friendica') }}
+{% endif %}

roles/web-app-portfolio/templates/menu/footer.yml.j2

@@ -0,0 +1,48 @@
+  
+  footer:
+    children:
+#    - link: support
+
+{% if "sphinx" in group_names %}   
+
+    - name: Documentation
+      description: Access our comprehensive documentation and support resources to help you get the most out of the software.
+      icon:
+        class: fas fa-book
+      url: https://{{domains | get_domain('sphinx')}}
+      iframe: {{ applications | is_feature_enabled('portfolio_iframe','sphinx') }}
+
+{% endif %}
+
+{% if "presentation" in group_names %}   
+
+    - name: Slides
+      description: Checkout the presentation
+      icon:
+        class: "fas fa-chalkboard-teacher"
+      url: https://{{domains | get_domain('presentation')}}
+      iframe: {{ applications | is_feature_enabled('portfolio_iframe','presentation') }}
+
+{% endif %}
+    - name: Solutions
+      description: "Software and IT Infrastructure Solutions by Kevin Veen-Birkenbach" 
+      icon:
+          class: fa-solid fa-rocket
+      url: "https://cybermaster.space/"
+      iframe: false
+
+{% if service_provider.legal.source_code is defined and service_provider.legal.source_code != "" %}
+    - name: Source Code
+      description: Explore {{ 'our' if service_provider.type == 'legal' else 'my' }} code.
+      icon:
+        class: fa-solid fa-code
+      url: "{{service_provider.legal.source_code}}"
+{% endif %}
+    - link: followus
+    - link: contact
+    - name: Imprint
+      description: Check out the imprint information
+      icon:
+          class: fa-solid fa-scale-balanced
+      url: "{{service_provider.legal.imprint}}"
+      iframe: true

roles/web-app-portfolio/templates/menu/header.yml.j2

@@ -0,0 +1,14 @@
+  header:
+    children:
+    - link: applications
+    - name: Toggle
+      description: Enter or exit fullscreen mode
+      icon:
+        class: fa-solid fa-expand-arrows-alt
+      onclick: "toggleFullscreen()"
+
+    - name: Tab
+      description: Open the currently embedded iframe URL in a fresh browser tab
+      icon:
+        class: fa-solid fa-up-right-from-square
+      onclick: openIframeInNewTab()

roles/web-app-portfolio/templates/menu/support.yml.j2

@@ -0,0 +1,26 @@
+support:
+    name: Support Us
+    description: "Discover all the ways you can support our work."
+    icon:
+      class: fa-solid fa-hands-helping
+    children:
+      - name: Buy me a Coffee
+        description: "Support our work with a coffee – every cup helps!"
+        icon:
+          class: fa-solid fa-mug-hot
+        url: https://s.veen.world/buymeacoffee
+      - name: Patreon
+        description: "Become a member and support me monthly with exclusive content."
+        icon:
+          class: fa-brands fa-patreon
+        url: https://s.veen.world/patreon
+      - name: PayPal
+        description: "Donate to our open source projects with a one-time or monthly PayPal contribution."
+        icon:
+          class: fa-brands fa-paypal
+        url: https://s.veen.world/paypaldonate
+      - name: GitHub Sponsors
+        description: "Directly support our projects through GitHub Sponsors."
+        icon:
+          class: fa-brands fa-github
+        url: https://s.veen.world/