change jinja for pages

Examples:

- ?lang=en
- ?tags=jeux,prog
- ?tags=jeux&tags=prog

.gitignore

@@ -1,2 +1,4 @@
-*.swp
-.sass-cache
+/node_modules
+*~~
+venv
+.vscode

Makefile

@@ -1,13 +0,0 @@
-SCSSDIR ?= scss
-CSSDIR = static/css
-
-sass:
-	@for i in $$(ls $(SCSSDIR)); do \
-	    out="$(CSSDIR)/$${i%.*}.css"; \
-	    sass "$(SCSSDIR)/$$i" "$$out"; \
-	    sed -i '$$d' "$$out"; \
-	    rm "$$out.map"; \
-	 done
-	@echo 'SCSS files compiled'
-
-

README.md

@@ -1,12 +1,15 @@
-mg
-==============
+pelican-mg
+==========
+
+[![Build Status](https://travis-ci.org/Lucas-C/pelican-mg.svg?branch=master)](https://travis-ci.org/Lucas-C/pelican-mg)
 
 A minimal theme for [Pelican](http://blog.getpelican.com/) that uses uikit.
-The theme is suited for a single author blog without tag pages nor
-blogroll. Feeds are provided via ATOM.
+The theme is suited for a single author blog. Feeds are provided via ATOM.
+
+This theme was developped with accessibility in mind, but may not be perfectly WCAG-compliant.
 
 
-Screenshots 
+Screenshots
 --------------
 
 Here is how the home page look like
@@ -17,7 +20,7 @@ This is the article page
 
 ![mg article page screenshot](https://raw.githubusercontent.com/lucachr/pelican-mg/master/article-screenshot.png)
 
-The home page on a smartphone 
+The home page on a smartphone
 
 ![mg home page smartphone top screenshot](https://github.com/lucachr/pelican-mg/blob/master/home-page-smartphone-top.png)
 ![mg home page smartphone bottom screenshot](https://github.com/lucachr/pelican-mg/blob/master/home-page-smartphone-bottom.png)
@@ -28,7 +31,7 @@ This is the article layout on a smartphone screen
 
 Live Example
 --------------
-Check out [my blog](http://www.devsbytes.com).
+Check out [my blog](https://chezsoi.org/lucas).
 
 Features
 --------------
@@ -36,66 +39,88 @@ Features
 * [Open Graph](http://ogp.me) support.
 * [Twitter Summary Card](https://dev.twitter.com/cards/types/summary) support.
 * [Schema.org](http://schema.org) support.
-* Search with [Tipue Search](http://www.tipue.com/search).
+* Search with [DuckDuckGo](https://duckduckgo.com/search_box).
 * Responsive design.
-* Comment with DISQUS.
+* Comment with DISQUS or inno
 * SCSS style sheets.
 * Analytics with Google Analytics, PIWIK and StatCounter.
 * Share buttons built with share urls.
 * Custom footer notice.
+* W3C-Validated HTML
+* Home page images lazy-loading
+
+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:
+
+    ./run.sh install && ./run.sh dev_install
+
 
 Settings
 --------------
 
 The following settings are required for a correct behaviour of this theme.
 
+If you want to use the theme with search enabled (and probably you want it).
+
 ```python
     TAG_SAVE_AS = ''
     AUTHOR_SAVE_AS = ''
-    DIRECT_TEMPLATES = ('index', 'categories', 'archives', 'search', 'tipue_search')
-    TIPUE_SEARCH_SAVE_AS = 'tipue_search.json'
+    DIRECT_TEMPLATES = ('index', 'categories', 'archives', 'past_readings')
 ```
 
-###Optional settings
+If you want to use mg with search disabled.
 
-**ALT_NAME**  
+```python
+    TAG_SAVE_AS = ''
+    AUTHOR_SAVE_AS = ''
+    DIRECT_TEMPLATES = ('index', 'categories', 'archives')
+    DISABLE_SEARCH = True
+```
+
+### Optional settings
+
+**ALT_NAME**
 An alternative name for your site. It appears in the header bar.
 
-**DESCRIPTION**  
+**DESCRIPTION**
 A brief description of your site, for social networks and search engines.
 
-**FAVICON**  
+**DISABLE_SEARCH**
+Disable search, boolean.
+
+**FAVICON**
 The relative path of your favicon, this is needed for Disqus forum favicon.
 
-**FAVICON_TYPE**  
+**FAVICON_TYPE**
 The MIME type of your favicon, this is needed for Disqus forum favicon.
 
-**FOOTER**  
+**FOOTER**
 A custom footer notice.
 
-**META_IMAGE**  
-The absolute URL of a custom image for the `og:image` meta property, Twitter 
-summary card, and `image` meta property of Schema.org. This image is used in 
-every page of the blog. Articles and pages can override the default 
-**META_IMAGE** by setting the "image" metadata in the relative file.  
+**META_IMAGE**
+The absolute URL of a custom image for the `og:image` meta property, Twitter
+summary card, and `image` meta property of Schema.org. This image is used in
+every page of the blog. Articles and pages can override the default
+**META_IMAGE** by setting the "image" metadata in the relative file.
 
-**META_IMAGE_TYPE**  
+**META_IMAGE_TYPE**
 The MIME type for **META_IMAGE**, this is needed for `og:image:type`.
 
-**SC_PROJECT**   
-The StatCounter project number.  
+**SC_PROJECT**
+The StatCounter project number.
 
-**SC_SECURITY**   
+**SC_SECURITY**
 The StatCounter security code for the project.
 
-**SHARE**  
+**SHARE**
 Enable share buttons, boolean.
 
-**SOCIAL**  
-A list of tutples (icon, URL). The icons are from [Font Awesome]
-(http://fortawesome.github.io/Font-Awesome/). The suffix "-square" is removed 
-in the footer icons of the small screen layout.   
-e.g.   
+**SOCIAL**
+A list of tuples (icon, URL). The icons are from [Font Awesome]
+(http://fortawesome.github.io/Font-Awesome/). The suffix "-square" is removed
+in the footer icons of the small screen layout.
+e.g.
 ```python
     SOCIAL = (('twitter', 'https://twitter.com/luca_chr'),
               ('google-plus-square', 'https://plus.google.com/117284397605208270870'),
@@ -103,6 +128,27 @@ e.g.
               ('envelope', 'mailto:luca92web@gmail.com'),)
 ```
 
+**SUPPORTS**
+An optional list of tuples (img_alt, url, logo_url, title)
+
+**READINGS**
+An optional list of `dict`, with `img_url` & `description` fields, of books you read, from most recent to oldest.
+
+**ISSO_BASE_URL**
+An optional URL to an [isso](https://posativ.org/isso/) endpoint (serving `/js/embed.dev.js`).
+
+**MG_DISABLE_SUMMARY**
+If you do not manually provide a summary on your articles, set this to `True` so that that the articles summary is not included on the index / search result pages.
+
+**MG_NO_EXCERPT**
+Set this to `True`, if you do not want to display the last article in full on the index page.
+
+**MG_FILTER_TAGS** and **MG_LANG_FILTER_TAGS**
+Define those variables as list of tag names if you want to enable the tag filtering buttons.
+
+**EXTRA_ATOM_FEED**
+An extra URL providing an Atom feed of updates that you want inserted along the blog Atom feed.
+
 Example Configuration
 ----------------------
 
@@ -152,8 +198,8 @@ This is the settings file for Dev's Bytes.
 
     TAG_SAVE_AS = ''
     AUTHOR_SAVE_AS = ''
-    DIRECT_TEMPLATES = ('index', 'categories', 'archives', 'search', 'tipue_search')
-    TIPUE_SEARCH_SAVE_AS = 'tipue_search.json'
+    PLUGINS = ['representative_image']
+    DIRECT_TEMPLATES = ('index', 'categories', 'archives')
 
     RELATIVE_URLS = False
 
@@ -162,9 +208,9 @@ This is the settings file for Dev's Bytes.
     DELETE_OUTPUT_DIRECTORY = True
 
     TWITTER_USERNAME = 'luca_chr'
-    DISQUS_SITENAME = "devsbytes"
-    SC_PROJECT = '10224955'
-    SC_SECURITY = '1f2cc438'
+    # DISQUS_SITENAME = "devsbytes"
+    # SC_PROJECT = '10224955'
+    # SC_SECURITY = '1f2cc438'
 
 ```
 

gen_statics_bundles.py

@@ -0,0 +1,51 @@
+#!/usr/bin/env python3
+import itertools, os, re, sys
+from hashlib import sha1
+
+# This is pretty bad... please rewrite me
+
+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()
+
+
+print('Generating CSS bundle')
+short_hash = sha1(cat('static/main.css') + cat('static/csslibs/uikit-3.1.5.min.css')).hexdigest()[:7]
+sed('templates/base.html', '-SHORTSHA1-[a-z0-9]+.css', '-SHORTSHA1-{}.css'.format(short_hash))
+css_bundle_filepath = 'static/bundle-SHORTSHA1-{}.css'.format(short_hash)
+files_created = not os.path.exists(css_bundle_filepath)
+with open(css_bundle_filepath, 'wb') as bundle:
+    bundle.write(cat('static/csslibs/uikit-3.1.5.min.css'))
+    bundle.write(cat('static/csslibs/solarized-highlight.css'))
+    bundle.write(cat('static/csslibs/tipuesearch.css'))
+    bundle.write(cat('static/main.css'))
+
+print('Generating JS bundle')
+short_hash = sha1(cat('static/jslibs/uikit-3.1.5.min.js') + cat('static/jslibs/jquery-3.4.1.min.js')).hexdigest()[:7]
+sed('templates/base.html', '-SHORTSHA1-[a-z0-9]+.js', '-SHORTSHA1-{}.js'.format(short_hash))
+for SHARE, MG_FILTER_TAGS in itertools.product(range(2), repeat=2):
+    js_bundle_filepath = 'static/bundle-SHARE-{}-MG_FILTER_TAGS-{}-SHORTSHA1-{}.js'.format(
+            SHARE, MG_FILTER_TAGS, short_hash)
+    files_created |= not os.path.exists(js_bundle_filepath)
+    with open(js_bundle_filepath, 'wb') as bundle:
+        bundle.write(cat('static/jslibs/html5shiv-3.7.3.min.js'))
+        bundle.write(cat('static/jslibs/jquery-3.4.1.min.js'))
+        bundle.write(cat('static/jslibs/uikit-3.1.5.min.js'))
+        bundle.write(cat('static/jslibs/uikit-icons-3.1.5.min.js'))
+        bundle.write(cat('static/jslibs/lazysizes-5.0.0.min.js'))
+        if SHARE:
+            bundle.write(cat('static/jslibs/jquery.sticky-kit-1.1.2.min.js'))
+            bundle.write(cat('static/js/social.js'))
+        if MG_FILTER_TAGS:
+            bundle.write(cat('static/js/filter-tags.js'))
+
+if files_created:
+    print('New bundle files were created', file=sys.stderr)
+    sys.exit(1)

run.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# USAGE: ./run.sh ( install )
+
+set -o pipefail -o errexit -o nounset -o xtrace
+
+install () {
+    pip install beautifulsoup4 markdown pelican pillow
+    ./gen_statics_bundles.py || true
+}
+
+eval "$1"

scss/main.scss

@@ -1,246 +0,0 @@
-$baseGreen: #39B39D;
-$accentGreen: #28D1B2;
-$feedOrange: #FF6600;
-$twitterBlue: #00B0ED;
-$facebookBlue: #3B5999;
-$googleRed: #D34836;
-$githubBlack: #333;
-$mailBlue: #059;
-$textGrey: #444;
-$ancorBase: #33b5e5;
-$ancorOver: #0099cc;
-
-// Base style
-
-html {
-    font: 400 14px / 20px "Oswald", "Helvetica Neue",Helvetica,Arial,sans-serif;
-}
-
-a {
-    color: $ancorBase;
-    &:hover {
-        color: $ancorOver;
-    }
-}
-
-// uikit override
-
-.uk-navbar-brand {
-    text-transform: uppercase;
-}
-
-.uk-article-meta {
-    & > a {
-    color: $textGrey;
-
-        &:hover {
-            color: $textGrey;
-        }
-    }
-
-    & > .uk-icon-comment {
-        color: $textGrey;
-    }
-}
-
-.uk-icon-twitter {
-    color: $twitterBlue;
-}
-
-.uk-icon-facebook, .uk-icon-facebook-square {
-    color: $facebookBlue;
-}
-
-.uk-icon-google-plus, .uk-icon-google-plus-square {
-    color: $googleRed;
-}
-
-.uk-icon-github {
-    color: $githubBlack;
-}
-
-.uk-icon-envelope {
-    color: $textGrey;
-}
-
-.uk-nav-side > li.uk-active > a {
-    background: $accentGreen;
-}
-
-.uk-pagination>.uk-active>span {
-    background: $accentGreen;   
-}
-
-.uk-icon-medium {
-    margin-right: 0.3em;
-}
-
-.uk-navbar-toggle {
-    color: white;
-
-    &:hover, &:focus {
-        color: white;
-    }
-}
-
-.uk-nav-offcanvas {
-    & > li > a {
-        border-top: 1px solid rgba(0,0,0,.3);
-        box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
-        text-shadow: 0 1px 0 rgba(0,0,0,.5);
-
-        &:last-child {
-            border-bottom: 1px solid rgba(0,0,0,.3);
-        }
-    }
- 
-    & .uk-nav-divider {
-        border-top: 1px solid rgba(255,255,255,.01);
-        margin: 0;
-        height: 4px;
-        background: rgba(0,0,0,.2);
-        box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
-    }
-}
-
-
-.uk-nav-offcanvas .uk-nav-header {
-    margin-top: 0;
-    background: #404040;
-    border-top: 1px solid rgba(0,0,0,.3);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
-    text-shadow: 0 1px 0 rgba(0,0,0,.5);
-}
-
-// mg style
-
-.mg-header {
-    padding: 1em 0;
-    // Green style
-    background-color: $baseGreen;
-}
-
-.mg-brand {
-    font: {
-        family: "Open Sans", sans-serif;
-        style: italic;
-        size: 2.5em;
-    }
-
-    // Green style
-    color: white;
-    text-decoration: none;
-
-    &:hover {
-        color: white;
-    }
-    
-    @media (max-width: 767px) {
-        padding: 0;
-        max-width: 100%;
-        font-size: 2em;
-    }
-
-}
-
-.mg-tagline {
-    font: {
-        family: "Open Sans", sans-serif;
-        weight: 800;
-    }
-    padding: 1em 0 0;
-    color: white;
-
-    @media (min-width: 1220px) {
-        padding-left: 0 !important;
-    }
-
-}
-
-.mg-main {
-    margin: {
-        top: 4em;
-        bottom: 3em;
-    }
-    min-height: 100%;
-}
-
-.mg-feed {
-    color: $feedOrange;
-    &:hover {
-        text-decoration: none;
-        color: $feedOrange;
-    }
-}
-
-.mg-list-title {
-    font-size: 2em;
-    line-height: 42px;
-    font-weight: 400;
-    text-transform: none;
-    margin-top: 0.5em;
-}
-
-.mg-footer {
-    margin-bottom: 1em;
-}
-
-.mg-author {
-    margin-top: 1em;
-}
-
-.mg-icon-link:hover {
-    text-decoration: none;
-}
-
-.mg-icons-small {
-    margin-bottom: 1em;
-}
-
-.mg-icons-small {
-    &>li>a {
-        color: white;
-
-        &:hover {
-            color: white;
-        }
-    }
-
-    .uk-icon-rss {
-        background-color: $feedOrange;
-    }
-
-    .uk-icon-twitter {
-        background-color: $twitterBlue;
-    }
-
-    .uk-icon-facebook {
-        background-color: $facebookBlue;
-    }
-
-    .uk-icon-google-plus {
-        background-color: $googleRed;
-    }
-
-    .uk-icon-github {
-        background-color: $githubBlack;
-    }
-
-    .uk-icon-envelope {
-        background-color: $mailBlue;
-    }
-}
-
-.mg-badges li {
-    float: left;
-    position: relative;
-}
-
-// Browser Upgrade
-
-.browserupgrade {
-    margin: 0.2em 0;
-    background: #ccc;
-    color: #000;
-    padding: 0.2em 0;
-}

scss/tipuesearch.scss

@@ -1,127 +0,0 @@
-/*!
- * Tipue Search 4.0
- * Copyright (c) 2014 Tipue
- * Tipue Search is released under the MIT License
- * http://www.tipue.com/search
- *
- * This is a modified version of the Tipue Search plugin style sheet,
- * edited for the pelican mg theme.
- * If you are looking for the original Tipue Search plugin style sheet 
- * check the project home at http://www.tipue.com/search.
- */
-
-$baseText: #444;
-
-@mixin animation($values) {
-    -webkit-animation: $values;
-    -moz-animation: $values;
-    -o-animation: $values;
-    animation: $values;
-}
-
-#tipue_search_content {
-    max-width: 650px;
-    padding-top: 15px;
-    margin: 0;
-}
-
-#tipue_search_loading:before {
-    padding-top: 60px;     
-    font-family: FontAwesome;
-    content: "\f013";
-    background: #fff no-repeat left;
-    @include animation(fa-spin 2s infinite linear);
-}
-
-#tipue_search_warning_head {
-    font: 300 15px/1.6;
-    color: #555;
-}
-
-#tipue_search_warning {
-    font: 300 13px/1.6;
-    color: #333;
-    margin: 7px 0;
-}
-
-#tipue_search_warning a {
-    color: #36c;
-    font-weight: 300;
-    text-decoration: none;
-}
-
-#tipue_search_warning a:hover {
-    color: #333;  
-}
-
-.tipue_search_content_title {
-    font-size: 2em;
-    line-height: 42px;
-    font-weight: 400;
-    text-transform: none;
-    margin-top: 0.5em;
-} 
-
-.tipue_search_content_title a {
-    color: $baseText;
-    text-decoration: none;
-    &:hover {
-        color: $baseText;    
-        text-decoration: underline;
-    }
-}
-
-.tipue_search_content_url {
-    display: none;
-}
-
-.tipue_search_content_text {
-    margin-top: 3px;
-}
-
-.h01 {
-    font-weight: bold;
-}
-
-#tipue_search_foot {
-    margin: 51px 0 21px 0;
-}
-
-#tipue_search_foot_boxes {
-    font-size: 0.75em;
-    padding: 0;
-    margin: 0;
-}
-
-#tipue_search_foot_boxes li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: inline;
-}
-
-#tipue_search_foot_boxes li a {
-    padding: 9px 15px 10px 15px;
-    background-color: #f1f1f1;
-    border: 1px solid #dcdcdc;
-    border-radius: 1px;
-    color: #333;
-    margin-right: 7px;
-    text-decoration: none;
-    text-align: center;
-}
-
-#tipue_search_foot_boxes li.current {
-    padding: 9px 15px 10px 15px;
-    background: #fff;
-    border: 1px solid #dcdcdc;
-    border-radius: 1px;
-    color: #333;
-    margin-right: 7px;
-    text-align: center;
-}
-
-#tipue_search_foot_boxes li a:hover {
-    border: 1px solid #ccc;
-    background-color: #f3f3f3;
-}

static/css/main.css

@@ -1,151 +0,0 @@
-html {
-  font: 400 14px / 20px "Oswald", "Helvetica Neue",Helvetica,Arial,sans-serif; }
-
-a {
-  color: #33b5e5; }
-  a:hover {
-    color: #0099cc; }
-
-.uk-navbar-brand {
-  text-transform: uppercase; }
-
-.uk-article-meta > a {
-  color: #444; }
-  .uk-article-meta > a:hover {
-    color: #444; }
-.uk-article-meta > .uk-icon-comment {
-  color: #444; }
-
-.uk-icon-twitter {
-  color: #00B0ED; }
-
-.uk-icon-facebook, .uk-icon-facebook-square {
-  color: #3B5999; }
-
-.uk-icon-google-plus, .uk-icon-google-plus-square {
-  color: #D34836; }
-
-.uk-icon-github {
-  color: #333; }
-
-.uk-icon-envelope {
-  color: #444; }
-
-.uk-nav-side > li.uk-active > a {
-  background: #28D1B2; }
-
-.uk-pagination > .uk-active > span {
-  background: #28D1B2; }
-
-.uk-icon-medium {
-  margin-right: 0.3em; }
-
-.uk-navbar-toggle {
-  color: white; }
-  .uk-navbar-toggle:hover, .uk-navbar-toggle:focus {
-    color: white; }
-
-.uk-nav-offcanvas > li > a {
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
-  .uk-nav-offcanvas > li > a:last-child {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
-.uk-nav-offcanvas .uk-nav-divider {
-  border-top: 1px solid rgba(255, 255, 255, 0.01);
-  margin: 0;
-  height: 4px;
-  background: rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
-
-.uk-nav-offcanvas .uk-nav-header {
-  margin-top: 0;
-  background: #404040;
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
-
-.mg-header {
-  padding: 1em 0;
-  background-color: #39B39D; }
-
-.mg-brand {
-  font-family: "Open Sans", sans-serif;
-  font-style: italic;
-  font-size: 2.5em;
-  color: white;
-  text-decoration: none; }
-  .mg-brand:hover {
-    color: white; }
-  @media (max-width: 767px) {
-    .mg-brand {
-      padding: 0;
-      max-width: 100%;
-      font-size: 2em; } }
-
-.mg-tagline {
-  font-family: "Open Sans", sans-serif;
-  font-weight: 800;
-  padding: 1em 0 0;
-  color: white; }
-  @media (min-width: 1220px) {
-    .mg-tagline {
-      padding-left: 0 !important; } }
-
-.mg-main {
-  margin-top: 4em;
-  margin-bottom: 3em;
-  min-height: 100%; }
-
-.mg-feed {
-  color: #FF6600; }
-  .mg-feed:hover {
-    text-decoration: none;
-    color: #FF6600; }
-
-.mg-list-title {
-  font-size: 2em;
-  line-height: 42px;
-  font-weight: 400;
-  text-transform: none;
-  margin-top: 0.5em; }
-
-.mg-footer {
-  margin-bottom: 1em; }
-
-.mg-author {
-  margin-top: 1em; }
-
-.mg-icon-link:hover {
-  text-decoration: none; }
-
-.mg-icons-small {
-  margin-bottom: 1em; }
-
-.mg-icons-small > li > a {
-  color: white; }
-  .mg-icons-small > li > a:hover {
-    color: white; }
-.mg-icons-small .uk-icon-rss {
-  background-color: #FF6600; }
-.mg-icons-small .uk-icon-twitter {
-  background-color: #00B0ED; }
-.mg-icons-small .uk-icon-facebook {
-  background-color: #3B5999; }
-.mg-icons-small .uk-icon-google-plus {
-  background-color: #D34836; }
-.mg-icons-small .uk-icon-github {
-  background-color: #333; }
-.mg-icons-small .uk-icon-envelope {
-  background-color: #059; }
-
-.mg-badges li {
-  float: left;
-  position: relative; }
-
-.browserupgrade {
-  margin: 0.2em 0;
-  background: #ccc;
-  color: #000;
-  padding: 0.2em 0; }
-

static/csslibs/solarized-highlight.css

@@ -12,7 +12,7 @@
  * cyan #2aa198 strings, numbers
  * green #859900 operators, other keywords
  * */
- 
+
 .highlight { background-color: #fdf6e3; color: #586e75 }
 .highlight .c { color: #93a1a1 } /* Comment */
 .highlight .err { color: #586e75 } /* Error */
@@ -81,4 +81,4 @@
 .highlight .vc { color: #268bd2 } /* Name.Variable.Class */
 .highlight .vg { color: #268bd2 } /* Name.Variable.Global */
 .highlight .vi { color: #268bd2 } /* Name.Variable.Instance */
-.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */ 
+.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */

static/js/filter-tags.js

@@ -0,0 +1,108 @@
+/*
+ * 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 parseQuery(queryString) {
+    const query = {};
+    (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&').forEach((pair) => {
+      pair = pair.split('=');
+      const name = decodeURIComponent(pair[0]);
+      const values = decodeURIComponent(pair[1] || '').split(',');
+      if (!query[name]) {
+        query[name] = [];
+      }
+      Array.prototype.push.apply(query[name], values);
+    });
+    return query;
+  }
+
+  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(newLang) {
+    let lang = this.textContent;
+    window.tagFilters[`lang:${ lang }`] = undefined;
+    lang = newLang || window.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();
+  };
+
+  // This is a bit redundant with /tag/$tag.html pages,
+  // but is slightly more powerful as it allow to combine multiple filters
+  const queryParams = parseQuery(window.location.search);
+  for (const [ qpName, qpValue ] of Object.entries(queryParams)) {
+    if (!qpValue) {
+      continue;
+    }
+    if (qpName === 'lang') {
+      const buttonElem = document.getElementById('lang-tag-filter');
+      window.toggleLangTagFilter.bind(buttonElem)(qpValue[0]);
+    } else if (qpName === 'tags') {
+      qpValue.forEach((tag) => {
+        const buttonElem = document.getElementById(`${ tag }-tag-filter`);
+        window.toggleTagFilter.bind(buttonElem)(tag);
+      });
+    }
+  }
+}());

static/js/jquery.sticky-kit.js

@@ -1,242 +0,0 @@
-// Generated by CoffeeScript 1.7.1
-
-/**
-@license Sticky-kit v1.1.1 | WTFPL | Leaf Corcoran 2014 | http://leafo.net
- */
-
-(function() {
-  var $, win;
-
-  $ = this.jQuery || window.jQuery;
-
-  win = $(window);
-
-  $.fn.stick_in_parent = function(opts) {
-    var elm, enable_bottoming, inner_scrolling, manual_spacer, offset_top, parent_selector, recalc_every, sticky_class, _fn, _i, _len;
-    if (opts == null) {
-      opts = {};
-    }
-    sticky_class = opts.sticky_class, inner_scrolling = opts.inner_scrolling, recalc_every = opts.recalc_every, parent_selector = opts.parent, offset_top = opts.offset_top, manual_spacer = opts.spacer, enable_bottoming = opts.bottoming;
-    if (offset_top == null) {
-      offset_top = 0;
-    }
-    if (parent_selector == null) {
-      parent_selector = void 0;
-    }
-    if (inner_scrolling == null) {
-      inner_scrolling = true;
-    }
-    if (sticky_class == null) {
-      sticky_class = "is_stuck";
-    }
-    if (enable_bottoming == null) {
-      enable_bottoming = true;
-    }
-    _fn = function(elm, padding_bottom, parent_top, parent_height, top, height, el_float, detached) {
-      var bottomed, detach, fixed, last_pos, offset, parent, recalc, recalc_and_tick, recalc_counter, spacer, tick;
-      if (elm.data("sticky_kit")) {
-        return;
-      }
-      elm.data("sticky_kit", true);
-      parent = elm.parent();
-      if (parent_selector != null) {
-        parent = parent.closest(parent_selector);
-      }
-      if (!parent.length) {
-        throw "failed to find stick parent";
-      }
-      fixed = false;
-      bottomed = false;
-      spacer = manual_spacer != null ? manual_spacer && elm.closest(manual_spacer) : $("<div />");
-      if (spacer) {
-        spacer.css('position', elm.css('position'));
-      }
-      recalc = function() {
-        var border_top, padding_top, restore;
-        if (detached) {
-          return;
-        }
-        border_top = parseInt(parent.css("border-top-width"), 10);
-        padding_top = parseInt(parent.css("padding-top"), 10);
-        padding_bottom = parseInt(parent.css("padding-bottom"), 10);
-        parent_top = parent.offset().top + border_top + padding_top;
-        parent_height = parent.height();
-        if (fixed) {
-          fixed = false;
-          bottomed = false;
-          if (manual_spacer == null) {
-            elm.insertAfter(spacer);
-            spacer.detach();
-          }
-          elm.css({
-            position: "",
-            top: "",
-            width: "",
-            bottom: ""
-          }).removeClass(sticky_class);
-          restore = true;
-        }
-        top = elm.offset().top - parseInt(elm.css("margin-top"), 10) - offset_top;
-        height = elm.outerHeight(true);
-        el_float = elm.css("float");
-        if (spacer) {
-          spacer.css({
-            width: elm.outerWidth(true),
-            height: height,
-            display: elm.css("display"),
-            "vertical-align": elm.css("vertical-align"),
-            "float": el_float
-          });
-        }
-        if (restore) {
-          return tick();
-        }
-      };
-      recalc();
-      if (height === parent_height) {
-        return;
-      }
-      last_pos = void 0;
-      offset = offset_top;
-      recalc_counter = recalc_every;
-      tick = function() {
-        var css, delta, scroll, will_bottom, win_height;
-        if (detached) {
-          return;
-        }
-        if (recalc_counter != null) {
-          recalc_counter -= 1;
-          if (recalc_counter <= 0) {
-            recalc_counter = recalc_every;
-            recalc();
-          }
-        }
-        scroll = win.scrollTop();
-        if (last_pos != null) {
-          delta = scroll - last_pos;
-        }
-        last_pos = scroll;
-        if (fixed) {
-          if (enable_bottoming) {
-            will_bottom = scroll + height + offset > parent_height + parent_top;
-            if (bottomed && !will_bottom) {
-              bottomed = false;
-              elm.css({
-                position: "fixed",
-                bottom: "",
-                top: offset
-              }).trigger("sticky_kit:unbottom");
-            }
-          }
-          if (scroll < top) {
-            fixed = false;
-            offset = offset_top;
-            if (manual_spacer == null) {
-              if (el_float === "left" || el_float === "right") {
-                elm.insertAfter(spacer);
-              }
-              spacer.detach();
-            }
-            css = {
-              position: "",
-              width: "",
-              top: ""
-            };
-            elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick");
-          }
-          if (inner_scrolling) {
-            win_height = win.height();
-            if (height + offset_top > win_height) {
-              if (!bottomed) {
-                offset -= delta;
-                offset = Math.max(win_height - height, offset);
-                offset = Math.min(offset_top, offset);
-                if (fixed) {
-                  elm.css({
-                    top: offset + "px"
-                  });
-                }
-              }
-            }
-          }
-        } else {
-          if (scroll > top) {
-            fixed = true;
-            css = {
-              position: "fixed",
-              top: offset
-            };
-            css.width = elm.css("box-sizing") === "border-box" ? elm.outerWidth() + "px" : elm.width() + "px";
-            elm.css(css).addClass(sticky_class);
-            if (manual_spacer == null) {
-              elm.after(spacer);
-              if (el_float === "left" || el_float === "right") {
-                spacer.append(elm);
-              }
-            }
-            elm.trigger("sticky_kit:stick");
-          }
-        }
-        if (fixed && enable_bottoming) {
-          if (will_bottom == null) {
-            will_bottom = scroll + height + offset > parent_height + parent_top;
-          }
-          if (!bottomed && will_bottom) {
-            bottomed = true;
-            if (parent.css("position") === "static") {
-              parent.css({
-                position: "relative"
-              });
-            }
-            return elm.css({
-              position: "absolute",
-              bottom: padding_bottom,
-              top: "auto"
-            }).trigger("sticky_kit:bottom");
-          }
-        }
-      };
-      recalc_and_tick = function() {
-        recalc();
-        return tick();
-      };
-      detach = function() {
-        detached = true;
-        win.off("touchmove", tick);
-        win.off("scroll", tick);
-        win.off("resize", recalc_and_tick);
-        $(document.body).off("sticky_kit:recalc", recalc_and_tick);
-        elm.off("sticky_kit:detach", detach);
-        elm.removeData("sticky_kit");
-        elm.css({
-          position: "",
-          bottom: "",
-          top: "",
-          width: ""
-        });
-        parent.position("position", "");
-        if (fixed) {
-          if (manual_spacer == null) {
-            if (el_float === "left" || el_float === "right") {
-              elm.insertAfter(spacer);
-            }
-            spacer.remove();
-          }
-          return elm.removeClass(sticky_class);
-        }
-      };
-      win.on("touchmove", tick);
-      win.on("scroll", tick);
-      win.on("resize", recalc_and_tick);
-      $(document.body).on("sticky_kit:recalc", recalc_and_tick);
-      elm.on("sticky_kit:detach", detach);
-      return setTimeout(tick, 0);
-    };
-    for (_i = 0, _len = this.length; _i < _len; _i++) {
-      elm = this[_i];
-      _fn($(elm));
-    }
-    return this;
-  };
-
-}).call(this);

static/js/main.js

@@ -1,15 +0,0 @@
-'use strict';
-
-$(document).ready(function() {
-    $('.mg-container-social').height($('article').height());
-    $('#mg-panel-social').stick_in_parent({offset_top: 35});
-
-    $('#tipue_search_input').tipuesearch({
-        'show': 10,
-        'mode': 'json',
-        'showURL': false,
-        'descriptiveWords': 75,
-        'highlightEveryTerm': true,
-        'contentLocation': '/tipue_search.json'
-    });
-});

static/js/plugins.js

@@ -1,22 +0,0 @@
-// Avoid `console` errors in browsers that lack a console.
-(function() {
-    var method;
-    var noop = function () {};
-    var methods = [
-        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
-        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
-        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
-        'timeStamp', 'trace', 'warn'
-    ];
-    var length = methods.length;
-    var console = (window.console = window.console || {});
-
-    while (length--) {
-        method = methods[length];
-
-        // Only stub undefined methods.
-        if (!console[method]) {
-            console[method] = noop;
-        }
-    }
-}());

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/html5shiv-3.7.3.min.js

@@ -0,0 +1,4 @@
+/**
+* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.3",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:this,document);

static/jslibs/jquery.sticky-kit-1.1.2.min.js

@@ -0,0 +1,9 @@
+/*
+ Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
+*/
+(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
+if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
+u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
+h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
+a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
+y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);

static/main.css

@@ -0,0 +1,359 @@
+/* csslint warned: Too many font-size declarations (10), abstraction needed. */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url(fonts/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Oswald Regular'), local('Oswald-Regular'), url(fonts/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
+}
+
+html, h1, h2, h3 {
+  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif; }
+html {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px; }
+
+em {
+  color: #444;
+}
+
+a, a > code, a > em, a > strong {
+  color: #33b5e5; }
+  a:hover {
+    color: #33b5e5; }
+
+.uk-article-meta {
+  color: #767676;  /* required to get an accessible contrast */ }
+.uk-article-meta > a {
+  color: #444; }
+  .uk-article-meta > a:hover {
+    color: #444; }
+.uk-article-meta > .uk-icon-comment {
+  color: #444; }
+
+.uk-article-content {
+  font: 400 14px / 20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
+
+.uk-icon-twitter {
+  color: #00b0ed; }
+
+.uk-icon-facebook, .uk-icon-facebook-square {
+  color: #3b5999; }
+
+.uk-icon-google-plus, .uk-icon-google-plus-square {
+  color: #d34836; }
+
+.uk-nav-side > li.uk-active > a {
+  background: #28d1b2; }
+
+.uk-pagination > .uk-active > span {
+  background: #28d1b2; }
+
+.uk-icon-medium {
+  margin-right: 0.3em; }
+
+.uk-navbar-toggle {
+  color: white; }
+  .uk-navbar-toggle:hover, .uk-navbar-toggle:focus {
+    color: white; }
+
+.uk-nav-offcanvas > li > a {
+  border-top: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
+  .uk-nav-offcanvas > li > a:last-child {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
+.uk-nav-offcanvas .uk-nav-divider {
+  box-sizing: border-box;
+  border-top: 1px solid rgba(255, 255, 255, 0.01);
+  margin: 0;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
+
+.uk-nav-offcanvas .uk-nav-header {
+  margin-top: 0;
+  background: #404040;
+  border-top: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
+
+
+.mg-header {
+  overflow: hidden; /* to hide the absolutely positioned mg-skiplinks child */
+  background-color: #39b39d; }
+
+.mg-header-content {
+  display: flex;
+  justify-content: space-between; }
+
+.mg-brand, .mg-brand > h1 {
+  display: block;
+  margin: 0.5rem 0;
+  font-style: italic;
+  font-size: 2.5rem;
+  line-height: 2.5rem;
+  color: #444; }
+  .mg-brand:hover, .mg-brand:focus {
+    color: white; }
+  @media (max-width: 767px) {
+    .mg-brand {
+      padding: 0;
+      max-width: 100%;
+      font-size: 2rem; }
+  }
+
+.mg-tagline {
+  padding: 0.5rem 2rem;
+  font-size: 1.4rem;
+  color: white; }
+
+.mg-header-extra {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end; }
+
+.mg-tag-filters {
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  margin: 0; }
+.mg-tag-filter {
+  background-color: transparent;
+  border: 2px solid white;
+  overflow: visible;
+  color: #444;
+  font: inherit;
+  padding: 0.5rem 1.5rem;
+  margin: 0.5rem 1rem;
+  text-transform: uppercase;
+  cursor: pointer; }
+  .mg-tag-filter:hover {
+    border-color: #b2b2b2; }
+  .mg-tag-filter-include {
+    background-color: #33b5e5; }
+  .mg-tag-filter-exclude {
+    background-color: #ff9148;  }
+
+.mg-nav-small {
+  display: flex;
+  width: 100%; }
+.mg-nav-menu-toggle-small {
+  flex: 1; }
+
+.mg-main {
+  margin-top: 4em;
+  margin-bottom: 3em;
+  min-height: 100%; }
+
+
+.mg-articles {
+  list-style-type: none; }
+
+.mg-article-short {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap; }
+  li:nth-child(even) .mg-article-short {
+    flex-direction: row-reverse; }
+.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 */
+  max-height: 50%;
+  max-width: 50%;
+  padding: 1rem; /* csslint warned here on box model */
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  object-fit: contain; }
+.mg-article-content {
+  flex: 3 1 35rem; }
+
+article img {
+  display: block;
+  margin: 0 auto;
+  max-height: 30rem; }
+article figcaption {
+  text-align:center;
+  font-style: italic; }
+
+.mg-feed {
+  color: #bf4d00; 
+  font-size: 16pt;
+}
+  .mg-feed:hover {
+    color: #d14905; }
+
+.mg-tags {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  text-align: right; }
+.mg-tag {
+  margin: 0 0.5rem;
+  color: #d14905; }
+  .mg-tag:hover {
+    color: #d14905; }
+  .mg-tag > .uk-icon-tag {
+    display: inline; /* so that the icon stick with the tag label */
+    margin-right: 0.2rem; }
+
+.mg-list-title {
+  font-size: 2em;
+  line-height: 42px;
+  font-weight: 400;
+  text-transform: none;
+  margin-top: 0.5em; }
+
+.mg-footer {
+  margin-bottom: 1em; }
+
+.mg-author {
+  margin-top: 1em; }
+
+.mg-icon-link {
+  padding: 0.3rem; }
+  .mg-icon-link:hover {
+    text-decoration: none; }
+
+.mg-icons-small {
+  margin-bottom: 1em; }
+
+.mg-icons-small .uk-icon-rss {
+  color: white;
+  background-color: #d14905; }
+.mg-icons-small .uk-icon-twitter {
+  background-color: #00b0ed; }
+.mg-icons-small .uk-icon-facebook {
+  background-color: #3b5999; }
+.mg-icons-small .uk-icon-google-plus {
+  background-color: #d34836; }
+.mg-icons-small .uk-icon-envelope {
+  background-color: #059; }
+
+.uk-icon-shaarli::before {
+  content: ' ';
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  background-image: url(shaarli-icon.png);
+  background-size: contain;
+  vertical-align: middle; }
+.uk-icon-stackoverflow::before {
+  content: ' ';
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  background-image: url(stackoverflow-icon.png);
+  background-size: contain;
+  vertical-align: middle; }
+.uk-icon-travis-ci::before {
+  content: ' ';
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  background-image: url(travis-ci-icon.png);
+  background-size: contain;
+  vertical-align: middle; }
+
+.mg-support-logo {
+  margin: 0.5rem;}
+
+.mg-badges li {
+  float: left;
+  position: relative; }
+
+.browserupgrade {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0; }
+
+
+.social-link {
+  font-size: 20pt;
+}
+
+.mg-search {
+  display: flex; }
+.mg-search-button {
+  font-family: FontAwesome, serif;
+  background-color: transparent;
+  border: none;
+  cursor: pointer; }
+.mg-search-query {
+  padding: 0; } /* override uk-search-field */
+
+
+.mg-tagcloud {
+  list-style: none;
+  padding: 0;
+  width: 80%;
+  text-align: center; }
+
+.mg-cloud-tag {
+  display: inline-block;
+  padding: 0.2rem;
+  line-height: 110%; }
+
+.mg-cloud-tag-size-5 {
+  font-size: 140%; }
+.mg-cloud-tag-size-4 {
+  font-size: 180%; }
+.mg-cloud-tag-size-3 {
+  font-size: 220%; }
+.mg-cloud-tag-size-2 {
+  font-size: 260%; }
+.mg-cloud-tag-size-1 {
+  font-size: 300%; }
+
+.mg-cloud-tag-badge {
+  color: #d14905; }
+
+img.mg-avatar {
+  display: inline-block;
+  max-width: 48%;
+  padding: 0.3rem;
+}
+
+
+.mg-fadeable {
+  max-height: 100vh;
+  overflow: hidden;
+  transition: max-height 1s ease-in;
+}
+.mg-faded {
+  max-height: 0;
+  transition: max-height 1s ease-out;
+}
+
+
+/* Accessibility */
+a:focus, .uk-link:focus {
+  outline: 1px dotted !important; /* resetting an outline - damn uikit :( */
+}
+
+.mg-skiplinks {
+  list-style-type: none;
+}
+.mg-skiplinks a {
+  color: #39b39d;
+}
+.mg-skiplinks a:focus {
+  color: white;
+}
+
+.duckduckgo {
+  height: 40px;
+  width: 90%;
+  padding: 5%;
+  background: #f5f5f5;
+}

templates/analytics.html

@@ -31,9 +31,9 @@ ga('create','{{ GOOGLE_ANALYTICS }}');ga('send','pageview');
 {% if SC_PROJECT and SC_SECURITY %}
 <!-- Start of StatCounter Code for Default Guide -->
 <script type="text/javascript">
-var sc_project={{ SC_PROJECT }}; 
-var sc_invisible=1; 
-var sc_security="{{ SC_SECURITY }}"; 
+var sc_project={{ SC_PROJECT }};
+var sc_invisible=1;
+var sc_security="{{ SC_SECURITY }}";
 var scJsHost = (("https:" == document.location.protocol) ?
         "https://secure." : "http://www.");
 document.write("<sc"+"ript type='text/javascript' src='" +

templates/archives.html

@@ -2,11 +2,9 @@
 {% block title %}Archives{% endblock %}
 {% block description %}{% endblock %}
 
-{% include 'common_seo.html' %}
-
 {% block content %}
-<div class="uk-width-medium-4-5">
-    <h1 class="uk-heading-large">Archives</h1>
+<div class="uk-width-4-5@m">
+    <h1 class="uk-heading-primary">Archives</h1>
 
     {% for article in dates %}
     <article class="uk-article">

templates/article.html

@@ -1,24 +1,24 @@
 {% extends "base.html" %}
 {% block title %}{{ article.title|striptags }}{% endblock %}
-{% block description %}{{ article.summary|striptags }}{% endblock %}
+{% block description %}{{ article.summary|striptags|e }}{% endblock %}
 {% block seo %}
 
-<meta property="og:title" content="{{ article.title|capitalize }}" />
-<meta property="og:type" content="article" />
-<meta property="og:url" content="{{ SITEURL }}/{{ article.url }}" />
-<meta name="twitter:title" content="{{ article.title|capitalize }}" />
-<meta name="twitter:url" content="{{ SITEURL }}/{{ article.url }}" />
-<meta itemprop="url" content="{{ SITEURL }}/{{ article.url }}" />
+<meta property="og:title" content="{{ article.title|capitalize }}" >
+<meta property="og:type" content="article" >
+<meta property="og:url" content="{{ SITEURL }}/{{ article.url }}" >
+<meta name="twitter:title" content="{{ article.title|capitalize }}" >
+<meta name="twitter:url" content="{{ SITEURL }}/{{ article.url }}" >
+<meta itemprop="url" content="{{ SITEURL }}/{{ article.url }}" >
 {% if article.summary %}
-<meta property="og:description" content="{{ article.summary|striptags|e }}" />
-<meta name="twitter:description" content="{{ article.summary|striptags|e }}" />
+<meta property="og:description" content="{{ article.summary|striptags|escape }}" >
+<meta name="twitter:description" content="{{ article.summary|striptags|escape }}" >
 {% endif %}
 {% if article.date %}
-<meta property="og:article:published_time" content="{{ article.date.strftime('%Y-%m-%d') }}" />
+<meta property="og:article:published_time" content="{{ article.date.strftime('%Y-%m-%d') }}" >
 {% endif %}
 {% if article.modified %}
 <meta property="og:article:modified_time" content="{{ article.modified.strftime('%Y-%m-%d') }}">
-<meta itemprop="dateModified" content="{{ article.date.strftime('%Y-%m-%d') }}" />
+<meta itemprop="dateModified" content="{{ article.date.strftime('%Y-%m-%d') }}" >
 {% endif %}
 {% if article.author %}
 <meta property="og:article:author" content="{{ article.author }}" >
@@ -27,54 +27,38 @@
 <meta property="og:article:tag" content="{{ tag }}">
 {% endfor %}
 {% if article.image %}
-<meta property="og:image" content="{{ article.image }}" />
-<meta name="twitter:image" content="{{ article.image }}" />
-<meta itemprop="image" content="{{ article.image }}"/>
+<meta property="og:image" content="{{ article.image }}" >
+<meta name="twitter:image" content="{{ article.image }}" >
+<meta itemprop="image" content="{{ article.image }}">
 {% elif META_IMAGE %}
-<meta property="og:image" content="{{ META_IMAGE }}" />
-<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" />
-<meta name="twitter:image" content="{{ META_IMAGE }}" />
-<meta itemprop="image" content="{{ META_IMAGE }}" />
+<meta property="og:image" content="{{ META_IMAGE }}" >
+<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" >
+<meta name="twitter:image" content="{{ META_IMAGE }}" >
+<meta itemprop="image" content="{{ META_IMAGE }}" >
 {% endif %}
 
 {% endblock %}
 
 {% block content %}
-<div class="mg-container-social uk-width-medium-1-10 uk-hidden-small">
-
-    {% if SHARE %}
-    <div class="uk-panel" id="mg-panel-social">
-        <ul class="uk-nav uk-nav-side">
-            <li>
-            <a href="https://www.facebook.com/sharer/sharer.php?u={{ SITEURL }}/{{ article.url }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" taget="_blank" class="uk-button"><i class="uk-icon-facebook-square"></i> Share</a>
-            </li>
-            <li>
-            <a href="https://twitter.com/intent/tweet?text={{ article.title|striptags|urlencode }}&url={{ SITEURL }}/{{ article.url }}&via={{ TWITTER_USERNAME }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="uk-button" target="_blank"><i class="uk-icon-twitter"></i> Tweet</a>
-            </li>
-            <li>
-            <a href="https://plus.google.com/share?url={{ SITEURL }}/{{ article.url }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" class="uk-button"><i class="uk-icon-google-plus-square"></i> Share</a>
-            </li>
-        </ul>
-    </div>
-    {% endif %}
-
-</div>
-
-<div class="uk-width-medium-7-10">
+<div class="uk-width-4-5@m">
 
     <article class="uk-article">
-        <h1 class="uk-heading-large uk-article-title" itemprop="name">{{ article.title }}</h1>
-        <p class="uk-article-meta"><time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time> in <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% if DISQUS_SITENAME %}, <br class="uk-visible-small"><i class="uk-icon-comment"></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}</p>
+        <h1 class="uk-heading-primary uk-article-title" itemprop="name">{{ article.title }}</h1>
+        <p class="uk-article-meta">
+            <time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time>
+            {% if CATEGORY_SAVE_AS %}<a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% endif %}
+            {% if DISQUS_SITENAME %}, <br class="uk-visible@s"><i class="fas fa-comments"></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}
+        </p>
 
         {% if SHARE %}
-        <a href="https://www.facebook.com/sharer/sharer.php?u={{ SITEURL }}/{{ article.url }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" taget="_blank" class="uk-button uk-visible-small"><i class="uk-icon-facebook-square"></i> Share</a>
-        <a href="https://twitter.com/intent/tweet?text={{ article.title|striptags|urlencode }}&url={{ SITEURL }}/{{ article.url }}&via={{ TWITTER_USERNAME }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="uk-button uk-visible-small" target="_blank"><i class="uk-icon-twitter"></i> Tweet</a>
-        <a href="https://plus.google.com/share?url={{ SITEURL }}/{{ article.url }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" class="uk-button uk-visible-small"><i class="uk-icon-google-plus-square"></i> Share</a>
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{ SITEURL }}/{{ article.url }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" class="uk-button uk-button-default uk-visible@s"><i class="fab fa-facebook-square"></i> Share</a>
+        <a href="https://twitter.com/intent/tweet?text={{ article.title|striptags|urlencode }}&url={{ SITEURL }}/{{ article.url }}&via={{ TWITTER_USERNAME }}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="uk-button uk-button-default uk-visible@s" target="_blank"><i class="fab fa-twitter-square"></i> Tweet</a>
         {% endif %}
 
-        <p class="uk-article-lead" itemprop="description">{{ article.summary|striptags }}</p>
-        <section itemprop="articleBody">{{ article.content }}</section>
-        <hr class="uk-article-divider">
+        {% if not MG_DISABLE_SUMMARY %}<p class="uk-text-lead" itemprop="description">{{ article.summary|striptags }}</p>{% endif %}
+        <section class="uk-article-content" itemprop="articleBody">{{ article.content }}</section>
+        {% include "partials/inline-tags.html" %}
+        <hr class="uk-divider-icon">
     </article>
 
     {% if DISQUS_SITENAME %}
@@ -91,7 +75,7 @@
      })();
     </script>
     <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+    <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
     {% endif %}
 
 </div>

templates/base.html

@@ -16,116 +16,182 @@
 <!--[if gt IE 8]><!--> <html lang="{{ DEFAULT_LANG }}" class="no-js" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Blog"> <!--<![endif]-->
 {% endif %}
 <head>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<title>{% block title %}{{ SITENAME }}{% endblock %}</title>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="description" content="{% block description %}{{ DESCRIPTION }}{% endblock %}">
-<link rel="shortcut icon" href="{{ SITEURL }}/{{ FAVICON }}" type="{{ FAVICON_TYPE }}">
-<meta name="author" content="{{ AUTHOR }}">
-<meta name="copyright" content="{{ AUTHOR }}">
-<meta name="twitter:card" content="summary" />
-<meta name="twitter:site" content="@{{ TWITTER_USERNAME }}" />
-<meta property="og:site_name" content="{{ SITENAME }}" />
-{% block seo %}
-<meta property="og:title" content="{{ SITENAME }}" />
-<meta property="og:type" content="website" />
-<meta property="og:url" content="{{ SITEURL }}" />
-<meta name="twitter:url" content="{{ SITEURL }}" />
-<meta itemprop="name" content="{{ SITENAME }}" />
-<meta itemprop="url" content="{{ SITEURL }}"/>
-{% if DESCRIPTION %}
-<meta property="og:description" content="{{ DESCRIPTION }}" />
-<meta name="twitter:description" content="{{ DESCRIPTION }}" />
-<meta itemprop="description" content="{{ DESCRIPTION  }}" />
-{% endif %}
-{% if META_IMAGE %}
-<meta property="og:image" content="{{ META_IMAGE }}" />
-<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" />
-<meta name="twitter:image" content="{{ META_IMAGE }}" />
-<meta itemprop="image" content="{{ META_IMAGE }}" />
-{% endif %}
-{% endblock %}
-<link href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed"/>
-<link href='//fonts.googleapis.com/css?family=Open+Sans:800italic' rel='stylesheet' type='text/css'>
-<link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.15.0/css/uikit.min.css">
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.15.0/css/components/search.min.css">
-<link rel="stylesheet" href="/theme/css/tipuesearch.css">
-<link rel="stylesheet" href="/theme/css/solarized.css">
-<link rel="stylesheet" href="/theme/css/main.css">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="{{ SITEURL }}/"><!-- So that "images/" prefixed URLs are resolved in the same way in pages/ -->
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
+    <title>{% block title %}{{ SITENAME }}{% endblock %}</title>
+    <meta name="description" content="{% block description %}{{ DESCRIPTION }}{% endblock %}">
+    {% if FAVICON %}
+    <link rel="shortcut icon" href="{{ SITEURL }}/{{ FAVICON }}" type="{{ FAVICON_TYPE|default('image/x-icon') }}">
+    {% endif %}
+    <link href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed">
+
+    {% block meta %}
+    {% endblock %}
+
+    <meta name="author" content="{{ AUTHOR }}">
+    <meta name="copyright" content="{{ AUTHOR }}">
+    <meta name="twitter:card" content="summary" >
+    <meta name="twitter:site" content="@{{ TWITTER_USERNAME }}" >
+    <meta property="og:site_name" content="{{ SITENAME }}" >
+
+    {% block seo %}
+    <meta property="og:title" content="{{ SITENAME }}" >
+    <meta property="og:type" content="website" >
+    <meta property="og:url" content="{{ SITEURL }}" >
+    <meta name="twitter:url" content="{{ SITEURL }}" >
+    <meta itemprop="name" content="{{ SITENAME }}" >
+    <meta itemprop="url" content="{{ SITEURL }}">
+    {% if DESCRIPTION %}
+    <meta property="og:description" content="{{ DESCRIPTION }}" >
+    <meta name="twitter:description" content="{{ DESCRIPTION }}" >
+    <meta itemprop="description" content="{{ DESCRIPTION  }}" >
+    {% endif %}
+    {% if META_IMAGE %}
+    <meta property="og:image" content="{{ META_IMAGE }}" >
+    <meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" >
+    <meta name="twitter:image" content="{{ META_IMAGE }}" >
+    <meta itemprop="image" content="{{ META_IMAGE }}" >
+    {% endif %}
+    {% endblock %}
+
+    {% if not DISABLE_SEARCH %}
+    <link rel="stylesheet" href="{{ SITEURL }}/theme/csslibs/tipuesearch.css">
+    {% endif %}
+
+    <link rel="stylesheet" type="text/css" href="{{SITEURL}}/theme/bundle-SHORTSHA1-6553b95.css">
+
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-xVVam1KS4+Qt2OrFa+VdRUoXygyKIuNWUUUBZYv+n27STsJ7oDOHJgfF0bNKLMJF" crossorigin="anonymous">
 </head>
 <body>
 <!--[if lt IE 7]>
-            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-        <![endif]-->
+    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+<![endif]-->
 
-<header class=" mg-header uk-navbar uk-navbar-attached">
+<header class="mg-header">
 
-    <div class="uk-container uk-container-center">
-        <div class="uk-grid" data-uk-grid-margin>
-
-            <a class="mg-brand uk-navbar-brand uk-hidden-small" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
-            <div class="mg-tagline uk-navbar-content uk-hidden-small">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
-            <a class="uk-navbar-toggle uk-visible-small" href="#mg-offcanvas" data-uk-offcanvas></a>
-            <a class="mg-brand uk-navbar-brand uk-navbar-center uk-visible-small" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
+    <div class="mg-header-content uk-container">
 
+        <div>
+            <a class="mg-brand" href="{{ SITEURL }}">{% block header_text %}{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}{% endblock %}</a>
+            <div class="mg-tagline">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
         </div>
+
+        <ul class="mg-skiplinks">
+            {% if not DISABLE_SEARCH %}
+            <li><a href="#search-form">Search form</a></li>
+            {% endif %}
+        </ul>
+
+        <div class="mg-header-extra">
+            {% block header_extra %}
+            {% endblock %}
+        </div>
+
     </div>
 </header>
 
 <main class="mg-main">
 
-<div class="uk-container uk-container-center">
+<div class="uk-container ">
+
+    <div class="uk-grid" uk-grid>
 
-    <div class="uk-grid" data-uk-grid-margin>
-        
         {% block content %}
-        {% endblock %} 
-    
-        <div class="uk-width-medium-1-5 uk-hidden-small">
-            
-            <div class="uk-panel uk-panel-box">
-                <form class="uk-search" action="search.html" data-uk-search>
-                    <input class="uk-search-field tipue_search" type="search" name="q" id="tipue_search_input" autocomplete="off" placeholder="Search...">
+        {% endblock %}
+
+        <div role="navigation" class="uk-width-1-5@m">
+
+            {% if not DISABLE_SEARCH %}
+            <div class="uk-card uk-card-body uk-card-small">
+                <form class="uk-search uk-search-default" action="search.html" >
+                    <input class="uk-search-input tipue_search" type="search" name="q" id="tipue_search_input" autocomplete="off" placeholder="Search...">
                 </form>
             </div>
+            {% endif %}
 
-            <div class="uk-panel uk-panel-box">
-                <ul class="uk-nav uk-nav-side">
-                    <li class="uk-nav-header">Categories</li>
+            {% if CATEGORY_SAVE_AS %}
+            <div class="uk-card uk-card-body uk-card-small">
+                <h2 class="uk-card-title">Categories</h2>
+                <ul class="uk-nav uk-nav-default">
                     {% for cat, _ in categories %}
                     <li {% if cat == category %}class="uk-active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
                     {% endfor %}
-                    {% if DISPLAY_PAGES_ON_MENU != False %}
-                    <li class="uk-nav-header">Pages</li>
-                    
-                    {% for p in PAGES %}
+
+                    {% if ARCHIVE_SAVE_AS %}
+                    <li class="uk-nav-divider"></li>
+                    <li {% if page_name == 'archives' %}class="uk-active"{% endif %}><a href="{{ SITEURL }}/archives.html">Archives</a></li>
+                    {% endif %}
+                </ul>
+            </div>
+            {% endif %}
+
+            {% if DISPLAY_PAGES_ON_MENU %}
+            <div class="uk-card uk-card-body uk-card-small">
+                <h2 class="uk-card-title">Pages</h2>
+                <ul class="uk-nav uk-nav-default">
+                    {% for p in pages %}
                     <li {% if p == page %}class="uk-active"{% endif %}>
                         <a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a>
                     </li>
                     {% endfor %}
-                    
-                    {% endif %}
-
-                    <li class="uk-nav-divider"></li>
-                    <li {% if page_name == 'archives' %}class="uk-active"{% endif %}><a href="{{ SITEURL }}/archives.html">Archives</a></li>
                 </ul>
             </div>
+            {% endif %}
 
-            <div class="uk-panel uk-panel-box">
-                <h3 class="uk-panel-title">Receive Updates</h3>
-                <a rel="alternate" type="application/atom+xml" href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" class="mg-feed"><i class="uk-icon-rss uk-icon-medium"></i> ATOM</a>
-            </div>
-            
             {% if SOCIAL %}
-            <div class="uk-panel uk-panel-box">
-                <h3 class="uk-panel-title">Contacts</h3>
-                {% for icon, link in SOCIAL %}
-                <a class="mg-icon-link" href="{{ link }}">
-                    <i class="uk-icon-{{ icon }} uk-icon-medium"></i>
+            <div class="uk-card uk-card-body uk-card-small">
+                <h2 class="uk-card-title">Social</h2>
+                {% for link_destination, link in SOCIAL %}
+                <a class="mg-icon-link" href="{{ link }}" title="Link to my {{ link_destination }}">
+                    <i class="fab fa-{{ link_destination }} social-link" aria-hidden="true"></i>
+                </a>
+                {% endfor %}
+            </div>
+            {% endif %}
+
+            <div class="uk-card uk-card-body uk-card-small">
+                <h2 class="uk-card-title">Syndication</h2>
+                <a rel="alternate" type="application/atom+xml" href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" class="mg-feed"><i class="fas fa-rss-square "></i> ATOM</a>
+                {% if EXTRA_ATOM_FEED %}<a rel="alternate" type="application/atom+xml" href="{{ EXTRA_ATOM_FEED['url'] }}" class="mg-feed"><i class="fas fa-rss-square "></i> {{ EXTRA_ATOM_FEED['name'] }}</a>{% endif %}
+            </div>
+
+            {% if AVATARS %}
+            <div class="uk-card uk-card-body uk-card-small">
+                <h2 class="uk-card-title">Avatars</h2>
+                {% for img_uri in AVATARS %}
+                <img class="mg-avatar" src="{{ img_uri }}" alt="An avatar I use on the web" title="An avatar I use on the web">
+                {% endfor %}
+            </div>
+            {% endif %}
+
+            {% if READINGS %}
+            <a href="{{ SITEURL }}/past_readings.html">
+                <div class="uk-card uk-card-body uk-card-small">
+                    <h2 class="uk-card-title">Previous Entries</h2>
+                    <img class="uk-thumbnail" src="{{ READINGS[0]['img_url'] }}" alt="{{ READINGS[0]['description'] }}" title="{{ READINGS[0]['description'] }}">
+                </div>
+            </a>
+            {% endif %}
+
+            {% if LINKS %}
+            <div class="uk-card uk-card-body uk-card-small">
+                <h3 class="uk-card-title">Blogroll</h3>
+                <ul class="uk-nav uk-nav-default">
+                {% for text, url in LINKS %}
+                <li><a href="{{ url }}">{{ text }}</a></li>
+                {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+
+            {% if SUPPORTS %}
+            <div class="uk-card uk-card-body uk-card-small">
+                {% for name, link, logo_url, title in SUPPORTS %}
+                <a href="{{ link }}">
+                    <img class="mg-support-logo" src="{{ logo_url }}" alt="Logo {{ name }}" title="{{ title }}">
                 </a>
                 {% endfor %}
             </div>
@@ -140,67 +206,20 @@
 </main>
 
 <footer class="mg-footer">
-    <div class="uk-container uk-container-center uk-text-center">
-
-        <div class="mg-icons-small uk-subnav uk-visible-small">
-            <li><a rel="alternate" type="application/atom+xml" href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" class="uk-icon-button uk-icon-rss"></a></li>
-            {% if SOCIAL %}
-            {% for icon, link in SOCIAL %}
-            <li>
-                <a href="{{ link }}" class="uk-icon-button uk-icon-{{ icon.replace("-square", "") }}"></a>
-            </li>
-            {% endfor %}
-            {% endif %}
-        </div>
-
+    <div class="uk-container uk-text-center">
         <div class="mg-author uk-panel">
+            <p>Powered by <a href="http://blog.getpelican.com">Pelican</a>. Theme <a href="https://github.com/alopexc0de/pelican-mg">mg</a> based on work by <a href="https://github.com/lucachr">Luca Chiricozzi</a></p>
             <p>{{ FOOTER }}</p>
-
-            <p>Powered by <a href="http://blog.getpelican.com">Pelican</a>.<br class="uk-visible-small"> Theme <a href="https://github.com/lucachr/pelican-mg">mg</a> by <a href="https://github.com/lucachr">Luca Chiricozzi</a>.</p>
         </div>
-    </div> 
+    </div>
 </footer>
 
-<div id="mg-offcanvas" class="uk-offcanvas">
-    <div class="uk-offcanvas-bar">
+<script src="{{SITEURL}}/theme/bundle-SHARE-{{SHARE|string|first|length|string|first}}-MG_FILTER_TAGS-{{MG_FILTER_TAGS|string|first|length|string|first}}-SHORTSHA1-d853ca5.js"></script>
 
-        <form class="uk-search" action="search.html" data-uk-search>
-            <input class="uk-search-field" type="search" name="q" id="tipue_search_input" autocomplete="off" placeholder="Search...">
-        </form>
+{% if not DISABLE_SEARCH %}
+<script src="{{ SITEURL }}/theme/jslibs/tipuesearch_set.js"></script>
+<script src="{{ SITEURL }}/theme/jslibs/tipuesearch.js"></script>
+{% endif %}
 
-        <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
-            <li class="uk-nav-header">Categories</li>
-            {% for cat, _ in categories %}
-            <li {% if cat == category %}class="uk-active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
-            {% endfor %}
-            {% if DISPLAY_PAGES_ON_MENU != False %}
-            <li class="uk-nav-header">Pages</li>        
-            {% for p in PAGES %}
-            <li {% if p == page %}class="uk-active"{% endif %}>
-                <a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a>
-            </li>
-            {% endfor %}
-                    
-            {% endif %}
-
-            <li class="uk-nav-divider"></li>
-            <li><a href="{{ SITEURL }}/{{ ARCHIVES_URL }}">Archives</a></li>
-        </ul>
-    </div>
-</div>
-
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.15.0/js/uikit.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.15.0/js/components/search.min.js"></script>
-<script src="/theme/js/jquery.sticky-kit.js"></script>
-<script src="/theme/js/tipuesearch_set.js"></script>
-<script src="/theme/js/tipuesearch.js"></script>
-<script src="/theme/js/plugins.js"></script>
-<script src="/theme/js/main.js"></script>
-
-{% include 'disqus_count.html' %}
-{% include 'analytics.html' %}
 </body>
 </html>
-

templates/categories.html

@@ -1,24 +1,22 @@
 {% extends "base.html" %}
-{% block title %}Categories{% endblock %} 
+{% block title %}Categories{% endblock %}
 {% block description %}{% endblock %}
 
-{% include 'common_seo.html' %}
-
 {% block content %}
-<div class="uk-width-medium-4-5">
-    <h1 class="uk-heading-large">Categories</h1>
+<div class="uk-width-4-5@m">
+    <h1 class="uk-heading-primary">Categories</h1>
     {% for category, articles in categories %}
-    <h2><a href="{{ SITEURL}}/{{ category.url}}" class="uk-link-muted">{{ category|capitalize }}</a></h2>
+    <h2><a href="{{ SITEURL}}/{{ category.url}}" class="uk-link-muted mg-list-title">{{ category|capitalize }}</a></h2>
         {% for article in articles %}
 
         <article class="uk-article">
-            <a href="{{ SITEURL }}/{{ article.url }}" class="uk-article-title uk-link-muted mg-list-title">{{ article.title }}</a>
+            <a href="{{ SITEURL }}/{{ article.url }}" class="uk-article-title uk-link-muted">{{ article.title }}</a>
             <p class="uk-article-meta">
                 <time datetime="{{ article.date.strftime('%Y-%m-%d') }}">{{ article.locale_date }}</time>
             </p>
             <p>{{ ' '.join(article.content.split(' ')[0:75])|striptags }}...</p>
         </article>
-        
+
         {% endfor %}
 
         <hr>

templates/category.html

@@ -1,5 +1,3 @@
 {% extends "index.html" %}
 {% block title %}{{ category|capitalize }}{% endblock %}
 {% block description %}{% endblock %}
-
-{% include 'common_seo.html' %}

templates/common_seo.html

@@ -1,16 +0,0 @@
-{% block seo %}
-<meta property="og:title" content="{{ SITENAME }}" />
-<meta property="og:type" content="website" />
-<meta property="og:url" content="{{ SITEURL }}" />
-<meta name="twitter:url" content="{{ SITEURL }}" />
-<meta itemprop="name" content="{{ SITENAME }}">
-<meta itemprop="url" content="{{ SITEURL }}">
-{% if META_IMAGE %}
-<meta property="og:image" content="{{ META_IMAGE }}" />
-<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" />
-<meta name="twitter:image" content="{{ META_IMAGE }}" />
-<meta itemprop="image" content="{{ META_IMAGE }}"/>
-{% endif %}
-{% endblock %}
-
-

templates/disqus_count.html

@@ -1,3 +1,4 @@
+{% if DISQUS_SITENAME %}
 <script type="text/javascript">
 /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
 var disqus_shortname = '{{ DISQUS_SITENAME }}'; // required: replace example with your forum shortname
@@ -10,4 +11,4 @@ var disqus_shortname = '{{ DISQUS_SITENAME }}'; // required: replace example wit
  (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
  }());
 </script>
-
+{% endif %}

templates/index.html

@@ -1,40 +1,46 @@
 {% extends "base.html" %}
-{% block content_title %}{% endblock %}
+
+{% block header_text %}<h1>{{ super() }}</h1>{% endblock %}
+
+{% block header_extra %}
+{% if MG_LANG_FILTER_TAGS or MG_FILTER_TAGS %}
+<script>
+window.langs = {{ MG_LANG_FILTER_TAGS|tojson }};
+</script>
+<ul class="mg-tag-filters">
+{% if MG_LANG_FILTER_TAGS %}
+<li><button id="lang-tag-filter" class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)()' title="Language filter (disabled)">lang</button></li>
+{% endif %}
+{% if MG_FILTER_TAGS %}
+{% for filter_tag in MG_FILTER_TAGS %}
+<li><button id="{{ filter_tag }}-tag-filter" class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')" title="Tag filter (disabled)">{{ filter_tag }}</button></li>
+{% endfor %}
+</ul>
+{% endif %}
+{% endif %}
+{% endblock %}
+
 {% block content %}
-<div class="uk-width-medium-4-5">
+<div class="uk-width-4-5@m">
 
 {% if articles %}
-{% for article in articles %}
-
-    {% if loop.index == 1 %}
-            <article class="uk-article" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost">
-                <a href="{{ SITEURL }}/{{ article.url }}" class="uk-article-title uk-link-muted" itemprop="name">{{ article.title }}</a>
-                <p class="uk-article-meta"><time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time> • <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% if DISQUS_SITENAME %} • <br class="uk-visible-small"><i class="uk-icon-comment"></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}</p>
-</p>
-                <p class="uk-article-lead" itemprop="description">{{ article.summary|striptags }}</p>
-                <section itemprop="articleBody">{{ article.content }}</section>
-                <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread"></a>
-                <hr class="uk-article-divider">
-            </article>
+<ul class="mg-articles">
+{% for article in (articles_page.object_list if articles_page else articles) %}
+    <li>
+    {% if not MG_NO_EXCERPT and loop.index == 1 %}
+        {% include "partials/article-excerpt.html" %}
     {% else %}
-        <article class="uk-article" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost">
-                <a href="{{ SITEURL }}/{{ article.url }}" class="uk-article-title uk-link-muted" itemprop="name">{{ article.title }}</a>
-                <p class="uk-article-meta"><time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time> • <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% if DISQUS_SITENAME %} • <br class="uk-visible-small"><i class="uk-icon-comment"></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}</p>
-</p>
-                <p class="uk-article-lead" itemprop="description">{{ article.summary|striptags }}</p>
-                <p>{{ ' '.join(article.content.split(' ')[0:75])|striptags }}...</p>
-                <a href="{{ SITEURL }}/{{ article.url }}">Read More</a>
-                <hr class="uk-article-divider">
-        </article>
+        {% include "partials/article-short.html" %}
     {% endif %}
-
+    </li>
 {% endfor %}
+</ul>
 {% if DEFAULT_PAGINATION  and articles_paginator.num_pages > 1 %}
     <ul class="uk-pagination">
-        {% if articles_previous_page %}<li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}"><i class="uk-icon-angle-double-left"></i></a></li>{% endif %}
+        {% if articles_previous_page %}<li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}"><i class="fas fa-fast-backward"></i></a></li>{% endif %}
         {% if articles_previous_page %}<li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}">{{ articles_previous_page.number }}</a></li>{% endif %}
         <li class="uk-active"><span>{{ articles_page.number }}</span></li>
-        {% if articles_next_page %}<li><a href="{{ SITEURL }}/{{ articles_next_page.url }}"><i class="uk-icon-angle-double-right"></i></a></li>{% endif %}
+        {% if articles_next_page %}<li><a href="{{ SITEURL }}/{{ articles_next_page.url }}"><i class="fas fa-fast-forward"></i></a></li>{% endif %}
         {% if articles_next_page %}<li><a href="{{ SITEURL }}/{{ articles_next_page.url }}">{{ articles_next_page.number }}</a></li>{% endif %}
     </ul>
 {% endif %}

templates/page.html

@@ -3,35 +3,33 @@
 {% block description %}{% endblock %}
 
 {% block seo %}
-<meta property="og:title" content="{{ page.title|capitalize }}" />
-<meta property="og:type" content="website" />
-<meta property="og:url" content="{{ SITEURL }}/{{ page.url }}" />
-<meta name="twitter:url" content="{{ SITEURL }}/{{ page.url }}" />
-<meta itemprop="url" content="{{ SITEURL }}/{{ page.url }}"/>
+<meta property="og:title" content="{{ page.title|capitalize }}" >
+<meta property="og:type" content="website" >
+<meta property="og:url" content="{{ SITEURL }}/{{ page.url }}" >
+<meta name="twitter:url" content="{{ SITEURL }}/{{ page.url }}" >
+<meta itemprop="url" content="{{ SITEURL }}/{{ page.url }}">
 {% if page.image %}
-<meta property="og:image" content="{{ page.image }}" />
-<meta name="twitter:image" content="{{ page.image }}" />
+<meta property="og:image" content="{{ page.image }}" >
+<meta name="twitter:image" content="{{ page.image }}" >
 <meta itemprop="image" content="{{ page.image }}">
 {% elif META_IMAGE %}
-<meta property="og:image" content="{{ META_IMAGE }}" />
-<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" />
-<meta name="twitter:image" content="{{ META_IMAGE }}" />
-<meta itemprop="image" content="{{ SITEURL }}/{{ META_IMAGE }}"/>
+<meta property="og:image" content="{{ META_IMAGE }}" >
+<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" >
+<meta name="twitter:image" content="{{ META_IMAGE }}" >
+<meta itemprop="image" content="{{ SITEURL }}/{{ META_IMAGE }}">
 {% endif %}
 {% if page.summary %}
-<meta property="og:description" content="{{ page.summary|striptags }}" />
-<meta name="twitter:description" content="{{ page.summary|striptags }}" />
-<meta itemprop="description" content="{{ page.summary|striptags }}"/>
+<meta property="og:description" content="{{ page.summary|striptags|escape }}" >
+<meta name="twitter:description" content="{{ page.summary|striptags|escape }}" >
+<meta itemprop="description" content="{{ page.summary|striptags|escape }}">
 {% endif %}
 {% endblock %}
 
-{% block content %}        
-<div class="uk-width-medium-4-5">
-    <h1 class="uk-heading-large" itemprop="name">{{ page.title }}</h1>
-    
-    {% block page_content %}
-    {% endblock %}
-
+{% block content %}
+<article class="uk-article uk-width-4-5@m">
+    <h1 class="uk-heading-primary uk-article-title" itemprop="name">{{ page.title }}</h1>
+    <div class="uk-article-content">
     {{ page.content }}
-</div>
+    </div>
+</article>
 {% endblock %}

templates/partials/article-excerpt.html

@@ -0,0 +1,13 @@
+<article class="uk-article" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost">
+    <a href="{{ SITEURL }}/{{ article.url }}" class="uk-link-muted"><h2 class="uk-article-title" itemprop="name">{{ article.title|e }}</h2></a>
+    <p class="uk-article-meta"><time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time>
+        {% if CATEGORY_SAVE_AS %} • <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% endif %}
+        {% if DISQUS_SITENAME %} • <br class="uk-visible@s"><i class="fas fa-comments"></i></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}
+    </p>
+    {% if not MG_DISABLE_SUMMARY %}<p class="uk-text-lead" itemprop="description">{{ article.summary|striptags|striptags }}</p>{% endif %}
+    <section class="uk-article-content" itemprop="articleBody">{{ article.content }}</section>
+    {% include "partials/inline-tags.html" %}
+    <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread"></a>
+    <hr class="uk-divider-icon">
+</article>
+

templates/partials/article-short.html

@@ -0,0 +1,20 @@
+<article class="uk-article mg-fadeable" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost"
+         data-tags='{{ article.tags|map(attribute="name")|list|tojson }}'>
+    <div class="mg-article-short">
+        {% if article.featured_image %}
+        <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>
+            <p class="uk-article-meta"><time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time>
+                {% if CATEGORY_SAVE_AS %} • <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% endif %}
+                {% if DISQUS_SITENAME %} • <br class="uk-visible@s"><i class="fas fa-comments"></i></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}
+            </p>
+            <p class="uk-article-lead" itemprop="description">{{ article.summary|striptags|striptags }}</p>
+            {% if not MG_DISABLE_SUMMARY %}<p>{{ ' '.join(article.content.split(' ')[:75])|striptags|striptags }}...</p>{% endif %}
+            <a href="{{ SITEURL }}/{{ article.url }}">Read More</a>
+            {% include "partials/inline-tags.html" %}
+        </div>
+    </div>
+    <hr class="uk-article-divider">
+</article>

templates/partials/inline-tags.html

@@ -0,0 +1,9 @@
+{% set bullet = joiner(" • ") %}
+<div class="mg-tags" title="Tags">
+{% for tag in article.tags %}
+    {{bullet()}}
+    <a class="mg-tag" href="{{tag.url}}">
+        <i class="fal fa-tags"></i>{{tag.name}}
+    </a>
+{% endfor %}
+</div>

templates/past_readings.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% block title %}Lectures passées{% endblock %}
+{% block description %}{% endblock %}
+
+{% block content %}
+<div class="uk-width-4-5@m">
+    <h1 class="uk-heading-primary">Lectures passées</h1>
+
+    <div class="uk-grid">
+    {% for reading in READINGS %}
+        <figure class="uk-width-1-1 uk-width-small-1-2 uk-width-1-3@m">
+            <img class="uk-thumbnail" src="{{ reading['img_url'] }}" alt="{{ reading['description']+' '+reading.get('date', '') }}">
+            <figcaption>{{ reading['description']+' '+reading.get('date', '') }}</figcaption>
+        </figure>
+    {% endfor %}
+    </div>
+
+</div>
+{% endblock %}

templates/search.html

@@ -2,11 +2,9 @@
 {% block title %}Search results{% endblock %}
 {% block description %}{% endblock %}
 
-{% include 'common_seo.html' %}
-
 {% block content %}
-<div class="uk-width-medium-4-5">
-    <h1 class="uk-heading-large">Search results</h1>
+<div class="uk-width-4-5@m">
+    <h1 class="uk-heading-primary">Search results</h1>
 
     <div id="tipue_search_content"></div>
 

templates/tag.html

@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+
+{% block meta %}
+<meta name="robots" content="noindex">
+{% endblock %}
+
+{% block content %}
+<div class="uk-width-4-5@m">
+
+{% if articles %}
+{% for article in (articles_page.object_list if articles_page else articles) %}
+
+    {% include "partials/article-short.html" %}
+
+{% endfor %}
+{% if DEFAULT_PAGINATION and articles_paginator.num_pages > 1 %}
+    <ul class="uk-pagination">
+        {% if articles_previous_page %}<li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}"><i class="fas fa-fast-backward"></i></a></li>{% endif %}
+        {% if articles_previous_page %}<li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}">{{ articles_previous_page.number }}</a></li>{% endif %}
+        <li class="uk-active"><span>{{ articles_page.number }}</span></li>
+        {% if articles_next_page %}<li><a href="{{ SITEURL }}/{{ articles_next_page.url }}"><i class="fas fa-fast-forward"></i></a></li>{% endif %}
+        {% if articles_next_page %}<li><a href="{{ SITEURL }}/{{ articles_next_page.url }}">{{ articles_next_page.number }}</a></li>{% endif %}
+    </ul>
+{% endif %}
+
+{% endif %}
+</div>
+{% endblock %}

templates/tagcloud.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% block title %}Tag cloud{% endblock %}
+{% block description %}{% endblock %}
+
+{% block content %}
+<ul class="mg-tagcloud">
+    {% for tag in tag_cloud if not tag.0.name.startswith('lang:') %}
+        <li class="mg-cloud-tag mg-cloud-tag-size-{{ tag.1 }}">
+            <a href="{{ SITEURL }}/{{ tag.0.url }}">
+            {{ tag.0 }}
+            {% if TAG_CLOUD_BADGE %}
+            <span class="mg-cloud-tag-badge">({{ tag.2 }})</span>
+            {% endif %}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endblock %}
+

templates/tipue_search.html

@@ -1,16 +1,14 @@
 {
     "pages": [
-        {% set len = (articles + pages)| length %}
+        {% set comma = joiner(',') %}
         {% for item in articles + pages %}
+        {{comma()}}
         {
-            "title": "{{item.title|striptags|e}}", 
-            "text":"{{item.content|striptags|e}}", 
-            "tags": "{{item.category}}", 
+            "title": {{item.title|striptags|tojson}},
+            "text": {{item.content|striptags|tojson}},
+            "tags": "{{' '.join(item.tags|map(attribute="name"))}}",
             "loc": "{{ SITEURL }}/{{item.url}}"
-        }{% if loop.index < len %},
-        {% else %}
-        
-        {% endif %}
+        }
         {% endfor %}
     ]
 }