From e7d34efeae489bc26d0d45f5a4406adb2ea75db8 Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Tue, 9 Apr 2019 12:42:19 -0400
Subject: [PATCH] Reduce scope of Swiper include

Currently the Swiper library is referenced in the base template which
means that its CSS and JS get included and loaded on every page.
However, the Swiper functionality is only used on the landing page. This
leads to redundant requests to load the CSS and JS and may even lead to
hard to debug potential issues with clashing JS or CSS.

This change moves the Swiper JS and CSS to only be included on the
landing page.
---
 app/server/templates/base.html  | 16 ----------------
 app/server/templates/index.html | 23 +++++++++++++++++++++++
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/server/templates/base.html b/app/server/templates/base.html
index 42e16cf4..3e70ccac 100644
--- a/app/server/templates/base.html
+++ b/app/server/templates/base.html
@@ -16,7 +16,6 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.1/bulma-divider/dist/css/bulma-divider.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.1/bulma-checkradio/dist/css/bulma-checkradio.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="{% static 'css/forum.css' %}">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
   <!-- favicon settings -->
   <link rel="apple-touch-icon" sizes="57x57" href="{% static 'images/favicons/apple-icon-57x57.png' %}">
   <link rel="apple-touch-icon" sizes="60x60" href="{% static 'images/favicons/apple-icon-60x60.png' %}">
@@ -94,20 +93,5 @@
   {% block content %}{% endblock %}
   
   {% block footer %}{% endblock %}
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
-  <script>
-    var mySwiper = new Swiper('.swiper-container', {
-      // Optional parameters
-      loop: true,
-      autoplay: {
-        delay: 5000,
-      },
-      // Navigation arrows
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
-    })
-  </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/app/server/templates/index.html b/app/server/templates/index.html
index d7ea0707..4e2a342a 100644
--- a/app/server/templates/index.html
+++ b/app/server/templates/index.html
@@ -1,5 +1,10 @@
 {% extends "base.html" %}
 {% load static %}
+
+{% block header %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
+{% endblock %}
+
 {% block content %}
 <section class="hero" style="background-color:#2a2e2f">
   <div class="container">
@@ -207,4 +212,22 @@
     </div>
   </div>
 </footer>
+{% endblock %}
+
+{% block footer %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
+<script>
+  new Swiper('.swiper-container', {
+    // Optional parameters
+    loop: true,
+    autoplay: {
+      delay: 5000,
+    },
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  })
+</script>
 {% endblock %}
\ No newline at end of file