feat: add cover to last articles and tutorials

README.md

@@ -154,7 +154,21 @@ first paragraph.
 second paragraph displayed after 2 empty lines.
 ```
 
-**3 - Write the content of the article**
+**3 - Adding Cover**
+
+To maintain graphic consistency, cover visuals should be in a photorealistic style and preferably related to the topics of your articles.
+
+By "photorealistic style" we mean: no cartoons, no 3D visuals, no illustrations, no graphics, no logos, etc.
+
+To choose your image, you have several options:
+
+- Head to [La Boîte à Outils de l'Astronaute](https://drive.google.com/drive/folders/1SLZRiqHSel3AWNSVbrblfg3ON_XwR5RU?usp=drive_link) to access ready-to-use image banks
+- If you can't find what you're looking for, you can access free and royalty-free image banks like [AdobeStock](https://stock.adobe.com/fr/), [Pexels](https://www.pexels.com/fr-fr/), [Unsplash](https://unsplash.com/fr)
+- If you still can't find an image despite these different solutions, you can ask Thomas Péjout to generate an image for you with MidJourney
+
+In order to have a quality image, we ask you to integrate an image with a minimum width of 3000 px
+
+**4 - Write the content of the article**
 
 The content of the article be written in markdown.
 You can use one of the solutions:
@@ -186,7 +200,7 @@ If you need to add internal anchor links from your article to other article of o
 
 > Warning: Don't add html in your markdown, you don't have to override the blog template in the markdown.
 
-**4 - Add your pull request**
+**5 - Add your pull request**
 
 Create your branch and add your pull request.
 ```bash

_articles/en/2020-12-09-monitor-your-docker-containers.md

@@ -9,7 +9,8 @@ excerpt: >-
   `docker stats` in ssh does not allow you to correctly assess your production
   environment. We will therefore see how to meet this monitoring need for
   containers in production.
-oldCover: /assets/2017-12-12-monitorer-ses-containers-docker/cover.jpeg
+cover:
+  path: /imgs/articles/2020-12-09-monitor-your-docker-containers/cover.jpg
 categories: []
 authors:
   - qneyrat

_articles/en/2020-12-15-using-traefik-as-a-reverse-proxy.md

@@ -7,7 +7,8 @@ title: Using Traefik as a reverse proxy
 excerpt: >-
   In need for exposing websites and applications easily on the internet with a
   valid SSL certificate ? You're on the right spot ! :)
-oldCover: /assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/cover.jpg
+cover:
+  path: /imgs/articles/2020-12-15-using-traefik-as-a-reverse-proxy/cover.jpg
 categories: []
 authors:
   - jmoati

_articles/en/2021-01-05-introduction-gitlab-ci.md

@@ -8,7 +8,8 @@ excerpt: >-
   This article presents some of the possibilities that GitLab CI/CD offers. You
   will find on the Codelabs platform two tutorials linked to this article, which
   will show you two use cases.
-oldCover: /assets/2018-09-19-introduction-gitlab-ci/cover.png
+cover:
+  path: /imgs/articles/2021-01-05-introduction-gitlab-ci/cover.jpg
 categories:
   - architecture
 authors:

_articles/en/2021-03-08-women-in-it.md

@@ -10,6 +10,8 @@ excerpt: >
   in IT. The purpose of this article is to tell you about our experience to give
   you a better vision of why there aren't many of us, why some give up, and,
   above all, how to make that change.
+cover:
+  path: /imgs/articles/2021-03-08-women-in-it/cover.jpg
 categories: []
 authors:
   - marishka

_articles/en/2021-09-22-po-free-developer-time-with-integromat.md

@@ -8,7 +8,8 @@ excerpt: >-
   You're part of a small team with a lot of features to release quickly and a
   PoC needed to test a product but you only have little to no tech skills ?
   NoCode is what you're looking for !
-oldCover: /assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cover.jpg
+cover:
+  path: /imgs/articles/2021-09-22-po-free-developer-time-with-integromat/cover.jpg
 categories: []
 authors:
   - marianne

_articles/en/2021-09-29-dependency-injection.md

