Enabling lazy loading on home page

.travis.yml

@@ -1,6 +1,8 @@
 language: python
 python: 3.5
-install: ./run.sh install
+install:
+  - ./run.sh install
+  - ./run.sh install_dev
 script:
   - pre-commit run --all-files
   - ./run.sh test_ludochaordic

README.md

@@ -52,7 +52,7 @@ Install
 -------
 This template uses the [representative_image](https://github.com/getpelican/pelican-plugins/tree/master/representative_image) and [image_process](https://github.com/getpelican/pelican-plugins/tree/master/image_process) plugins, so you will need to:
 
-    pip install beautifulsoup4 pillow
+    ./run.sh install && ./run.sh dev_install
 
 
 Settings

gen_statics_bundles.py

@@ -0,0 +1,56 @@
+#!/usr/bin/env python3
+import itertools, re
+from hashlib import sha1
+
+
+def cat(filepath):
+    with open(filepath, 'rb') as f:
+        return f.read()
+
+def sed(filepath, pattern, value):
+    with open(filepath, 'r+') as f:
+        data = f.read()
+        f.seek(0)
+        f.write(re.sub(pattern, value, data))
+        f.truncate()
+
+
+# Generating CSS bundle
+for DISABLE_SEARCH in range(2):
+    bundle = b''
+    bundle += cat('static/csslibs/uikit-2.27.4.min.css')
+    if not DISABLE_SEARCH:
+        bundle += cat('static/csslibs/uikit-2.27.4-search.min.css')
+        bundle += cat('static/csslibs/tipuesearch.css')
+    bundle += cat('static/csslibs/solarized-highlight.css')
+    bundle += cat('static/css/main.css')
+    short_hash = sha1(bundle).hexdigest()[:7]
+    bundle_filename = 'bundle-DISABLE_SEARCH-{}-SHORTSHA1-{}.css'.format(DISABLE_SEARCH, short_hash)
+    with open('static/' + bundle_filename, 'wb') as bundle_file:
+        bundle_file.write(bundle)
+    sed('templates/base.html', '-SHORTSHA1-[a-z0-9]+.css', '-SHORTSHA1-{}.css'.format(short_hash))
+
+# Generating JS bundle
+for DISABLE_SEARCH, SHARE, MG_FILTER_TAGS in itertools.product(range(2), repeat=3):
+    bundle = b''
+    bundle += cat('static/jslibs/html5shiv-3.7.2.min.js')
+    bundle += cat('static/jslibs/jquery-1.10.2.min.js')
+    bundle += cat('static/jslibs/uikit-2.27.4.min.js')
+    bundle += cat('static/jslibs/lazysizes-4.0.0-rc3.min.js')
+    bundle += cat('static/jslibs/lazysizes-4.0.0-rc3.noscript.min.js')
+    if not DISABLE_SEARCH:
+        bundle += cat('static/jslibs/uikit-2.27.4-search.min.js')
+        bundle += cat('static/jslibs/tipuesearch_set.js')
+        bundle += cat('static/jslibs/tipuesearch.js')
+        bundle += cat('static/js/enable-search.js')
+    if SHARE:
+        bundle += cat('static/jslibs/jquery.sticky-kit.js')
+        bundle += cat('static/js/social.js')
+    if MG_FILTER_TAGS:
+        bundle += cat('static/js/filter-tags.js')
+    short_hash = sha1(bundle).hexdigest()[:7]
+    bundle_filename = 'bundle-DISABLE_SEARCH-{}-SHARE-{}-MG_FILTER_TAGS-{}-SHORTSHA1-{}.js'.format(
+            DISABLE_SEARCH, SHARE, MG_FILTER_TAGS, short_hash)
+    with open('static/' + bundle_filename, 'wb') as bundle_file:
+        bundle_file.write(bundle)
+    sed('templates/base.html', '-SHORTSHA1-[a-z0-9]+.js', '-SHORTSHA1-{}.js'.format(short_hash))

run.sh

@@ -5,6 +5,11 @@
 set -o pipefail -o errexit -o nounset -o xtrace
 
 install () {
+    pip install pelican markdown beautifulsoup4 pillow
+    ./gen_statics_bundles.py
+}
+
+install_dev () {
     npm install -g eslint eslint-config-strict eslint-plugin-filenames
     pip install pre-commit
     pre-commit install
@@ -21,7 +26,7 @@ test_ludochaordic () {
     cd ludochaordic
 
     npm install -g csslint htmlhint
-    pip install pelican markdown beautifulsoup4 pillow html5lib html5validator
+    pip install html5lib html5validator
 
     ../pelican-mg/gen_imgs_from_mds.py content/*.md
     make DEBUG=1 OUTPUTDIR=output html

static/css/main.css

@@ -161,7 +161,9 @@ a {
   flex-wrap: wrap; }
   li:nth-child(even) .mg-article-short {
     flex-direction: row-reverse; }
-.mg-article-image {
+.mg-article-short .lazyload,
+.mg-article-short .lazyloading,
+.mg-article-short .lazyloaded {
   flex: 1 1 15rem;
   min-height: 0; /* required for flexbox shrink to work properly - Chrome 60 */
   min-width: 0; /* required for flexbox shrink to work properly - Chrome 60 */

static/jslibs/lazysizes-4.0.0-rc3.noscript.min.js

@@ -0,0 +1,2 @@
+/*! lazysizes - v4.0.0-rc3 */
+!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d={nodeName:""},e=!!a.HTMLPictureElement&&"sizes"in b.createElement("img"),f=a.lazySizes&&c.cfg||a.lazySizesConfig,g=function(a){var b,f,g,h,i,j=a.target.querySelectorAll("img, iframe");for(b=0;b<j.length;b++)f=j[b].getAttribute("srcset")||"picture"==(j[b].parentNode||d).nodeName.toLowerCase(),!e&&f&&c.uP(j[b]),j[b].complete||!f&&!j[b].src||(a.detail.firesLoad=!0,h&&i||(i=0,h=function(b){i--,b&&!(1>i)||g||(g=!0,a.detail.firesLoad=!1,c.fire(a.target,"_lazyloaded",{},!1,!0)),b&&b.target&&(b.target.removeEventListener("load",h),b.target.removeEventListener("error",h))},setTimeout(h,3500)),i++,j[b].addEventListener("load",h),j[b].addEventListener("error",h))};f||(f={},a.lazySizesConfig=f),f.getNoscriptContent=function(a){return a.textContent||a.innerText},a.addEventListener("lazybeforeunveil",function(a){if(a.detail.instance==c&&!a.defaultPrevented&&null!=a.target.getAttribute("data-noscript")){var b=a.target.querySelector('noscript, script[type*="html"]')||{},d=f.getNoscriptContent(b);d&&(a.target.innerHTML=d,g(a))}})});

templates/base.html

@@ -52,13 +52,7 @@
     {% endif %}
     {% endblock %}
 
-    <link href='{{ SITEURL }}/theme/css/uikit-2.27.4.min.css' rel='stylesheet' type='text/css'>
-    {% if not DISABLE_SEARCH %}
-    <link href='{{ SITEURL }}/theme/css/uikit-2.27.4-search.min.css' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/tipuesearch.css">
-    {% endif %}
-    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized-highlight.css">
-    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/main.css">
+    <link rel="stylesheet" type="text/css" href="{{SITEURL}}/theme/bundle-DISABLE_SEARCH-{{DISABLE_SEARCH|string|first|length|string|first}}-SHORTSHA1-cf29250.css">
 </head>
 <body>
 <!--[if lt IE 7]>
@@ -265,31 +259,7 @@
     </div>
 </aside>
 
-<script src="{{ SITEURL }}/theme/js/html5shiv-3.7.2.min.js"></script>
-<script src="{{ SITEURL }}/theme/js/jquery-1.10.2.min.js"></script>
-<script src="{{ SITEURL }}/theme/js/uikit-2.27.4.min.js"></script>
-
-{% if not DISABLE_SEARCH %}
-<script src="{{ SITEURL }}/theme/js/uikit-2.27.4-search.min.js"></script>
-<script src="{{ SITEURL }}/theme/js/tipuesearch_set.js"></script>
-<script src="{{ SITEURL }}/theme/js/tipuesearch.js"></script>
-<script>
-{% include 'js/enable-search.js' %}
-</script>
-{% endif %}
-
-{% if SHARE %}
-<script src="{{ SITEURL }}/theme/js/jquery.sticky-kit.js"></script>
-<script>
-{% include 'js/social.js' %}
-</script>
-{% endif %}
-
-{% if MG_FILTER_TAGS %}
-<script>
-{% include 'js/filter-tags.js' %}
-</script>
-{% endif %}
+<script src="{{SITEURL}}/theme/bundle-DISABLE_SEARCH-{{DISABLE_SEARCH|string|first|length|string|first}}-SHARE-{{SHARE|string|first|length|string|first}}-MG_FILTER_TAGS-{{MG_FILTER_TAGS|string|first|length|string|first}}-SHORTSHA1-e15c693.js"></script>
 
 {% include 'disqus_count.html' %}
 {% include 'analytics.html' %}

templates/partials/article-short.html

@@ -2,7 +2,7 @@
          data-tags='{{ article.tags|map(attribute="name")|list|tojson }}'>
     <div class="mg-article-short">
         {% if article.featured_image %}
-        <img class="mg-article-image image-process-thumb" src="{{ article.featured_image }}" alt="">
+        <div class="lazyload" data-noscript=""><noscript><img src="{{ article.featured_image }}" alt=""></noscript></div>
         {% endif %}
         <div class="mg-article-content">
             <a href="{{ SITEURL }}/{{ article.url }}" class="uk-link-muted"><h2 class="uk-article-title" itemprop="name">{{ article.title|e }}</h2></a>
@@ -18,4 +18,4 @@
         </div>
     </div>
     <hr class="uk-article-divider">
-</article>
+</article>