--- a/default/blog/articles.html	Fri Oct 27 18:48:41 2017 +0200
+++ b/default/blog/articles.html	Fri Oct 27 18:50:19 2017 +0200
@@ -1,40 +1,9 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
-{% import 'input/comment.html' as comment with context %}
-
-{% macro show_items(items, comments=False) %}
-    {# show items and comments items if present after each item,
-       then post form if allow_commenting is set #}
-    {% for item in items %}
-        {% if not comments %}<div class="main_article">{% endif %}
-            {% include 'blog/item.html' %}
-        {% if not comments %}</div>{% endif %}
-
-        {# we recursively display comments for all comments nodes (usually there's only one) #}
-        {% for comments_items in item.comments_items_list %}
-            <button class="comments_btn" onclick="clicked_mh_fix('{{comments_panel|next_gidx}}');clicked_cls(this)">
-                <span class='show'>{% trans %}show comments{% endtrans %}</span>
-                <span class='hide'>{% trans %}hide comments{% endtrans %}</span>
-                ({{comments_items|count}})
-            </button>
-            <div id="{{comments_panel|cur_gidx}}" class="comments_panel">
-                {% if allow_commenting %}
-                    <div class="comment_post">
-                        {{ comment.comment(service=comments_items.service, node=comments_items.node) }}
-                    </div>
-                {% endif %}
-
-                <div class="comments">
-                    {{show_items(comments_items, comments=True)}}
-                </div>
-            </div>
-
-        {% endfor %}
-
-    {% endfor %}
-{% endmacro %}
+{% set dates_format='relative' %}
+{% import 'blog/macros.html' as blog with context %}
 
 {% block body %}
 <div id="blog_items">
-    {{ show_items(items) }}
+    {{ blog.show_items(items) }}
 </div>
 {% endblock body %}

--- a/default/blog/item.html	Fri Oct 27 18:48:41 2017 +0200
+++ b/default/blog/item.html	Fri Oct 27 18:50:19 2017 +0200
@@ -1,3 +1,12 @@
+{# display a blog item which can be expanded/retracted by clicking on it
+
+    if the locale differs from item language, it will be totally reduced, and will need a click to be displayed
+
+    @variable item(data_object.BlogItem): item to display
+    @variable identities(data_object.Identities): identities which can be used to display info on item author
+    @variable dates_format(unicode): format of the date to use (see date_fmt filter)
+#}
+
 {% block item %}
 
 {% if item.language and locale and locale.language != item.language %}
@@ -5,7 +14,7 @@
     {% set other_lang = " other_lang" %}
 {% endif %}
 
-<article id="{{item.id}}" class="init box{{other_lang}}">
+<article id="{{item.id}}" class="init box{{other_lang}}{{" clicked" if expanded}}">
 
     {# following message is displayed if item lang is different from page locale #}
     {% if other_lang is defined %}
@@ -24,8 +33,12 @@
         <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div>
             {% block metadata %}
             <div class="metadata">
-            <span class="author">{{identities[item.author_jid].nick | default(item.author)}}</span>
-            <span class="blog_data">{% trans days=item.published|date_days %}{{days}} days ago{% endtrans %}</span>
+            {% if identities is defined %}
+                <span class="author">{{identities[item.author_jid].nick | default(item.author)}}</span>
+            {% else %}
+                <span class="author">{{item.author}}</span>
+            {% endif %}
+            <span class="blog_data">{{item.published|date_fmt(fmt=dates_format)}}</span>
             </div>
 
             {% endblock metadata %}
@@ -34,7 +47,7 @@
 
     <div class="content{{' text' if not item.content_xhtml}}">
         {% block content %}
-        {{ item.content_xhtml or item.content or ''}}
+        {{- item.content_xhtml or item.content or '' -}}
         {% endblock content %}
     </div>
 

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/blog/macros.html	Fri Oct 27 18:50:19 2017 +0200
@@ -0,0 +1,41 @@
+{% import 'input/comment.html' as comment with context %}
+
+{% macro show_items(items, comments=False, expanded=false, dates_fmt=none) %}
+    {# show items and comments items if present after each item,
+        then post form if allow_commenting is set
+        @param items(BlogItems): items to show
+        @param comments(bool): True items are comments
+            if False, a div with "main_article" class will be added
+        @param expanded(bool): initial state of items
+    #}
+    {% if dates_format is undefined %}
+        {% set dates_format = dates_fmt or 'short' %}
+    {% endif %}
+    {% for item in items %}
+        {% if not comments %}<div class="main_article">{% endif %}
+            {% include 'blog/item.html' %}
+        {% if not comments %}</div>{% endif %}
+
+        {# we recursively display comments for all comments nodes (usually there's only one) #}
+        {% for comments_items in item.comments_items_list %}
+            <button class="comments_btn" onclick="clicked_mh_fix('{{comments_panel|next_gidx}}');clicked_cls(this)">
+                <span class='show'>{% trans %}show comments{% endtrans %}</span>
+                <span class='hide'>{% trans %}hide comments{% endtrans %}</span>
+                ({{comments_items|count}})
+            </button>
+            <div id="{{comments_panel|cur_gidx}}" class="comments_panel">
+                {% if allow_commenting %}
+                    <div class="comment_post">
+                        {{- comment.comment(service=comments_items.service, node=comments_items.node) -}}
+                    </div>
+                {% endif %}
+
+                <div class="comments">
+                    {{show_items(comments_items, comments=True)}}
+                </div>
+            </div>
+
+        {% endfor %}
+
+    {% endfor %}
+{% endmacro %}