From 64c6c998311f43355ef5dbff026859eddb202a09 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Mon, 8 Feb 2021 03:09:43 +0100
Subject: [PATCH] Rework app catalog page

---
 pages/02.apps/01.catalog/apps.fr.md | 383 +++++-----------------------
 pages/02.apps/01.catalog/apps.md    | 376 +++++----------------------
 themes/yunohost-docs/css/custom.css |  83 ++++++
 3 files changed, 216 insertions(+), 626 deletions(-)

diff --git a/pages/02.apps/01.catalog/apps.fr.md b/pages/02.apps/01.catalog/apps.fr.md
index 1ec18dd3..1e3c36c7 100644
--- a/pages/02.apps/01.catalog/apps.fr.md
+++ b/pages/02.apps/01.catalog/apps.fr.md
@@ -5,182 +5,65 @@ taxonomy:
     category: docs
 routes:
   default: '/apps'
+twig_first: true
+process:
+    twig: true
 ---
 
-<span class="javascriptDisclaimer">
+<div class="javascriptDisclaimer">
 Cette page requiert que JavaScript soit activé pour s'afficher correctement :s.
-<br/>
-<br/>
-</span>
-
-<!--
-Search bar
--->
-<div class="input-group">
-    <span id="basic-addon1" class="input-group-addon" ><span class="glyphicon glyphicon-search"></span></span>
-    <input id="filter-app-cards" type="text" class="form-control"  placeholder="Rechercher des apps..." aria-describedby="basic-addon1"/>
-    <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span id="current-quality-filter" data-filter="decent">Seulement les apps de qualité décente</span> <span class="caret"></span>
-        </button>
-
-        <ul class="dropdown-menu">
-            <li><a href="#" data-quality-filter="high">Seulement les apps haute-qualité</a></li>
-            <li><a href="#" data-quality-filter="decent">Seulement les apps de qualité décente</a></li>
-            <li><a href="#" data-quality-filter="working">Seulement les apps fonctionelles</a></li>
-            <li><a href="#" data-quality-filter="none">Toutes les apps</a></li>
-        </ul>
-    </div>
 </div>
-<br />
 
-<!--
-Disclaimers
--->
+<div class="input-group">
+    <span id="filter-app-icon" class="input-group-addon"><i class="fa fa-search"></i></span>
+    <input id="filter-app-cards" type="text" class="form-control"  placeholder="Rechercher des apps..." aria-describedby="basic-addon1"/>
+</div>
 
 !!! L'équipe de packaging d'applications sera heureuse de recevoir vos commentaires ! Si vous trouvez des problèmes ou des améliorations possibles en installant une app, n'hésitez pas à contribuer en créant un ticket (issue) directement sur le dépôt de code.
 
-! Les applications étiquettées <span class="label label-warning label-as-badge">low quality</span> fonctionnent peut-être, mais ne respectent pas les bonnes pratiques de packaging ou ne supportent pas certaines fonctionnalités comme les sauvegardes/restauration ou l'authentication unifiée. Soyez prudent si vous les installez.
+! Les applications étiquettées <span class="label label-warning label-as-badge">mauvaise qualité</span> fonctionnent peut-être, mais ne respectent pas les bonnes pratiques de packaging ou ne supportent pas certaines fonctionnalités comme les sauvegardes/restauration ou l'authentication unifiée. Soyez prudent si vous les installez.
 
-!! Les applications étiquettées <span class="label label-danger label-as-badge">not working</span> sont connues pour être cassées et/ou encore en développement. **Ne les installez pas** sur un serveur de production !
+{% set catalog = read_file('/var/www/app_yunohost/apps/builds/default/doc_catalog/apps.json')|json_decode(true) %}
 
-<div id="app-cards-list" class="app-cards-list"></div>
+<div id="app-cards-list" class="app-cards-list">
+{% for app_id, infos in catalog.apps %}
 
-! Si vous ne trouvez pas une application précise que vous recherchez, vous pouvez chercher un dépôt nommé nomdelapp_ynh sur GitHub ou internet, ou bien l'ajouter à la <a href="/apps_wishlist">liste d'apps souhaitées</a>.
+{% if grav.language.getActive in infos.description %}
+    {% set descr_lang = grav.language.getActive %}
+{% else %}
+    {% set descr_lang = 'en' %}
+{% endif %}
 
