frontend speed improvements - cuts landing page load time by 55% and DOMready time by 35%

.eslintignore

@@ -8,6 +8,7 @@ app/assets/v2/js/lib/showdown.js
 app/assets/v2/js/lib/tooltip.js
 app/assets/v2/js/lib/tweenlite.js
 app/assets/v2/js/abi.js
+app/assets/v2/js/lib/vue.js
 
 app/assets/onepager/js/confetti.js
 

app/app/settings.py

@@ -38,6 +38,7 @@
 env.read_env(str(root.path('app/.env')))  # reading .env file
 
 DEBUG = env.bool('DEBUG', default=True)
+TEMPLATE_DEBUG = env.bool('TEMPLATE_DEBUG', default=False)
 ENV = env('ENV', default='local')
 DEBUG_ENVS = env.list('DEBUG_ENVS', default=['local', 'stage', 'test'])
 IS_DEBUG_ENV = ENV in DEBUG_ENVS
@@ -113,6 +114,8 @@
     'revenue',
     'event_ethdenver2019',
     'inbox',
+    "compressor",
+    'statici18n',
 ]
 
 MIDDLEWARE = [
@@ -150,6 +153,7 @@
             'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages',
             'app.context.preprocess', 'social_django.context_processors.backends',
             'social_django.context_processors.login_redirect',
+            'django.template.context_processors.i18n',
         ],
     },
 }]
@@ -346,6 +350,13 @@
 STATICFILES_LOCATION = env.str('STATICFILES_LOCATION', default='static')
 MEDIAFILES_LOCATION = env.str('MEDIAFILES_LOCATION', default='media')
 
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    # other finders..
+    'compressor.finders.CompressorFinder',
+)
+
 if ENV in ['prod', 'stage']:
     DEFAULT_FILE_STORAGE = env('DEFAULT_FILE_STORAGE', default='app.static_storage.MediaFileStorage')
     THUMBNAIL_DEFAULT_STORAGE = DEFAULT_FILE_STORAGE
@@ -672,6 +683,13 @@
 
 STABLE_COINS = ['DAI', 'USDT', 'TUSD']
 
+from datetime import date, timedelta
+tenyrs = date.today() + timedelta(days=365*10)
+# Expires 10 years in the future at 8PM GMT
+AWS_HEADERS = {
+    'Expires': tenyrs.strftime('%a, %d %b %Y 20:00:00 GMT')
+}
+
 # Silk Profiling and Performance Monitoring
 ENABLE_SILK = env.bool('ENABLE_SILK', default=False)
 if ENABLE_SILK:

app/assets/v2/css/gitcoin.css

