From ad391927505dd367381f4ae8ccf1c6aa5d29e287 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Fri, 9 Nov 2018 11:12:49 -0500
Subject: [PATCH] delayed css for pages that are not in a rush

---
 peterbecom/base/jinja2/base.html        |  4 +++-
 peterbecom/base/static/css/peterbe.css  |  6 ++++--
 peterbecom/base/static/js/delayedcss.js | 15 +++++++++++++++
 peterbecom/mincss_response.py           | 17 +++++++++++------
 peterbecom/plog/jinja2/plog/post.html   |  1 -
 peterbecom/settings/bundles.py          |  5 +++++
 6 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 peterbecom/base/static/js/delayedcss.js

diff --git a/peterbecom/base/jinja2/base.html b/peterbecom/base/jinja2/base.html
index e77e970b7..00f612084 100644
--- a/peterbecom/base/jinja2/base.html
+++ b/peterbecom/base/jinja2/base.html
@@ -148,10 +148,12 @@ <h1 class="ui header">{% block page_title %}{{ page_title }}{% endblock %}</h1>
   {% block basejs %}
   {%- if request.path == '/plog/blogitem-040601-1' %}
   {% javascript 'lyrics' %}
+  {% javascript 'delayedcss' %}
   {% else %}
   {% javascript 'base' %}
-  {% endif -%}
   {% javascript 'cssrelpreload' %}
+  {% endif -%}
+
   {% endblock %}
 
   {% block extrajs %}{% endblock %}
diff --git a/peterbecom/base/static/css/peterbe.css b/peterbecom/base/static/css/peterbe.css
index a44519457..95704df60 100644
--- a/peterbecom/base/static/css/peterbe.css
+++ b/peterbecom/base/static/css/peterbe.css
@@ -1,3 +1,5 @@
+/*! peterbe.css */
+
 body {
   color: #333;
   background-color: #ffffff;
@@ -227,9 +229,9 @@ span.not-approved {
   color: rgba(0, 0, 0, 0.4);
   font-size: 0.875em;
 }
-.ui.comments .comment .metadata a {
+.ui.comments .comment a.metadata {
   color: rgba(0, 0, 0, 0.4);
 }
-.ui.comments .comment .metadata a:hover {
+.ui.comments .comment a.metadata:hover {
   color: rgba(0, 0, 0, 0.8);
 }
diff --git a/peterbecom/base/static/js/delayedcss.js b/peterbecom/base/static/js/delayedcss.js
new file mode 100644
index 000000000..42e06df53
--- /dev/null
+++ b/peterbecom/base/static/js/delayedcss.js
@@ -0,0 +1,15 @@
+(function() {
+  'use strict';
+
+  window.setTimeout(function() {
+    var links = document.getElementsByTagName('link');
+    var len = links.length;
+    for (var i = 0; i < len; i++) {
+      var link = links[i];
+      if (link.rel === 'preload' && link.getAttribute('media') === 'delayed') {
+        link.setAttribute('media', 'all');
+        link.rel = 'stylesheet';
+      }
+    }
+  }, 1000);
+})();
diff --git a/peterbecom/mincss_response.py b/peterbecom/mincss_response.py
index 096f8f061..42f57957a 100644
--- a/peterbecom/mincss_response.py
+++ b/peterbecom/mincss_response.py
@@ -122,12 +122,17 @@ def mincss_html(html, abs_uri):
 
     found_link_hrefs = list(result["stylesheetContents"].keys())
 
-    # print("ABS_URI:", abs_uri)
-    template = (
-        '<link rel="preload" href="{url}" as="style" '
-        "onload=\"this.onload=null;this.rel='stylesheet'\">\n"
-        '<noscript><link rel="stylesheet" href="{url}"></noscript>'
-    )
+    if abs_uri.endswith("/plog/blogitem-040601-1"):
+        template = (
+            '<link rel="preload" href="{url}" as="style" media="delayed">\n'
+            '<noscript><link rel="stylesheet" href="{url}"></noscript>'
+        )
+    else:
+        template = (
+            '<link rel="preload" href="{url}" as="style" '
+            "onload=\"this.onload=null;this.rel='stylesheet'\">\n"
+            '<noscript><link rel="stylesheet" href="{url}"></noscript>'
+        )
 
     def equal_uris(uri1, uri2):
         # If any one of them is relative, compare their paths
diff --git a/peterbecom/plog/jinja2/plog/post.html b/peterbecom/plog/jinja2/plog/post.html
index fab58949d..106214e2c 100644
--- a/peterbecom/plog/jinja2/plog/post.html
+++ b/peterbecom/plog/jinja2/plog/post.html
@@ -88,7 +88,6 @@ <h4><a href="{{ post.url }}">{{ post.url }}</a></h4>
 
 {% block content %}
 
-<!-- request.path="{{request.path}}" -->
 {% if request.path != '/plog/blogitem-040601-1' %}
 <div class="bsa-cpc"></div>
 {% endif %}
diff --git a/peterbecom/settings/bundles.py b/peterbecom/settings/bundles.py
index bbfe0051c..f56c77e20 100644
--- a/peterbecom/settings/bundles.py
+++ b/peterbecom/settings/bundles.py
@@ -97,6 +97,11 @@
         "output_filename": "js/cssrelpreload.min.js",
         "extra_context": {"async": True},
     },
+    "delayedcss": {
+        "source_filenames": ("js/delayedcss.js",),
+        "output_filename": "js/delayedcss.min.js",
+        "extra_context": {"defer": True},
+    },
     # 'warmup_songsearch': {
     #     'source_filenames': (
     #         'plog/js/warmup-songsearch.js',