-<!--
-Custom CSS for this page
--->
+<div class="app-card panel panel-default" data-appid="{{ app_id }}" data-level="{{ infos.level }}">
+<div class="app-title">
+{% if infos.good_quality %}
+<i class="fa fa-star" style="color: gold"></i>
+{% endif %}
+{{ infos.name }} 
+<span class="label label-default">{{infos.category}}</span>
+{% if infos.broken %}
+<span class="label label-error">cassée</span>
+{% else %}
+{% if infos.bad_quality %}
+<span class="label label-warning">mauvaise qualité</span>
+{% endif %}
+{% endif %}
+</div>
+<div class="app-descr">{{ infos.description[descr_lang] }}</div>
+<div class="app-footer">
+<div class="app-buttons btn-group" role="group">
 
-<style>
-#wrapper {
-   max-width: 1100px;
-}
+<a href="{{infos.url}}" target="_BLANK" type="button" class="btn btn-default col-sm-4"> <i class="fa fa-code"></i> Code </a>
+<a href="app_{{app_id}}" target="_BLANK" type="button" class="btn btn-default col-sm-4"> <i class="fa fa-book"></i> Doc </a>
+<a href="https://install-app.yunohost.org/?app={{app_id}}" target="_BLANK" type="button" class="btn btn-{% if infos.bad_quality %}error{% else %}success{% endif %} col-sm-4 active"> <i class="fa fa-plus"></i> Install </a>
 
-/*=================================================
- Search bar
-=================================================*/
-#filter-app-cards, #app-cards-list {
-    width:100%;
-}
-/*===============================================*/
+</div>
+</div>
+</div>
+{% endfor %}
+</div>
 
-/*=================================================
- Force return space after card list
-=================================================*/
-#app-cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
-}
-/*===============================================*/
-
-/*=================================================
- App card
-=================================================*/
-
-.app-card {
-    margin-bottom:20px;
-    width:31.2%;
-    float:left;
-    min-height: 1px;
-    margin-right: 10px;
-    margin-left: 10px;
-    border-radius: 3px;
-    position: relative;
-    height: 230px;
-}
-.app-title {
-    margin-top: 0;
-    margin-bottom: 5px;
-    font-size: 1.2em;
-    font-weight: 700;
-    line-height: 1.1;
-    color: black;
-    padding: 15px;
-    padding-bottom: 0;
-}
-.app-title .label {
-    font-size: 0.5em;
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0.5em 0.6em;
-    padding-bottom: 0.3em;
-}
-
-.label-epic {
-    background-color: darkorchid;
-}
-
-.app-descr {
-    height:100px;
-    overflow: hidden;
-    padding: 0 15px;
-}
-
-.app-footer {
-   width:100%;
-   position: absolute;
-   bottom: 0;
-}
-
-.app-maintainer {
-    font-size: 0.7em;
-    text-align: right;
-    margin-right: 5px;
-}
-
-.app-card .unmaintained {
-   color: #e0aa33;
-}
-
-/*===============================================
- App buttons
-=================================================*/
-.app-buttons {
-    width:100%;
-}
-.app-buttons > .btn {
-    border-bottom:0;
-    font-size: 0.9em;
-    line-height: 1.58;
-}
-.app-buttons > .btn:first-child {
-    border-left:0;
-    border-top-left-radius:0;
-}
-.app-buttons > .btn:last-child {
-    border-right:0;
-    border-top-right-radius:0;
-    margin-left: 0px;
-    width: 33.6%;
-}
-
-/*===============================================*/
-</style>
-
-<!--
-App card template
--->
-
-<script type="text/template" id="app-template2">
-    <div class="app-card_{app_id} app-card panel panel-default" data-quality="{app_quality}">
-
-        <div class="app-title">{app_name}</div>
-        <div class="app-descr">{app_description}</div>
-        <div class="app-footer">
-            <div class="app-maintainer">
-                <span class="glyphicon glyphicon-refresh"></span> {app_update} -
-                <span title="{maintained_help}" class="{maintained_state}"><span class="glyphicon glyphicon-{maintained_icon}"></span> {app_maintainer}</span>
-            </div>
-            <div class="app-buttons btn-group" role="group">
-                <a href="{app_git}" target="_BLANK" type="button" class="btn btn-default col-sm-4"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Code</a>
-                <a href="#/app_{app_id}" target="_BLANK" type="button" class="btn btn-default col-sm-4"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> Doc</a>
-                <a href="https://install-app.yunohost.org/?app={app_id}" target="_BLANK" type="button" class="btn btn-{app_install_css_style} col-sm-4 active"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Install</a>
-            </div>
-       </div>
-    </div>
-</script>
+! Si vous ne trouvez pas une application précise que vous recherchez, vous pouvez l'ajouter à la [liste d'apps souhaitées](/apps_wishlist).
 
 <!--
 Javascript helpers
