Minify CSS and JavaScript files

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

tfjm/settings.py

@@ -7,10 +7,10 @@ Django settings for tfjm project.
 Generated by 'django-admin startproject' using Django 3.0.5.
 
 For more information on this file, see
-https://docs.djangoproject.com/en/3.0/topics/settings/
+https://docs.djangoproject.com/en/5.0/topics/settings/
 
 For the full list of settings and their values, see
-https://docs.djangoproject.com/en/3.0/ref/settings/
+https://docs.djangoproject.com/en/5.0/ref/settings/
 """
 
 import os
@@ -25,7 +25,7 @@ PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.realpath(__file__)))
 ADMINS = [("Emmy D'Anello", "emmy.danello@animath.fr")]
 
 # Quick-start development settings - unsuitable for production
-# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/
+# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = os.getenv('DJANGO_SECRET_KEY', 'CHANGE_ME_IN_ENV_SETTINGS')
@@ -63,6 +63,7 @@ INSTALLED_APPS = [
     'haystack',
     'logs',
     'phonenumber_field',
+    'pipeline',
     'polymorphic',
     'rest_framework',
     'rest_framework.authtoken',
@@ -95,6 +96,8 @@ MIDDLEWARE = [
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'django.middleware.locale.LocaleMiddleware',
     'django.contrib.sites.middleware.CurrentSiteMiddleware',
+    'django.middleware.gzip.GZipMiddleware',
+    'pipeline.middleware.MinifyHTMLMiddleware',
     'tfjm.middlewares.SessionMiddleware',
     'tfjm.middlewares.FetchMiddleware',
 ]
@@ -126,7 +129,7 @@ ASGI_APPLICATION = 'tfjm.asgi.application'
 WSGI_APPLICATION = 'tfjm.wsgi.application'
 
 # Password validation
-# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
+# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators
 
 AUTH_PASSWORD_VALIDATORS = [
     {
@@ -161,7 +164,7 @@ REST_FRAMEWORK = {
 }
 
 # Internationalization
-# https://docs.djangoproject.com/en/3.0/topics/i18n/
+# https://docs.djangoproject.com/en/5.0/topics/i18n/
 
 LANGUAGE_CODE = 'en'
 
@@ -181,7 +184,7 @@ USE_TZ = True
 LOCALE_PATHS = [os.path.join(BASE_DIR, "locale")]
 
 # Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/3.0/howto/static-files/
+# https://docs.djangoproject.com/en/5.0/howto/static-files/
 
 STATIC_URL = '/static/'
 
@@ -191,6 +194,70 @@ STATICFILES_DIRS = [
 
 STATIC_ROOT = os.path.join(BASE_DIR, "static")
 
+STATICFILES_STORAGE = 'pipeline.storage.PipelineStorage'
+
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'pipeline.finders.PipelineFinder',
+)
+
+PIPELINE = {
+    'DISABLE_WRAPPER': True,
+    'JAVASCRIPT': {
+        'bootstrap': {
+            'source_filenames': {
+                'bootstrap/js/bootstrap.bundle.min.js',
+            },
+            'output_filename': 'tfjm/js/bootstrap.bundle.min.js',
+        },
+        'bootstrap_select': {
+            'source_filenames': {
+                'jquery/jquery.min.js',
+                'bootstrap-select/js/bootstrap-select.min.js',
+                'bootstrap-select/js/defaults-fr_FR.min.js',
+            },
+            'output_filename': 'tfjm/js/bootstrap-select-jquery.min.js',
+        },
+        'main': {
+            'source_filenames': (
+              'tfjm/js/main.js',
+              'tfjm/js/theme.js',
+            ),
+            'output_filename': 'tfjm/js/main.min.js',
+        },
+        'theme': {
+            'source_filenames': (
+              'tfjm/js/theme.js',
+            ),
+            'output_filename': 'tfjm/js/theme.min.js',
+        },
+        'chat': {
+            'source_filenames': (
+              'tfjm/js/chat.js',
+            ),
+            'output_filename': 'tfjm/js/chat.min.js',
+        },
+        'draw': {
+            'source_filenames': (
+              'tfjm/js/draw.js',
+            ),
+            'output_filename': 'tfjm/js/draw.min.js',
+        },
+    },
+    'STYLESHEETS': {
+        'bootstrap_fontawesome': {
+            'source_filenames': (
+                'bootstrap/css/bootstrap.min.css',
+                'fontawesome/css/all.css',
+                'fontawesome/css/v4-shims.css',
+                'bootstrap-select/css/bootstrap-select.min.css',
+            ),
+            'output_filename': 'tfjm/css/bootstrap_fontawesome.min.css',
+        }
+    },
+}
+
 MEDIA_URL = '/media/'
 
 MEDIA_ROOT = os.path.join(BASE_DIR, "media")

tfjm/templates/base.html

@@ -1,4 +1,6 @@
-{% load i18n static %}
+{% load i18n %}
+{% load pipeline %}
+{% load static %}
 
 <!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
@@ -16,19 +18,12 @@
     <meta name="theme-color" content="#ffffff">
 
     {# Bootstrap CSS #}
-    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
-    <link rel="stylesheet" href="{% static 'fontawesome/css/all.css' %}">
-    <link rel="stylesheet" href="{% static 'fontawesome/css/v4-shims.css' %}">
-
-    <link rel="stylesheet" href="{% static 'bootstrap-select/css/bootstrap-select.min.css' %}">
+    {% stylesheet 'bootstrap_fontawesome' %}
 
     {# Bootstrap JavaScript #}
-    <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
-
+    {% javascript 'bootstrap' %}
     {# bootstrap-select for beautiful selects and JQuery dependency #}
-    <script src="{% static 'jquery/jquery.min.js' %}"></script>
-    <script src="{% static 'bootstrap-select/js/bootstrap-select.min.js' %}"></script>
-    <script src="{% static 'bootstrap-select/js/defaults-fr_FR.min.js' %}"></script>
+    {% javascript 'bootstrap_select' %}
 
     {# Si un formulaire requiert des données supplémentaires (notamment JS), les données sont chargées #}
     {% if form.media %}
@@ -87,8 +82,7 @@
     {% include "base_modal.html" with modal_id="login" %}
 {% endif %}
 
-<script src="{% static 'main.js' %}"></script>
-<script src="{% static 'theme.js' %}"></script>
+{% javascript 'main' %}
 
 <script>
     CSRF_TOKEN = "{{ csrf_token }}";

tfjm/templates/navbar.html

@@ -3,7 +3,7 @@
 <nav class="navbar navbar-expand-lg fixed-navbar shadow-sm">
     <div class="container-fluid">
     <a class="navbar-brand" href="https://tfjm.org/">
-        <img src="{% static "tfjm.svg" %}" style="height: 2em;" alt="Logo TFJM²" id="navbar-logo">
+        <img src="{% static "tfjm/img/tfjm.svg" %}" style="height: 2em;" alt="Logo TFJM²" id="navbar-logo">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
             data-bs-target="#navbarNavDropdown"