Implemented Global CSS draft

roles/docker-bigbluebutton/tasks/main.yml

@@ -6,8 +6,8 @@
 # Leave this in the code until big blue button was working for a while. 
 # This is necessary due to the reason that big blue button wasn't fully tested after refactoring
 #
-#- name: "include task certbot-matomo.yml"
-#  include_tasks: certbot-matomo.yml
+#- name: "include task certbot-and-globals.yml"
+#  include_tasks: certbot-and-globals.yml
 #
 #- name: configure {{domain}}.conf
 #  template: 

roles/docker-gitea/README.md

@@ -26,4 +26,8 @@ To access the database execute
   docker-compose exec -it database /bin/mysql -u gitea -p
 ```
 ## bash in application
-docker-compose exec -it application /bin/sh
+docker-compose exec -it application /bin/sh
+
+## More Information
+- [Gitea LDAP integration](https://docs.gitea.com/usage/authentication)
+- [Gitea Alternatives](https://chatgpt.com/share/67a5f599-c9b0-800f-87fe-49a3b61263e6)

roles/docker-mastodon/tasks/create-domains.yml

@@ -1,5 +1,5 @@
-- name: "include task certbot-matomo.yml"
-  include_tasks: certbot-matomo.yml
+- name: "include task certbot-and-globals.yml"
+  include_tasks: certbot-and-globals.yml
 
 - name: configure {{domain}}.conf
   template: 

roles/docker-mastodon/templates/mastodon.conf.j2

@@ -8,10 +8,7 @@ server {
 
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
 
   keepalive_timeout    70;
   sendfile             on;

roles/docker-matrix-compose/tasks/main.yml

@@ -3,8 +3,8 @@
   include_role: 
     name: docker-central-database
 
-- name: "include task certbot-matomo.yml"
-  include_tasks: certbot-matomo.yml
+- name: "include task certbot-and-globals.yml"
+  include_tasks: certbot-and-globals.yml
   vars:
     domain:     "{{domains.matrix_synapse}}"
     http_port:  "{{ports.localhost.http_ports.matrix_synapse}}"

roles/docker-matrix-compose/templates/nginx.conf.j2

@@ -10,9 +10,6 @@ server {
     listen 8448 ssl default_server;
     listen [::]:8448 ssl default_server;
 
-    {% if nginx_matomo_tracking | bool %}
-        {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-    {% endif %}
-
+    {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
     {% include 'roles/nginx-docker-reverse-proxy/templates/proxy_pass.conf.j2' %}
 }

roles/docker-nextcloud/tasks/main.yml

@@ -3,8 +3,8 @@
   include_role: 
     name: docker-central-database
 
-- name: "include task certbot-matomo.yml"
-  include_tasks: certbot-matomo.yml
+- name: "include task certbot-and-globals.yml"
+  include_tasks: certbot-and-globals.yml
 
 - name: configure {{domain}}.conf
   template: 

roles/docker-nextcloud/templates/nextcloud.conf.j2

@@ -4,10 +4,7 @@ server
 
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
   # Remove X-Powered-By, which is an information leak
   fastcgi_hide_header X-Powered-By;
 

roles/docker-peertube/tasks/create-domains.yml

@@ -1,5 +1,5 @@
-- name: "include task certbot-matomo.yml"
-  include_tasks: certbot-matomo.yml
+- name: "include task certbot-and-globals.yml"
+  include_tasks: certbot-and-globals.yml
 
 - name: configure {{domain}}.conf
   template: 

roles/docker-peertube/templates/peertube.conf.j2

@@ -3,11 +3,7 @@ server {
 
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
-
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
   ##
   # Application
   ##

roles/docker-portfolio/vars/main.yml

@@ -1,2 +1,3 @@
-application_id:     "portfolio"
-repository_address: "https://github.com/kevinveenbirkenbach/portfolio"
+application_id:         "portfolio"
+repository_address:     "https://github.com/kevinveenbirkenbach/portfolio"
+global_theming_enabled: true # Activate Global CSS for Portfolio

roles/health-nginx/templates/health-nginx.py.j2

@@ -31,7 +31,7 @@ for filename in os.listdir(config_path):
         # Determine expected status codes based on the domain
         if domain == '{{domains.listmonk}}':
             expected_statuses = [404]
-{% if nginx_matomo_tracking | bool %}
+{% if global_matomo_tracking_enabled | bool %}
         elif parts[0] == 'www' or domain in redirected_domains:
             expected_statuses = [301]
 {% endif %}

roles/nginx-docker-reverse-proxy/templates/domain.conf.j2

@@ -21,11 +21,8 @@ server
   }
   {% endif %}
 
-  {% if nginx_matomo_tracking | bool %}
-    # Include Matomo Tracking Code
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
+  
   {% if nginx_docker_reverse_proxy_extra_configuration is defined %}
     # Additional Domain Specific Configuration
     {{nginx_docker_reverse_proxy_extra_configuration}}

roles/nginx-global-css/README.md

@@ -0,0 +1,43 @@
+# 🌍 Nginx Global Theming Role
+
+This **Ansible role** provides a **global theming solution** for Nginx-based web applications. It ensures a **consistent look and feel** across multiple applications by injecting a **unified global.css** with customizable theming options.  
+---
+
+## 🚀 Features
+✅ **Automatic CSS Deployment** – Injects `global.css` into all Nginx-served applications.  
+✅ **Dynamic Theming** – Uses `global_theming.css.colors` from Ansible variables for **full customization**.  
+✅ **Bootstrap Override Support** – Ensures Bootstrap-based apps use the **unified global styles**.  
+✅ **Versioning System** – Prevents caching issues with automatic **timestamp-based versioning**.  
+✅ **Dark Mode Support** – Automatically adapts to user preferences.  
+✅ **Runs Once Per Deployment** – Avoids redundant executions with `run_once_nginx_global_css`.  
+
+---
+
+## 📂 File Structure
+
+```
+.
+├── tasks/
+│   ├── main.yml        # Main Ansible tasks for deploying the global CSS
+├── vars/
+│   ├── main.yml        # Global variables (CSS paths, file names, etc.)
+├── templates/
+│   ├── global.css.j2   # Jinja2 template for generating the global CSS
+│   ├── location.conf.j2     # Nginx configuration for serving global.css
+│   ├── sub_filter.conf.j2   # Injects the global CSS link into served pages
+└── README.md           # You are here 🚀
+```
+
+---
+
+## 🎨 Theming Details
+
+The **CSS template (`global.css.j2`)** dynamically applies the defined theme colors and ensures **Bootstrap, buttons, alerts, forms, and other UI elements** follow the **unified design**.
+
+## 🛠️ Contribution
+Feel free to **fork, modify, and improve** this role! Contributions are always welcome. 🛠️🔥
+
+---
+
+🚀 **Happy Theming!** 🎨✨  
+*Created by [Kevin Veen-Birkenbach](https://www.veen.world) with the assistance of [ChatGPT](https://chatgpt.com/share/67a5fea3-4d5c-800f-8bc4-605712c02c9b).

roles/nginx-global-css/tasks/main.yml

@@ -0,0 +1,28 @@
+- name: Get the current Unix timestamp as version
+  set_fact:
+    global_css_version: "{{ ansible_date_time.epoch }}"
+  when: run_once_nginx_global_css is not defined
+
+- name: Ensure {{nginx.directories.global}} directory exists
+  file:
+    path: "{{nginx.directories.global}}"
+    state: directory
+    owner: "{{nginx.user}}"
+    group: "{{nginx.user}}"
+    mode: '0755'
+  when: run_once_nginx_global_css is not defined
+
+- name: Deploy global.css from template
+  template:
+    src: global.css.j2
+    dest: "{{global_css_destination}}"
+    owner: "{{nginx.user}}"
+    group: "{{nginx.user}}"
+    mode: '0644'
+  when: run_once_nginx_global_css is not defined
+
+- name: run the global css tasks once
+  set_fact:
+    run_once_nginx_global_css: true
+  when: run_once_nginx_global_css is not defined
+

roles/nginx-global-css/templates/global.css.j2

@@ -0,0 +1,151 @@
+/* Global Theming Styles - Overrides Application Defaults */
+:root {
+    --primary-color: {{ global_theming.css.colors.primary }};
+    --secondary-color: {{ global_theming.css.colors.secondary }};
+    --background-color: {{ global_theming.css.colors.background }};
+    --background-dark-color: {{ global_theming.css.colors.background_dark }};
+    --text-color: {{ global_theming.css.colors.text }};
+    --accent-color: {{ global_theming.css.colors.accent }};
+    --success-color: {{ global_theming.css.colors.success }};
+    --warning-color: {{ global_theming.css.colors.warning }};
+    --error-color: {{ global_theming.css.colors.error }};
+    --info-color: {{ global_theming.css.colors.info }};
+    --link-color: {{ global_theming.css.colors.link }};
+    --button-text-color: {{ global_theming.css.colors.button_text }};
+    --shadow-color: {{ global_theming.css.colors.shadow }};
+    --border-color: {{ global_theming.css.colors.border }};
+}
+
+/* Bootstrap Overrides */
+:root {
+    --bs-primary: var(--primary-color);
+    --bs-secondary: var(--secondary-color);
+    --bs-body-bg: var(--background-color);
+    --bs-body-color: var(--text-color);
+    --bs-danger: var(--error-color);
+    --bs-warning: var(--warning-color);
+    --bs-success: var(--success-color);
+    --bs-info: var(--info-color);
+    --bs-link-color: var(--link-color);
+    --bs-btn-color: var(--button-text-color);
+}
+
+/* Ensure Styles Take Priority */
+*,
+*::before,
+*::after {
+    all: unset;
+    all: revert;
+}
+
+/* Global Defaults */
+body {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+}
+
+/* Links */
+a {
+    color: var(--link-color) !important;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+/* Buttons */
+button, .btn {
+    background-color: var(--primary-color) !important;
+    color: var(--button-text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    box-shadow: 2px 2px 5px var(--shadow-color) !important;
+    padding: 10px 15px;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+}
+button:hover, .btn:hover {
+    filter: brightness(0.9);
+}
+
+/* Success, Warning, Error States */
+.success, .alert-success {
+    background-color: var(--success-color) !important;
+    color: white !important;
+}
+.warning, .alert-warning {
+    background-color: var(--warning-color) !important;
+    color: black !important;
+}
+.error, .alert-danger {
+    background-color: var(--error-color) !important;
+    color: white !important;
+}
+.info, .alert-info {
+    background-color: var(--info-color) !important;
+    color: white !important;
+}
+
+/* Inputs & Forms */
+input, textarea, select {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 8px;
+    border-radius: 4px;
+}
+input:focus, textarea:focus, select:focus {
+    border-color: var(--primary-color) !important;
+    outline: none;
+    box-shadow: 0 0 5px var(--shadow-color);
+}
+
+/* Navigation */
+.navbar, .navbar-light, .navbar-dark {
+    background-color: var(--primary-color) !important;
+    color: var(--button-text-color) !important;
+}
+.navbar a {
+    color: var(--button-text-color) !important;
+}
+
+/* Tables */
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th, td {
+    padding: 10px;
+    border: 1px solid var(--border-color);
+}
+thead {
+    background-color: var(--primary-color);
+    color: var(--button-text-color);
+}
+
+/* Cards / Containers */
+.card {
+    background-color: var(--background-color) !important;
+    box-shadow: 2px 2px 10px var(--shadow-color) !important;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: var(--background-dark-color) !important;
+        color: var(--text-color) !important;
+    }
+    input, textarea, select {
+        background-color: var(--background-dark-color) !important;
+        color: var(--text-color) !important;
+    }
+}
+
+/* Enforce Style Priority */
+html, body, * {
+    !important;
+}

roles/nginx-global-css/templates/location.conf.j2

@@ -0,0 +1,3 @@
+location = /global.css {
+    root {{nginx.directories.global}};
+}

roles/nginx-global-css/templates/sub_filter.conf.j2

@@ -0,0 +1 @@
+sub_filter '<head>' '<head><link rel="stylesheet" type="text/css" href="/global.css?version={{global_css_version}}">';

roles/nginx-global-css/vars/main.yml

@@ -0,0 +1 @@
+global_css_destination: "{{nginx.directories.global}}global.css"

roles/nginx-global-matomo/README.md

@@ -25,11 +25,11 @@ To enable Matomo tracking on your Nginx website, include the role in your playbo
 ```yaml
 - hosts: webserver
   roles:
