introduce django compressor

hub/services/management/commands/build_assets.py

@@ -0,0 +1,32 @@
+from django.core.management.base import BaseCommand
+from django.core.management import call_command
+
+
+class Command(BaseCommand):
+    help = "Build and compress static assets for production"
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            "--force",
+            action="store_true",
+            help="Force compression even if files exist",
+        )
+
+    def handle(self, *args, **options):
+        self.stdout.write("Building static assets...")
+
+        # Compress CSS and JS files
+        self.stdout.write("Compressing CSS and JavaScript...")
+        call_command(
+            "compress",
+            force=options.get("force", False),
+            verbosity=options.get("verbosity", 1),
+        )
+
+        # Collect all static files
+        self.stdout.write("Collecting static files...")
+        call_command(
+            "collectstatic", interactive=False, verbosity=options.get("verbosity", 1)
+        )
+
+        self.stdout.write(self.style.SUCCESS("Successfully built static assets"))

hub/services/templates/services/offering_detail.html

@@ -1,12 +1,36 @@
 {% extends 'base.html' %}
 {% load static %}
+{% load compress %}
 {% load contact_tags %}
 {% load json_ld_tags %}
 
 {% block title %}Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}{% endblock %}
 
 {% block extra_js %}
-<script defer src="{% static "js/price-calculator.js" %}"></script>
+{% if debug %}
+<!-- Development: Load individual modules for easier debugging -->
+<script defer src="{% static 'js/price-calculator.js' %}"></script>
+{% else %}
+<!-- Production: Load compressed bundle -->
+{% compress js %}
+<script src="{% static 'js/price-calculator/dom-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/pricing-data-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/plan-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/addon-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/ui-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/order-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/price-calculator.js' %}"></script>
+<script>
+// Initialize calculator when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if we're on a page that needs the price calculator
+    if (document.getElementById('cpuRange')) {
+        window.priceCalculator = new PriceCalculator();
+    }
+});
+</script>
+{% endcompress %}
+{% endif %}
 <link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
 
 {% json_ld_structured_data %}