french translation

Author: Romain Crestey

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,7 @@
+## Attention
+
+Vous vous apprêtez à ouvrir une issue sur le projet de traduction francophone du tutoriel de Svelte et SvelteKit.
+
+Ce projet est uniquement dédié à de la traduction, et nous n'accepterons donc que les issues dont l'objet est l'ajout ou la modification de traductions, ou tout outillage associé.
+
+Pour toute issue liée au projet Svelte en lui-même, merci de les ouvrir sur le [repository officiel](https://github.com/sveltejs/learn.svelte.dev/issues).

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,7 @@
+## Attention
+
+Vous vous apprêtez à ouvrir une issue sur le projet de traduction francophone du tutoriel de Svelte et SvelteKit.
+
+Ce projet est uniquement dédié à de la traduction, et nous n'accepterons donc que les PRs dont l'objet est l'ajout ou la modification de traductions, ou tout outillage associé.
+
+Pour toute PR liée au tutoriel de Svelte et SvelteKit en lui-même, merci de les ouvrir sur le [repository officiel](https://github.com/sveltejs/learn.svelte.dev/pulls).

.github/workflows/track-docs.yml

@@ -0,0 +1,21 @@
+name: Docs tracker
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 3 * * *'
+
+jobs:
+  track-docs:
+    runs-on: ubuntu-latest
+    name: Checking Docs
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Svelte/SvelteKit tutorial new commits
+        uses: AlexxNB/track-commits-to-issue@master
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          owner: sveltejs
+          repo: learn.svelte.dev
+          dir: content/tutorial

README.md

@@ -28,4 +28,10 @@ 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`).
+
+## Translating this project
+
+This is the french version of the Svelte tutorial.
+
+Read more about this was done [here](i18n.md).

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](PUBLIC_SVELTE_SITE_URL/docs) ainsi que les [exemples](PUBLIC_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`](PUBLIC_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](PUBLIC_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](PUBLIC_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](PUBLIC_SVELTE_SITE_URL/docs/web#web-component)</span>) utilisables n'importe où, sans la contrainte d'une dépendance à un <span class="vo">[framework](PUBLIC_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](PUBLIC_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](PUBLIC_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](PUBLIC_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](PUBLIC_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 */

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

@@ -1,4 +1,4 @@
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
 	p {

content/tutorial/01-svelte/01-introduction/05-nested-components/README.md

@@ -1,10 +1,10 @@
 ---
-title: Nested components
+title: Composants imbriqués
 ---
 
-It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them in our markup.
+Écrire toute une application dans un seul composant n'est pas très pratique. À la place, nous pouvons importer des composants depuis d'autres fichiers et les utiliser comme des éléments.
 
-Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...
+Ajoutons une balise `<script>` à `App.svelte` pour importer le fichier (notre composant) `Nested.svelte` dans notre application...
 
 ```svelte
 /// file: App.svelte
@@ -13,14 +13,14 @@ Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...
 </script>+++
 ```
 
-...and include a `<Nested />` component:
+... puis utilisons le composant `Nested` dans le <span class="vo">[markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup)</span> de l'application :
 
 ```svelte
 /// file: App.svelte
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 +++<Nested />+++
 ```
 
-Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
+Notez que même si `Nested.svelte` a un élément `<p>`, les styles définis dans `App.svelte` ne s'appliquent pas.
 
-> Component names are always capitalised, to distinguish them from HTML elements.
+Notez également que le nom du composant, `Nested`, a sa première lettre en majuscule. C'est une convention adoptée pour mieux différencier entre les composants, que nous définissons, des éléments HTML classiques.

content/tutorial/01-svelte/01-introduction/05-nested-components/app-a/src/lib/App.svelte

@@ -1,4 +1,4 @@
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
 	p {

content/tutorial/01-svelte/01-introduction/05-nested-components/app-a/src/lib/Nested.svelte

@@ -1 +1 @@
-<p>This is another paragraph.</p>
+<p>Ceci est un autre paragraphe.</p>

content/tutorial/01-svelte/01-introduction/05-nested-components/app-b/src/lib/App.svelte

@@ -2,7 +2,7 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 <Nested />
 
 <style>

content/tutorial/01-svelte/01-introduction/06-html-tags/README.md

@@ -1,16 +1,16 @@
 ---
-title: HTML tags
+title: Balises HTML
 ---
 
-Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning.
+En règle générale, les chaînes de caractères sont insérées en tant que texte brut, ce qui signifie que les caractères tels que `<` et `>` n'ont pas de signification particulière.
 
-But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.
+Mais il est parfois nécessaire de rendre du HTML directement dans un composant. Par exemple, les mots que vous êtes en train de lire existent dans un fichier markdown qui est inclus dans cette page sous la forme d'un bloc HTML.
 
-In Svelte, you do this with the special `{@html ...}` tag:
+Dans Svelte, vous le faites avec la balise spéciale `{@html ...}` :
 
 ```svelte
 /// file: App.svelte
 <p>{+++@html+++ string}</p>
 ```
 
-> **Warning!** Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. This isn't an issue if the content is something you trust like an article you wrote yourself. However if it's some untrusted user content, e.g. a comment on an article, then it's critical that you manually escape it, otherwise you risk exposing your users to <a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) attacks.
+> **Attention!** Svelte n'effectue pas de nettoyage de l'expression à l'intérieur de `{@html ...}` avant qu'elle ne soit insérée dans le <span class='vo'>[DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom)</span>. Ce n'est pas un problème si le contenu est quelque chose de fiable comme un article que vous avez écrit vous-même. Cependant, s'il s'agit d'un contenu utilisateur non fiable, par exemple un commentaire sur un article, il est essentiel que vous l'échappiez manuellement, sinon vous risquez d'exposer vos utilisateurs à des attaques de type <a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS).

content/tutorial/01-svelte/01-introduction/06-html-tags/app-a/src/lib/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	let string = `this string contains some <strong>HTML!!!</strong>`;
+	let string = `Cette chaîne de caractères contient du <strong>HTML!!!</strong>`;
 </script>
 
 <p>{string}</p>

content/tutorial/01-svelte/01-introduction/06-html-tags/app-b/src/lib/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	let string = `this string contains some <strong>HTML!!!</strong>`;
+	let string = `Cette chaîne de caractères contient du <strong>HTML!!!</strong>`;
 </script>
 
 <p>{@html string}</p>