feat:homepage

public/articles/index.json

+["test/article-test.json", "nested/article-nested.json"]

public/articles/nested/article-nested.json

+{
+    "title": "Kuadrado Software mange des burgers",
+    "date": "1954/02/25",
+    "subtitle": "Ouaiis on est vraiment contents",
+    "content_text": "<file>my-content-text.txt",
+    "images": ["screen_1.png", "screen_2.png", "screen_3.png", "screen_4.png"]
+}

public/articles/nested/my-content-text.txt

+Hahahaha eh ouais c'est encore nous.
+Ben ce coup ci on voulait vous dire que ce soir on va commander des burger, et qu'on va se mater une petite prod hollywoodienne qui devrait nous faire oublier toute cette merde de Covid etc. Enfin bref.
+Bon ben du coup je sais pas, allez bon ap quoi. Ouais salut
+Ok
+
+Ben quoi, ouais jsais pas. Ben non on n'a pas de masque on tient pas à crever asphyxiés.
+Nique le capitalisme. Qu'il crève dans son jus moisi et qu'il revienne pas nous emmerder.
+
+Donc ouais on va en rajouter encore un peu. Donc voilà ben ça fait plus de mots du coup.
+
+Haha et ben tu sais pas ?
+Non ?
+Eh ben rien. 
+Mais ça fait des lignes, comme ça je vois ce qui se passe pour un long article.
\ No newline at end of file

public/articles/test/article-test.json

+{
+    "title": "Kuadrado Software ouvre ses portes",
+    "date": "2032/08/25",
+    "subtitle": "Ouaiis on est vraiment contents",
+    "content_text": "<file>content-text.txt",
+    "images": [
+        "screen_l1_1.jpg",
+        "screen_l1_2.jpg",
+        "screen_l2.jpg",
+        "screen_l3.jpg",
+        "screen_secret.jpg"
+    ]
+}

public/articles/test/content-text.txt

+Et ben voilà on est bien contents d'ouvrir nos portes. Nique sa mère le Covid, on lui pisse à la raie.
+Eh ouais, ben ouais.
+Alors voilà on est sympa, puis en plus on est des lapins. Faut bien le dire...
+
+Qu'est-ce qu'on pourrait dire d'autre ? Ben chais pas, on fait des jeux, puis des fois on se gueule dessus, même que les voisins doivent nous prendre pour des cassos des fois... M'enfin.
+
+Ben voilà allez salut !
+hop un petit lien http://example.com||ici
\ No newline at end of file

public/education/education.js