-    - { role: nginx-matomo-tracking, matomo_domain: 'matomo.example.com', base_domain: 'example.com', matomo_site_id: '1' }
+    - { role: nginx-global-matomo, matomo_domain: 'matomo.example.com', base_domain: 'example.com', matomo_site_id: '1' }
 ```
 
 ## Customization
-You can customize the tracking script and the noscript image tracker by editing the `matomo-tracking.js.j2` and `matomo-tracking.conf.j2` templates.
+You can customize the tracking script and the noscript image tracker by editing the `matomo-tracking.js.j2` and `matomo.subfilter.conf.j2` templates.
 
 ## Author Information
-This role was created in 2023 by Kevin Veen Birkenbach, providing a seamless way to add Matomo analytics to any website served via Nginx.
+This role was created in 2023 by [Kevin Veen Birkenbach](https://www.veen.world/), providing a seamless way to add Matomo analytics to any website served via Nginx.

roles/nginx-global-matomo/templates/matomo-tracking.conf.j2

@@ -3,5 +3,4 @@ add_header Content-Security-Policy: "";
 
 # sub filters to integrate matomo tracking code in nginx websites
 sub_filter '</head>' '<script>{{matomo_tracking_code_one_liner}}</script></head>';
-sub_filter '</body>' '<noscript><p><img src="//matomo.{{primary_domain}}/matomo.php?idsite={{matomo_site_id}}&rec=1" style="border:0;" alt="" /></p></noscript></body>';
-sub_filter_once off;
+sub_filter '</body>' '<noscript><p><img src="//matomo.{{primary_domain}}/matomo.php?idsite={{matomo_site_id}}&rec=1" style="border:0;" alt="" /></p></noscript></body>';

roles/nginx-global-www/README.md

@@ -1,7 +1,7 @@
-# README.md for nginx-www-redirect Role
+# README.md for nginx-global-www Role
 
 ## Overview
-The `nginx-www-redirect` role is designed to automate the process of setting up redirects from `www.domain.tld` to `domain.tld` for all domains and subdomains configured within the `{{nginx.directories.http.servers}}` directory. This role dynamically identifies configuration files following the pattern `*domain.tld.conf` and creates corresponding redirection rules.
+The `nginx-global-www` role is designed to automate the process of setting up redirects from `www.domain.tld` to `domain.tld` for all domains and subdomains configured within the `{{nginx.directories.http.servers}}` directory. This role dynamically identifies configuration files following the pattern `*domain.tld.conf` and creates corresponding redirection rules.
 
 ## Role Description
 This role performs several key tasks:
@@ -20,7 +20,7 @@ Example playbook:
 ```yaml
 - hosts: web-servers
   roles:
