i18n(fr): update tutorial/* (#10343)

* i18n(fr): update `tutorial/*`

See #9240, #10223, #10332 and #10342

* missing translation

Co-authored-by: Thomas Bonnet <thomasbnt@protonmail.com>

---------

Co-authored-by: Thomas Bonnet <thomasbnt@protonmail.com>

src/content/docs/fr/tutorial/0-introduction/1.mdx

@@ -55,3 +55,4 @@ Ce tutoriel est un projet de notre équipe de documentation. Vous pouvez nous tr
 - [ ] Je suis prêt(e) à construire cette chose !
 </Checklist>
 </Box>
+

src/content/docs/fr/tutorial/0-introduction/index.mdx

@@ -2,6 +2,8 @@
 type: tutorial
 unitTitle: 'Bienvenue à tous !'
 title: Créez votre premier blog avec Astro
+sidebar:
+  label: 'Tutoriel : Construire un blog'
 description: >-
   Apprenez les bases d'Astro grâce à un tutoriel basé sur un projet. Toutes les connaissances préalables dont vous avez besoin pour commencer !
 i18nReady: true
@@ -21,7 +23,7 @@ Tout au long du processus, vous allez :
 - Ajouter de l'interactivité à votre site
 - Déployer votre site sur le web
 
-Envie d'apercevoir ce que vous allez construire ? Vous pouvez voir le projet final sur [GitHub](https://github.com/withastro/blog-tutorial-demo) ou [StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro).
+Vous voulez avoir un aperçu de ce que vous allez construire ? Vous pouvez consulter le projet final sur [GitHub](https://github.com/withastro/blog-tutorial-demo) ou ouvrir une version fonctionnelle dans un environnement de codage en ligne tel que [IDX](https://idx.google.com/import?url=https:%2F%2Fgithub.com%2Fwithastro%2Fblog-tutorial-demo%2F) ou [StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro).
 
 :::note
 Si vous préférez commencer à explorer Astro avec un site Astro pré-construit, vous pouvez visiter https://astro.new et choisir un modèle de départ à ouvrir et à éditer dans un éditeur en ligne.

src/content/docs/fr/tutorial/1-setup/2.mdx

@@ -31,50 +31,46 @@ La méthode préférée pour créer un nouveau site Astro est d'utiliser notre a
       <Fragment slot="npm">
       ```shell
       # créez un nouveau projet avec npm
-      npm create astro@latest
+      npm create astro@latest -- --template minimal
       ```
       </Fragment>
       <Fragment slot="pnpm">
       ```shell
       # créez un nouveau projet avec pnpm
-      pnpm create astro@latest
+      pnpm create astro@latest --template minimal
       ```
       </Fragment>
       <Fragment slot="yarn">
       ```shell
       # créez un nouveau projet avec yarn
-      yarn create astro
+      yarn create astro --template minimal
       ```
       </Fragment>
     </PackageManagerTabs>
 
 2. Confirmez avec `y` pour installer `create-astro`.
-3. À la question, "Where would you like to create your new project?" ("Où souhaitez-vous créer votre nouveau projet ?") saisissez le nom d'un dossier pour créer un nouveau répertoire pour votre projet, 
-  par exemple `./tutoriel`.
+3. Lorsque l'invite vous demande où créer le projet, saisissez le nom d'un dossier pour créer un nouveau répertoire pour votre projet, par exemple :
+`./tutorial`
 
     :::note
     Un nouveau projet Astro ne peut être créé que dans un dossier complètement vide, alors choisissez un nom pour votre dossier qui n'existe pas encore !
     :::
 
-4. Vous verrez une courte liste de modèles de départ que vous pourrez choisir. Utilisez les touches fléchées (haut et bas) pour naviguer jusqu'au modèle “Empty” (Vide), puis appuyez sur la touche Entrée pour valider votre choix.
+4. Lorsque l'invite vous demande si vous souhaitez ou non installer des dépendances, saisissez ou sélectionnez `y`.
 
-5. Lorsque l'invite vous demande si vous prévoyez d'utiliser TypeScript, tapez `n`.
-
-6. À la question, "Would you like to install dependencies?" ("Souhaitez-vous installer des dépendances ?") tapez`y`.
-
-7. Lorsque l'invite demande, "Would you like to initialize a new git repository?" ("Souhaitez-vous initialiser un nouveau dépôt git ?",) tapez `y`.
+5. Lorsque l'invite vous demande si vous souhaitez ou non initialiser un nouveau référentiel git, saisissez ou sélectionnez `y`.
 </Steps>
 
 Une fois l'assistant d'installation terminé, vous n'avez plus besoin de ce terminal. Vous pouvez maintenant ouvrir VS Code pour continuer.
 
 ## Ouvrez votre projet dans VS Code
 
 <Steps>
-8. Ouvrez VS Code. Vous serez invité à ouvrir un dossier. Choisissez le dossier que vous avez créé lors de l'assistant de configuration.
+6. Ouvrez VS Code. Vous serez invité à ouvrir un dossier. Choisissez le dossier que vous avez créé lors de l'assistant de configuration.
 
-9. Si c'est la première fois que vous ouvrez un projet Astro, vous devriez voir une notification vous demandant si vous souhaitez installer des extensions recommandées. Cliquez pour voir les extensions recommandées, et choisissez l'extension [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Cela fournira une coloration syntaxique et des complétions automatiques pour votre code Astro.
+7. Si c'est la première fois que vous ouvrez un projet Astro, vous devriez voir une notification vous demandant si vous souhaitez installer des extensions recommandées. Cliquez pour voir les extensions recommandées, et choisissez l'extension [Astro language support](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Cela fournira une coloration syntaxique et des complétions automatiques pour votre code Astro.
 
-10. Assurez-vous que le terminal est visible et que vous pouvez voir l'invite de commande, comme ceci :
+8. Assurez-vous que le terminal est visible et que vous pouvez voir l'invite de commande, comme ceci :
 
     ```sh
     utilisateur@machine:~/tutoriel$
@@ -96,7 +92,7 @@ Pour prévisualiser vos fichiers de projet _comme un site web_ pendant que vous
 ### Démarrez le serveur de dev
 
 <Steps>
-11. Exécutez la commande pour démarrer le serveur dev d'Astro en tapant dans le terminal de VS Code :
+9. Exécutez la commande pour démarrer le serveur dev d'Astro en tapant dans le terminal de VS Code :
 
     <PackageManagerTabs>
       <Fragment slot="npm">
@@ -124,7 +120,7 @@ Pour prévisualiser vos fichiers de projet _comme un site web_ pendant que vous
 Vos fichiers de projet contiennent tout le code nécessaire pour afficher un site web Astro, mais c'est le navigateur qui est responsable de l'affichage de votre code sous forme de pages web.
 
 <Steps>
-12. Cliquez sur le lien `localhost` dans la fenêtre du terminal pour voir un aperçu en direct de votre nouveau site web Astro !
+10. Cliquez sur le lien `localhost` dans la fenêtre du terminal pour voir un aperçu en direct de votre nouveau site web Astro !
 
     (Astro utilise `http://localhost:4321` par défaut si le port `4321` est disponible.)
 

src/content/docs/fr/tutorial/1-setup/5.mdx

@@ -64,7 +64,7 @@ Vous souhaitez mettre à jour la page d'accueil de votre site web existant. Quel
       J'ouvre un terminal, exécute `create astro`, puis visite mon URL Netlify.
     </Option>
     <Option>
-      Je modifie un paramètre dans mon application Netlify, puis crée un nouveau projet Astro sur StackBlitz.
+      Je modifie un paramètre dans mon application Netlify, puis je démarre un nouveau projet Astro sur astro.new.
     </Option>
     <Option isCorrect>
       Je fais une modification dans `index.astro`. Je valide et pousse mes modifications vers GitHub. Netlify gérera le reste !

src/content/docs/fr/tutorial/1-setup/index.mdx

@@ -18,16 +18,58 @@ Maintenant que vous savez ce que vous allez construire, configurons tous les out
 
 Cette unité vous montre comment configurer votre environnement de développement et le déployer sur Netlify. Passez à [Unité 2](/fr/tutorial/2-pages/) si vous êtes déjà à l'aise avec votre environnement et votre flux de travail.
 
-:::tip[Utilisation de StackBlitz]
+:::tip[Suivre le tutoriel dans un éditeur de code en ligne]
 
-Vous souhaitez réaliser ce tutoriel dans un éditeur de code en ligne ?
+Vous préférez suivre ce didacticiel dans un éditeur de code en ligne ? Suivez les instructions ci-dessous pour commencer à utiliser Google IDX.
 <details>
-<summary>Suivez ces instructions, puis passez directement à l'unité 2 !</summary>
+<summary>Utilisation de Google IDX : suivez ces instructions, puis passez directement à l’unité 2 !</summary>
+
+**Configurer IDX**
+
+<Steps>
+1. Suivez le lien externe pour [ouvrir le modèle « Empty project » dans un nouvel espace de travail sur IDX](https://astro.new/minimal?on=idx).
+
+2. Suivez l’invite pour vous connecter à votre compte Google si vous n’êtes pas déjà connecté.
+
+3. Saisissez un nom pour votre projet si vous souhaitez le modifier par rapport au nom par défaut « Empty project ». Cliquez sur **Créer**.
+
+4. Attendez que l'espace de travail soit créé. Cela peut prendre 30 à 60 secondes. Si tout se passe bien, vous verrez le projet Astro chargé dans un éditeur de code en ligne.
+
+5. Attendez qu'IDX exécute deux scripts : un pour installer Astro et un autre pour démarrer le serveur de développement. Notez que vous pouvez voir brièvement un message indiquant que votre espace de travail « n'a pas pu trouver Astro » si votre espace de travail se charge avant la fin de l'installation d'Astro. Ce message peut être ignoré et annulé s'il ne s'efface pas de lui-même.
+</Steps>
+
+**Faire un changement**
+
+Si tout se passe bien, vous devriez voir le code du fichier `src/pages/index.astro` ouvert en écran partagé avec un aperçu en direct du site web. Suivez les instructions de [« Écrivez votre première ligne d'Astro »](/fr/tutorial/1-setup/3/) pour apporter une modification à ce fichier.
+
+**Créer un dépôt GitHub**
+
+<Steps>
+1. Accédez à l'élément de navigation « Contrôle de source » dans la barre de menu verticale ou ouvrez avec <kbd>CTRL + SHIFT + G</kbd>. 
+
+2. Sélectionnez l'option Publier sur GitHub. Cela créera un nouveau dépôt dans votre compte GitHub.
+3. Suivez les instructions pour vous connecter à votre compte GitHub.
+4. Une fois connecté, revenez à l'onglet IDX et vous aurez le choix de nommer votre nouveau dépôt et de choisir si vous souhaitez créer un dépôt privé ou public. Vous pouvez choisir n'importe quel nom et n'importe quel type de dépôt pour ce didacticiel.
+5. IDX effectuera un commit initial et publiera dans votre nouveau dépôt GitHub.
+6. À l'avenir, chaque fois que vous aurez des modifications à valider sur GitHub, l'icône de navigation du contrôle de source affichera un numéro. Il s'agit du nombre de fichiers qui ont été modifiés depuis votre dernière validation. En accédant à cet onglet et en effectuant deux étapes (validation et publication), vous pourrez saisir un message de validation et mettre à jour votre dépôt.
+</Steps>
+
+**Déployer votre site**
+
+Si vous souhaitez déployer sur Netlify et disposer d'une version publiée en direct de votre site pendant que vous travaillez, passez à l'unité 1 pour [Déployer votre site sur le web](/fr/tutorial/1-setup/5/).
+
+Sinon, passez à l'[Unité 2](/fr/tutorial/2-pages/) pour commencer à construire avec Astro !
+
+</details>
+
+{/* StackBlitz instructions 
+<details>
+<summary>Utilisation de StackBlitz : Suivez ces instructions, puis passez directement à l'unité 2 !</summary>
 
 **Configuration de StackBlitz**
 
 <Steps>
-1. Visitez [astro.new](https://astro.new) et cliquez sur le bouton pour ouvrir le modèle "Empty Project" dans StackBlitz.
+1. Suivez le lien externe pour [ouvrir le modèle « Empty project » sur StackBlitz](https://astro.new/minimal?on=stackblitz).
 
 2. Cliquez sur "Sign in" en haut à droite pour vous connecter en utilisant vos identifiants GitHub.
 
@@ -50,10 +92,12 @@ Dans le volet des fichiers, vous devriez voir `src/pages/index.astro`. Cliquez p
   
 **Déployez votre site**
 
-Si vous souhaitez déployer sur Netlify, passez à [Déployez votre site sur le web](/fr/tutorial/1-setup/5/).
+Si vous souhaitez déployer sur Netlify et disposer d'une version publiée en direct de votre site pendant que vous travaillez, passez à l'unité 1 pour [Déployer votre site sur le web](/fr/tutorial/1-setup/5/).
+
 Sinon, passez à l'[Unité 2](/fr/tutorial/2-pages/) pour commencer à créer avec Astro !
 
 </details>
+*/}
 :::
 
 ## Où allons-nous ?

