Introduce static file compression

Add compressor and sass compiler dependencies
Introduce corresponding settings
Use compressor in templates
Move only partially used dependencies to higher level for better re-usability
Add custom tags to create css and js for fontawesome separately
This implements the first part of #162

AKDashboard/templates/AKDashboard/dashboard.html

@@ -4,14 +4,6 @@
 {% load i18n %}
 {% load static %}
 
-{% block imports %}
-
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% static 'AKDashboard/style.css' %}">
-
-{% endblock %}
-
 {% block breadcrumbs %}
     <li class="breadcrumb-item">AKPlanning</li>
 {% endblock %}

AKDashboard/templates/AKDashboard/dashboard_event.html

@@ -6,14 +6,6 @@
 {% load tags_AKModel %}
 {% load tz %}
 
-{% block imports %}
-
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% static 'AKDashboard/style.css' %}">
-
-{% endblock %}
-
 {% block breadcrumbs %}
     <li class="breadcrumb-item"><a href="{% url 'dashboard:dashboard' %}">AKPlanning</a></li>
     <li class="breadcrumb-item active">{{ event }}</li>

AKModel/templates/AKModel/user.html

@@ -6,14 +6,6 @@
 
 {% load tags_AKModel %}
 
-{% block imports %}
-
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% static 'AKDashboard/style.css' %}">
-
-{% endblock %}
-
 {% block breadcrumbs %}
     <li class="breadcrumb-item">
         {% if 'AKDashboard'|check_app_installed %}

AKModel/templatetags/tags_AKModel.py

 from django import template
 from django.apps import apps
 from django.conf import settings
+from django.utils.html import format_html, mark_safe, conditional_escape
+from django.templatetags.static import static
+from fontawesome_6.app_settings import get_css
 
 register = template.Library()
 
@@ -39,3 +42,19 @@ def wiki_owners_export(owners, event):
         return str(owner)
 
     return ", ".join(to_link(owner) for owner in owners.all())
+
+
+css = get_css()
+
+
+@register.simple_tag
+def fontawesome_6_css():
+    return mark_safe(conditional_escape('\n').join(format_html(
+            '<link href="{}" rel="stylesheet" media="all">', stylesheet) for stylesheet in css))
+
+
+@register.simple_tag
+def fontawesome_6_js():
+    return mark_safe(format_html(
+        '<script type="text/javascript" src="{}"></script>', static('fontawesome_6/js/django-fontawesome.js')
+    ))
\ No newline at end of file

AKPlan/templates/AKPlan/plan_wall.html

+{% load compress %}
 {% load static %}
 {% load i18n %}
 {% load django_bootstrap5 %}