@@ -374,7 +374,6 @@ div.button-pink {
 }
 
 .footer__main {
-  background-image: url('/static/v2/images/footer.png');
   background-color: #0d023b;
   background-size: contain;
   background-position: bottom;

app/assets/v2/css/home.css

@@ -224,7 +224,7 @@ img.play {
   cursor: pointer;
   --padding: 40px;
   background-color: var(--gc-green-hover);
-  background-image: url('../images/home/bg-video-preview.svg');
+
   background-position: 15% -20%;
   background-size: 150% 150%;
   background-repeat: no-repeat;

app/dashboard/templates/bounty/details.html

@@ -441,8 +441,8 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
   <script src="/dynamic/js/tokens_dynamic.js"></script>
   <script src="{% static "v2/js/tokens.js" %}"></script>
   <script src="{% static "v2/js/amounts.js" %}"></script>
-  <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
   <script src="{% static "v2/js/clipboard.js" %}"></script>
   <script>
     let bootstrapTooltip = $.fn.tooltip.noConflict()

app/dashboard/templates/bounty/fulfill.html

@@ -102,8 +102,8 @@ <h1 class="text-center title">{% trans "Submit Work" %}</h1>
   </body>
 
   <!-- jQuery -->
-  <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
   <script>
     var bootstrapTooltip = $.fn.tooltip.noConflict()
     var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/bulk_payout_bounty.html

@@ -203,8 +203,8 @@ <h5>{% trans 'Payout Preview' %}</h5>
   </body>
 
   <!-- jQuery -->
-  <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
   <script>
     var bootstrapTooltip = $.fn.tooltip.noConflict()
     var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/dashboard/index.html

@@ -106,8 +106,8 @@ <h3>{% trans "No results found." %}</h3>
     {% include 'shared/footer_scripts.html' %}
     {% include 'shared/footer.html' %}
     {% include 'shared/messages.html' %}
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script>
       let bootstrapTooltip = $.fn.tooltip.noConflict()
       $.fn.runTooltip = bootstrapTooltip

app/dashboard/templates/dashboard/users.html

@@ -250,8 +250,8 @@ <h6 class="font-weight-bold mb-3">Invite User to Bounty</h6>
     {% include 'shared/footer_scripts.html' %}
     {% include 'shared/footer.html' %}
     {% include 'shared/messages.html' %}
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script>
       let bootstrapTooltip = $.fn.tooltip.noConflict()
       $.fn.runTooltip = bootstrapTooltip;

app/dashboard/templates/ftux/avatar.html

@@ -168,7 +168,7 @@ <h3 id="section-title">
 
 
 <script src="{% static "v2/js/lib/jquery.js" %}"></script>
-<script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
 <script>
   var profileId = '{{ profile_id }}';
   var options = {

app/dashboard/templates/process_bounty.html

@@ -160,8 +160,8 @@ <h3 class="font-bigger-1 mb-0">Suggested Kudos</h3>
   <script src="{% static "v2/js/lib/secrets.min.js" %}"></script>
   <script src="{% static "v2/js/ethereumjs-accounts.js" %}"></script>
   <script src="{% static "onepager/js/send.js" %}"></script>
-  <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
   <script>
     var bootstrapTooltip = $.fn.tooltip.noConflict()
     var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/profiles/profile.html

@@ -305,8 +305,8 @@ <h1 class="profile-header__handle">
     <script src="{% static "v2/js/abi.js" %}"></script>
     <script src="/dynamic/js/tokens_dynamic.js"></script>
     <script src="{% static "v2/js/tokens.js" %}"></script>
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script>
       var bootstrapTooltip = $.fn.tooltip.noConflict()
       var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/shared/nav_auth.html

@@ -30,7 +30,7 @@
           {% trans "Send Tip" %}
         </a>
         <a class="dropdown-item" href="{% url "kudos_marketplace" %}">
-          <i class="fas"><img src="{% static "v2/images/kudos/IconKudos.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/kudos/IconKudos.svg" %}"></i>
           {% trans "Send Kudos" %}
         </a>
         <a class="dropdown-item" href="{% url "new_funding" %}">
@@ -40,15 +40,15 @@
 
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="{% url "grants:profile" %}">
-          <i class="fas"><img src="{% static "v2/images/grants/icons/black.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/grants/icons/black.svg" %}"></i>
           {% trans "My Grants" %}
         </a>
         <a class="dropdown-item" href="{% url "explorer" %}?bounty_filter=createdByMe&network=mainnet&order_by=-web3_created">
-          <i class="fas"><img src="{% static "v2/images/grants/icons/black.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/grants/icons/black.svg" %}"></i>
           {% trans "My Funded Bounties" %}
         </a>
         <a class="dropdown-item" href="{% url "explorer" %}?bounty_filter=startedByMe&network=mainnet&order_by=-web3_created">
-          <i class="fas"><img src="{% static "v2/images/grants/icons/black.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/grants/icons/black.svg" %}"></i>
           {% trans "My Started Bounties" %}
         </a>
         <div class="dropdown-divider"></div>

app/grants/templates/grants/detail/index.html

@@ -78,8 +78,8 @@
   <script src="{% static "v2/js/pages/shared_bounty_mutation_estimate_gas.js" %}"></script>
   <script src="{% static "v2/js/lib/ipfs-api.js" %}"></script>
   <script src="{% static "v2/js/ipfs.js" %}"></script>
-  <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
   <script>
       var bootstrapTooltip = $.fn.tooltip.noConflict()
       $.fn.runTooltip = bootstrapTooltip;

app/grants/templates/grants/faq.html

@@ -73,4 +73,4 @@ <h5 class="accordion">Where can I see my Grant contribution history?</h5>
     </div>
   </div>
 </section>
-<script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+

app/grants/templates/grants/fund.html

@@ -323,7 +323,7 @@ <h5>Thanks for Contributing!</h5>
   <script src="{% static "v2/js/grants/fund.js" %}"></script>
   <script src="{% static "v2/js/lib/ipfs-api.js" %}"></script>
   <script src="{% static "v2/js/ipfs.js" %}"></script>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
   <script>
     let bootstrapTooltip = $.fn.tooltip.noConflict()
     let bootstrapModal = $.fn.modal.noConflict()

app/grants/templates/grants/index.html

@@ -225,8 +225,8 @@ <h1 class="font-title-lg font-weight-semibold mt-4 mb-2">{% trans "This is not t
   <script src="{% static "v2/js/lib/ipfs-api.js" %}"></script>
   <script src="{% static "v2/js/ipfs.js" %}"></script>
   <script src="{% static "v2/js/grants/index.js" %}"></script>
-  <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
   <script src="{% static "v2/js/grants/newMatchingPartner.js" %}"></script>
   <script>
     var infinite = new Waypoint.Infinite({

app/grants/templates/grants/leaderboard.html

@@ -58,7 +58,7 @@ <h5 style="display: inline;" >{{item.rank}}) <a href="/profile/{{item.handle}}">
         {% endfor  %}
       </div>
     </section>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
   </body>
   {% include 'shared/analytics.html' %}
   {% include 'shared/footer_scripts.html' %}

app/inbox/templates/inbox.html

@@ -87,8 +87,8 @@
     {% include 'shared/footer.html' %}
     {% include 'shared/analytics.html' %}
     {% include 'shared/footer_scripts.html' with slim=1 %}
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script>
       var bootstrapTooltip = $.fn.tooltip.noConflict()
     </script>

app/kudos/templates/kudos_about.html

@@ -431,8 +431,8 @@ <h5 class="accordion">I have another question and it's not listed here.</h5>
     {% include 'shared/footer.html' %}
     {% include 'shared/analytics.html' %}
     {% include 'shared/footer_scripts.html' with slim=1 %}
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script>
       $(document).ready(function() {
 

app/kudos/templates/kudos_details.html

@@ -133,8 +133,8 @@ <h3 id="kudosName" class="kudos-details__title">{{ kudos.ui_name }} {% if kudos.
     {% include 'shared/analytics.html' %}
     <script src="{% static 'v2/js/lib/tweenlite.js' %}"></script>
     {% include 'shared/footer_scripts.html' with slim=1 %}
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script src="{% static "v2/js/pages/kudos_details.js" %}"></script>
     <script src="{% static "v2/js/abi.js" %}"></script>
     <script src="{% static "v2/js/amounts.js" %}"></script>

app/kudos/templates/kudos_marketplace.html

@@ -104,8 +104,8 @@ <h1>UH-OH!</h1>
     {% include 'shared/footer.html' %}
     {% include 'shared/analytics.html' %}
     {% include 'shared/footer_scripts.html' with slim=1 %}
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script src="{% static "v2/js/lib/jquery-unveil.js" %}"></script>
     <script>
       $(document).ready(function() {

app/kudos/templates/transaction/receive_bulk.html

@@ -161,7 +161,7 @@ <h3 class="text-center" style="margin: 0px auto;">👇 Redeem It Here 👇</h3>
 <link rel="stylesheet" href="{% static "v2/css/jquery-ui.css" %}" />
 <link rel="stylesheet" href="{% static "v2/css/kudos/styles.css" %}" />
 {% include 'shared/footer_scripts.html' with slim=1 %}
-<script src="{% static "v2/js/lib/popper.min.js" %}"></script>
+
 <script src="{% static "v2/js/pages/kudos_details.js" %}"></script>
 <script>
   document.network = '{{coupon.token.contract.network}}';

app/retail/templates/bounties/contributor.html

@@ -112,8 +112,8 @@ <h2 class="join-gitcoin-heading">{% trans "<span class=\"light\">All that's left
       </div>
     </div>
     {% include 'shared/footer_scripts.html' with slim=1 %}
-    <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-    <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
+
     <script>
       var bootstrapTooltip = $.fn.tooltip.noConflict()
       var bootstrapModal = $.fn.modal.noConflict()