feat: add paragon hosting configuration for dev and local environments (FC-87)

plugins/tutor-contrib-paragon/pyproject.toml

@@ -27,7 +27,7 @@ classifiers = [
 
 ]
 dependencies = [
-    "tutor>=19.0.0,<20.0.0",
+    "tutor>=19.0.0",
 ]
 
 optional-dependencies = { dev = ["tutor[dev]>=19.0.0,<20.0.0", "pytest>=8.3.4", "pytest-order>=1.3.0"] }

plugins/tutor-contrib-paragon/tutorparagon/patches/caddyfile-lms

@@ -0,0 +1,13 @@
+{% if PARAGON_SERVE_COMPILED_THEMES %}
+# Tutor Paragon Caddyfile configuration for serving Paragon static files
+handle_path /{{ PARAGON_STATIC_URL_PREFIX }}* {
+    @mincss {
+        # Match only minified CSS files
+        path_regexp mincss \.min\.css$ 
+    }
+    handle @mincss {
+        # Proxy to the Paragon static files container
+        reverse_proxy paragon-statics:80
+    }
+}
+{% endif %}

plugins/tutor-contrib-paragon/tutorparagon/patches/local-docker-compose-services

@@ -0,0 +1,11 @@
+{% if PARAGON_SERVE_COMPILED_THEMES %}
+# Paragon Builder
+paragon-statics:
+    image: {{ PARAGON_STATIC_SERVER_IMAGE }}
+    {% if not ENABLE_HTTPS %}
+    ports:
+      - "{{ PARAGON_STATIC_SERVER_PORT }}:80"
+    {% endif %}
+    volumes:
+      - "./../../{{ PARAGON_COMPILED_THEMES_PATH }}:/usr/share/caddy:ro"
+{% endif %}

plugins/tutor-contrib-paragon/tutorparagon/patches/openedx-lms-development-settings

@@ -0,0 +1,23 @@
+{% if not PARAGON_ENABLED_THEMES %}{% set PARAGON_ENABLED_THEMES = ['light'] %}{% endif %}
+{% set PROTOCOL = 'https' if ENABLE_HTTPS else 'http' %}
+{% set BASE_URL = PROTOCOL ~ "://" ~ "localhost" ~ ":" ~ PARAGON_STATIC_SERVER_PORT ~ "/" %}
+
+MFE_CONFIG["PARAGON_THEME_URLS"] = {
+    "core": {
+        "urls": {
+            "default": "{{ BASE_URL }}core/core.min.css"
+        },
+    },
+    "defaults": {
+        {% if 'light' in PARAGON_ENABLED_THEMES %}"light": "light",{% else %}
+        "light": "{{ PARAGON_ENABLED_THEMES | first }}",{% endif %}
+        {% if 'dark' in PARAGON_ENABLED_THEMES %}"dark": "dark"{% endif %}
+    },
+    "variants": {
+       {% for theme in PARAGON_ENABLED_THEMES %}"{{ theme }}": {
+            "urls": {
+                "default": "{{ BASE_URL }}themes/{{ theme }}/{{ theme }}.min.css"
+            }
+        },{% endfor %}
+    }
+}

plugins/tutor-contrib-paragon/tutorparagon/patches/openedx-lms-production-settings

@@ -0,0 +1,23 @@
+{% if not PARAGON_ENABLED_THEMES %}{% set PARAGON_ENABLED_THEMES = ['light'] %}{% endif %}
+{% set PROTOCOL = 'https' if ENABLE_HTTPS else 'http' %}
+{% set BASE_URL = PROTOCOL ~ "://" ~ LMS_HOST ~ "/" ~ PARAGON_STATIC_URL_PREFIX %}
+
+MFE_CONFIG["PARAGON_THEME_URLS"] = {
+    "core": {
+        "urls": {
+            "default": "{{ BASE_URL }}core/core.min.css"
+        },
+    },
+    "defaults": {
+        {% if 'light' in PARAGON_ENABLED_THEMES %}"light": "light",{% else %}
+        "light": "{{ PARAGON_ENABLED_THEMES | first }}",{% endif %}
+        {% if 'dark' in PARAGON_ENABLED_THEMES %}"dark": "dark"{% endif %}
+    },
+    "variants": {
+       {% for theme in PARAGON_ENABLED_THEMES %}"{{ theme }}": {
+            "urls": {
+                "default": "{{ BASE_URL }}themes/{{ theme }}/{{ theme }}.min.css"
+            }
+        },{% endfor %}
+    }
+}

plugins/tutor-contrib-paragon/tutorparagon/plugin.py

@@ -34,6 +34,11 @@
         # Paragon Builder Docker image
         # This image is used to compile themes and should be built with `tutor images build paragon-builder`
         ("PARAGON_BUILDER_IMAGE", "paragon-builder:latest"),
+        # Paragon static server configuration
+        # This server serves the compiled themes
+        ("PARAGON_STATIC_SERVER_IMAGE", "caddy:alpine"),
+        ("PARAGON_STATIC_SERVER_PORT", 18000),
+        ("PARAGON_STATIC_URL_PREFIX", "static/paragon/"),
     ]
 )
 

plugins/tutor-contrib-paragon/tutorparagon/templates/paragon/build/paragon-builder/entrypoint.sh

@@ -41,6 +41,33 @@ parse_args() {
     printf '%s\n' "$@"
 }
 
+build_css_bundle() {
+    # This function builds a CSS bundle using PostCSS.
+    # It takes the path to the index.css file as an argument.
+    # Usage: build_css_bundle <index_css_file>
+
+    local index_css_file="$1"
+
+    local bundle_directory=$(dirname "$index_css_file")
+    local bundle_name=$(basename "$bundle_directory")
+    local minified_output_file="$bundle_directory/${bundle_name}.min.css"
+
+    if npx postcss "$index_css_file" \
+        --use postcss-import \
+        --use postcss-custom-media \
+        --use postcss-combine-duplicated-selectors \
+        --use postcss-minify \
+        --no-map \
+        --output "$minified_output_file"; then
+
+        echo "Successfully created bundle: $bundle_name"
+        return 0
+    else
+        echo "Failed to build CSS bundle: $bundle_name" >&2
+        return 1
+    fi
+}
+
 set -- $(parse_args "$@")
 
 # Executes the Paragon CLI to build themes.
@@ -50,8 +77,14 @@ npx paragon build-tokens \
     --build-dir "$TMP_BUILD_DIR" \
     "$@"
 
+find "$TMP_BUILD_DIR" -type f -name 'index.css' | while read -r index; do
+    if [ -f "$index" ]; then
+        build_css_bundle "$index"
+    fi
+done
+
 # Moves the built themes to the final volume directory.
-mkdir -p "$FINAL_BUILD_DIR"
+rm -rf "$FINAL_BUILD_DIR"/*
 cp -a "$TMP_BUILD_DIR/." "$FINAL_BUILD_DIR/"
 chmod -R a+rw "$FINAL_BUILD_DIR"