Enabling lazy loading on home page

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/js/enable-search.js

@@ -0,0 +1,10 @@
+$(document).ready(() => {
+  $('.tipue_search').tipuesearch({
+    show: 10,
+    mode: 'json',
+    showURL: false,
+    descriptiveWords: 75,
+    highlightEveryTerm: true,
+    contentLocation: './tipue_search.json',
+  });
+});

static/js/filter-tags.js

@@ -0,0 +1,76 @@
+/*
+ * Filters state can be one of:
+ * - undefined => disabled
+ * - true => select ONLY articles with this tag
+ * - false => do NOT select articles with this tag
+ * */
+(function iife() {
+  'strict';
+
+  window.tagFilters = {};
+
+  function includes(anArray, value) {
+    return anArray.indexOf(value) >= 0;
+  }
+
+  function updateArticlesVisibility() {
+    const includeFilters = Object.keys(window.tagFilters).filter((tagFilter) => window.tagFilters[tagFilter] === true);
+    const excludeFilters = Object.keys(window.tagFilters).filter((tagFilter) => window.tagFilters[tagFilter] === false);
+    Array.prototype.slice.call(document.getElementsByTagName('article')).forEach((article) => {
+      // article-excerpt: we ignore it
+      if (!article.dataset.tags) {
+        return;
+      }
+      const articleTags = JSON.parse(article.dataset.tags);
+      const allIncludeTags = includeFilters.every((tag) => includes(articleTags, tag));
+      const anyExcludeTag = excludeFilters.some((tag) => includes(articleTags, tag));
+
+      // Now implementing the core logic
+      let shouldDisplay = !anyExcludeTag;
+      if (shouldDisplay && includeFilters.length > 0) {
+        shouldDisplay = allIncludeTags;
+      }
+
+      if (shouldDisplay) {
+        article.classList.remove('mg-faded');
+      } else {
+        article.classList.add('mg-faded');
+      }
+    });
+  }
+
+  window.toggleTagFilter = function toggleTagFilter(tag) {
+    let filterState = window.tagFilters[tag];
+    if (filterState === true) {
+      this.classList.remove('mg-tag-filter-include');
+      filterState = false;
+      this.classList.add('mg-tag-filter-exclude');
+      this.title = 'Tag filter (exclude matching articles)';
+    } else if (filterState === false) {
+      this.classList.remove('mg-tag-filter-exclude');
+      filterState = undefined;
+      this.title = 'Tag filter (disabled)';
+    } else {
+      filterState = true;
+      this.classList.add('mg-tag-filter-include');
+      this.title = 'Tag filter (include matching articles)';
+    }
+    window.tagFilters[tag] = filterState;
+    updateArticlesVisibility();
+  };
+
+  window.toggleLangTagFilter = function toggleLangTagFilter(langs) {
+    let lang = this.textContent;
+    window.tagFilters[`lang:${ lang }`] = undefined;
+    lang = langs[langs.indexOf(lang) + 1];
+    if (typeof lang === 'undefined') {
+      lang = 'lang';
+      this.title = 'Language filter (disabled)';
+    } else {
+      window.tagFilters[`lang:${ lang }`] = true;
+      this.title = `Language filter (include only "${ lang }" articles)`;
+    }
+    this.textContent = lang;
+    updateArticlesVisibility();
+  };
+}());

static/js/social.js

@@ -0,0 +1,4 @@
+$(document).ready(() => {
+  $('.mg-container-social').height($('article').height());
+  $('#mg-panel-social').stick_in_parent({ 'offset_top': 35 });
+});

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))}})});