@@ -8,6 +8,8 @@ excerpt: >-
   You work with Symfony, but the concept of dependency injection is a little
   blurry for you? Find out how to take advantage of the component reading this
   article.
+cover:
+  path: /imgs/articles/2021-09-29-dependency-injection/cover.jpg
 categories:
   - php
 authors:

_articles/en/2022-01-31-build-website-with-nextjs.md

@@ -5,6 +5,8 @@ date: '2022-01-31'
 slug: how-to-build-your-website-with-nextjs
 title: How To Build Your Website With NextJS
 excerpt: Tutorial on the basics of NextJS for building a website.
+cover:
+  path: /imgs/articles/2022-01-31-how-to-build-your-website-with-nextjs/cover.jpg
 categories:
   - javascript
 authors:

_articles/en/2022-02-22-throwback-to-nantes-2021-devfest-my-first-conference.md

@@ -7,6 +7,8 @@ title: 'Throwback to Nantes'' 2021 DevFest, my first conference'
 excerpt: >-
   Finally! After 4 years of working as a web developer, I finally attended a
   conference linked to my job & passion: the DevFest Nantes.
+cover:
+  path: /imgs/articles/2022-02-22-throwback-to-nantes-2021-devfest-my-first-conference/cover.jpg
 categories: []
 authors:
   - jbberthet

_articles/en/2022-07-27-responsive-accessible-typography.md

@@ -9,7 +9,8 @@ excerpt: >-
   take for granted. There is much noise around this topic. Pixels? Are
   breakpoints enough to switch sizes across devices? Do we even need breakpoints
   at all?
-oldCover: /assets/2022-07-27-responsive-accessible-typography/read-me.png
+cover:
+  path: /imgs/articles/2022-07-27-responsive-accessible-typography/cover.jpg
 categories: []
 authors:
   - meugeniatr

_articles/en/2023-02-09-monolith-to-microservices.md

@@ -7,6 +7,8 @@ title: 'Migrating from a Monolith to Microservices: A Step-by-Step Guide'
 excerpt: >-
   This article is a step-by-step guide on how to migrate from a Monolith to
   Microservices
+cover:
+  path: /imgs/articles/2023-02-09-monolith-to-microservices/cover.jpg
 categories: []
 authors:
   - marishka

_articles/fr/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers.md

@@ -13,6 +13,8 @@ excerpt: >-
   designers. Vous saurez tout sur leur rôle de langue commune, leur impact sur
   la créativité et la cohérence visuelle.
 categories: []
+cover:
+  path: /imgs/articles/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/cover.jpg
 authors:
   - fpasquet
 keywords:

_articles/fr/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet.md

@@ -9,7 +9,6 @@ excerpt: >-
   technique qui nous fait perdre du temps et qui nous rend fou au point de
   vérifier qui a fait le code. Vous aussi vous voulez entrer dans la postérité
   lors d’un git blame et mal concevoir votre produit ?
-oldCover: /assets/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-projet/logo.png
 categories:
   - php
   - javascript

_articles/fr/2023-08-09-comprendre-et-personnaliser-son-environnement-docker.md

@@ -7,7 +7,6 @@ title: Comprendre et Personnaliser son environnement Docker
 excerpt: >-
   Comprendre comment fonctionne Docker et être capable de créer son
   environnement sur mesure
-oldCover: /assets/2023-07-25-comprendre-et-personnaliser-ses-docker/cover.jpg
 categories:
   - architecture
 authors:

_articles/fr/2023-10-23-event-driven-architecture.md

@@ -5,6 +5,8 @@ date: '2023-10-23'
 slug: event-driven-architecture-examples
 title: 'Comment implémenter une Event Driven Architecture ? Définition et exemples'
 excerpt: 'Pourquoi, quand et comment mettre en place une event driven architecture ? Exemples et conseils'
+cover:
+  path: /imgs/articles/2023-10-23-event-driven-architecture/cover.jpg
 authors:
   - marishka
 categories:
