Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
main.js 41 KiB
Newer Older
  • Learn to ignore specific revisions
  • (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
    module.exports = {
        build: {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
            protected_dirs: ["assets", "style", "views", "standard"],
    
            default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"],
        },
    };
    
    },{}],2:[function(require,module,exports){
    module.exports = {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
        images_url: `/assets/images/`,
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    },{}],3:[function(require,module,exports){
    
    "use strict";
    
    module.exports = {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
        register_key: "objectToHtmlRender",
    
        /**
         * Register "this" as a window scope accessible variable named by the given key, or default.
         * @param {String} key 
         */
        register(key) {
            const register_key = key || this.register_key;
            window[register_key] = this;
        },
    
        /**
         * This must be called before any other method in order to initialize the lib.
         * It provides the root of the rendering cycle as a Javascript object.
         * @param {Object} renderCycleRoot A JS component with a render method.
         */
    
        setRenderCycleRoot(renderCycleRoot) {
            this.renderCycleRoot = renderCycleRoot;
        },
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
        event_name: "objtohtml-render-cycle",
    
        /**
         * Set a custom event name for the event that is trigger on render cycle.
         * Default is "objtohtml-render-cycle".
         * @param {String} evt_name 
         */
        setEventName(evt_name) {
            this.event_name = evt_name;
        },
    
        /**
         * This is the core agorithm that read an javascript Object and convert it into an HTML element.
         * @param {Object} obj The object representing the html element must be formatted like:
         * {
         *      tag: String // The name of the html tag, Any valid html tag should work. div, section, br, ul, li...
         *      xmlns: String // This can replace the tag key if the element is an element with a namespace URI, for example an <svg> tag.
         *                      See https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS for more information
         *      style_rules: Object // a object providing css attributes. The attributes names must be in JS syntax,
         *                              like maxHeight: "500px", backgrouncColor: "#ff2d56",  margin: 0,  etc.
         *      contents: Array or String // This reprensents the contents that will be nested in the created html element.
         *                                   <div>{contents}</div>
         *                                   The contents can be an array of other objects reprenting elements (with tag, contents, etc)
         *                                   or it can be a simple string.
         *      // All other attributes will be parsed as html attributes. They can be anything like onclick, href, onchange, title...
         *      // or they can also define custom html5 attributes, like data, my_custom_attr or anything.
         * }
         * @returns {HTMLElement} The output html node.
         */
        objectToHtml(obj) {
            if (!obj) return document.createElement("span"); // in case of invalid input, don't block the whole process.
            const objectToHtml = this.objectToHtml.bind(this);
            const { tag, xmlns } = obj;
            const node = xmlns !== undefined ? document.createElementNS(xmlns, tag) : document.createElement(tag);
            const excludeKeys = ["tag", "contents", "style_rules", "state", "xmlns"];
    
    
            Object.keys(obj)
                .filter(attr => !excludeKeys.includes(attr))
                .forEach(attr => {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    switch (attr) {
                        case "class":
                            node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
                            break;
                        case "on_render":
                            if (!obj.id) {
                                node.id = `${btoa(JSON.stringify(obj).slice(0, 127)).replace(/\=/g, '')}${window.performance.now()}`;
                            }
                            if (typeof obj.on_render !== "function") {
                                console.error("The on_render attribute must be a function")
                            } else {
                                this.attach_on_render_callback(node, obj.on_render);
                            }
                            break;
                        default:
                            if (xmlns !== undefined) {
                                node.setAttributeNS(null, attr, obj[attr])
                            } else {
                                node[attr] = obj[attr];
                            }
    
                    }
                });
            if (obj.contents && typeof obj.contents === "string") {
                node.innerHTML = obj.contents;
            } else {
                obj.contents &&
                    obj.contents.length > 0 &&
                    obj.contents.forEach(el => {
                        switch (typeof el) {
                            case "string":
                                node.innerHTML = el;
                                break;
                            case "object":
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                                if (xmlns !== undefined) {
                                    el = Object.assign(el, { xmlns })
                                }
    
                                node.appendChild(objectToHtml(el));
                                break;
                        }
                    });
            }
    
            if (obj.style_rules) {
                Object.keys(obj.style_rules).forEach(rule => {
                    node.style[rule] = obj.style_rules[rule];
                });
            }
    
            return node;
        },
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    
        on_render_callbacks: [],
    
        /**
         * This is called if the on_render attribute of a component is set.
         * @param {HTMLElement} node The created html element
         * @param {Function} callback The callback defined in the js component to render
         */
        attach_on_render_callback(node, callback) {
            const callback_handler = {
                callback: e => {
                    if (e.detail.outputNode === node || e.detail.outputNode.querySelector(`#${node.id}`)) {
                        callback(node);
                        const handler_index = this.on_render_callbacks.indexOf((this.on_render_callbacks.find(cb => cb.node === node)));
                        if (handler_index === -1) {
                            console.warn("A callback was registered for node with id " + node.id + " but callbacck handler is undefined.")
                        } else {
                            window.removeEventListener(this.event_name, this.on_render_callbacks[handler_index].callback)
                            this.on_render_callbacks.splice(handler_index, 1);
                        }
                    }
                },
                node,
            };
    
            const len = this.on_render_callbacks.push(callback_handler);
            window.addEventListener(this.event_name, this.on_render_callbacks[len - 1].callback);
        },
    
        /**
         * If a main element exists in the html document, it will be used as rendering root.
         * If not, it will be created and inserted.
         */
    
        renderCycle: function () {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
            const main_elmt = document.getElementsByTagName("main")[0] || (function () {
                const created_main = document.createElement("main");
                document.body.appendChild(created_main);
                return created_main;
            })();
    
            this.subRender(this.renderCycleRoot.render(), main_elmt, { mode: "replace" });
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    
        /**
         * This method behaves like the renderCycle() method, but rather that starting the rendering cycle from the root component,
        * it can start from any component of the tree. The root component must be given as the first argument, the second argument be
        * be a valid html element in the dom and will be used as the insertion target.
         * @param {Object} object An object providing a render method returning an object representation of the html to insert
         * @param {HTMLElement} htmlNode The htlm element to update
         * @param {Object} options can be used the define the insertion mode, default is set to "append" and can be set to "override",
             * "insert-before" (must be defined along with an insertIndex key (integer)),
             * "adjacent" (must be defined along with an insertLocation key (String)), "replace" or "remove".
             * In case of "remove", the first argument "object" is not used and can be set to null, undefined or {}...
         */
    
        subRender(object, htmlNode, options = { mode: "append" }) {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
            let outputNode = null;
    
            const get_insert = () => {
                outputNode = this.objectToHtml(object);
                return outputNode;
            };
    
    
            switch (options.mode) {
                case "append":
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    htmlNode.appendChild(get_insert());
    
                    break;
                case "override":
                    htmlNode.innerHTML = "";
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    htmlNode.appendChild(get_insert());
    
                    break;
                case "insert-before":
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    htmlNode.insertBefore(get_insert(), htmlNode.childNodes[options.insertIndex]);
    
                    break;
                case "adjacent":
                    /**
                     * options.insertLocation must be one of:
                     *
                     * afterbegin
                     * afterend
                     * beforebegin
                     * beforeend
                     */
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    htmlNode.insertAdjacentHTML(options.insertLocation, get_insert());
    
                    break;
                case "replace":
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    htmlNode.parentNode.replaceChild(get_insert(), htmlNode);
    
                    break;
                case "remove":
                    htmlNode.remove();
                    break;
            }
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
            const evt_name = this.event_name;
            const event = new CustomEvent(evt_name, {
                detail: {
                    inputObject: object,
                    outputNode,
                    insertOptions: options,
                    targetNode: htmlNode,
                }
            });
    
            window.dispatchEvent(event);
    
        },
    };
    },{}],4:[function(require,module,exports){
    "use strict";
    
    class ImageCarousel {
        constructor(props) {
            this.props = props;
            this.id = performance.now();
            this.state = {
                showImageIndex: 0,
            };
            this.RUN_INTERVAL = 5000;
            this.props.images.length > 1 && 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() {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
            obj2htm.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",
                        property: "image",
                        alt: `image carousel ${images[showImageIndex].replace(/\.[A-Za-z]+/, "")}`,
                        src: images[showImageIndex],
                    },
                    images.length > 1 && {
                        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;
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    },{}],5:[function(require,module,exports){
    
    "use strict";
    
    class KuadradoValues {
        render() {
            return {
                tag: "section",
                class: "kuadrado-values",
                contents: [
                    {
                        tag: "div",
                        class: "page-contents-center",
                        contents: [
                            {
                                tag: "h2",
                                contents: "<blue>Éthique</blue>",
                            },
                            {
                                tag: "ul",
                                class: "values-list",
                                contents: [
                                    [
                                        "<emoji>📖</emoji> <blue>Partage des connaissances</blue>",
                                        `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle, 
                                        pour aller plus loin ensemble, le partage du savoir est fondamental.`,
                                    ],
                                    [
                                        "<emoji>💻</emoji> <blue>Logiciels libres et open source</blue>",
                                        `Toutes mes productions numériques, jeux vidéo, web, software, sont 
    
                                        <b><a href="https://fr.wikipedia.org/wiki/Logiciel_libre" target="_blank">libres et open source</a></b>.
    
                                        <br/> ainsi que les outils engagés dans leur fabrication.`,
                                    ],
                                    [
                                        "<emoji>🌿</emoji> <blue>Écologie</blue>",
                                        `Nous vivons une époque ou l'utilisation de la technologie connaît une croissance exponentielle notament
    
                                        à travers internet.
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        <br/>Il est primordial de construire le numérique dans une direction de légèreté et d'économie de 
    
                                        ressources.`,
                                    ],
                                ].map(v => {
                                    const [title, body] = v;
                                    return {
                                        tag: "li",
                                        contents: [
                                            { tag: "h3", contents: title },
                                            { tag: "p", contents: body },
                                        ],
                                    };
                                }),
                            },
                        ],
                    },
                ],
            };
        }
    }
    
    module.exports = KuadradoValues;
    
    },{}],6:[function(require,module,exports){
    "use strict";
    
    const { articles_url } = require("../../constants");
    const ImageCarousel = require("../generic-components/image-carousel");
    const { loadArticles, getArticleDate, getArticleBody } = require("../lib/article-utils");
    
    class NewsArticles {
        constructor() {
            this.id = performance.now().toString();
            this.state = {
                loading: true,
                articles: [],
                showArticleIndex: -1,
            };
            this.loadArticles();
        }
    
        loadArticles() {
            loadArticles(`${articles_url}news`).then(articles => {
                this.state.articles = articles;
                this.state.showArticleIndex = this.state.articles.length - 1;
                this.refresh();
            });
        }
    
        refresh() {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
            obj2htm.subRender(this.render(), document.getElementById(this.id), {
    
                mode: "replace",
            });
        }
    
        renderArticle(articleData) {
            return {
                tag: "article",
                class: `${articleData.images ? "grid-2" : "grid-1"}`,
                typeof: "Article",
                contents: [
                    {
                        tag: "div",
                        class: "date",
                        contents: [
                            {
                                tag: "time",
                                property: "datePublished",
                                contents: getArticleDate(articleData.date),
                            },
                        ],
                    },
                    {
                        tag: "div",
                        class: "title",
                        contents: [
                            {
                                tag: "h3",
                                contents: articleData.title,
                                property: "headline",
                            },
                        ],
                    },
                    {
                        tag: "div",
                        class: "subtitle",
                        contents: [
                            {
                                tag: "strong",
                                contents: articleData.subtitle,
                                property: "alternativeHeadline",
                            },
                        ],
                    },
                    {
                        tag: "div",
                        class: "body",
                        contents: [
                            {
                                tag: "p",
                                contents: getArticleBody(articleData.body),
                                property: "articleBody",
                            },
                        ],
                    },
                    articleData.images &&
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    new ImageCarousel({
                        images: articleData.images.map(img => `${articleData.path}/images/${img}`),
                    }).render(),
    
                ],
            };
        }
    
        renderArticlePlaceholder() {
            return {
                tag: "article",
                class: "article-placeholder",
                contents: [
                    { tag: "div", class: "date" },
                    { tag: "div", class: "title" },
                    { tag: "div", class: "subtitle" },
                    { tag: "div", class: "body" },
                    { tag: "div", class: "image-carousel" },
                ],
            };
        }
    
        handleChangeArticle(dir) {
            let { showArticleIndex, articles } = this.state;
            showArticleIndex =
                dir === "prev"
                    ? showArticleIndex - 1 >= 0
                        ? showArticleIndex - 1
                        : 0
                    : showArticleIndex + 1 <= articles.length - 1
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                        ? 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
                        ? [
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                            this.renderArticle(articles[showArticleIndex]),
                            {
                                tag: "div",
                                class: "prev-next-buttons",
                                contents: [
                                    {
                                        tag: "button",
                                        class: `prev-btn ${!showPrev ? "disabled" : "active"}`,
                                        contents: "Précédent",
                                        onclick: this.handleChangeArticle.bind(this, "prev"),
                                    },
                                    {
                                        tag: "button",
                                        class: `next-btn ${!showNext ? "disabled" : "active"}`,
                                        contents: "Suivant",
                                        onclick: this.handleChangeArticle.bind(this, "next"),
                                    },
                                ],
                            },
                        ]
    
                        : [this.renderArticlePlaceholder()],
            };
        }
    }
    
    module.exports = NewsArticles;
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    },{"../../constants":2,"../generic-components/image-carousel":4,"../lib/article-utils":10}],7:[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", alt:`thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`,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}],8:[function(require,module,exports){
    "use strict";
    
    class WhoAmI {
        render() {
            return {
                tag: "section",
                id: "whoami",
                contents: [
                    {
                        tag: "div",
                        class: "page-contents-center",
                        contents: [
                            {
                                tag: "h2",
                                contents: "Qui sommes-nous-je ?",
                            },
                            {
                                tag: "div",
                                class: "presentation-card",
                                contents: [
                                    {
                                        tag: "div",
                                        class: "header",
                                        contents: [
                                            {
                                                tag: "div",
                                                class: "pic",
                                                contents: [
                                                    {
                                                        tag: "img",
                                                        alt:
                                                            "portrait Pierre Jarriges pixel art by Lucie Ventadour",
                                                        src: "assets/images/pijar_profile_lt_square.png",
                                                    },
                                                ],
                                            },
                                            {
                                                tag: "div",
                                                class: "header-text",
                                                contents: [
                                                    {
                                                        tag: "h3",
                                                        contents: "Pierre Jarriges",
                                                    },
                                                    {
                                                        tag: "h4",
                                                        contents:
                                                            "Artiste, auteur BD, compositeur, développeur informatique",
                                                    },
                                                    {
                                                        tag: "strong",
                                                        contents:
                                                            "Créateur de <blue>Kuadrado Software</blue> en Février 2021.",
                                                    },
                                                ],
                                            },
                                        ],
                                    },
                                    {
                                        tag: "div",
                                        class: "body",
                                        contents: [
                                            {
                                                tag: "p",
                                                contents: `
    
                                                “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer différents axes ensembles :
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                <br /><br />
    
                                                <emoji>🎮</emoji> D'une part exprimer une passion en créant des <b>jeux vidéo indépendants</b> sur un modèle léger et artisanal dans 
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                une identité artistique forte, et de les distribuer sans compromission par une logique du marché ; 
                                                en effet, partir à la conquête du marché à dos de startup n'est pas l'objectif de Kuadrado Software. Il s'agit 
                                                avant tout de se donner les moyens de partager avec le monde une idée de liberté, de partage et de plaisir de 
                                                créer des choses simples.
                                                <br /><br />
    
                                                <emoji>💡</emoji> D'autre part il s'agit aussi de porter un <b>projet pédagogique</b> autour de la création de jeu vidéo, et 
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                plus largement de la vulgarisation numérique. Le partage de connaissances et l'apprentissage collectif étant pour 
                                                moi l'instrument le plus efficace de lutte contre l'élitisme, contre le cloisonnement face à la technologie 
                                                (et donc à sa surconsommation), et tout simplement un moyen d'ouverture vers les autres.
                                                <br /><br />
                                                À l'heure d'aujourd'hui Kuadrado Software est construit sur un modèle d'auto-entreprise. 
                                                <br />
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                Cependant le but n'est pas de tout développer seul, il s'agit bien de pouvoir à terme rassembler plusieurs énergies 
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                dans le même état d'esprit, former des équipes de travail et de création, et s'inscrire dans un tissu 
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                local de savoir-faire, tout en gardant un modèle d'entreprise basé sur l'indépendance, afin de rester aussi léger, libéral, 
                                                et modulaire que possible.”
    
                                                `,
                                            },
                                        ],
                                    },
                                ],
                            },
                        ],
                    },
                ],
            };
        }
    }
    
    module.exports = WhoAmI;
    
    },{}],9:[function(require,module,exports){
    "use strict";
    
    const { images_url } = require("../constants");
    const KuadradoValues = require("./home-page-components/kuadrado-values");
    const NewsArticles = require("./home-page-components/news-articles");
    const ThemeCard = require("./home-page-components/theme-card");
    const WhoAmI = require("./home-page-components/whoami");
    const WebPage = require("./lib/web-page");
    
    class HomePage extends WebPage {
        render() {
            return {
                tag: "div",
                id: "home-page",
                contents: [
                    {
                        tag: "div",
                        class: "page-header",
                        contents: [
                            {
                                tag: "div",
                                class: "big-logo page-contents-center",
                                contents: [
                                    {
                                        tag: "img",
                                        alt: "logo Kuadrado",
                                        src: `${images_url}logo_kuadrado.svg`,
                                    },
                                    {
                                        tag: "img",
                                        class: "logo-text",
                                        alt: "Kuadrado",
                                        src: `${images_url}logo_kuadrado_txt.svg`,
                                    },
                                ],
                            },
                            { tag: "h1", contents: "Kuadrado Software", class: "page-contents-center" },
                            {
                                tag: "p",
                                class: "page-contents-center",
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                                contents: `Studio de création de jeux vidéo basé en Ardèche, Vernoux en Vivarais.<br />Création artisitique numérique | Développement d'outillage logiciel libre et open source | Pédagogie.`,
    
                            },
                            {
                                tag: "ul",
                                class: "philo-bubbles",
                                contents: ["Simplicité", "Légèreté", "Écologie"].map(word => {
                                    return {
                                        tag: "li",
                                        contents: [{ tag: "span", contents: word }],
                                    };
                                }),
                            },
                        ],
                    },
                    {
                        tag: "section",
                        class: "page-contents-center poles",
                        contents: [
                            {
                                title: "Jeux",
                                img: "game_controller.svg",
                                href: "/games/",
                                description:
                                    "Créations vidéoludiques, jeux web et jeux PC, projets en cours.",
                            },
                            {
                                title: "Pédagogie",
                                img: "brain.svg",
                                href: "/education/",
                                description: `S'approprier la technologie par le partage de connaissances.`,
                            },
                            {
                                title: "Software",
                                img: "meca_proc.svg",
                                href: "/software-development/",
                                description: `R&D, projets expérimentaux, web et outillage logiciel`,
                            },
                        ].map(cardProps => new ThemeCard(cardProps).render()),
                    },
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
                    // {
                    //     tag: "section",
                    //     class: "page-philo",
                    //     contents: [
                    //         {
                    //             tag: "p",
                    //             class: "page-contents-center",
                    //             contents: `Travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
                    //         },
                    //     ],
                    // },
                    // {
                    //     tag: "section",
                    //     class: "page-contents-center",
                    //     id:"news",
                    //     contents: [
                    //         { tag: "h2", contents: "Actu", class: "section-title" },
                    //         new NewsArticles().render(),
                    //     ],
                    // },
                    // new KuadradoValues().render(),
                    // new WhoAmI().render(),
    
                ],
            };
        }
    }
    
    module.exports = HomePage;
    
    },{"../constants":2,"./home-page-components/kuadrado-values":5,"./home-page-components/news-articles":6,"./home-page-components/theme-card":7,"./home-page-components/whoami":8,"./lib/web-page":12}],10:[function(require,module,exports){
    "use strict";
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    const { fetch_json_or_error_text } = require("./fetch");
    
    
    function getArticleBody(text) {
        return text.replaceAll("\n", "<br/>");
    }
    
    function getArticleDate(date) {
        return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
    }
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    function loadArticles(category) {
        return fetch_json_or_error_text(`/articles/${category}`)
    
    }
    
    module.exports = {
        loadArticles,
        getArticleBody,
        getArticleDate,
    };
    
    },{"./fetch":11}],11:[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));
        });
    }
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    async function fetch_json_or_error_text(url, options = {}) {
        return new Promise((resolve, reject) => {
            fetch(url, options).then(async res => {
                if (res.status >= 400 && res.status < 600) {
                    reject(await res.text());
                } else {
                    resolve(await res.json());
                }
            })
        })
    }
    
    
    module.exports = {
        fetchjson,
        fetchtext,
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
        fetch_json_or_error_text,
    
    };
    
    },{}],12:[function(require,module,exports){
    "use strict";
    
    class WebPage {
        constructor(args) {
            Object.assign(this, args);
        }
    }
    
    module.exports = WebPage;
    },{}],13:[function(require,module,exports){
    "use strict";
    
    const HomePage = require("./homepage");
    const runPage = require("./run-page");
    
    runPage(HomePage);
    
    },{"./homepage":9,"./run-page":14}],14:[function(require,module,exports){
    "use strict";
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    const renderer = require("object-to-html-renderer")
    
    const Template = require("./template/template");
    
    module.exports = function runPage(PageComponent) {
        const template = new Template({ page: new PageComponent() });
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
        renderer.register("obj2htm")
        obj2htm.setRenderCycleRoot(template);
        obj2htm.renderCycle();
    
    };
    
    },{"./template/template":16,"object-to-html-renderer":3}],15:[function(require,module,exports){
    "use strict";
    
    const { images_url } = require("../../../constants");
    
    const NAV_MENU_ITEMS = [
        { url: "/games/", text: "Jeux" },
        {
            url: "/education/",
            text: "Pédagogie",
            // submenu: [
            //     { url: "/gamedev", text: "Création de jeux vidéo" },
            // ]
        },
        { url: "/software-development/", text: "Software" }
    ];
    
    class NavBar {
        constructor() {
            this.initEventHandlers();
        }
    
        handleBurgerClick() {
            document.getElementById("nav-menu-list").classList.toggle("responsive-show");
        }
    
        initEventHandlers() {
            window.addEventListener("click", event => {
                if (
                    event.target.id !== "nav-menu-list" &&
                    !event.target.classList.contains("burger") &&
                    !event.target.parentNode.classList.contains("burger")
                ) {
                    document.getElementById("nav-menu-list").classList.remove("responsive-show");
                }
            });
        }
    
        renderHome() {
            return {
                tag: "div",
                class: "home",
                contents: [
                    {
                        tag: "a",
                        href: "/",
                        contents: [
                            {
                                tag: "img",
                                alt: "Logo Kuadrado",
                                src: `${images_url}logo_kuadrado.svg`,
                            },
                            {
                                tag: "img",
                                alt: "Kuadrado Software",
                                class: "logo-text",
                                src: `${images_url}logo_kuadrado_txt.svg`,
                            },
                        ],
                    },
                ],
            };
        }
    
        renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
            return {
                tag: "ul",
                id: "nav-menu-list",
                class: isSubmenu ? "submenu" : "",
                contents: menuItemsArray.map(item => {
                    const { url, text, submenu } = item;
                    const href = `${parentUrl}${url}`;
                    return {
                        tag: "li",
                        class: !isSubmenu && window.location.pathname === href ? "active" : "",
                        contents: [
                            {
                                tag: "a",
                                href,
                                contents: text,
                            },
                        ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
                    };
                }),
            };
        }
    
        renderResponsiveBurger() {
            return {
                tag: "div",
                class: "burger",
                onclick: this.handleBurgerClick.bind(this),
                contents: [{ tag: "span", contents: "···" }],
            };
        }
    
        render() {
            return {
                tag: "nav",
                contents: [
                    this.renderHome(),
                    this.renderResponsiveBurger(),
                    this.renderMenu(NAV_MENU_ITEMS),
                ],
            };
        }
    }
    
    module.exports = NavBar;
    
    },{"../../../constants":2}],16:[function(require,module,exports){
    "use strict";
    
    const { in_construction } = require("../../config");
    const { images_url } = require("../../constants");
    const NavBar = require("./components/navbar");
    
    class Template {
        constructor(props) {
            this.props = props;
        }
        render() {
            return {
                tag: "main",
                contents: [
                    {
                        tag: "header",
                        contents: [new NavBar().render()],
                    },
                    in_construction && {
                        tag: "section",
                        class: "warning-banner",
                        contents: [
                            {
                                tag: "strong",
                                class: "page-contents-center",
                                contents: "Site en construction ...",
                            },
                        ],
                    },
                    {
                        tag: "section",
                        id: "page-container",
                        contents: [this.props.page.render()],
                    },
                    {
                        tag: "footer",