feat: start french translation

docs/astro.config.mjs

@@ -4,6 +4,7 @@ import { defineConfig } from 'astro/config';
 export const locales = {
   root: { label: 'English', lang: 'en' },
   es: { label: 'Español', lang: 'es' },
+  fr: { label: 'Français', lang: 'fr' },
 };
 
 // https://astro.build/config
@@ -28,6 +29,7 @@ export default defineConfig({
           autogenerate: { directory: 'guides' },
           translations: {
             es: 'Guías',
+            fr: 'Guides',
           },
         },
         {
@@ -35,6 +37,7 @@ export default defineConfig({
           autogenerate: { directory: 'challenges' },
           translations: {
             es: 'Desafíos',
+            fr: 'Challenges',
           },
         },
       ],
@@ -73,6 +76,10 @@ export default defineConfig({
           label: 'Español',
           lang: 'es',
         },
+        fr: {
+          label: 'Français',
+          lang: 'fr',
+        },
       },
     }),
   ],

docs/src/content/docs/fr/guides/getting-started.md

@@ -0,0 +1,57 @@
+---
+title: Comment démarrer
+description: Un guide sur la manière de commencer avec sur Angular Challenges.
+sidebar:
+  order: 1
+---
+
+Pour commencer avec les <b>Challenges Angular</b>, suivez ces étapes :
+
+## Créez un compte Github
+
+Si vous souhaitez soumettre une réponse, vous devrez avoir votre propre compte GitHub. De plus, avoir un compte GitHub est toujours bénéfique et c'est gratuit.
+
+## Forkez le projet GitHub
+
+Accédez au [répertoire des Challenges Angular](https://github.com/tomalaforge/angular-challenges) et cliquez sur le bouton <span class="github-neutral-btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2">
+<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>Fork</span> dans l'en-tête. Cela créera une copie de ce dépôt sur votre propre page GitHub.
+
+## Clonez le dépôt sur votre machine locale
+
+Sélectionnez un répertoire sur votre ordinateur local et clonez ce dépôt.
+
+Ouvrez un terminal, accédez au répertoire choisi et tapez la commande suivante :
+
+```bash
+git clone https://github.com/[VOTRE_NOM_GITHUB]/angular-challenges.git
+```
+
+:::note
+Vous pouvez trouver l'URL de clonage en cliquant sur le bouton <span class="github-success-btn"><> Code</span> dans votre <b>propre instance</b> du dépôt des Challenges Angular.
+
+![Header of github workpspace](../../../../assets/header-github.png)
+
+:::
+
+## Ouvrez le projet dans votre IDE préféré
+
+Ouvrez le projet dans n'importe quel IDE de votre choix.
+
+## Installez toutes les dépendances
+
+```bash
+npm ci
+```
+
+## Choisissez un challenge
+
+Votre projet est maintenant opérationnel. La seule étape restante est de choisir un challenge 🚀
+
+Chaque challenge se compose de :
+
+- <b>Nom</b> : indiquant de quoi traite le défi.
+- <b>Numéro</b> : ordre de création. Le numéro n'a pas de signification particulière mais aide pour la référence dans la section des Demandes de Tirage (Pull Requests) GitHub.
+- <b>Badge</b> : aide à visualiser le degré de difficulté. C'est entièrement subjectif 😅
+  - 🟢 facile
+  - 🟠 moyen
+  - 🔴 difficile

docs/src/content/docs/fr/guides/resolve-challenge.md

@@ -0,0 +1,93 @@
+---
+title: Résoudre un Challenge
+description: Guide pour résoudre un challenge
+sidebar:
+  order: 2
+---
+
+Dans ce guide, vous apprendrez comment résoudre un challenge et soumettre une réponse sur le répertoire principal de Github.
+
+## Introduction
+
+Ce répertoire utilise [Nx](https://nx.dev/getting-started/intro). <b>Nx</b> est un monorépo qui vous permet de stocker plusieurs applications à l'intérieur du même espace de travail. Chaque challenge est une application distincte. Si vous ouvrez le répertoire `apps`, vous trouverez plusieurs dossiers, chacun lié à un challenge spécifique. Chaque dossier représente une application autonome complète `Nx`. Pour exécuter et démarrer l'une d'entre elles, ouvrez votre terminal et exécutez :
+
+```bash
+npx nx serve <NOM_APPLICATION>
+```
+
+:::note
+Si vous n'êtes pas sûr de votre `NOM_APPLICATION`, ouvrez le fichier README.md. La commande `serve` y est écrite, avec un lien vers la documentation du challenge.
+:::
+
+:::note
+Si vous installez `nx` globalement sur votre ordinateur, vous éviterez de préfixer chaque commande par `npx`.
+
+Pour installer `nx` globalement, exécutez
+
+```bash
+npm i -g nx
+```
+
+:::
+
+## Créer une Branche Git
+
+Avant de commencer à résoudre un challenge, créez une branche git pour y ajouter vos modifications.
+
+```bash
+git checkout -b <BRANCH_NAME>
+```
+
+## Résoudre un Challenge
+
+Suivez les instructions décrites sur chaque Challenge pour le résoudre.
+
+## Commitez et Pousser votre Travail
+
+La dernière étape consiste à valider votre travail en suivant les [Conventional Guidelines](https://www.conventionalcommits.org/en/v1.0.0/).
+
+Enfin, poussez votre travail vers le répertoire distant avec la commande suivante
+
+```bash
+    git push --set-upstream origin <BRANCH_NAME>
+```
+
+:::tip[Pas besoin de retenir la commande par coeur]
+Vous n'avez pas besoin de mémoriser précisément la commande. Il vous suffit de vous rappeler `git push `et si c'est la première fois que vous poussez cette branche, `git` vous fournira la commande complète.
+:::
+
+## Soumettre votre Travail sur le répertoire Principal
+
+Maintenant, tout votre travail se trouve dans votre instance locale du dépôt de Angular Challenges.
+
+La prochaine étape est de vous rendre sur la page principale de Angular Challenges et de créer une nouvelle Pull Request.
+
+Github devrait afficher en en-tête une notification pour vous aider à créer la pull request.
+
+Si ce n'est pas le cas, vous avez soit mal effectué l'une des étapes précédentes, soit vous pouvez vous rendre sur l'onglet <b>Pull Request</b> et cliquer sur le bouton <span class="github-success-btn">New pull request</span>.
+
+Une fois que vous avez choisi les deux branches à comparer, vous devriez arriver sur la page suivante :
+
+![New pull request screen](../../../../assets/new-pull-request.png)
+
+Dans la section du titre, commencez par <b>Réponse :</b> suivi de votre <b>numéro de challenge</b>. Ensuite, vous êtes libre d'ajouter tout ce que vous souhaitez.
+
+:::danger
+C'est très important. Cela permet aux autres de savoir quel challenge vous tentez de résoudre.
+:::
+
+Dans la section de description, vous pouvez ajouter des questions, des problèmes rencontrés ou tout autre contenu que vous souhaitez partager. Vous pouvez laisser vide si vous n'avez rien à dire.
+
+Vous pouvez maintenant cliquer sur <span class="github-success-btn">Créer pull request</span>.
+
+Je la lirai et commenterai <b>quand j'aurai du temps libre.</b>
+
+<p class="important-block">Ne vous inquiétez pas si votre réponse n'est pas examinée immédiatement. Je le fais <b>gratuitement</b> et pendant mon <b>temps libre</b>. Si vous souhaitez me soutenir, vous pouvez le faire en me <a href="https://github.com/sponsors/tomalaforge">sponsorisant sur github</a>. Cela validera que mon travail vous aide, vous ou votre équipe.</p>
+
+:::note
+Tout le monde peut commenter ou lire les Pull Requests des autres participants.
+:::
+
+:::tip[Champion OSS]
+🔥 Une fois que vous avez terminé ce tutoriel, vous êtes prêt à contribuer à n'importe quel répertoire public Github et à soumettre une PR. C'est aussi simple que ça. 🔥
+:::

docs/src/content/docs/fr/index.mdx

@@ -0,0 +1,78 @@
+---
+title: Bienvenue sur Angular Challenges
+description: Commence par résoudre ces défis et deviens un meilleur ingénieur FrontEnd Angular.
+template: splash
+noCommentSection: true
+banner:
+  content: J'aurai moins de temps libre dans les deux prochains mois, donc ne vous inquiétez pas si vos pull requests prennent du temps à être examinées.
+hero:
+  tagline: Commence maintenant et deviens un expert Angular !
+  image:
+    file: ../../../assets/angular-challenge.webp
+  actions:
+    - text: C'est parti !
+      link: /guides/getting-started/
+      icon: right-arrow
+      variant: primary
+    - text: Aller au dernier Challenge
+      link: /challenges/performance/40-christmas-web-worker/
+      icon: rocket
+    - text: Donne une étoile
+      link: https://github.com/tomalaforge/angular-challenges
+      icon: github
+      variant: secondary
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+import MyIcon from '../../../components/MyIcon.astro';
+
+<CardGrid>
+<Card title="40 Défis">
+    Ce répertoire rassemble 40 défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+</Card>
+
+<Card title="Devenir un Mainteneur OSS">
+  L'un des objectifs de ce répertoire est de rendre plus accessible les
+  contributions aux logiciels Open Source (OSS). En résolvant ces défis, vous
+  apprendrez comment commencer à contribuer à n'importe quel projet Open Source.
+</Card>
+
+<Card title="Apprendre aux Côtés des Autres">
+  Apprendre et démarrer sur un nouveau framework est toujours difficile. Cette
+  série de défis propose des cas d'utilisation réels pour appliquer ce que vous
+  avez appris. N'importe qui peut commenter ou aider.{' '}
+  <b>
+    Apprendre seul est bien, mais apprendre aux côtés des autres vous fera
+    progresser davantage et plus rapidement.
+  </b>
+</Card>
+
+<Card title="Contribuer">
+  Avez-vous un problème, un bug intéressant ou une idée ? N'hésitez pas ;{' '}
+  <b>créez vos propres challenges</b> sans perdre de temps.
+</Card>
+
+<Card title="Se Préparer pour les Entretiens">
+  Résoudre ces challenges vous préparera aux éventuels défis techniques que vous
+  pourriez rencontrer lors d'un entretien pour un rôle d'ingénieur frontend.
+</Card>
+
+<Card title="Sponsoring">
+    Ce projet est gratuit et vise à le rester le plus longtemps possible. Cependant, tout est réalisé pendant mon temps libre, y compris la création de challenges et la relecture des pull requests. <b>Le sponsoring peut me soutenir et contribuer à la croissance du projet.</b>
+</Card>
+</CardGrid>
+
+---
+
+<div class="article-footer">
+  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
+    <MyIcon name="fillHeart" size="1.2rem" color="white" />
+    Sponsoriser le Project
+  </a>
+</div>
+
+<div class="main-page-footer">
+  Créer par{' '}
+  <a href="https://github.com/tomalaforge?tab=repositories">Thomas Laforge</a> -
+  Réaliser grâce à 🌟 <a href="https://starlight.astro.build/">Starlight</a>
+</div>