src/content/docs/fr/tutorial/2-pages/3.mdx

@@ -23,7 +23,7 @@ Maintenant que vous avez un site web multi-pages avec du contenu HTML, ajoutons
   - Ajouter des informations vous concernant
 </PreCheck>
 
-N'importe quel fichier HTML est valide en tant que langage Astro. Mais, vous pouvez faire plus avec Astro qu'avec un HTML classique !
+Tout fichier HTML est un langage Astro valide. Mais Astro permet bien plus que du simple HTML !
 
 ## Définir et utiliser une variable
 

src/content/docs/fr/tutorial/2-pages/4.mdx

@@ -6,7 +6,6 @@ description: |-
   Ajouter une balise de style Astro pour une mise en forme localisée sur la page
 i18nReady: true
 ---
-
 import Checklist from '~/components/Checklist.astro';
 import Spoiler from '~/components/Spoiler.astro';
 import Box from '~/components/tutorial/Box.astro';

src/content/docs/fr/tutorial/2-pages/5.mdx

@@ -6,7 +6,6 @@ description: |-
   Créez une feuille de style globale pour le style de l'ensemble du site
 i18nReady: true
 ---
-
 import Checklist from '~/components/Checklist.astro';
 import Spoiler from '~/components/Spoiler.astro';
 import Box from '~/components/tutorial/Box.astro';