@@ -188,32 +71,12 @@ Javascript helpers
 
 <script>
 
-function timeConverter(UNIX_timestamp) {
-    var a = new Date(UNIX_timestamp*1000);
-    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
-    var year = a.getFullYear();
-    var month = months[a.getMonth()];
-    var date = a.getDate();
-    var hour = a.getHours();
-    var min = a.getMinutes();
-    if (hour < 10) { hour = '0' + hour; }
-    if (min < 10) { min = '0' + min; }
-    var time = date+' '+month+' '+year;//+' at '+hour+':'+min
-    return time;
-}
-
-
 $(document).ready(function () {
 
-    var default_lang = "fr";
+    $(".javascriptDisclaimer").hide();
 
-    // Hide warrant about states when we're using the default filter
-    $('#state-disclaimer').hide();
-    var quality_filters = "decent";
+    function filter() {
 
-    function filter(){
-
-        var current_quality_filter = $('#current-quality-filter').data("filter");
         var user_input_in_search_field = $('#filter-app-cards').val().toLowerCase();
 
         $('.app-card').each(function() {
@@ -221,7 +84,7 @@ $(document).ready(function () {
             // we look for the name of the app (h3) and try to find the user input
             // + we check this app match the current quality filter
             var text = $(this).find('.app-title').text().toLowerCase() + " " + $(this).find('.app-descr').text().toLowerCase();
-            if (text.indexOf(user_input_in_search_field) >= 0 && $(this).data("quality").indexOf(current_quality_filter) >= 0)
+            if (text.indexOf(user_input_in_search_field) >= 0)
             {
                 $(this).show();
             }
@@ -230,10 +93,27 @@ $(document).ready(function () {
                 $(this).hide();
             }
         });
+    }
 
-        // Display or hide the disclaimers depending on the current filter...
-        ((current_quality_filter == "working") || (current_quality_filter == "none")) ? $("#bad-quality-apps-disclaimer").show() : $("#bad-quality-apps-disclaimer").hide();
-        ((current_quality_filter == "none")) ? $("#broken-apps-disclaimer").show() : $("#broken-apps-disclaimer").hide();
+    function sort() {
+        var sorted = $('.app-card').sort(function (a, b) {
+            var level_a = Math.min(parseInt($(a).data('level')), 8);
+            var level_b = Math.min(parseInt($(b).data('level')), 8);
+            if (level_a > level_b)
+            {
+                return -1;
+            }
+            else if (level_a < level_b)
+            {
+                return 1;
+            }
+            else {
+                var id_a = $(a).data('appid');
+                var id_b = $(b).data('appid');
+                return id_a > id_b ? 1 : -1;
+            }
+        });
+        $("#app-cards-list").html(sorted);
     }
 
     //=================================================
@@ -247,135 +127,8 @@ $(document).ready(function () {
         filter();
     });
 
+    sort();
     filter();
 
-    //=================================================
-    // Upload apps lists
-    //=================================================
-    var catalog = undefined;
-
-    // Fetch application catalog
-
-    $.getJSON('https://app.yunohost.org/default/v2/apps.json', {}, function(data) {
-
-        catalog = $.map(data["apps"], function(el) { return el; });
-
-        // Clarify high quality state, and level if undefined or inprogress or notworking...
-
-        $.each(catalog, function(k, infos) {
-            if ((infos.level === undefined) || (infos.level === 0) || (infos.state === "inprogress") || (infos.state === "notworking")) {
-                infos.level = null;
-            }
-            if ((infos.high_quality === true) && (infos.level === 8)) {
-                infos.state = "high quality";
-            }
-            else if ((infos.state === "working") && (infos.level !== null) && (infos.level <= 4)) {
-                infos.state = "low quality";
-            }
-        });
-
-        // Sort apps according to their state and level...
-
-        catalog.sort(function(a, b){
-            a_state = (a.state === "high quality")?4:(a.level > 4)?3:(a.state > 0)?2:1;
-            b_state = (b.state === "high quality")?4:(b.level > 4)?3:(b.state > 0)?2:1;
-            if (a_state < b_state || a_state == b_state && a.level < b.level || a_state == b_state && a.level == b.level && a.manifest.id > b.manifest.id) {return 1;}
-            else if (a.manifest.id == b.manifest.id) {return 0;}
-            return -1;
-        });
-
-        // Add the card for each app
-
-        $.each(catalog, function(k, infos) {
-
-            app_id = infos.manifest.id;
-
-            // Define what style to use for state, level and install button
-            // according to the app quality ....
-
-            if (infos.state === "high quality") {
-                app_quality = "high,decent,working,none";
-                app_badge = "high quality";
-                app_badge_css_style = "epic";
-                app_install_css_style = "success";
-            } else if ((infos.state === "working") && (infos.level > 4)) {
-                app_quality = "decent,working,none";
-                app_badge = null;
-                app_badge_css_style = "success";
-                app_install_css_style = "success";
-            } else if (infos.state === "low quality") {
-                app_quality = "working,none";
-                app_badge = "low quality";
-                app_badge_css_style = "warning";
-                app_install_css_style = "warning";
-            } else {
-                app_quality = "none";
-                app_badge = "not working";
-                app_badge_css_style = "danger";
-                app_install_css_style = "danger";
-            }
-
-            // If level is null, we wanna display '?'
-            if (infos.level == null) {
-                infos.level = '?';
-            }
-
-            // Fill the template
-            html = $('#app-template2').html()
-             .replace(/{app_id}/g, app_id)
-             .replace(/{app_name}/g, infos.manifest.name)
-             .replace('{app_description}', infos.manifest.description[default_lang] || infos.manifest.description["en"])
-             .replace(/{app_git}/g, infos.git.url)
-             .replace('{app_branch}', infos.git.branch)
-             .replace('{app_level}', infos.level)
-             .replace('{app_quality}', app_quality)
-             .replace('{app_update}', timeConverter(infos.lastUpdate))
-             .replace('{app_install_css_style}', app_install_css_style);
-
-            // Handle the maintainer info
-            if (infos.maintained == false)
-            {
-               html = html
-                 .replace('{maintained_state}', 'unmaintained')
-                 .replace('{maintained_icon}', 'warning-sign')
-                 .replace('{app_maintainer}', "Unmaintained")
-                 .replace('{maintained_help}', "This package is currently unmaintained. Feel free to propose yourself as the new maintainer !");
-            }
-            else {
-                html = html
-                 .replace('{maintained_state}', 'maintained')
-                 .replace('{maintained_icon}', 'user')
-                 .replace('{maintained_help}', "Current maintainer of this package");
-
-                if ((infos.manifest.developer) && (infos.manifest.developer.name)) {
-                    html = html.replace('{app_maintainer}', infos.manifest.developer.name);
-                }
-                else if ((infos.manifest.maintainer) && (infos.manifest.maintainer.name)) {
-                    html = html.replace('{app_maintainer}', infos.manifest.maintainer.name);
-                }
-                else {
-                    html = html.replace('{app_maintainer}', "???");
-                }
-            }
-
-            // Fill the template
-            $('#app-cards-list').append(html);
-            $('.app-card_'+ app_id).attr('id', 'app-card_'+ app_id);
-            if (app_badge !== null) {
-                 $('.app-card_'+ app_id + ' .app-title').append(' <span class="label label-'+app_badge_css_style+'">'+app_badge+'</span>');
-            }
-            if (typeof(infos.category) === "string") {
-                 category = data["categories"].find(function(el) { return el.id == infos.category; });
-                 if (typeof(category) !== "undefined")
-                 {
-                    display = category["title"][default_lang] || category["title"]["en"];
-                    $('.app-card_'+ app_id + ' .app-title').append(' <span class="label label-default">'+display.toLowerCase()+'</span>');
-                 }
-            }
-        });
-
-        filter();
-    });
-    //=================================================
 });
 </script>
diff --git a/pages/02.apps/01.catalog/apps.md b/pages/02.apps/01.catalog/apps.md
index dacf40fc..421795f8 100644
--- a/pages/02.apps/01.catalog/apps.md
+++ b/pages/02.apps/01.catalog/apps.md
@@ -5,183 +5,67 @@ taxonomy:
     category: docs
 routes:
   default: '/apps'
+twig_first: true
+process:
+    twig: true
 ---
 
-<span class="javascriptDisclaimer">
+<div class="javascriptDisclaimer">
 This page requires JavaScript enabled to display properly :s.
-<br/>
-<br/>
-</span>
-
-<!--
-Search bar
--->
+</div>
 
 <div class="input-group">
-    <span id="basic-addon1" class="input-group-addon" ><span class="glyphicon glyphicon-search"></span></span>
+    <span id="filter-app-icon" class="input-group-addon"><i class="fa fa-search"></i></span>
     <input id="filter-app-cards" type="text" class="form-control"  placeholder="Search for apps..." aria-describedby="basic-addon1"/>
-    <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span id="current-quality-filter" data-filter="decent">Only decent quality apps</span> <span class="caret"></span>
-        </button>
-
-        <ul class="dropdown-menu">
-            <li><a href="#" data-quality-filter="high">Only high quality apps</a></li>
-            <li><a href="#" data-quality-filter="decent">Only decent quality apps</a></li>
-            <li><a href="#" data-quality-filter="working">Only working apps</a></li>
-            <li><a href="#" data-quality-filter="none">All apps</a></li>
-        </ul>
-    </div>
 </div>
-<br />
-
-<!--
-Disclaimers
--->
 
 !!! The application packaging team will welcome your feedback! If you install an app and find issues or possible improvements, do not hesitate to contribute by reporting your issues directly on the corresponding code repositories.
 
 ! Applications flagged as <span class="label label-warning label-as-badge">low quality</span> may be working, but they may not respect good packaging practices or lack integration of some features like backup/restore or single authentication. Be cautious when installing them.
 
-!! Applications flagged as <span class="label label-danger label-as-badge">not working</span> are known to be broken and/or are still in development. **Do not install them** in a production environment!
+{% set catalog = read_file('/var/www/app_yunohost/apps/builds/default/doc_catalog/apps.json')|json_decode(true) %}
 
-<div id="app-cards-list" class="app-cards-list"></div>
+<div id="app-cards-list" class="app-cards-list">
+{% for app_id, infos in catalog.apps %}
 
-! If you don't find the app you are looking for, you can try to look for a appname_ynh repository on GitHub or on the internet, or add it to the <a href="/apps_wishlist">apps wishlist</a>.
+{% if grav.language.getActive in infos.description %}
+    {% set descr_lang = grav.language.getActive %}
+{% else %}
+    {% set descr_lang = 'en' %}
+{% endif %}
 
-<!--
-Custom CSS for this page
--->
+<div class="app-card panel panel-default" data-appid="{{ app_id }}" data-level="{{ infos.level }}">
+<div class="app-title">
+{% if infos.good_quality %}
+<i class="fa fa-star" style="color: gold"></i>
+{% endif %}
+{{ infos.name }} 
+<span class="label label-default">{{infos.category}}</span>
+{% if infos.broken %}
+<span class="label label-error">broken</span>
+{% else %}
+{% if infos.bad_quality %}
+<span class="label label-warning">low quality</span>
+{% endif %}
+{% endif %}
+</div>
+<div class="app-descr">{{ infos.description[descr_lang] }}</div>
+<div class="app-footer">
+<div class="app-buttons btn-group" role="group">
 
-<style>
-#wrapper {
-   max-width: 1100px;
-}
+<a href="{{infos.url}}" target="_BLANK" type="button" class="btn btn-default col-sm-4"> <i class="fa fa-code"></i> Code </a>
+<a href="app_{{app_id}}" target="_BLANK" type="button" class="btn btn-default col-sm-4"> <i class="fa fa-book"></i> Doc </a>
+<a href="https://install-app.yunohost.org/?app={{app_id}}" target="_BLANK" type="button" class="btn btn-{% if infos.bad_quality %}error{% else %}success{% endif %} col-sm-4 active"> <i class="fa fa-plus"></i> Install </a>
 
-/*=================================================
- Search bar
-=================================================*/
-#filter-app-cards, #app-cards-list {
-    width:100%;
-}
-/*===============================================*/
+</div>
+</div>
+</div>
+{% endfor %}
+</div>
 
-/*=================================================
- Force return space after card list
-=================================================*/
-#app-cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
-}
-/*===============================================*/
+! If you don't find the app you are looking for, you can add it to the [apps wishlist](/apps_wishlist).
 
-/*=================================================
- App card
-=================================================*/
 
-.app-card {
-    margin-bottom:20px;
-    width:31.2%;
-    float:left;
-    min-height: 1px;
-    margin-right: 10px;
-    margin-left: 10px;
-    border-radius: 3px;
-    position: relative;
-    height: 230px;
-}
-.app-title {
-    margin-top: 0;
-    margin-bottom: 5px;
-    font-size: 1.2em;
-    font-weight: 700;
-    line-height: 1.1;
-    color: black;
-    padding: 15px;
-    padding-bottom: 0;
-}
-.app-title .label {
-    font-size: 0.5em;
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0.5em 0.6em;
-    padding-bottom: 0.3em;
-}
-
-.label-epic {
-    background-color: darkorchid;
-}
-
-.app-descr {
-    height:100px;
-    overflow: hidden;
-    padding: 0 15px;
-}
-
-.app-footer {
-   width:100%;
-   position: absolute;
-   bottom: 0;
-}
-
-.app-maintainer {
-    font-size: 0.7em;
-    text-align: right;
-    margin-right: 5px;
-}
-
-.app-card .unmaintained {
-   color: #e0aa33;
-}
-
-/*===============================================
- App buttons
-=================================================*/
-.app-buttons {
-    width:100%;
-}
-.app-buttons > .btn {
-    border-bottom:0;
-    font-size: 0.9em;
-    line-height: 1.58;
-}
-.app-buttons > .btn:first-child {
-    border-left:0;
-    border-top-left-radius:0;
-}
-.app-buttons > .btn:last-child {
-    border-right:0;
-    border-top-right-radius:0;
-    margin-left: 0px;
-    width: 33.6%;
-}
-
-/*===============================================*/
-</style>
-
-<!--
-App card template
--->
-
-<script type="text/template" id="app-template2">
-    <div class="app-card_{app_id} app-card panel panel-default" data-quality="{app_quality}">
-
-        <div class="app-title">{app_name}</div>
-        <div class="app-descr">{app_description}</div>
-        <div class="app-footer">
-            <div class="app-maintainer">
-                <span class="glyphicon glyphicon-refresh"></span> {app_update} -
-                <span title="{maintained_help}" class="{maintained_state}"><span class="glyphicon glyphicon-{maintained_icon}"></span> {app_maintainer}</span>
-            </div>
-            <div class="app-buttons btn-group" role="group">
-                <a href="{app_git}" target="_BLANK" type="button" class="btn btn-default col-sm-4"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Code</a>
-                <a href="#/app_{app_id}" target="_BLANK" type="button" class="btn btn-default col-sm-4"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> Doc</a>
-                <a href="https://install-app.yunohost.org/?app={app_id}" target="_BLANK" type="button" class="btn btn-{app_install_css_style} col-sm-4 active"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Install</a>
-            </div>
-       </div>
-    </div>
-</script>
 
 <!--
 Javascript helpers
@@ -189,32 +73,12 @@ Javascript helpers
 
 <script>
 
-function timeConverter(UNIX_timestamp) {
-    var a = new Date(UNIX_timestamp*1000);
-    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
-    var year = a.getFullYear();
-    var month = months[a.getMonth()];
-    var date = a.getDate();
-    var hour = a.getHours();
-    var min = a.getMinutes();
-    if (hour < 10) { hour = '0' + hour; }
-    if (min < 10) { min = '0' + min; }
-    var time = date+' '+month+' '+year;//+' at '+hour+':'+min
-    return time;
-}
-
-
 $(document).ready(function () {
 
-    var default_lang = "en";
+    $(".javascriptDisclaimer").hide();
 
-    // Hide warrant about states when we're using the default filter
-    $('#state-disclaimer').hide();
-    var quality_filters = "decent";
+    function filter() {
 
-    function filter(){
-
-        var current_quality_filter = $('#current-quality-filter').data("filter");
         var user_input_in_search_field = $('#filter-app-cards').val().toLowerCase();
 
         $('.app-card').each(function() {
@@ -222,7 +86,7 @@ $(document).ready(function () {
             // we look for the name of the app (h3) and try to find the user input
             // + we check this app match the current quality filter
             var text = $(this).find('.app-title').text().toLowerCase() + " " + $(this).find('.app-descr').text().toLowerCase();
-            if (text.indexOf(user_input_in_search_field) >= 0 && $(this).data("quality").indexOf(current_quality_filter) >= 0)
+            if (text.indexOf(user_input_in_search_field) >= 0)
             {
                 $(this).show();
             }
@@ -231,10 +95,27 @@ $(document).ready(function () {
                 $(this).hide();
             }
         });
+    }
 
-        // Display or hide the disclaimers depending on the current filter...
-        ((current_quality_filter == "working") || (current_quality_filter == "none")) ? $("#bad-quality-apps-disclaimer").show() : $("#bad-quality-apps-disclaimer").hide();
-        ((current_quality_filter == "none")) ? $("#broken-apps-disclaimer").show() : $("#broken-apps-disclaimer").hide();
+    function sort() {
+        var sorted = $('.app-card').sort(function (a, b) {
+            var level_a = Math.min(parseInt($(a).data('level')), 8);
+            var level_b = Math.min(parseInt($(b).data('level')), 8);
+            if (level_a > level_b)
+            {
+                return -1;
+            }
+            else if (level_a < level_b)
+            {
+                return 1;
+            }
+            else {
+                var id_a = $(a).data('appid');
+                var id_b = $(b).data('appid');
+                return id_a > id_b ? 1 : -1;
+            }
+        });
+        $("#app-cards-list").html(sorted);
     }
 
     //=================================================
@@ -248,135 +129,8 @@ $(document).ready(function () {
         filter();
     });
 
+    sort();
     filter();
 
-    //=================================================
-    // Upload apps lists
-    //=================================================
-    var catalog = undefined;
-
-    // Fetch application catalog
-
-    $.getJSON('https://app.yunohost.org/default/v2/apps.json', {}, function(data) {
-
-        catalog = $.map(data["apps"], function(el) { return el; });
-
-        // Clarify high quality state, and level if undefined or inprogress or notworking...
-
-        $.each(catalog, function(k, infos) {
-            if ((infos.level === undefined) || (infos.level === 0) || (infos.state === "inprogress") || (infos.state === "notworking")) {
-                infos.level = null;
-            }
-            if ((infos.high_quality === true) && (infos.level === 8)) {
-                infos.state = "high quality";
-            }
-            else if ((infos.state === "working") && (infos.level !== null) && (infos.level <= 4)) {
-                infos.state = "low quality";
-            }
-        });
-
-        // Sort apps according to their state and level...
-
-        catalog.sort(function(a, b){
-            a_state = (a.state === "high quality")?4:(a.level > 4)?3:(a.state > 0)?2:1;
-            b_state = (b.state === "high quality")?4:(b.level > 4)?3:(b.state > 0)?2:1;
-            if (a_state < b_state || a_state == b_state && a.level < b.level || a_state == b_state && a.level == b.level && a.manifest.id > b.manifest.id) {return 1;}
-            else if (a.manifest.id == b.manifest.id) {return 0;}
-            return -1;
-        });
-
-        // Add the card for each app
-
-        $.each(catalog, function(k, infos) {
-
-            app_id = infos.manifest.id;
-
-            // Define what style to use for state, level and install button
-            // according to the app quality ....
-
-            if (infos.state === "high quality") {
-                app_quality = "high,decent,working,none";
-                app_badge = "high quality";
-                app_badge_css_style = "epic";
-                app_install_css_style = "success";
-            } else if ((infos.state === "working") && (infos.level > 4)) {
-                app_quality = "decent,working,none";
-                app_badge = null;
-                app_badge_css_style = "success";
-                app_install_css_style = "success";
-            } else if (infos.state === "low quality") {
-                app_quality = "working,none";
-                app_badge = "low quality";
-                app_badge_css_style = "warning";
-                app_install_css_style = "warning";
-            } else {
-                app_quality = "none";
-                app_badge = "not working";
-                app_badge_css_style = "danger";
-                app_install_css_style = "danger";
-            }
-
-            // If level is null, we wanna display '?'
-            if (infos.level == null) {
-                infos.level = '?';
-            }
-
-            // Fill the template
-            html = $('#app-template2').html()
-             .replace(/{app_id}/g, app_id)
-             .replace(/{app_name}/g, infos.manifest.name)
-             .replace('{app_description}', infos.manifest.description[default_lang] || infos.manifest.description["en"])
-             .replace(/{app_git}/g, infos.git.url)
-             .replace('{app_branch}', infos.git.branch)
-             .replace('{app_level}', infos.level)
-             .replace('{app_quality}', app_quality)
-             .replace('{app_update}', timeConverter(infos.lastUpdate))
-             .replace('{app_install_css_style}', app_install_css_style);
-
-            // Handle the maintainer info
-            if (infos.maintained == false)
-            {
-               html = html
-                 .replace('{maintained_state}', 'unmaintained')
-                 .replace('{maintained_icon}', 'warning-sign')
-                 .replace('{app_maintainer}', "Unmaintained")
-                 .replace('{maintained_help}', "This package is currently unmaintained. Feel free to propose yourself as the new maintainer !");
-            }
-            else {
-                html = html
-                 .replace('{maintained_state}', 'maintained')
-                 .replace('{maintained_icon}', 'user')
-                 .replace('{maintained_help}', "Current maintainer of this package");
-
-                if ((infos.manifest.developer) && (infos.manifest.developer.name)) {
-                    html = html.replace('{app_maintainer}', infos.manifest.developer.name);
-                }
-                else if ((infos.manifest.maintainer) && (infos.manifest.maintainer.name)) {
-                    html = html.replace('{app_maintainer}', infos.manifest.maintainer.name);
-                }
-                else {
-                    html = html.replace('{app_maintainer}', "???");
-                }
-            }
-
-            // Fill the template
-            $('#app-cards-list').append(html);
-            $('.app-card_'+ app_id).attr('id', 'app-card_'+ app_id);
-            if (app_badge !== null) {
-                 $('.app-card_'+ app_id + ' .app-title').append(' <span class="label label-'+app_badge_css_style+'">'+app_badge+'</span>');
-            }
-            if (typeof(infos.category) === "string") {
-                 category = data["categories"].find(function(el) { return el.id == infos.category; });
-                 if (typeof(category) !== "undefined")
-                 {
-                    display = category["title"][default_lang] || category["title"]["en"];
-                    $('.app-card_'+ app_id + ' .app-title').append(' <span class="label label-default">'+display.toLowerCase()+'</span>');
-                 }
-            }
-        });
-
-        filter();
-    });
-    //=================================================
 });
 </script>
diff --git a/themes/yunohost-docs/css/custom.css b/themes/yunohost-docs/css/custom.css
index c62c3ab6..8392158b 100644
--- a/themes/yunohost-docs/css/custom.css
+++ b/themes/yunohost-docs/css/custom.css
@@ -261,3 +261,86 @@ body .off-canvas .learn-sidebar .searchbox input {
     background-color: #39b3d7;
     border-color: #269abc;
 }
+
+
+
+/*=================================================
+ App catalog
+=================================================*/
+#filter-app-icon {
+    padding: 6px 12px;
+    margin-right: -2px;
+    background-color: #f0f0f0;
+}
+
+#filter-app-cards, #app-cards-list {
+    width:100%;
+}
+
+#app-cards-list:after {
+    content:'';
+    display:block;
+    clear: both;
+}
+
+#app-cards-list .app-card {
+    margin-bottom:30px;
+    width:28%;
+    float:left;
+    min-height: 1px;
+    margin-right: 15px;
+    margin-left: 15px;
+    border-radius: 3px;
+    position: relative;
+    height: 230px;
+}
+
+#app-cards-list .app-title {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 1.2em;
+    font-weight: 700;
+    line-height: 1.1;
+    color: black;
+    padding: 1rem 1rem;
+    padding-bottom: 0;
+}
+
+#app-cards-list .app-title .label {
+    font-size: 0.5em;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0.5em 0.6em;
+    padding-bottom: 0.3em;
+}
+
+#app-cards-list .app-descr {
+    height:120px;
+    overflow: hidden;
+    padding: 0.2rem 1rem;
+}
+
+#app-cards-list .app-footer {
+   width:100%;
+   position: absolute;
+   bottom: 0;
+}
+
+#app-cards-list .app-buttons {
+    border-top: 0.05rem solid #ddd;
+    width:100%;
+}
+#app-cards-list .app-buttons > .btn {
+    border: 0;
+    font-size: 0.9em;
+    line-height: 1.58;
+}
+
+#app-cards-list .app-buttons > .btn-default {
+    color: #222;
+}
+
+#app-cards-list .app-buttons > .btn:first-child {
+    border-right: 0.1rem solid #ddd;
+}
+