docs: translate

Translate tuto 1.1-1.3

Apply suggestions from code review

code reviews

fix: replace locale svelte site url

Translate tuto 1.5 to 1.7

refactor: rename SITE_SVELTE as SVELTE_SITE_URL

docs: fix 1.5-1.7

docs: remove kbd tag

Translate tuto 1.4 (#3)

* Translate tuto 1.4

* docs: fix 1.4

* docs: fix fruit dictionary

---------

Co-authored-by: Romain Crestey <[email protected]>

Translate tuto 1.8 -> 2.1 (#5)

* Translate tutorial 1.8 and 2.1

* docs: fix 1.8-2.1

---------

Co-authored-by: Romain Crestey <[email protected]>

style: fix vo (#6)

* style: fix vo

* style: fix vo bis

* style: fix vo ter

---------

Co-authored-by: Romain Crestey <[email protected]>

docs: translate misc (#7)

* docs: translate misc

* docs: translate misc bis

---------

Co-authored-by: Romain Crestey <[email protected]>

Translate tuto 2.2 and 2.3 (#8)

* Translate tuto 2.2 and 2.3

* docs: fix 2.2-2.3

---------

Co-authored-by: Romain Crestey <[email protected]>

translate tuto 2.4 (#9)

* translate tuto 2.4

* docs: fix 2.4

---------

Co-authored-by: Romain Crestey <[email protected]>

docs: 2.8 (#11)

* docs: 2.8

* Apply suggestions from code review

Co-authored-by: Maxime Dupont <[email protected]>

---------

Co-authored-by: Maxime Dupont <[email protected]>

docs: 2.9-12 (#10)

* docs: 2.9-12

* docs: better titles

* Apply suggestions from code review

Co-authored-by: Maxime Dupont <[email protected]>

---------

Co-authored-by: Romain Crestey <[email protected]>
Co-authored-by: Maxime Dupont <[email protected]>

docs: 2.7

docs: 2.6

docs: fix link

Translate tuto 3.1-3.2 (#1)

* Translate tuto 3.1-3.2

* code reviews

* docs: fix links

* docs: change part titles

* docs: fix link

---------

Co-authored-by: Romain Crestey <[email protected]>

docs: fix titles

docs: forgotten section

2.5 (#14)

* docs: 2.5.1

* docs: 2.5.2

* docs: 2.5.3

* docs: 2.5.4

* docs: 2.5.5

* docs: 2.5.6

* docs: 2.5.7

* Update content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-a/src/lib/App.svelte

Co-authored-by: Maxime Dupont <[email protected]>

* Update content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-b/src/lib/App.svelte

Co-authored-by: Maxime Dupont <[email protected]>

* Update content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/README.md

Co-authored-by: Maxime Dupont <[email protected]>

---------

Co-authored-by: Maxime Dupont <[email protected]>

3.3 à 3.7 (#15)

* docs: 3.3.1

* docs: 3.3.2

* docs: 3.4

* docs: 3.5

* docs: 3.6.1

* docs: 3.6.2

* docs: 3.6.3

* docs: 3.6.4

* docs: 3.6.5

* docs: 3.7.1, 3.7.2

* docs: 3.7.3

* Apply suggestions from code review

Co-authored-by: Maxime Dupont <[email protected]>

---------

Co-authored-by: Maxime Dupont <[email protected]>

3.8 & 3.9 (#16)

* docs: 3.8

* docs: 3.9

* Apply suggestions from code review

Co-authored-by: Maxime Dupont <[email protected]>

---------

Co-authored-by: Maxime Dupont <[email protected]>

4.1, 4.2, 4.3 (#17)

* docs: 4.1.1

* docs: 4.1.2

* docs: 4.1.3

* docs: 4.1.4

* docs: 4.2.1, 4.2.2

* docs: 4.2.3

* docs: 4.2.4

* docs: 4.2.5

* docs: 4.3

* Apply suggestions from code review

Co-authored-by: Maxime Dupont <[email protected]>

---------

Co-authored-by: Maxime Dupont <[email protected]>

fix: fix link

ci: fix test

translate search an nav details

Author: Romain Crestey

README.md

@@ -28,4 +28,8 @@ Tutorials live inside `content`. Each tutorial consists of a `README.md`, which
 
 ## Bumping tutorial dependencies
 
-Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`).
+Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`).
+
+## i18n
+
+You need to add the `SVELTE_SITE_URL` to your environment variables to point to your locale svelte site.

content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md

@@ -1,30 +1,30 @@
 ---
-title: Welcome to Svelte
+title: Bienvenue dans le monde de Svelte !
 ---
 
-Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint.
+Bienvenue dans le tutoriel Svelte ! Vous y apprendrez tout ce qu'il y a savoir pour développer en toute simplicité des applications web de toutes tailles, rapides et légères.
 
-You can also consult the [API docs](https://svelte.dev/docs) and the [examples](https://svelte.dev/examples), or — if you're impatient to start hacking on your machine locally — create a project with `npm init svelte`.
+<!-- Vous pouvez aussi consulter la [documentation de l'API](SVELTE_SITE_URL/docs) ainsi que les [exemples](SVELTE_SITE_URL/examples), ou — si vous êtes pressé•e•s de jouer sur votre machine en local — vous pouvez [créer un projet de base en 60 secondes avec `npm init svelte`](SVELTE_SITE_URL/docs/introduction#start-a-new-project). -->
 
-## What is Svelte?
+## C'est quoi Svelte ?
 
-Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app _declaratively_ out of components that combine markup, styles and behaviours.
+Svelte est un outil pour développer des applications web. Comme d'autre <span class="vo">[frameworks](SVELTE_SITE_URL/docs/web#framework)</span> de composants, il permet de construire votre application de manière _déclarative_, à partir de composants : composition de HTML, styles et comportements.
 
-These components are _compiled_ into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.
+Ces composants sont _compilés_ en petits modules JavaScript efficaces qui éliminent les inconvénients traditionnellement associés aux frameworks UI.
 
-You can build your entire app with Svelte (for example, using an application framework like [SvelteKit](https://kit.svelte.dev), which this tutorial will cover), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere.
+Vous pouvez construire votre application entièrement avec Svelte (par exemple, en utilisant le <span class="vo">[framework](SVELTE_SITE_URL/docs/web#framework)</span> d'applications [SvelteKit](https://kit.svelte.dev), également couvert par ce tutoriel), ou l'ajouter au fur et à mesure à une base de code existante. Vous pouvez aussi générer des composants en tant que modules autonomes (<span class="vo">[web components](SVELTE_SITE_URL/docs/web#web-component)</span>) utilisables n'importe où, sans la contrainte d'une dépendance à un <span class="vo">[framework](SVELTE_SITE_URL/docs/web#framework)</span> traditionnel.
 
-## How to use this tutorial
+## Comment se servir de ce tutoriel ?
 
-> You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
+> Vous aurez besoin de connaissances de base en HTML, CSS et JavaScript pour comprendre Svelte.
 
-This tutorial is split into four main parts:
+Ce tutoriel est découpé en 4 parties :
 
-- [Basic Svelte](/tutorial/welcome-to-svelte) (you are here)
-- [Advanced Svelte](/tutorial/tweens)
-- [Basic SvelteKit](/tutorial/introducing-sveltekit)
-- [Advanced SvelteKit](/tutorial/optional-params)
+- [Les bases de Svelte](/tutorial/welcome-to-svelte) (vous êtes ici)
+- [Svelte avancé](/tutorial/tweens)
+- [Les bases de SvelteKit](/tutorial/introducing-sveltekit)
+- [SvelteKit avancé](/tutorial/optional-params)
 
-Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
+À mesure que vous progresserez dans le tutorial, vous serez amené•e•s à faire à des mini exercices pensés pour illustrer de nouvelles fonctionnalités. Chaque chapitre se base sur ce que vous avez appris dans les chapitres précédents, de sorte qu'il est recommandé de suivre le tutoriel dans l'ordre, en commençant par le début. Si besoin, vous pouvez naviguer entre les chapitres à l'aide du menu déroulant ci-dessous (cliquez sur 'Introduction / Bases').
 
-If you get stuck, you can click the `solve` button <span class="desktop">to the left of the editor</span><span class="mobile">in the top right of the editor view</span>. (<span class="mobile">Use the toggle below to switch between tutorial and editor views. </span>The `solve` button is disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.
+Chaque chapitre de ce tutoriel vous présente un bouton `Résoudre` <span class="desktop">à gauche</span><span class="mobile">en haut à droite</span> de l'éditeur sur lequel vous pouvez cliquer si vous bloquez malgré les instructions. (<span class="mobile">Utilisez le toggle en bas pour changer de vue entre le tutoriel et l'éditeur. </span>Le bouton `Résoudre` est désactivé sur les sections comme celles-ci qui n'incluent pas d'exercice.) Essayez de ne pas trop vous en servir ; vous apprendrez plus vite en trouvant vous-même où placer les blocs de code suggérés et en les tapant manuellement dans l'éditeur.

content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/app-a/src/lib/App.svelte

@@ -1 +1 @@
-<h1>Welcome!</h1>
+<h1>Bienvenue !</h1>

content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md

@@ -1,34 +1,35 @@
 ---
-title: Your first component
+title: Votre premier composant
 ---
 
-In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The `App.svelte` file, open in the code editor to the right, is a simple component.
+En Svelte, une application est composée d'un ou plusieurs _composants_. Un composant est un
+In Svelte, an application is composed from one or more _components_. Un composant est un bloc de code autonome réutilisable qui encapsule du HTML, du CSS et du JavaScript qui vont ensemble, écrit dans un fichier `.svelte`. Le fichier `App.svelte`, ouvert dans l'éditeur de code à droite, est un composant simple.
 
-## Adding data
+## Ajouter de la donnée
 
-A component that just renders some static markup isn't very interesting. Let's add some data.
+Un composant qui se contente d'afficher du <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> statique n'est pas très intéressant. Ajoutons-lui de la donnée.
 
-First, add a script tag to your component and declare a `name` variable:
+D'abord, ajoutez une balise `<script>` à votre composant, et déclarez une variable `name` :
 
 ```svelte
 /// file: App.svelte
 +++<script>
 	let name = 'Svelte';
 </script>+++
 
-<h1>Hello world!</h1>
+<h1>Bonjour tout le monde !</h1>
 ```
 
-Then, we can refer to `name` in the markup:
+Puis, vous pouvez utilisez `name` dans le <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> :
 
 ```svelte
 /// file: App.svelte
-<h1>Hello +++{name}+++!</h1>
+<h1>Bonjour +++{name}+++!</h1>
 ```
 
-Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.
+À l'intérieur des accolades, il est possible d'utiliser n'importe quelle expression JavaScript. Essayez de remplacer `name` par `name.toUpperCase()` pour un accueil plus bruyant.
 
 ```svelte
 /// file: App.svelte
-<h1>Hello {name+++.toUpperCase()+++}!</h1>
+<h1>Bonjour {name+++.toUpperCase()+++}!</h1>
 ```

content/tutorial/01-svelte/01-introduction/02-your-first-component/app-a/src/lib/App.svelte

@@ -1 +1 @@
-<h1>Hello world!</h1>
+<h1>Bonjour tout le monde !</h1>

content/tutorial/01-svelte/01-introduction/02-your-first-component/app-b/src/lib/App.svelte

@@ -2,4 +2,4 @@
 	let name = 'Svelte';
 </script>
 
-<h1>Hello {name.toUpperCase()}!</h1>
+<h1>Bonjour {name.toUpperCase()}!</h1>

content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md

@@ -1,36 +1,36 @@
 ---
-title: Dynamic attributes
+title: Attributs dynamiques
 ---
 
-Just like you can use curly braces to control text, you can use them to control element attributes.
+Vous pouvez utiliser des accolades pour contrôler les attributs d'un élément, comme vous le feriez pour contrôler du texte.
 
-Our image is missing a `src` — let's add one:
+Il manque l'attribut `src` à notre image — corrigeons cet oubli :
 
 ```svelte
 /// file: App.svelte
 <img +++src={src}+++ />
 ```
 
-That's better. But if you hover over the `<img>` in the editor, Svelte is giving us a warning:
+Voilà qui est mieux. Mais Svelte nous avertit :
 
 > A11y: &lt;img&gt; element should have an alt attribute
 
-When building web apps, it's important to make sure that they're _accessible_ to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
+Lorsque l'on construit des applications web, il est important de s'assurer que celles-ci sont **accessibles** à l'audience la plus large possible, en incluant des personnes avec (par exemple) des déficiences visuelles ou moteures, ou des personnes avec du matériel informatique peu puissant, ou avec une mauvaise connection internet. L'accessibilité (que l'on écrit souvent "a11y") n'est pas toujours simple à mettre en place correctement, mais Svelte vous aidera en vous avertissant si vos écrivez du <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> non accessible.
 
-In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
+Dans ce cas, il manque à notre image l'attribut `alt` qui décrit l'image pour les personnes utilisant des liseuses d'écran, ou pour les personnes ne pouvant pas télécharger l'image en raison d'une mauvaise connection internet. Rectifions cela :
 
 ```svelte
 /// file: App.svelte
-<img src={src} +++alt="A man dances."+++ />
+<img src={src} +++alt="Un homme danse">
 ```
 
-We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
+Nous pouvons utiliser des accolades **à l'intérieur** des attributs. Essayez de changer l'attribut `alt` en `"{name} danse."` — n'oubliez pas de déclarer une variable `name` dans le bloc `<script>`.
 
-## Shorthand attributes
+## Raccourcis d'attributs
 
-It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
+Il est courant d'avoir un attribut ayant le même nom que la variable qu'on lui fournit, comme `src={src}`. Dans ce cas, Svelte nous donne accès à un raccourci pratique :
 
 ```svelte
 /// file: App.svelte
-<img +++{src}+++ alt="{name} dances." />
+<img +++{src}+++ alt="{name} danse." />
 ```

content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/app-b/src/lib/App.svelte

@@ -3,4 +3,4 @@
 	let name = 'Rick Astley';
 </script>
 
-<img {src} alt="{name} dances." />
+<img {src} alt="{name} danses." />

content/tutorial/01-svelte/01-introduction/04-styling/README.md

@@ -1,12 +1,12 @@
 ---
-title: Styling
+title: Style
 ---
 
-Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+Comme en HTML, vous pouvez ajouter une balise `<style>` à votre composant. Donnons un peu de style à notre élément `<p>` :
 
 ```svelte
 /// file: App.svelte
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
 +++	p {
@@ -17,4 +17,4 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 </style>
 ```
 
-Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
+Il est important de comprendre que ces règles CSS sont **restreintes (ou <span class='vo'>[scopées](SVELTE_SITE_URL/docs/development#scope)</span>) au composant**. Vous ne modifierez pas accidentellement le style des éléments `<p>` du reste de votre application, comme nous le verrons dans l'étape suivante.

content/tutorial/01-svelte/01-introduction/04-styling/app-a/src/lib/App.svelte

@@ -1,4 +1,4 @@
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
 	/* Write your CSS here */