@@ -21,7 +20,7 @@ Maintenant que vous avez une page "À propos" stylisée, ajoutons quelques style
 
 ## Ajoutez une feuille de style globale
 
-Vous avez vu que la balise `<style>` d'Astro est **limitée par défaut**, ce qui signifie qu'elle n'affecte que les éléments de son propre fichier.
+Vous avez vu que la balise `<style>` d'Astro possède une **portée limitée par défaut**, ce qui signifie qu'elle n'affecte que les éléments de son propre fichier.
 
 Il existe plusieurs façons de définir des styles de manière **globale** dans Astro, mais dans ce tutoriel, vous allez créer et importer un fichier `global.css` dans chacune de vos pages. Cette combinaison de feuille de style et de balise `<style>` vous permet de contrôler certains styles à l'échelle du site, et d'appliquer certains styles spécifiques exactement où vous le souhaitez.
 

src/content/docs/fr/tutorial/3-components/4.mdx

@@ -8,7 +8,6 @@ description: >-
   une balise de script Astro
 i18nReady: true
 ---
-
 import Blanks from '~/components/tutorial/Blanks.astro';
 import Box from '~/components/tutorial/Box.astro';
 import Checklist from '~/components/Checklist.astro';
@@ -142,8 +141,8 @@ L'ajout d'une balise `<script>` fournit du JavaScript côté client pour "écout
     ```astro title="src/pages/index.astro" ins={2-6}
       <Footer />
       <script>
-        document.querySelector('.hamburger').addEventListener('click', () => {
-          document.querySelector('.nav-links').classList.toggle('expanded');
+        document.querySelector('.hamburger')?.addEventListener('click', () => {
+          document.querySelector('.nav-links')?.classList.toggle('expanded');
         });
       </script>
     </body>
@@ -170,8 +169,8 @@ Au lieu d'écrire votre JavaScript directement sur chaque page, vous pouvez dép
     ```astro title="src/pages/index.astro" ins={7} del={3-5}
       <Footer />
       <script>
-        document.querySelector('.hamburger').addEventListener('click', () => {
-          document.querySelector('.nav-links').classList.toggle('expanded');
+        document.querySelector('.hamburger')?.addEventListener('click', () => {
+          document.querySelector('.nav-links')?.classList.toggle('expanded');
         });
 
         import "../scripts/menu.js";