@@ -67,7 +69,7 @@ Le service _Catalog_ réduit le stock disponible pour les produits concernés.
 
 Reprenons ensemble le fonctionnement du modèle AMQP 0-9-1 (vous pouvez trouver la documentation [ici](https://www.rabbitmq.com/tutorials/amqp-concepts.html)) :
 
-![]({BASE_URL}/imgs/articles/2023-10-23-edd/event-driven-architecture-rabbitmq.png)
+![]({BASE_URL}/imgs/articles/2023-10-23-event-driven-architecture/event-driven-architecture-rabbitmq.png)
 
 Les messages sont publiés sur des _exchanges_, voyez ça comme une boîte aux lettres.
 Les exchanges distribuent ensuite des copies des messages aux _queues_ à l'aide des _bindings_.

_articles/fr/2023-10-26-how-to-git-gud.md

@@ -4,8 +4,10 @@ lang: fr
 date: 2023-10-26
 slug: les-commandes-git
 title: >-
-    How to git gud : quelles commandes Git utiliser pour améliorer son workflow au quotidien ? 
+    How to git gud : quelles commandes Git utiliser pour améliorer son workflow au quotidien ?
 excerpt: Vous trouverez dans cet article une sélection de commandes Git qui vous permettront de simplifier votre quotidien !
+cover:
+  path: /imgs/articles/2023-10-26-how-to-git-gud/cover.jpg
 categories: []
 keywords:
     - git

_articles/fr/2023-10-30-pourquoi-creer-design-system.md

@@ -5,6 +5,8 @@ date: 2023-10-30
 slug: pourquoi-creer-design-system
 title: "Design System : Qu'est-ce que c'est et pourquoi en avez-vous besoin ?"
 excerpt: Plongez dans le monde du Design System pour comprendre comment il assure la cohérence visuelle et fonctionnelle dans la conception. Explorez ce qu'est un Design System, pourquoi il est essentiel, le moment propice pour envisager sa création, ainsi que les étapes à respecter.
+cover:
+  path: /imgs/articles/2023-10-30-pourquoi-creer-design-system/cover.jpg
 categories: []
 keywords:
     - design system
@@ -194,7 +196,7 @@ Chacun de ces outils présente des avantages spécifiques, et le choix dépendra
 
 ### Outils de Documentation
 
-Plusieurs outils de documentation, comme **Storybook** et **Zeroheight**, sont conçus pour simplifier la documentation des composants de l'interface utilisateur et des Design Systems. Storybook propose une interface conviviale pour présenter de manière structurée les composants, leurs variations et leurs spécifications, tandis que Zeroheight permet de créer des documents détaillés mettant en avant les composants, leurs utilisations et leurs règles. 
+Plusieurs outils de documentation, comme **Storybook** et **Zeroheight**, sont conçus pour simplifier la documentation des composants de l'interface utilisateur et des Design Systems. Storybook propose une interface conviviale pour présenter de manière structurée les composants, leurs variations et leurs spécifications, tandis que Zeroheight permet de créer des documents détaillés mettant en avant les composants, leurs utilisations et leurs règles.
 
 <div  class="admonition summary" markdown="1"><p class="admonition-title">En résumé</p>
 

_articles/fr/2023-11-03-atomic-design.md

@@ -5,6 +5,8 @@ date: 2023-11-03
 slug: atomic-design
 title: "Atomic Design : pour des interfaces modulaires et évolutives"
 excerpt: Explorez l'approche de l'Atomic Design et ses bénéfices pour vos développements d'interfaces. Les principes de modularité, flexibilité et maintenabilité sont des éléments-clés pour vous guider vers le succès.
+cover:
+  path: /imgs/articles/2023-11-03-atomic-design/cover.jpg
 categories:
     - javascript
 keywords:

_articles/fr/2023-11-06-micro-frontend.md

@@ -5,6 +5,8 @@ date: 2023-11-06
 slug: micro-frontend
 title: "Micro frontend : la solution pour une meilleure maintenabilité de vos applications web"
 excerpt: "Comprendre et mettre en place le concept de micro frontend : cas d'usage concrets et exemples d'implémentations basés sur notre expérience"
+cover:
+  path: /imgs/articles/2023-11-06-micro-frontend/cover.jpg
 categories:
     - javascript
 keywords:

_articles/fr/2023-11-10-system-props.md

@@ -5,6 +5,8 @@ date: 2023-11-10
 slug: system-props
 title: "System Props : Flexibilité et cohérence dans le Design"
 excerpt: Découvrez ce que sont les System Props, quels sont leurs avantages, et comment les intégrer pour améliorer vos composants d'interface.
+cover:
+  path: /imgs/articles/2023-11-10-system-props/cover.jpg
 categories:
     - javascript
 keywords:

_articles/fr/2023-11-14-rex-plateforme-data.md

@@ -9,6 +9,8 @@ excerpt: |
     des extractions, de la transformation et de la visualisation très rapidement. Cependant, pour assurer la pérénnité et
     l'évolutivité de ces analyses, il est nécessaire de monter une plateforme dédiée et d'industrialiser les différents
     processus. C'est le sujet de cet article.
+cover:
+  path: /imgs/articles/2023-11-14-rex-plateforme-data/cover.jpg
 authors:
     - tthuon
 categories:

_articles/fr/2023-11-27-rex-custom-components-react-varnish-esi.md

@@ -5,6 +5,8 @@ date: 2023-11-27
 slug: integration-composants-react-avec-esi-dans-site-no-code
 title: "REX Studio : Intégration de composants React avec Varnish ESI dans un site No Code"
 excerpt: "Découvrez comment notre Studio a intégré avec succès des composants React et Varnish ESI sur un site No Code. Explorez les défis à relever et les solutions mises en œuvre"
+cover:
+  path: /imgs/articles/2023-11-27-rex-custom-components-react-varnish-esi/cover.jpg
 categories:
     - javascript
 keywords:

_articles/fr/2023-11-28-construire-un-design-system-robuste-avec-react-les-fondations-essentielles.md

@@ -5,6 +5,8 @@ date: 2023-11-28
 slug: design-system-react
 title: "Construire un Design System robuste avec React : les fondations essentielles"
 excerpt: "Découvrez comment créer un Design System solide avec React. Ce guide simplifié explore les bases essentielles pour concevoir une interface cohérente, améliorer le développement et offrir une expérience utilisateur harmonieuse."
+cover:
+  path: /imgs/articles/2023-11-28-construire-un-design-system-robuste-avec-react-les-fondations-essentielles/cover.jpg
 categories:
     - javascript
 keywords:

_articles/fr/2023-12-05-integration-crm.md

@@ -5,6 +5,8 @@ date: 2023-12-05
 slug: integration-crm-avec-plateforme-e-commerce
 title: "Comment intégrer votre CRM avec votre plateforme e-commerce"
 excerpt: "Découvrez un cas d'usage d'intégration d'un CRM avec une application e-commerce, en asynchrone, avec Hubspot et RabbitMQ"
+cover:
+  path: /imgs/articles/2023-12-05-integration-crm/cover.jpg
 categories:
     - php
 keywords:

_articles/fr/2024-01-10-typage-generique-en-php.md

@@ -5,6 +5,8 @@ date: 2024-01-10
 slug: typage-generique-php
 title: "Typage générique en PHP : définition, conseils et exemples"
 excerpt: "Découvrez comment réaliser du typage générique en PHP : introduction et définition du concept, conseils et explications pas-à-pas de cas pratique."
+cover:
+  path: /imgs/articles/2024-01-10-typage-generique-en-php/cover.jpg
 categories:
     - php
 keywords:

_articles/fr/2024-01-17-expressionlanguage-comment-utiliser-ce-composant-symfony.md

@@ -6,6 +6,8 @@ slug: symfony-expressionlanguage
 title: 'Symfony ExpressionLanguage : Comment utiliser ce composant ?'
 excerpt: >-
   Le composant Symfony ExpressionLanguage : qu'est-ce que c'est ? Quand et comment l'utiliser ? Comment créer des expressions lors de cas plus complexes ?
+cover:
+  path: /imgs/articles/2024-01-17-expressionlanguage-comment-utiliser-ce-composant-symfony/cover.jpg
 categories:
   - php
 authors:

_articles/fr/2024-02-19-quelques-conseils-pour-optimiser-votre-environnement-de-travail-sous-linux.md

@@ -7,6 +7,8 @@ title: 'Quelques conseils pour optimiser votre environnement de travail sous Lin
 excerpt: >-
   Travailler efficacement sous Linux va bien au-delà des simples commandes du terminal. Dans cet article, découvrez quelques conseils pour optimiser votre environnement de travail et améliorer votre expérience utilisateur.
 categories: []
+cover:
+  path: /imgs/articles/2024-02-19-quelques-conseils-pour-optimiser-votre-environnement-de-travail-sous-linux/cover.jpg
 authors:
   - nicolas
 keywords:

_tutorials/fr/2019-08-30-kotlin-exoplayer/index.md

@@ -6,6 +6,8 @@ slug: kotlin-exoplayer
 title: Créer votre player Netflix avec Exoplayer
 excerpt: >-
   Dans ce tutoriel nous allons créer un player android en Kotlin grâce à Exoplayer, pour pouvoir lire une vidéo locale mp4.
+cover:
+  path: /imgs/tutorials/2019-08-30-kotlin-exoplayer/cover.jpg
 categories:
   - architecture
 authors:

_tutorials/fr/2020-09-30-creez-un-chat-avec-symfony-et-mercure/index.md

@@ -6,6 +6,8 @@ slug: creez-un-chat-avec-symfony-et-mercure
 title: Créez un chat avec Mercure et Symfony
 excerpt: >-
   Le but de ce tutoriel est de maîtriser le protocole Mercure. Pour cela, nous allons le combiner au framework Symfony pour créer un petit système de chat.
+cover:
+  path: /imgs/tutorials/2020-09-30-creez-un-chat-avec-symfony-et-mercure/cover.jpg
 categories:
   - php
   - javascript

_tutorials/fr/2024-01-10-composition-over-inheritance-et-typage-generique-avec-symfony-et-doctrine/index.md

@@ -6,6 +6,8 @@ slug: composition-over-inheritance-et-typage-generique-avec-symfony-et-doctrine
 title: Composition over inheritance et typage générique avec Symfony et Doctrine
 excerpt: >-
   Abordons ensemble une solution pour utiliser l'injection de dépendance plutôt que l'héritage pour créer nos repositories Doctrine, tout en tirant parti du typage générique grâce à PHPStan.
+cover:
+  path: /imgs/tutorials/2024-01-10-composition-over-inheritance-et-typage-generique-avec-symfony-et-doctrine/cover.jpg
 categories:
   - php
 authors:

bin/build.ts

@@ -39,8 +39,7 @@ const writeJsonDataFilesAndFeedFile = async (): Promise<void> => {
 const build = async (): Promise<void> => {
   const designSystemRootDir = resolve(process.cwd(), 'node_modules/@eleven-labs/design-system/dist');
   cpSync(ASSETS_DIR, resolve(PUBLIC_DIR, 'imgs'), { recursive: true });
-  const destDir = resolve(process.cwd(), 'public');
-  cpSync(resolve(designSystemRootDir, 'imgs'), resolve(destDir, 'imgs'), { recursive: true });
+  cpSync(resolve(designSystemRootDir, 'imgs'), resolve(PUBLIC_DIR, 'imgs'), { recursive: true });
   await Promise.all([writeJsonDataFilesAndFeedFile(), generateImageFormats()]);
 
   if (args.ssr) {

src/helpers/generateImageFormats.ts

@@ -8,9 +8,13 @@ import { getPosts } from '@/helpers/markdownContentManagerHelper';
 export const generateImageFormats = async (): Promise<void> => {
   const posts = getPosts();
 
-  const covers = posts.filter((post) => post.cover).map((post) => post.cover?.path);
+  const covers = posts.filter((post) => post.cover?.path).map((post) => post.cover?.path);
   covers.push('/imgs/default-cover.jpg');
 
+  console.log({
+    covers,
+  });
+
   for (const cover of covers) {
     const imagePath = resolve(process.cwd(), 'public', cover!.slice(1) as string);
     const directoryPath = dirname(imagePath);