@@ -14,12 +15,17 @@
     <title>{% block title %}AK Planning{% endblock %}</title>
 
     {# Load Bootstrap CSS and JavaScript as well as font awesome #}
-    {% bootstrap_css %}
-    {% bootstrap_javascript %}
-    <script src="{% static 'common/vendor/jquery/jquery-3.6.3.min.js' %}"></script>
-    {% fontawesome_6_static %}
-
-    <link rel="stylesheet" href="{% static 'common/css/custom.css' %}">
+    {% compress css %}
+        {% bootstrap_css %}
+        {% fontawesome_6_css %}
+        <link rel="stylesheet" href="{% static 'common/css/custom.css' %}">
+    {% endcompress %}
+
+    {% compress js %}
+        {% bootstrap_javascript %}
+        <script src="{% static 'common/vendor/jquery/jquery-3.6.3.min.js' %}"></script>
+        {% fontawesome_6_js %}
+    {% endcompress %}
 
     {% include "AKModel/load_fullcalendar.html" %}
 

AKPlanning/settings.py

@@ -54,9 +54,11 @@ INSTALLED_APPS = [
     'registration',
     'bootstrap_datepicker_plus',
     'django_tex',
+    'compressor',
 ]
 
 MIDDLEWARE = [
+    'django.middleware.gzip.GZipMiddleware',
     'debug_toolbar.middleware.DebugToolbarMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
@@ -162,6 +164,12 @@ STATICFILES_DIRS = (
     'static_common',
 )
 
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'compressor.finders.CompressorFinder',
+)
+
 # Settings for Bootstrap
 BOOTSTRAP5 = {
     # Use custom CSS
@@ -177,6 +185,22 @@ BOOTSTRAP5 = {
 FONTAWESOME_6_CSS_URL = STATIC_URL + "fontawesomefree/css/all.min.css"
 FONTAWESOME_6_PREFIX = "fa"
 
+# Compressor and minifier config
+COMPRESS_ENABLED = True
+COMPRESS_CSS_HASHING_METHOD = 'content'
+COMPRESS_PRECOMPILERS = (
+    ('text/x-scss', 'django_libsass.SassCompiler'),
+)
+COMPRESS_FILTERS = {
+    'css': [
+        'compressor.filters.css_default.CssAbsoluteFilter',
+        'compressor.filters.cssmin.rCSSMinFilter',
+    ],
+    'js': [
+        'compressor.filters.jsmin.JSMinFilter',
+    ]
+}
+
 # Treat wishes as seperate category in submission views?
 WISHES_AS_CATEGORY = True
 

AKSubmission/templates/AKSubmission/submission_overview.html

@@ -29,11 +29,6 @@
     </style>
 
     {% include "AKSubmission/ak_interest_script.html" %}
-
-    {% if event.active %}
-        <link href="{% static 'common/vendor/select2/select2.min.css' %}" rel="stylesheet" />
-        <script src="{% static 'common/vendor/select2/select2.min.js' %}"></script>
-    {% endif %}
 {% endblock %}
 
 {% block breadcrumbs %}

AKSubmission/templates/AKSubmission/submit_new.html

@@ -9,9 +9,6 @@
 {% block title %}{% trans "AKs" %}: {{ event.name }} - {% trans "New AK" %}{% endblock %}
 
 {% block imports %}
-    <link rel="stylesheet" href="{% static 'common/vendor/chosen-js/chosen.css' %}">
-    <link rel="stylesheet" href="{% static 'common/css/bootstrap-chosen.css' %}">
-
     {% include "AKModel/load_fullcalendar_availabilities.html" %}
 
     <script>

requirements.txt

@@ -11,5 +11,7 @@ django-debug-toolbar==3.8.1
 django-bootstrap-datepicker-plus==5.0.2
 django-tex==1.1.10
 django-csp==3.7
+django-compressor==4.1
+django-libsass==0.9
 mysqlclient==2.1.1  # for production deployment
 tzdata==2022.7

templates/base.html

+{% load compress %}
 {% load static %}
 {% load i18n %}
 {% load django_bootstrap5 %}
@@ -13,12 +14,24 @@
     <title>{% block title %}AK Planning{% endblock %}</title>
 
     <!-- Load bootstrap, jquery and fontawesome-->
-    {% bootstrap_css %}
-    {% bootstrap_javascript %}
-    <script src="{% static 'common/vendor/jquery/jquery-3.6.3.min.js' %}"></script>
-    {% fontawesome_6_static %}
-
-    <link rel="stylesheet" href="{% static 'common/css/custom.css' %}">
+    {% compress css %}
+        {% bootstrap_css %}
+        <link rel="stylesheet" href="{% static 'common/vendor/chosen-js/chosen.css' %}">
+        <link rel="stylesheet" href="{% static 'common/css/bootstrap-chosen.css' %}">
+        {% if 'AKDashboard'|check_app_installed %}
+            <link rel="stylesheet" href="{% static 'AKDashboard/style.css' %}">
+        {% endif %}
+        <link href="{% static 'common/vendor/select2/select2.min.css' %}" rel="stylesheet" />
+        {% fontawesome_6_css %}
+        <link rel="stylesheet" href="{% static 'common/css/custom.css' %}">
+    {% endcompress %}
+
+    {% compress js %}
+        {% bootstrap_javascript %}
+        <script src="{% static 'common/vendor/jquery/jquery-3.6.3.min.js' %}"></script>
+        <script src="{% static 'common/vendor/select2/select2.min.js' %}"></script>
+        {% fontawesome_6_js %}
+    {% endcompress %}
 
     <script type='text/javascript'>
         var changed_form = false;