-    - nginx-www-redirect
+    - nginx-global-www
 ```
 
 ## Requirements
@@ -34,4 +34,4 @@ Example playbook:
 
 ---
 
-This `nginx-www-redirect` role was crafted with insights and guidance provided by ChatGPT, an advanced AI language model from OpenAI. The development process, including the discussions with ChatGPT that shaped this role, can be [here](https://chat.openai.com/share/a68e3574-f543-467d-aea7-0895f0e00bbb) explored in detail.
+This `nginx-global-www` role was crafted by [Kevin Veen-Birkenbach](https://www.veen.world) with insights and guidance provided by ChatGPT, an advanced AI language model from OpenAI. The development process, including the discussions with ChatGPT that shaped this role, can be [here](https://chat.openai.com/share/a68e3574-f543-467d-aea7-0895f0e00bbb) explored in detail.

roles/nginx-global/tasks/main.yml

@@ -0,0 +1,13 @@
+- name: Activate Global Matomo tracking
+  include_role:
+    name: nginx-global-matomo
+  when: global_matomo_tracking_enabled | bool and domain is defined # @toto: Do I try run without is defined checking for domain
+
+- name: Activate Global CSS
+  include_role:
+    name: nginx-global-css
+  when:
+    - global_theming_enabled | bool 
+    - run_once_nginx_global_css is not defined
+# - nginx-global-www Has to be loaded somehow different
+#  @todo implement better loading

roles/nginx-global/templates/global.includes.conf.j2

@@ -0,0 +1,15 @@
+# Allow multiple sub_filters
+sub_filter_once off;
+sub_filter_types text/html;
+
+{% if global_matomo_tracking_enabled | bool %}
+  # Include Global Matomo Tracking
+  {% include 'roles/nginx-global-matomo/templates/matomo-tracking.conf.j2' %}
+{% endif %}
+
+{% if global_theming_enabled | bool %}
+  # Include Global Theming
+  {% include 'roles/nginx-global-css/templates/sub_filter.conf.j2' %}
+  # Include Global CSS Location
+  {% include 'roles/nginx-global-css/templates/location.conf.j2' %}
+{% endif %}

roles/nginx-static-repository/templates/static.nginx.conf.j2

@@ -5,10 +5,7 @@ server
   
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
   charset utf-8;
   
   location /

roles/nginx/tasks/main.yml

@@ -9,7 +9,7 @@
     name: nginx-mod-headers-more
     state: present
   notify: restart nginx
-  when: run_once_nginx is not defined and nginx_matomo_tracking | bool
+  when: run_once_nginx is not defined and global_matomo_tracking_enabled | bool
 
 - name: "Delete {{nginx.directories.configuration}} directory, when mode_reset"
   file:
@@ -33,8 +33,8 @@
   notify: restart nginx
   when: run_once_nginx is not defined
 
-- name: "include task certbot-matomo.yml"
-  include_tasks: certbot-matomo.yml
+- name: "include task certbot-and-globals.yml"
+  include_tasks: certbot-and-globals.yml
   vars:
     domain: "{{primary_domain}}"
   when: run_once_nginx is not defined

roles/nginx/templates/nginx.conf.j2

@@ -1,4 +1,4 @@
-{% if nginx_matomo_tracking | bool %}
+{% if global_matomo_tracking_enabled | bool %}
 load_module /usr/lib/nginx/modules/ngx_http_headers_more_filter_module.so;
 {% endif %}