@@ -18,6 +18,7 @@ const { server_url } = require("./config");
 
 module.exports = {
     images_url: `${server_url}/assets/images`,
+    articles_url: `${server_url}/articles`,
 };
 
 },{"./config":1}],3:[function(require,module,exports){
@@ -199,7 +200,7 @@ class GameStudioClub {
                 },
                 {
                     tag: "div",
-                    class: "section-contents",
+                    class: "section-contents page-contents-center",
                     contents: [
                         {
                             tag: "div",
@@ -513,7 +514,7 @@ class Popularization {
                 },
                 {
                     tag: "div",
-                    class: "section-contents",
+                    class: "section-contents page-contents-center",
                     contents: [
                         {
                             tag: "div",
@@ -680,10 +681,10 @@ class EducationPage {
                     tag: "div",
                     class: "page-header",
                     contents: [
-                        { tag: "h1", contents: "<blue>Pédagogie</blue>" },
+                        { tag: "h1", contents: "Pédagogie", class: "page-contents-center" },
                         {
                             tag: "p",
-                            class: "edu-philo",
+                            class: "page-contents-center",
                             contents:
                                 "Démystifier et s'approprier la technologie par le partage de connaissances.",
                         },

public/games/games.js

@@ -18,6 +18,7 @@ const { server_url } = require("./config");
 
 module.exports = {
     images_url: `${server_url}/assets/images`,
+    articles_url: `${server_url}/articles`,
 };
 
 },{"./config":1}],3:[function(require,module,exports){
@@ -119,8 +120,11 @@ class GamesPage {
             tag: "div",
             contents: [
                 {
-                    tag: "h1",
-                    contents: "Games",
+                    tag: "div",
+                    class: "page-header",
+                    contents: [
+                        { tag: "h1", contents: "Jeux", class: "page-contents-center" }
+                    ],
                 },
             ],
         };

public/main.js

@@ -18,11 +18,298 @@ const { server_url } = require("./config");
 
 module.exports = {
     images_url: `${server_url}/assets/images`,
+    articles_url: `${server_url}/articles`,
 };
 
 },{"./config":1}],3:[function(require,module,exports){
 "use strict";
 
+const { articles_url } = require("../../constants");
+const { fetchjson, fetchtext } = require("../lib/fetch");
+const objectHtmlRenderer = require("../lib/object-html-renderer");
+const ImageCarousel = require("./image-carousel");
+
+class Articles {
+    constructor() {
+        this.id = performance.now().toString();
+        this.state = {
+            loading: true,
+            articles: [],
+            showArticleIndex: -1,
+        };
+        this.loadArticles();
+    }
+
+    loadArticles() {
+        fetchjson(`${articles_url}/index.json`)
+            .then(json => {
+                Promise.all(
+                    json.map(async articlePath => {
+                        const art = await fetchjson(`${articles_url}/${articlePath}`);
+                        const tmpSplit = articlePath.split("/");
+                        tmpSplit.pop();
+                        const absArtPath = `${articles_url}/${tmpSplit.join("/")}`;
+                        return Object.assign(art, { path: absArtPath });
+                    })
+                )
+                    .then(articles => this.setArticles(articles))
+                    .catch(e => console.log(e));
+            })
+            .catch(e => console.log(e));
+    }
+
+    async setArticles(articles) {
+        for (const article of articles) {
+            if (article.content_text.indexOf("<file>") !== -1) {
+                const txtPath = article.content_text.replace("<file>", "");
+                const txtValue = await fetchtext(`${article.path}/${txtPath}`);
+                article.content_text = txtValue;
+            }
+            article.date = new Date(article.date);
+        }
+        this.state.articles = articles.sort((a, b) => a.date - b.date);
+        this.state.showArticleIndex = this.state.articles.length - 1;
+        this.refresh();
+    }
+
+    refresh() {
+        objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), {
+            mode: "replace",
+        });
+    }
+
+    getArticleDate(date) {
+        return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+    }
+
+    getArticleBody(text) {
+        return text
+            .split(" ")
+            .map(word => {
+                if (word.includes("http://") || word.includes("https://")) {
+                    const splitword = word.split("||");
+                    const href = splitword[0];
+                    const text = splitword.length > 1 ? splitword[1] : href;
+                    return `<a href=${href} target="_blank">${text}</a>`;
+                } else return word;
+            })
+            .join(" ")
+            .replaceAll("\n", "<br/>");
+    }
+
+    renderArticle(articleData) {
+        return {
+            tag: "article",
+            contents: [
+                {
+                    tag: "div",
+                    class: "date",
+                    contents: [{ tag: "span", contents: this.getArticleDate(articleData.date) }],
+                },
+                {
+                    tag: "div",
+                    class: "title",
+                    contents: [
+                        {
+                            tag: "h3",
+                            contents: articleData.title,
+                        },
+                    ],
+                },
+                {
+                    tag: "div",
+                    class: "subtitle",
+                    contents: [
+                        {
+                            tag: "strong",
+                            contents: articleData.subtitle,
+                        },
+                    ],
+                },
+                {
+                    tag: "div",
+                    class: "body",
+                    contents: [
+                        {
+                            tag: "p",
+                            contents: this.getArticleBody(articleData.content_text),
+                        },
+                    ],
+                },
+                new ImageCarousel({
+                    images: articleData.images.map(img => `${articleData.path}/images/${img}`),
+                }).render(),
+            ],
+        };
+    }
+
+    renderArticlePlaceholder() {
+        return {
+            tag: "article",
+            class: "article-placeholder page-contents-center",
+            contents: [
+                { tag: "div", class: "date" },
+                { tag: "div", class: "title" },
+                { tag: "div", class: "subtitle" },
+                { tag: "div", class: "body" },
+                { tag: "div", class: "image" },
+            ],
+        };
+    }
+
+    handleChangeArticle(dir) {
+        let { showArticleIndex, articles } = this.state;
+        showArticleIndex =
+            dir === "prev"
+                ? showArticleIndex - 1 >= 0
+                    ? showArticleIndex - 1
+                    : 0
+                : showArticleIndex + 1 <= articles.length - 1
+                ? showArticleIndex + 1
+                : articles.length - 1;
+        this.state.showArticleIndex = showArticleIndex;
+        this.refresh();
+    }
+
+    render() {
+        const { articles, showArticleIndex } = this.state,
+            showNext = showArticleIndex < articles.length - 1,
+            showPrev = showArticleIndex > 0;
+        return {
+            tag: "div",
+            id: this.id,
+            class: "articles-displayer page-contents-center",
+            contents:
+                articles.length > 0
+                    ? [
+                          {
+                              tag: "button",
+                              class: `prev-btn ${!showPrev ? "disabled" : "active"}`,
+                              onclick: this.handleChangeArticle.bind(this, "prev"),
+                          },
+                          this.renderArticle(articles[showArticleIndex]),
+                          {
+                              tag: "button",
+                              class: `next-btn ${!showNext ? "disabled" : "active"}`,
+                              onclick: this.handleChangeArticle.bind(this, "next"),
+                          },
+                      ]
+                    : [this.renderArticlePlaceholder()],
+        };
+    }
+}
+
+module.exports = Articles;
+
+},{"../../constants":2,"../lib/fetch":7,"../lib/object-html-renderer":8,"./image-carousel":4}],4:[function(require,module,exports){
+"use strict";
+
+const objectHtmlRenderer = require("../lib/object-html-renderer");
+
+class ImageCarousel {
+    constructor(props) {
+        this.props = props;
+        this.id = performance.now();
+        this.state = {
+            showImageIndex: 0,
+        };
+        this.RUN_INTERVAL = 5000;
+        this.run();
+    }
+
+    run() {
+        this.runningInterval = setInterval(() => {
+            let { showImageIndex } = this.state;
+            const { images } = this.props;
+            this.state.showImageIndex = showImageIndex < images.length - 1 ? ++showImageIndex : 0;
+            this.refreshImage();
+        }, this.RUN_INTERVAL);
+    }
+
+    setImageIndex(i) {
+        clearInterval(this.runningInterval);
+        this.state.showImageIndex = i;
+        this.refreshImage();
+    }
+
+    refreshImage() {
+        objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), {
+            mode: "replace",
+        });
+    }
+
+    render() {
+        const { showImageIndex } = this.state;
+        const { images } = this.props;
+        return {
+            tag: "div",
+            id: this.id,
+            class: "image-carousel",
+            contents: [
+                { tag: "img", src: images[showImageIndex] },
+                {
+                    tag: "div",
+                    class: "carousel-bullets",
+                    contents: images.map((_, i) => {
+                        const active = showImageIndex === i;
+                        return {
+                            tag: "span",
+                            class: `bullet ${active ? "active" : ""}`,
+                            onclick: this.setImageIndex.bind(this, i),
+                        };
+                    }),
+                },
+            ],
+        };
+    }
+}
+
+module.exports = ImageCarousel;
+
+},{"../lib/object-html-renderer":8}],5:[function(require,module,exports){
+"use strict";
+
+const { images_url } = require("../../constants");
+
+class ThemeCard {
+    constructor(props) {
+        this.props = props;
+    }
+
+    render() {
+        return {
+            tag: "a",
+            class: "theme-card",
+            href: this.props.href,
+            contents: [
+                {
+                    tag: "div",
+                    class: "card-img",
+                    contents: [{ tag: "img", src: `${images_url}/${this.props.img}` }],
+                },
+                {
+                    tag: "div",
+                    class: "card-title",
+                    contents: [{ tag: "h2", class: "section-title", contents: this.props.title }],
+                },
+                {
+                    tag: "div",
+                    class: "card-description",
+                    contents: [{ tag: "p", contents: this.props.description }],
+                },
+            ],
+        };
+    }
+}
+
+module.exports = ThemeCard;
+
+},{"../../constants":2}],6:[function(require,module,exports){
+"use strict";
+
+const Articles = require("./home-page-components/articles");
+const ThemeCard = require("./home-page-components/theme-card");
+
 class HomePage {
     constructor(args) {
         Object.assign(this, args);
@@ -31,10 +318,57 @@ class HomePage {
     render() {
         return {
             tag: "div",
+            id: "home-page",
             contents: [
                 {
-                    tag: "h1",
-                    contents: "Kuadrado Software",
+                    tag: "div",
+                    class: "page-header",
+                    contents: [
+                        { tag: "h1", contents: "Kuadrado Software", class: "page-contents-center" },
+                        {
+                            tag: "p",
+                            class: "page-contents-center",
+                            contents: `<b>Kvadrata rado</b> veut dire "roue carrée" en Esperanto, c'est le symbole que nous avons choisi pour Kuadrado 
+                            pour dire qu'on aime bien fabriquer les trucs nous même, avec des briques aussi élémentaires que possible, 
+                            pour le plaisir de les maîtriser et de les comprendre. Quitte parfois à réinventer un peu la roue.
+                            `,
+                        },
+                    ],
+                },
+                {
+                    tag: "section",
+                    class: "page-contents-center",
+                    contents: [
+                        { tag: "h2", contents: "Actu", class: "section-title bg-blue" },
+                        new Articles().render(),
+                    ],
+                },
+                {
+                    tag: "section",
+                    class: "page-contents-center grid-3",
+                    contents: [
+                        {
+                            title: "Jeux",
+                            img: "screen_fantom_quest.jpg",
+                            href: "/games/",
+                            description:
+                                "Toutes nos créations vidéoludiques, jeux web et jeux PC, projets en cours, c'est par ici que ça se passe.",
+                        },
+                        {
+                            title: "Software",
+                            img: "learning_theme_coding.png",
+                            href: "/software-development/",
+                            description:
+                                "Des fois quand on a besoin d'un outil, on le fabrique nous même (si ça nous amuse) ! Retrouvez les projets en détail.",
+                        },
+                        {
+                            title: "Pédagogie",
+                            img: "popularization_banner.png",
+                            href: "/education/",
+                            description:
+                                "La pédagogie est une arme puissante pour faire tomber les barrières entre les gens et la technologie, et nous sommes bien décidés à en faire usage !",
+                        },
+                    ].map(cardProps => new ThemeCard(cardProps).render()),
                 },
             ],
         };
@@ -43,7 +377,32 @@ class HomePage {
 
 module.exports = HomePage;
 
-},{}],4:[function(require,module,exports){
+},{"./home-page-components/articles":3,"./home-page-components/theme-card":5}],7:[function(require,module,exports){
+"use strict";
+
+function fetchjson(url) {
+    return new Promise((resolve, reject) => {
+        fetch(url)
+            .then(r => r.json())
+            .then(r => resolve(r))
+            .catch(e => reject(e));
+    });
+};
+
+function fetchtext(url) {
+    return new Promise((resolve, reject) => {
+        fetch(url)
+            .then(r => r.text())
+            .then(r => resolve(r))
+            .catch(e => reject(e));
+    });
+};
+
+module.exports = {
+    fetchjson, fetchtext
+}
+
+},{}],8:[function(require,module,exports){
 "use strict";
 
 module.exports = {
@@ -129,7 +488,7 @@ module.exports = {
     },
 };
 
-},{}],5:[function(require,module,exports){
+},{}],9:[function(require,module,exports){
 "use strict";
 
 const HomePage = require("./homepage");
@@ -137,7 +496,7 @@ const runPage = require("./run-page");
 
 runPage(HomePage);
 
-},{"./homepage":3,"./run-page":6}],6:[function(require,module,exports){
+},{"./homepage":6,"./run-page":10}],10:[function(require,module,exports){
 "use strict";
 
 const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -149,7 +508,7 @@ module.exports = function runPage(PageComponent) {
     objectHtmlRenderer.renderCycle();
 };
 
-},{"./lib/object-html-renderer":4,"./template/template":8}],7:[function(require,module,exports){
+},{"./lib/object-html-renderer":8,"./template/template":12}],11:[function(require,module,exports){
 "use strict";
 
 const { images_url } = require("../../../constants");
@@ -255,7 +614,7 @@ class NavBar {
 
 module.exports = NavBar;
 
-},{"../../../constants":2}],8:[function(require,module,exports){
+},{"../../../constants":2}],12:[function(require,module,exports){
 "use strict";
 
 const { images_url } = require("../../constants");
@@ -314,4 +673,4 @@ class Template {
 
 module.exports = Template;
 
-},{"../../constants":2,"./components/navbar":7}]},{},[5]);
+},{"../../constants":2,"./components/navbar":11}]},{},[9]);

public/software-development/software-development.js

@@ -18,6 +18,7 @@ const { server_url } = require("./config");
 
 module.exports = {
     images_url: `${server_url}/assets/images`,
+    articles_url: `${server_url}/articles`,
 };
 
 },{"./config":1}],3:[function(require,module,exports){
@@ -119,8 +120,9 @@ class SoftwareDevelopment {
             tag: "div",
             contents: [
                 {
-                    tag: "h1",
-                    contents: "Software",
+                    tag: "div",
+                    class: "page-header",
+                    contents: [{ tag: "h1", contents: "Software", class: "page-contents-center" }],
                 },
             ],
         };

public/style/homepage.css

+/* Error: Undefined variable.
+ *    ,
+ * 25 |                 color: $medium_grey;
+ *    |                        ^^^^^^^^^^^^
+ *    '
+ *   src/homepage.scss 25:24  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Undefined variable.\a    \2577 \a 25 \2502                  color: $medium_grey;\a    \2502                         ^^^^^^^^^^^^\a    \2575 \a   src/homepage.scss 25:24  root stylesheet";
+}