diff --git a/public/assets/images/screen_fantom_quest.jpg b/public/assets/images/screen_fantom_quest.jpg
deleted file mode 100644
index 46582db55da4bc7fdb7eb03774fc184b06e4973b..0000000000000000000000000000000000000000
Binary files a/public/assets/images/screen_fantom_quest.jpg and /dev/null differ
diff --git a/public/education/education.js b/public/education/education.js
index 42cb169868e24a4ed5d3b2c08529a67ea493f2e2..63efd49bd4a2d6cd80d666a5b0a6db17b73a9a33 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -285,7 +285,11 @@ class GameStudioClub {
class: "title",
contents: li.title,
},
- { tag: "img", src: `${images_url}/${li.image}` },
+ {
+ tag: "img",
+ alt: `learning theme image ${li.title}`,
+ src: `${images_url}/${li.image}`,
+ },
{
tag: "div",
class: "details",
@@ -514,24 +518,23 @@ class Popularization {
{
tag: "div",
class: "full-row",
- contents: [
- {
- tag: "h3",
- class: "big",
- contents:
- "<blue>Démystifier</blue> l'informatique",
- },
- {
- tag: "strong",
- contents:
- "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
- },
- {
- tag: "p",
- contents:
- "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
- },
- ]
+ contents: [
+ {
+ tag: "h3",
+ class: "big",
+ contents: "<blue>Démystifier</blue> l'informatique",
+ },
+ {
+ tag: "strong",
+ contents:
+ "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
+ },
+ {
+ tag: "p",
+ contents:
+ "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
+ },
+ ],
},
{
tag: "div",
@@ -586,7 +589,11 @@ class Popularization {
class: "title",
contents: li.title,
},
- { tag: "img", src: `${images_url}/${li.image}` },
+ {
+ tag: "img",
+ alt: `learning theme image ${li.title}`,
+ src: `${images_url}/${li.image}`,
+ },
{
tag: "div",
class: "details",
@@ -613,40 +620,6 @@ class Popularization {
},
],
},
- // {
- // tag: "ul",
- // class: "learning-themes",
- // contents: VULGARISATION_THEMES.map(li => {
- // return {
- // tag: "li",
- // class: "learning-theme " + li.class,
- // contents: [
- // { tag: "strong", class: "title", contents: li.title },
- // { tag: "img", src: `${images_url}/${li.image}` },
- // {
- // tag: "div",
- // class: "details",
- // contents: [
- // {
- // tag: "div",
- // class: "comment",
- // contents: li.comment,
- // },
- // {
- // tag: "ul",
- // contents: li.details.map(d => {
- // return {
- // tag: "li",
- // contents: d,
- // };
- // }),
- // },
- // ],
- // },
- // ],
- // };
- // }),
- // },
],
},
],
@@ -684,12 +657,19 @@ class EducationPage {
{
tag: "div",
class: "logo",
- contents: [{ tag: "img", src: `${images_url}/brain.svg` }],
+ contents: [
+ {
+ tag: "img",
+ alt: "image brain",
+ src: `${images_url}/brain.svg`,
+ },
+ ],
},
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
- contents: `Démystifier et s'approprier la technologie par le partage de connaissances.`,
+ contents: `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 !`,
},
],
},
@@ -773,9 +753,14 @@ class NavBar {
tag: "a",
href: "/",
contents: [
- { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
{
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`,
},
@@ -874,11 +859,13 @@ class Template {
contents: [
{
tag: "img",
+ alt: `logo Kuadrado`,
src: `${images_url}/logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
+ alt: "Kuadrado Software",
src: `${images_url}/logo_kuadrado_txt.svg`,
},
],
diff --git a/public/games/games.js b/public/games/games.js
index cceeb10153d053bc6bece86d6b66a2eb62b98fcc..f936169f83280ab6859b74d6788571ff0154d322 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -61,7 +61,11 @@ class ImageCarousel {
id: this.id,
class: "image-carousel",
contents: [
- { tag: "img", src: images[showImageIndex] },
+ {
+ tag: "img",
+ alt: `image carousel ${images[showImageIndex].replace(/\.[A-Za-z]+/, "")}`,
+ src: images[showImageIndex],
+ },
images.length > 1 && {
tag: "div",
class: "carousel-bullets",
@@ -286,7 +290,13 @@ class TeamMember {
{
tag: "div",
class: "team-member-img",
- contents: [{ tag: "img", src: images.map(im => `${path}/images/${im}`)[0] }],
+ contents: [
+ {
+ tag: "img",
+ alt: `ìmage team member ${title}`,
+ src: images.map(im => `${path}/images/${im}`)[0],
+ },
+ ],
},
{
tag: "h3",
@@ -462,7 +472,11 @@ class GamesPage {
tag: "div",
class: "logo",
contents: [
- { tag: "img", src: `${images_url}/game_controller.svg` },
+ {
+ tag: "img",
+ alt: "image game controller",
+ src: `${images_url}/game_controller.svg`,
+ },
],
},
{ tag: "h1", contents: "Jeux" },
@@ -552,9 +566,14 @@ class NavBar {
tag: "a",
href: "/",
contents: [
- { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
{
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`,
},
@@ -653,11 +672,13 @@ class Template {
contents: [
{
tag: "img",
+ alt: `logo Kuadrado`,
src: `${images_url}/logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
+ alt: "Kuadrado Software",
src: `${images_url}/logo_kuadrado_txt.svg`,
},
],
diff --git a/public/main.js b/public/main.js
index f5c5aaf171014ba25b1baf3dc055dcd201a43f38..71dfd7f1b496e42f929afe7cf9f784d0e394cd34 100644
--- a/public/main.js
+++ b/public/main.js
@@ -61,7 +61,11 @@ class ImageCarousel {
id: this.id,
class: "image-carousel",
contents: [
- { tag: "img", src: images[showImageIndex] },
+ {
+ tag: "img",
+ alt: `image carousel ${images[showImageIndex].replace(/\.[A-Za-z]+/, "")}`,
+ src: images[showImageIndex],
+ },
images.length > 1 && {
tag: "div",
class: "carousel-bullets",
@@ -245,7 +249,7 @@ class ThemeCard {
{
tag: "div",
class: "card-img",
- contents: [{ tag: "img", src: `${images_url}/${this.props.img}` }],
+ contents: [{ tag: "img", alt:`thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`,src: `${images_url}/${this.props.img}` }],
},
{
tag: "div",
@@ -289,10 +293,15 @@ class HomePage {
tag: "div",
class: "big-logo page-contents-center",
contents: [
- { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
+ {
+ 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`,
},
],
@@ -301,9 +310,9 @@ class HomePage {
{
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.
+ contents: `<b>Kvadrata rado</b> veut dire "roue carrée" en Esperanto.
+ <br/>Nous avons choisi ce symbole pour revendiquer le fait d'aimer fabriquer
+ les choses nous-même ... Quitte parfois à réinventer un peu la roue !
`,
},
],
@@ -323,8 +332,8 @@ class HomePage {
{
tag: "p",
class: "page-contents-center",
- contents: `Nous sommes engagés dans un idéal de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
- <br /><br />Nous voulons travailler pour le plaisir de créer et de maîtriser ce qu'on fait.`,
+ contents: `Nous sommes engagés dans une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
+ <br /><br />Nous travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
},
],
},
@@ -343,15 +352,15 @@ class HomePage {
title: "Software",
img: "meca_proc.svg",
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.",
+ description: `Quand nous avons besoin d'un outil logiciel, nous aimons bien le fabriquer nous même si possible et si ça nous amuse !
+ <br/>Retrouvez nos projets software en détail sur cette page.`,
},
{
title: "Pédagogie",
img: "brain.svg",
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 !",
+ description: `Démystifier et s'approprier la technologie par le partage de connaissances.
+ <br/>Découvrez nos initiatives pédagogiques.`,
},
].map(cardProps => new ThemeCard(cardProps).render()),
},
@@ -616,9 +625,14 @@ class NavBar {
tag: "a",
href: "/",
contents: [
- { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
{
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`,
},
@@ -717,11 +731,13 @@ class Template {
contents: [
{
tag: "img",
+ alt: `logo Kuadrado`,
src: `${images_url}/logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
+ alt: "Kuadrado Software",
src: `${images_url}/logo_kuadrado_txt.svg`,
},
],
diff --git a/public/software-articles/index.json b/public/software-articles/index.json
index be123e8e7f7e52f4619f57fa2e11ceea8713ab7d..b5f5003a38e6f198a059ad35adb148adfe5aaf4a 100644
--- a/public/software-articles/index.json
+++ b/public/software-articles/index.json
@@ -1,3 +1,3 @@
{
- "articles": []
+ "articles": ["watergun/watergun.json"]
}
diff --git a/public/software-articles/watergun/images/watergun-overview-light.jpg b/public/software-articles/watergun/images/watergun-overview-light.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c1a2b7d00ce8e88d0a296f92fc8f305079b837ff
Binary files /dev/null and b/public/software-articles/watergun/images/watergun-overview-light.jpg differ
diff --git a/public/software-articles/watergun/watergun.json b/public/software-articles/watergun/watergun.json
new file mode 100644
index 0000000000000000000000000000000000000000..5b032858a3573a9958f4d84c9bed521ba7d958c2
--- /dev/null
+++ b/public/software-articles/watergun/watergun.json
@@ -0,0 +1,14 @@
+{
+ "title": "Watergun",
+ "date": "2021/01/23",
+ "tags": ["web", "desktop", "light-weight", "offline", "editor"],
+ "status": "Work in progress",
+ "subtitle": "Un éditeur de site web ultra-light",
+ "body": "<file>watergun.txt",
+ "technical": {
+ "stack": ["Javascript", "Node.js", "Electron"],
+ "license": "Gnu gpl v3",
+ "repository": "https://gitlab.com/peter_rabbit/watergun-web-editor"
+ },
+ "images": ["watergun-overview-light.jpg"]
+}
diff --git a/public/software-articles/watergun/watergun.txt b/public/software-articles/watergun/watergun.txt
new file mode 100644
index 0000000000000000000000000000000000000000..6ccb3e659c50cff2a10923761f3519041e26d9a0
--- /dev/null
+++ b/public/software-articles/watergun/watergun.txt
@@ -0,0 +1,10 @@
+Watergun est un logiciel de création web fonctionnant entièrement hors ligne et permettant de générer facilement un site web statique, de le déployer en ligne et de le modifier.
+
+Watergun est un outil que j'ai conçu au départ pour notre propre usage, pour pouvoir générer un ou plusieurs site web rapidement sur le même modèle, mais avec l'idée d'avoir quelque chose de plus léger (que ce soit du point du vue du site web créé ou du logiciel lui-même) que les outils les plus répandus pour ce genre d'usage. Par exemple Wordpress est un outil beaucoup plus puissant que celui-ci, mais il est aussi beaucoup plus lourd. Et parfois, quand on veut juste une pomme, on n'a pas forcément intérêt à transporter tout le verger avec soi !
+
+Finalement je n'ai pas utilisé Watergun pour créer le présent site (bien que j'en aie récupéré certains mécanismes) car le temps a manqué et le logiciel est encore loin d'être opérationnel. Mais j'espère que dans quelques temps il sera devenu un outil de création web léger et écologique digne d'intérêt !
+
+Watergun est un logiciel libre open source sous license GNU GPLv3.
+Il est développé entièrement en Javascript / Node.js avec l'API https://www.electronjs.org/||Electron qui est sa seule dépendance.
+
+Pierre Jarriges - Développeur.
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 6fd6f2f28f8a63fa0ed5efa57f0506815919720f..839dfaf27f85717f277b2400ab56d5e1ecfdd0c6 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -19,6 +19,174 @@ module.exports = {
},{"./config":1}],3:[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",
+ 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;
+
+},{"../lib/object-html-renderer":6}],4:[function(require,module,exports){
+"use strict";
+
+const { fetchjson, fetchtext } = require("./fetch");
+
+function getArticleBody(text) {
+ return text
+ .split(" ")
+ .map(word => {
+ if (word.includes("http://") || word.includes("https://")) {
+ const splitword = word.split("||");
+ const href = splitword[0].match(/http.+/);
+ const text = splitword.length > 1 ? splitword[1].replaceAll("_", " ") : href;
+ return word.replace(/http.*/, `<a href=${href} target="_blank">${text}</a>`);
+ } else return word;
+ })
+ .join(" ")
+ .replaceAll("\n", "<br/>");
+}
+
+function getArticleDate(date) {
+ return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+}
+
+function loadArticles(dir_url) {
+ return new Promise((resolve, reject) => {
+ fetchjson(`${dir_url}/index.json`)
+ .then(json => {
+ Promise.all(
+ json.articles.map(async articlePath => {
+ const art = await fetchjson(`${dir_url}/${articlePath}`);
+ const tmpSplit = articlePath.split("/");
+ tmpSplit.pop();
+ const absArtPath = `${dir_url}/${tmpSplit.join("/")}`;
+ return Object.assign(art, { path: absArtPath });
+ })
+ )
+ .then(articles => {
+ populateArticles(articles)
+ .then(completeArticles => resolve(completeArticles))
+ .catch(e => reject(e));
+ })
+ .catch(e => reject(e));
+ })
+ .catch(e => console.log(e));
+ });
+}
+
+function populateArticles(articles) {
+ return new Promise((resolve, reject) => {
+ Promise.all(
+ articles.map(async article => {
+ if (article.body.indexOf("<file>") !== -1) {
+ const txtPath = article.body.replace("<file>", "");
+ const textValue = await fetchtext(`${article.path}/${txtPath}`);
+ article.body = textValue;
+ article.date = article.date ? new Date(article.date) : undefined;
+ }
+ return article;
+ })
+ )
+ .then(completeArticles => resolve(completeArticles.sort((a, b) => a.date - b.date)))
+ .catch(e => reject(e));
+ });
+}
+
+module.exports = {
+ loadArticles,
+ getArticleBody,
+ getArticleDate,
+ populateArticles,
+};
+
+},{"./fetch":5}],5:[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,
+};
+
+},{}],6:[function(require,module,exports){
+"use strict";
+
module.exports = {
setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot;
@@ -102,10 +270,172 @@ module.exports = {
},
};
-},{}],4:[function(require,module,exports){
+},{}],7:[function(require,module,exports){
+"use strict";
+
+const { software_articles_url } = require("../../../../constants");
+const ImageCarousel = require("../../../generic-components/image-carousel");
+const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
+const objectHtmlRenderer = require("../../../lib/object-html-renderer");
+
+class SoftwareArticle {
+ constructor(props) {
+ this.props = props;
+ }
+
+ render() {
+ const { title, date, status, tags, body, subtitle, images, path, technical } = this.props;
+ return {
+ tag: "article",
+ class: "software-article",
+ contents: [
+ {
+ tag: "h2",
+ class: "software-title",
+ contents: title,
+ },
+ {
+ tag: "span",
+ class: "software-date",
+ contents: getArticleDate(date),
+ },
+ {
+ tag: "span",
+ class: "software-status",
+ contents: status,
+ },
+ {
+ tag: "div",
+ class: "software-tags",
+ contents: tags.map(tag => {
+ return { tag: "span", contents: tag };
+ }),
+ },
+ {
+ tag: "h3",
+ class: "software-subtitle",
+ contents: subtitle,
+ },
+ {
+ tag: "div",
+ class: "software-description",
+ contents: getArticleBody(body),
+ },
+ new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(),
+ {
+ tag: "div",
+ class: "software-technical",
+ contents: [
+ {
+ tag: "h2",
+ contents: "Details techniques",
+ },
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Stack" },
+ {
+ tag: "td",
+ contents: [
+ {
+ tag: "ul",
+ contents: technical.stack.map(tech => {
+ return { tag: "li", contents: tech };
+ }),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "License" },
+ { tag: "td", contents: technical.license },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Dépôt code source" },
+ {
+ tag: "td",
+ contents: [
+ {
+ tag: "a",
+ href: technical.repository,
+ contents: technical.repository,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+class SoftwareArticles {
+ constructor(props) {
+ this.props = props;
+ this.state = {
+ articles: [],
+ };
+ this.id = performance.now();
+ this.loadArticles();
+ }
+
+ loadArticles() {
+ loadArticles(software_articles_url)
+ .then(articles => {
+ this.state.articles = articles;
+ this.refresh();
+ })
+ .catch(e => console.log(e));
+ }
+
+ renderPlaceholder() {
+ return {
+ tag: "article",
+ class: "placeholder",
+ contents: [{ tag: "div" }, { tag: "div" }],
+ };
+ }
+
+ refresh() {
+ objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), {
+ mode: "replace",
+ });
+ }
+
+ render() {
+ const { articles } = this.state;
+ return {
+ tag: "section",
+ class: "software-articles page-contents-center",
+ id: this.id,
+ contents:
+ articles.length > 0
+ ? articles.map(article => new SoftwareArticle({ ...article }).render())
+ : [this.renderPlaceholder()],
+ };
+ }
+}
+
+module.exports = SoftwareArticles;
+
+},{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],8:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
+const SoftwareArticles = require("./components/software-articles");
class SoftwareDevelopment {
constructor(args) {
@@ -128,19 +458,28 @@ class SoftwareDevelopment {
{
tag: "div",
class: "logo",
- contents: [{ tag: "img", src: `${images_url}/meca_proc.svg` }],
+ contents: [
+ {
+ tag: "img",
+ alt: `image mechanic electronic`,
+ src: `${images_url}/meca_proc.svg`,
+ },
+ ],
},
{ tag: "h1", contents: "Software" },
{
tag: "p",
contents: `Développement web et outillage autour du gamedev.
- <br />Quand nous avons besoin d'un service logiciel simple et qu'il est pertinent (ou juste que ça nous fait plaisir) de le
- développer nous même nous essayons au maximum de le réaliser de façon générique et de le publier sous license libre et open source`,
+ <br />Si nous avons besoin d'un service logiciel simple et qu'il
+ est pertinent (ou juste que ça nous fait plaisir) de le développer
+ nous-même, nous essayons au maximum de le réaliser de façon générique
+ et de le publier sous license libre et open source.`,
},
],
},
],
},
+ new SoftwareArticles().render(),
],
};
}
@@ -148,7 +487,7 @@ class SoftwareDevelopment {
module.exports = SoftwareDevelopment;
-},{"../../../constants":2}],5:[function(require,module,exports){
+},{"../../../constants":2,"./components/software-articles":7}],9:[function(require,module,exports){
"use strict";
"use strict";
@@ -156,7 +495,7 @@ const runPage = require("../../run-page");
const SoftwareDevelopment = require("./software-development");
runPage(SoftwareDevelopment);
-},{"../../run-page":6,"./software-development":4}],6:[function(require,module,exports){
+},{"../../run-page":10,"./software-development":8}],10:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -168,7 +507,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":3,"./template/template":8}],7:[function(require,module,exports){
+},{"./lib/object-html-renderer":6,"./template/template":12}],11:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
@@ -217,9 +556,14 @@ class NavBar {
tag: "a",
href: "/",
contents: [
- { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
{
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`,
},
@@ -274,7 +618,7 @@ class NavBar {
module.exports = NavBar;
-},{"../../../constants":2}],8:[function(require,module,exports){
+},{"../../../constants":2}],12:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
@@ -318,11 +662,13 @@ class Template {
contents: [
{
tag: "img",
+ alt: `logo Kuadrado`,
src: `${images_url}/logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
+ alt: "Kuadrado Software",
src: `${images_url}/logo_kuadrado_txt.svg`,
},
],
@@ -346,4 +692,4 @@ class Template {
module.exports = Template;
-},{"../../config":1,"../../constants":2,"./components/navbar":7}]},{},[5]);
+},{"../../config":1,"../../constants":2,"./components/navbar":11}]},{},[9]);
diff --git a/public/style/pages/software-development/software-development.css b/public/style/pages/software-development/software-development.css
new file mode 100644
index 0000000000000000000000000000000000000000..4160b20f28428a6612cc6fd045a162faee0f43c9
--- /dev/null
+++ b/public/style/pages/software-development/software-development.css
@@ -0,0 +1,17 @@
+/* Error: Undefined variable.
+ * ,
+ * 9 | background-color: $light_0;
+ * | ^^^^^^^^
+ * '
+ * src/pages/software-development/software-development.scss 9:35 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 9 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 9:35 root stylesheet";
+}
diff --git a/public/style/style.css b/public/style/style.css
index 0dbe0b367c0a0c27d95d2f45c09b9b36800fc513..0012d2de22a8e437fecbe1c5e070c8ec5a4c12e4 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -965,6 +965,39 @@ main #page-container #games-page .game-articles article.placeholder * {
grid-column: 1/span 2;
}
}
+main #page-container #software-page .software-articles article.software-article {
+ display: grid;
+ grid-template-columns: 1fr 0.7fr;
+ margin: 30px 0;
+}
+main #page-container #software-page .software-articles article.software-article .software-title {
+ grid-column: 1/span 2;
+ background-color: #d4d9dd;
+ color: #6b7880;
+ margin: 0;
+ padding: 20px;
+}
+main #page-container #software-page .software-articles article.software-article .software-status {
+ grid-column: 1;
+}
+main #page-container #software-page .software-articles article.software-article .software-date {
+ grid-column: 1;
+}
+main #page-container #software-page .software-articles article.software-article .software-tags {
+ grid-column: 1;
+}
+main #page-container #software-page .software-articles article.software-article .software-subtitle {
+ grid-column: 1;
+}
+main #page-container #software-page .software-articles article.software-article .software-description {
+ grid-column: 1;
+}
+main #page-container #software-page .software-articles article.software-article .image-carousel {
+ grid-column: 2;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical {
+ grid-column: 1/span 2;
+}
main footer {
display: flex;
justify-content: center;
diff --git a/src/generic-components/image-carousel.js b/src/generic-components/image-carousel.js
index 531caa68828c88ecc4df23a370c9d32f254506ed..543c5ca4a879741c8beac318edaf0914347569d7 100644
--- a/src/generic-components/image-carousel.js
+++ b/src/generic-components/image-carousel.js
@@ -42,7 +42,11 @@ class ImageCarousel {
id: this.id,
class: "image-carousel",
contents: [
- { tag: "img", src: images[showImageIndex] },
+ {
+ tag: "img",
+ alt: `image carousel ${images[showImageIndex].replace(/\.[A-Za-z]+/, "")}`,
+ src: images[showImageIndex],
+ },
images.length > 1 && {
tag: "div",
class: "carousel-bullets",
diff --git a/src/home-page-components/theme-card.js b/src/home-page-components/theme-card.js
index a6044da001a9889ae28a0e8d6318458a54e63776..c9a03342928f24714577b7311d35d757408e1785 100644
--- a/src/home-page-components/theme-card.js
+++ b/src/home-page-components/theme-card.js
@@ -16,7 +16,7 @@ class ThemeCard {
{
tag: "div",
class: "card-img",
- contents: [{ tag: "img", src: `${images_url}/${this.props.img}` }],
+ contents: [{ tag: "img", alt:`thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`,src: `${images_url}/${this.props.img}` }],
},
{
tag: "div",
diff --git a/src/homepage.js b/src/homepage.js
index 386fc5141dde18cdbc71480e513bbdcbbfd24084..29f7a4e41d880864473550b09dd0a23a3b711ee1 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -22,10 +22,15 @@ class HomePage {
tag: "div",
class: "big-logo page-contents-center",
contents: [
- { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
+ {
+ 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`,
},
],
@@ -34,9 +39,9 @@ class HomePage {
{
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.
+ contents: `<b>Kvadrata rado</b> veut dire "roue carrée" en Esperanto.
+ <br/>Nous avons choisi ce symbole pour revendiquer le fait d'aimer fabriquer
+ les choses nous-même ... Quitte parfois à réinventer un peu la roue !
`,
},
],
@@ -56,8 +61,8 @@ class HomePage {
{
tag: "p",
class: "page-contents-center",
- contents: `Nous sommes engagés dans un idéal de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
- <br /><br />Nous voulons travailler pour le plaisir de créer et de maîtriser ce qu'on fait.`,
+ contents: `Nous sommes engagés dans une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
+ <br /><br />Nous travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
},
],
},
@@ -76,15 +81,15 @@ class HomePage {
title: "Software",
img: "meca_proc.svg",
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.",
+ description: `Quand nous avons besoin d'un outil logiciel, nous aimons bien le fabriquer nous même si possible et si ça nous amuse !
+ <br/>Retrouvez nos projets software en détail sur cette page.`,
},
{
title: "Pédagogie",
img: "brain.svg",
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 !",
+ description: `Démystifier et s'approprier la technologie par le partage de connaissances.
+ <br/>Découvrez nos initiatives pédagogiques.`,
},
].map(cardProps => new ThemeCard(cardProps).render()),
},
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 0324653c29c9527fc5567b02b4898e30e567899b..1b9849105d5ac4e15ae1bfa1c900c8b213d1dd18 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -180,7 +180,11 @@ class GameStudioClub {
class: "title",
contents: li.title,
},
- { tag: "img", src: `${images_url}/${li.image}` },
+ {
+ tag: "img",
+ alt: `learning theme image ${li.title}`,
+ src: `${images_url}/${li.image}`,
+ },
{
tag: "div",
class: "details",
diff --git a/src/pages/education/components/popularization.js b/src/pages/education/components/popularization.js
index 73c37363c48823a28da80312dd234db41d5399d6..59383ac757a5d6dce92cb1e6aab498bf5571b76f 100644
--- a/src/pages/education/components/popularization.js
+++ b/src/pages/education/components/popularization.js
@@ -60,24 +60,23 @@ class Popularization {
{
tag: "div",
class: "full-row",
- contents: [
- {
- tag: "h3",
- class: "big",
- contents:
- "<blue>Démystifier</blue> l'informatique",
- },
- {
- tag: "strong",
- contents:
- "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
- },
- {
- tag: "p",
- contents:
- "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
- },
- ]
+ contents: [
+ {
+ tag: "h3",
+ class: "big",
+ contents: "<blue>Démystifier</blue> l'informatique",
+ },
+ {
+ tag: "strong",
+ contents:
+ "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
+ },
+ {
+ tag: "p",
+ contents:
+ "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
+ },
+ ],
},
{
tag: "div",
@@ -132,7 +131,11 @@ class Popularization {
class: "title",
contents: li.title,
},
- { tag: "img", src: `${images_url}/${li.image}` },
+ {
+ tag: "img",
+ alt: `learning theme image ${li.title}`,
+ src: `${images_url}/${li.image}`,
+ },
{
tag: "div",
class: "details",
@@ -159,40 +162,6 @@ class Popularization {
},
],
},
- // {
- // tag: "ul",
- // class: "learning-themes",
- // contents: VULGARISATION_THEMES.map(li => {
- // return {
- // tag: "li",
- // class: "learning-theme " + li.class,
- // contents: [
- // { tag: "strong", class: "title", contents: li.title },
- // { tag: "img", src: `${images_url}/${li.image}` },
- // {
- // tag: "div",
- // class: "details",
- // contents: [
- // {
- // tag: "div",
- // class: "comment",
- // contents: li.comment,
- // },
- // {
- // tag: "ul",
- // contents: li.details.map(d => {
- // return {
- // tag: "li",
- // contents: d,
- // };
- // }),
- // },
- // ],
- // },
- // ],
- // };
- // }),
- // },
],
},
],
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index 33fa93ba021322f601764813c1e321a273f8c7bd..d0b35bc0b4693a5476ac1dbee78d9bde1f7ec4a5 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -25,12 +25,19 @@ class EducationPage {
{
tag: "div",
class: "logo",
- contents: [{ tag: "img", src: `${images_url}/brain.svg` }],
+ contents: [
+ {
+ tag: "img",
+ alt: "image brain",
+ src: `${images_url}/brain.svg`,
+ },
+ ],
},
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
- contents: `Démystifier et s'approprier la technologie par le partage de connaissances.`,
+ contents: `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 !`,
},
],
},
diff --git a/src/pages/games/components/game-article.js b/src/pages/games/components/game-article.js
index 12401599e47e332948016da93f589ca471bb19f8..edd332ab7c4c897aa1978b326fbc56722dd06920 100644
--- a/src/pages/games/components/game-article.js
+++ b/src/pages/games/components/game-article.js
@@ -17,7 +17,13 @@ class TeamMember {
{
tag: "div",
class: "team-member-img",
- contents: [{ tag: "img", src: images.map(im => `${path}/images/${im}`)[0] }],
+ contents: [
+ {
+ tag: "img",
+ alt: `ìmage team member ${title}`,
+ src: images.map(im => `${path}/images/${im}`)[0],
+ },
+ ],
},
{
tag: "h3",
diff --git a/src/pages/games/games.js b/src/pages/games/games.js
index 1ad710967bcccf0c551b0e5a115114f2d948c758..73f20218df09e094b39559da8c85c60c6335606b 100644
--- a/src/pages/games/games.js
+++ b/src/pages/games/games.js
@@ -25,7 +25,11 @@ class GamesPage {
tag: "div",
class: "logo",
contents: [
- { tag: "img", src: `${images_url}/game_controller.svg` },
+ {
+ tag: "img",
+ alt: "image game controller",
+ src: `${images_url}/game_controller.svg`,
+ },
],
},
{ tag: "h1", contents: "Jeux" },
diff --git a/src/pages/software-development/components/software-articles.js b/src/pages/software-development/components/software-articles.js
new file mode 100644
index 0000000000000000000000000000000000000000..0feedc37f14a961010b1eed9fbe4dc70190f25af
--- /dev/null
+++ b/src/pages/software-development/components/software-articles.js
@@ -0,0 +1,159 @@
+"use strict";
+
+const { software_articles_url } = require("../../../../constants");
+const ImageCarousel = require("../../../generic-components/image-carousel");
+const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
+const objectHtmlRenderer = require("../../../lib/object-html-renderer");
+
+class SoftwareArticle {
+ constructor(props) {
+ this.props = props;
+ }
+
+ render() {
+ const { title, date, status, tags, body, subtitle, images, path, technical } = this.props;
+ return {
+ tag: "article",
+ class: "software-article",
+ contents: [
+ {
+ tag: "h2",
+ class: "software-title",
+ contents: title,
+ },
+ {
+ tag: "span",
+ class: "software-date",
+ contents: getArticleDate(date),
+ },
+ {
+ tag: "span",
+ class: "software-status",
+ contents: status,
+ },
+ {
+ tag: "div",
+ class: "software-tags",
+ contents: tags.map(tag => {
+ return { tag: "span", contents: tag };
+ }),
+ },
+ {
+ tag: "h3",
+ class: "software-subtitle",
+ contents: subtitle,
+ },
+ {
+ tag: "div",
+ class: "software-description",
+ contents: getArticleBody(body),
+ },
+ new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(),
+ {
+ tag: "div",
+ class: "software-technical",
+ contents: [
+ {
+ tag: "h2",
+ contents: "Details techniques",
+ },
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Stack" },
+ {
+ tag: "td",
+ contents: [
+ {
+ tag: "ul",
+ contents: technical.stack.map(tech => {
+ return { tag: "li", contents: tech };
+ }),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "License" },
+ { tag: "td", contents: technical.license },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Dépôt code source" },
+ {
+ tag: "td",
+ contents: [
+ {
+ tag: "a",
+ href: technical.repository,
+ contents: technical.repository,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+class SoftwareArticles {
+ constructor(props) {
+ this.props = props;
+ this.state = {
+ articles: [],
+ };
+ this.id = performance.now();
+ this.loadArticles();
+ }
+
+ loadArticles() {
+ loadArticles(software_articles_url)
+ .then(articles => {
+ this.state.articles = articles;
+ this.refresh();
+ })
+ .catch(e => console.log(e));
+ }
+
+ renderPlaceholder() {
+ return {
+ tag: "article",
+ class: "placeholder",
+ contents: [{ tag: "div" }, { tag: "div" }],
+ };
+ }
+
+ refresh() {
+ objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), {
+ mode: "replace",
+ });
+ }
+
+ render() {
+ const { articles } = this.state;
+ return {
+ tag: "section",
+ class: "software-articles page-contents-center",
+ id: this.id,
+ contents:
+ articles.length > 0
+ ? articles.map(article => new SoftwareArticle({ ...article }).render())
+ : [this.renderPlaceholder()],
+ };
+ }
+}
+
+module.exports = SoftwareArticles;
diff --git a/src/pages/software-development/software-development.js b/src/pages/software-development/software-development.js
index b972e5d1df373b797f1cf4f04645d34cbc13b63b..629c1b1b8f972efd3db3105559217e18478f3830 100644
--- a/src/pages/software-development/software-development.js
+++ b/src/pages/software-development/software-development.js
@@ -1,6 +1,7 @@
"use strict";
const { images_url } = require("../../../constants");
+const SoftwareArticles = require("./components/software-articles");
class SoftwareDevelopment {
constructor(args) {
@@ -23,19 +24,28 @@ class SoftwareDevelopment {
{
tag: "div",
class: "logo",
- contents: [{ tag: "img", src: `${images_url}/meca_proc.svg` }],
+ contents: [
+ {
+ tag: "img",
+ alt: `image mechanic electronic`,
+ src: `${images_url}/meca_proc.svg`,
+ },
+ ],
},
{ tag: "h1", contents: "Software" },
{
tag: "p",
contents: `Développement web et outillage autour du gamedev.
- <br />Quand nous avons besoin d'un service logiciel simple et qu'il est pertinent (ou juste que ça nous fait plaisir) de le
- développer nous même nous essayons au maximum de le réaliser de façon générique et de le publier sous license libre et open source`,
+ <br />Si nous avons besoin d'un service logiciel simple et qu'il
+ est pertinent (ou juste que ça nous fait plaisir) de le développer
+ nous-même, nous essayons au maximum de le réaliser de façon générique
+ et de le publier sous license libre et open source.`,
},
],
},
],
},
+ new SoftwareArticles().render(),
],
};
}
diff --git a/src/pages/software-development/software-development.scss b/src/pages/software-development/software-development.scss
new file mode 100644
index 0000000000000000000000000000000000000000..088aa6bd2bd7cafd2482b3c8a4a98a92dea305c1
--- /dev/null
+++ b/src/pages/software-development/software-development.scss
@@ -0,0 +1,54 @@
+#software-page {
+ .software-articles {
+ article.software-article {
+ display: grid;
+ grid-template-columns: 1fr 0.7fr;
+ margin: 30px 0;
+ .software-title {
+ grid-column: 1 / span 2;
+ background-color: $light_0;
+ color: $medium_grey;
+ margin: 0;
+ padding: 20px;
+ }
+ .software-status {
+ grid-column: 1;
+ }
+ .software-date {
+ grid-column: 1;
+ }
+
+ .software-tags {
+ grid-column: 1;
+ }
+
+ .software-subtitle {
+ grid-column: 1;
+ }
+
+ .software-description {
+ grid-column: 1;
+ }
+ .image-carousel {
+ grid-column: 2;
+ }
+ .software-technical {
+ grid-column: 1 / span 2;
+ h2 {
+ }
+ table {
+ tr {
+ td:first-child {
+ }
+ td:last-child {
+ ul {
+ li {
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/style.scss b/src/style.scss
index 52bcbfd92da09c769307e721ccc0ffa0c3cfea85..002eca673eaa6ecaa3199c25960ac71c5dfda2fb 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -253,6 +253,7 @@ main {
@import "./homepage.scss";
@import "./pages/education/education.scss";
@import "./pages/games/games.scss";
+ @import "./pages/software-development/software-development.scss";
}
footer {
@include flex-center-col;
diff --git a/src/template/components/navbar.js b/src/template/components/navbar.js
index e931afd721eeae88fc58c8a9157877e32d11128c..06ebafd0411dfb2341ef0a459a2b1f01993a86cf 100644
--- a/src/template/components/navbar.js
+++ b/src/template/components/navbar.js
@@ -46,9 +46,14 @@ class NavBar {
tag: "a",
href: "/",
contents: [
- { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
{
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`,
},
diff --git a/src/template/template.js b/src/template/template.js
index ab81e0b593b094345ef51561a5f0126872fb1899..3b009c0e188e40025187583ea8ccdb579d909f3b 100644
--- a/src/template/template.js
+++ b/src/template/template.js
@@ -41,11 +41,13 @@ class Template {
contents: [
{
tag: "img",
+ alt: `logo Kuadrado`,
src: `${images_url}/logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
+ alt: "Kuadrado Software",
src: `${images_url}/logo_kuadrado_txt.svg`,
},
],