update software articles

public/articles/software/index.json

 {
-    "articles": ["watergun", "website-template", "make_frames"]
-}
+    "articles": [
+        "mentalo",
+        "object-to-html-renderer",
+        "make_frames",
+        "watergun"
+    ]
+}
\ No newline at end of file

public/articles/software/mentalo/mentalo.json

+{
+    "title": "Mentalo",
+    "date": "2021/07/18",
+    "subtitle": "Une application pour créer des jeux simples",
+    "body": "<file>mentalo.txt",
+    "technical": {
+        "stack": [
+            "Javascript",
+            "Nodejs",
+            "Sass"
+        ],
+        "license": "GNU GPL v3",
+        "repository": "https://gitlab.com/kuadrado-software/mentalo",
+        "version": "0.1.2"
+    },
+    "images": [
+        "mental-eau.png"
+    ]
+}
\ No newline at end of file

public/articles/software/mentalo/mentalo.txt

+Mentalo est une application éducative qui permet de construire un raisonnement logique à travers la création de jeux simples basés sur des écrans statiques et des choix texte.
+Sortie d'une version beta prévue pour Septembre 2021.
\ No newline at end of file

public/articles/software/object-to-html-renderer/object-to-html-renderer.json

+{
+    "title": "Object to HTML Renderer",
+    "date": "2021/07/18",
+    "subtitle": "Un moteur de rendu web dynamique",
+    "body": "<file>object-to-html-renderer.txt",
+    "technical": {
+        "stack": [
+            "Javascript",
+            "Nodejs"
+        ],
+        "license": "LGPL-3.0",
+        "repository": "https://gitlab.com/kuadrado-software/object-to-html-renderer",
+        "version": "1.0.3"
+    },
+    "images": [
+        "obj-to-html-logo.png"
+    ]
+}
\ No newline at end of file

public/articles/software/object-to-html-renderer/object-to-html-renderer.txt

+Une librairie minimaliste et sans aucune dépendances pour faire du rendu web html dynamique avec du Javascript.
\ No newline at end of file

public/articles/software/website-template/website-template.json

-{
-    "title": "Template web",
-    "date": "2021/01/28",
-    "subtitle": "Modèle de site statique simple et dynamique",
-    "body": "<file>website-template.txt",
-    "technical": {
-        "stack": ["Javascript", "Browserify", "Nginx", "Docker"],
-        "license": "MIT",
-        "repository": "https://gitlab.com/kuadrado-software/kuadrado-website-template",
-        "version": "0.1.0"
-    },
-    "images": ["kuadrado-template-screen.png"]
-}

public/articles/software/website-template/website-template.txt

-Basé sur les mêmes mécanismes de rendu dynamique que pour Watergun, ce modèle de site web propose une base réutilisable pour n'importe quel site statique simple et moderne.
-
-Ce modèle est celui qui a servi pour le présent site.
\ No newline at end of file

src/lib/article-utils.js

@@ -48,7 +48,7 @@ function populateArticles(articles) {
                 return article;
             })
         )
-            .then(completeArticles => resolve(completeArticles.sort((a, b) => a.date - b.date)))
+            .then(completeArticles => resolve(completeArticles.sort((a, b) => b.date - a.date)))
             .catch(e => reject(e));
     });
 }

src/pages/software-development/components/software-articles.js

@@ -25,10 +25,12 @@ class SoftwareArticle {
                     property: "name",
                 },
                 {
-                    tag: "time",
-                    class: "software-date",
-                    contents: getArticleDate(date),
-                    property: "datePublished",
+                    tag: "div", class: "software-image",
+                    contents: [
+                        {
+                            tag: "img", src: `${path}/images/${images[0]}`
+                        }
+                    ]
                 },
                 {
                     tag: "h3",
@@ -42,7 +44,6 @@ class SoftwareArticle {
                     contents: getArticleBody(body),
                     property: "description",
                 },
-                new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(),
                 {
                     tag: "div",
                     class: "software-technical",

src/pages/software-development/software-development.scss

@@ -3,43 +3,47 @@
         margin: 20px auto 50px;
         article.software-article {
             display: grid;
-            grid-template-columns: 1fr 0.7fr;
-            margin: 0 0 30px;
+            grid-template-columns: auto 1fr;
+            margin: 0 0 50px;
             gap: 10px 30px;
+
             .software-title {
-                grid-column: 1 / span 2;
+                grid-column: 2;
                 color: $light_2;
                 margin: 0;
                 padding: 10px;
             }
-            .software-date {
-                margin: 0;
-                color: $light_1;
-                font-style: italic;
-                text-align: right;
-                color: $medium_grey;
-                font-style: italic;
-                font-size: 12px;
-            }
 
             .software-subtitle {
-                grid-column: 1;
+                grid-column: 2;
                 margin: 10px;
                 color: $medium_grey;
             }
 
             .software-description {
-                grid-column: 1;
+                grid-column: 2;
                 text-align: justify;
                 margin: 10px;
             }
-            .image-carousel {
-                grid-column: 2;
-                grid-row: 2 / span 6;
-                min-height: 250px;
+
+            .software-image {
+                padding: 20px;
+                background-color: black;
+                grid-column: 1;
+                grid-row: 1 / span 3;
+                @include flex-center;
+                width: 200px;
+                height: 200px;
+                overflow: hidden;
+                border-radius: 100%;
+                img {
+                    max-width: 100%;
+                    max-height: 400px;
+                }
             }
+
             .software-technical {
-                grid-column: 1;
+                grid-column: 1 / span 2;
                 h2 {
                     color: $medium_grey;
                     margin: 0 10px;
@@ -91,17 +95,18 @@
                 }
             }
             @media screen and (max-width: $screen_l) {
-                grid-template-columns: 1fr;
                 .software-title {
-                    grid-column: 1;
+                    display: flex;
+                    align-items: center;
                 }
-                .image-carousel {
-                    grid-column: 1;
-                    grid-row: 2;
-                    height: 200px;
+                .software-subtitle,
+                .software-description {
+                    grid-column: 1 / span 2;
                 }
-                .software-technical {
-                    grid-column: 1;
+                .software-image {
+                    width: 100px;
+                    height: 100px;
+                    grid-row: 1;
                 }
             }
         }