diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 000000000..8a2b83861 --- /dev/null +++ b/.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). diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 000000000..0007a1bb6 --- /dev/null +++ b/.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). diff --git a/.github/workflows/track-docs.yml b/.github/workflows/track-docs.yml new file mode 100644 index 000000000..72739746e --- /dev/null +++ b/.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 diff --git a/README.md b/README.md index 8866c4475..4f2152ed9 100644 --- a/README.md +++ b/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`). \ No newline at end of file +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). diff --git a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md index 0701a6901..421a483d0 100644 --- a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md +++ b/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`. + -## 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 [frameworks](PUBLIC_SVELTE_SITE_URL/docs/web#framework) 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 [framework](PUBLIC_SVELTE_SITE_URL/docs/web#framework) 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 ([web components](PUBLIC_SVELTE_SITE_URL/docs/web#web-component)) utilisables n'importe où, sans la contrainte d'une dépendance à un [framework](PUBLIC_SVELTE_SITE_URL/docs/web#framework) 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 to the left of the editorin the top right of the editor view. (Use the toggle below to switch between tutorial and editor views. 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` à gaucheen haut à droite de l'éditeur sur lequel vous pouvez cliquer si vous bloquez malgré les instructions. (Utilisez le toggle en bas pour changer de vue entre le tutoriel et l'éditeur. 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. diff --git a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/app-a/src/lib/App.svelte index dbf458251..29fa76ba0 100644 --- a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/app-a/src/lib/App.svelte @@ -1 +1 @@ -

Welcome!

+

Bienvenue !

diff --git a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md index ac4bb6c52..aa5f00f19 100644 --- a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md +++ b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md @@ -1,14 +1,15 @@ --- -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 [markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup) 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 `+++ -

Hello world!

+

Bonjour tout le monde !

``` -Then, we can refer to `name` in the markup: +Puis, vous pouvez utilisez `name` dans le [markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup) : ```svelte /// file: App.svelte -

Hello +++{name}+++!

+

Bonjour +++{name}+++!

``` -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 -

Hello {name+++.toUpperCase()+++}!

+

Bonjour {name+++.toUpperCase()+++}!

``` diff --git a/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-a/src/lib/App.svelte index 597ecf5fc..bfa40bac4 100644 --- a/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-a/src/lib/App.svelte @@ -1 +1 @@ -

Hello world!

+

Bonjour tout le monde !

diff --git a/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-b/src/lib/App.svelte b/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-b/src/lib/App.svelte index 9e846a22c..adc8025cb 100644 --- a/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-b/src/lib/App.svelte +++ b/content/tutorial/01-svelte/01-introduction/02-your-first-component/app-b/src/lib/App.svelte @@ -2,4 +2,4 @@ let name = 'Svelte'; -

Hello {name.toUpperCase()}!

+

Bonjour {name.toUpperCase()}!

diff --git a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md b/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md index 6c325239f..0b9e8027f 100644 --- a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md +++ b/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 ``` -That's better. But if you hover over the `` in the editor, Svelte is giving us a warning: +Voilà qui est mieux. Mais Svelte nous avertit : > A11y: <img> 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 [markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup) 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 - + ``` -We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the ` -{name} dances. +{name} danses. diff --git a/content/tutorial/01-svelte/01-introduction/04-styling/README.md b/content/tutorial/01-svelte/01-introduction/04-styling/README.md index 71099a820..10792eaf4 100644 --- a/content/tutorial/01-svelte/01-introduction/04-styling/README.md +++ b/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 ` ``` -Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `

` 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 [scopées](PUBLIC_SVELTE_SITE_URL/docs/development#scope)) au composant**. Vous ne modifierez pas accidentellement le style des éléments `

` du reste de votre application, comme nous le verrons dans l'étape suivante. diff --git a/content/tutorial/01-svelte/01-introduction/04-styling/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/01-introduction/04-styling/app-a/src/lib/App.svelte index 672b0e96c..6d4bccda3 100644 --- a/content/tutorial/01-svelte/01-introduction/04-styling/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/01-introduction/04-styling/app-a/src/lib/App.svelte @@ -1,4 +1,4 @@ -

This is a paragraph.

+

Ceci est un paragraphe.

\ No newline at end of file + diff --git a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/actions.js b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/actions.js index b863a92c6..0412fe287 100644 --- a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/actions.js +++ b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/actions.js @@ -27,5 +27,5 @@ export function trapFocus(node) { focusable()[0]?.focus(); - // TODO finish writing the action + // TODO finir d'écrire le code de l'action } diff --git a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-b/src/lib/App.svelte index 3c2ae8258..b2b8141ca 100644 --- a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-b/src/lib/App.svelte @@ -36,9 +36,9 @@ @@ -46,7 +46,7 @@
@@ -125,4 +125,4 @@ .menu input { flex: 1; } - \ No newline at end of file + diff --git a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md index 7c765ef45..f03ce2b58 100644 --- a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md +++ b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md @@ -1,12 +1,12 @@ --- -title: Adding parameters +title: Ajouter des paramètres --- -Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to. +À l'instar des transitions et des animations, une action peut prendre un argument de paramètres ; la fonction d'action sera alors appelée avec deux arguments : l'élément sur lequel cette fonction est appliquée (comme vu précédemment), et l'argument de paramètres. -In this exercise, we want to add a tooltip to the ` ``` -The tooltip now works — almost. If we change the text in the ``, the tooltip will not reflect the new content. We can fix that by adding an `update` method to the returned object. +La bulle d'aide fonctionne maintenant — presque. Si nous changeons le texte dans l'élément ``, l'infobulle ne sera pas mis à jour avec le nouveau contenu. Nous pouvons corriger ça en ajoutant une méthode `update` à l'objet retourné : ```js /// file: App.svelte diff --git a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-a/src/lib/App.svelte index a15a5222d..43c05e453 100644 --- a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-a/src/lib/App.svelte @@ -3,7 +3,7 @@ import 'tippy.js/dist/tippy.css'; import 'tippy.js/themes/material.css'; - let content = 'Hello!'; + let content = 'Salut !'; function tooltip(node) { const tooltip = tippy(node); @@ -19,5 +19,5 @@ \ No newline at end of file diff --git a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-b/src/lib/App.svelte index facd7786c..28a61aaa2 100644 --- a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/app-b/src/lib/App.svelte @@ -3,7 +3,7 @@ import 'tippy.js/dist/tippy.css'; import 'tippy.js/themes/material.css'; - let content = 'Hello!'; + let content = 'Salut !'; function tooltip(node, options) { const tooltip = tippy(node, options); @@ -22,5 +22,5 @@ \ No newline at end of file diff --git a/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md b/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md index 4cb5a82f2..21ffa93ed 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md +++ b/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md @@ -1,8 +1,8 @@ --- -title: Contenteditable bindings +title: Liaisons contenteditable --- -Elements with a `contenteditable` attribute support `textContent` and `innerHTML` bindings: +Les éléments avec l'attribut `contenteditable` permettent les liaisons avec [`innerHTML`](https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML), [`innerText`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/innerText) et [`textContent`](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent) : ```svelte /// file: App.svelte diff --git a/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-a/src/lib/App.svelte index 4cc167582..e5bde25f5 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-a/src/lib/App.svelte @@ -1,5 +1,5 @@
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-b/src/lib/App.svelte index 4f7887f9a..673e236ab 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-b/src/lib/App.svelte @@ -1,5 +1,5 @@
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/README.md b/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/README.md index c898b5869..bd7a24b3e 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/README.md +++ b/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/README.md @@ -1,8 +1,8 @@ --- -title: Each block bindings +title: Liaisons de bloc each --- -You can even bind to properties inside an `each` block. +Vous pouvez aussi mettre en place des liaisons sur les propriétés à l'intérieur d'un bloc `each`. ```svelte /// file: App.svelte @@ -15,11 +15,11 @@ You can even bind to properties inside an `each` block. {/each} ``` -> Note that interacting with these `` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead. +> Notez que l'interaction avec ces éléments `` va muter le tableau. Si vous préférez travailler avec des données immutables, il est préférable d'éviter ces liaisons et d'utiliser des gestionnaires d'évènements à la place. diff --git a/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-a/src/lib/App.svelte index 88835e587..ab1319a8c 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-a/src/lib/App.svelte @@ -1,8 +1,8 @@
-

todos

+

À faire

    {#each todos as todo} @@ -32,21 +32,21 @@ {/each}
-

{remaining} remaining

+

Encore {remaining} tâches

diff --git a/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-b/src/lib/App.svelte index e30133a93..4bdc0a4a1 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/app-b/src/lib/App.svelte @@ -1,8 +1,8 @@
-

todos

+

À faire

    {#each todos as todo} @@ -32,21 +32,21 @@ {/each}
-

{remaining} remaining

+

Encore {remaining} tâches

diff --git a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md index ca8b9995d..eae35af13 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md +++ b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md @@ -1,10 +1,10 @@ --- -title: Media elements +title: Éléments media --- -You can bind to properties of `
``` -These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element. +Ces liaisons sont en lecture seule — changer les valeurs de `w` et `h` n'aura pas d'effet sur l'élément. -> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements. +> Les éléments sont mesurés en utilisant une technique proche de [celle-ci](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). Elle implique un certain surcoût, il n'est donc pas recommandé de se servir de ces liaisons sur un grand nombre d'éléments. > -> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as ``). In these cases you will need to measure a wrapper element instead. +> Les éléments `display: inline` ne peuvent pas être mesurés avec cette approche ; les éléments qui ne peuvent pas contenir d'autres éléments non plus (`` par exemple). Dans ces cas-là, vous devrez mesurer les dimensions d'un élément contenant à la place. diff --git a/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-a/src/lib/App.svelte index a7e13a3f8..bd30c4eca 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-a/src/lib/App.svelte @@ -2,12 +2,12 @@ let w; let h; let size = 42; - let text = 'edit this text'; + let text = 'modifiez ce texte';
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-b/src/lib/App.svelte index 3ccf4e8ec..727bd6a88 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/app-b/src/lib/App.svelte @@ -2,12 +2,12 @@ let w; let h; let size = 42; - let text = 'edit this text'; + let text = 'modifiez ce texte';
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/README.md b/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/README.md index 7a6a102bd..68023f900 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/README.md +++ b/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/README.md @@ -2,11 +2,11 @@ title: This --- -In a [previous exercise](onmount), we learned how to use the `onMount` lifecycle function to paint to a canvas. +Dans un [exercice précédent](onmount), nous avons vu comment utiliser la méthode de cycle de vie `onMount` pour dessiner dans un ``. -But the example is buggy — it's using `document.querySelector('canvas')`, which will always return the first `` found on the page, which might not be the one belonging to our component. +Mais l'exemple est [buggué](PUBLIC_SVELTE_SITE_URL/docs/development#bug) — il utilise `document.querySelector('canvas')`, qui renvoie toujours le premier `` trouvé dans la page, qui pourrait très bien ne pas être celui appartenant à notre composant. -Instead, we can use the readonly `this` binding to get a reference to the element: +À la place, nous pouvons utiliser la liaison en lecture seule `this` pour obtenir une référence au bon élément : ```js /// file: App.svelte @@ -36,4 +36,4 @@ onMount(() => { > ``` -Note that the value of `canvas` will be `undefined` until the component has mounted. +Notez que la valeur de `canvas` sera `undefined` jusqu'au montage du composant. diff --git a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/README.md b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/README.md index c57380f6c..de1708d50 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/README.md +++ b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/README.md @@ -1,8 +1,8 @@ --- -title: Component bindings +title: Liaisons de composant --- -Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `` component as though it were a form element: +De la même façon que vous pouvez créer des liaisons avec les propriétés des éléments [DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom), vous pouvez créer des liaisons avec les [props](PUBLIC_SVELTE_SITE_URL/docs/sveltejs#props) des composants. Par exemple, nous pouvons créer une liaison avec la prop de ce composant `` comme si c'était un élément de formulaire : ```svelte /// file: App.svelte @@ -12,6 +12,6 @@ Just as you can bind to properties of DOM elements, you can bind to component pr /> ``` -Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated. +Maintenant, lorsque l'utilisateur interagit avec le clavier, la valeur de `pin` du composant parent est immédiatement mise à jour. -> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'. +> Utilisez les liaisons de composant avec parcimonie. Avoir trop de liaisons de ce type rend difficile le suivi du flux de données au sein de votre application, particulièrement s'il n'y a pas de "source de vérité unique". diff --git a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/App.svelte index 4f31d4ca8..c758c657a 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/App.svelte @@ -4,10 +4,10 @@ let pin; $: view = pin ? pin.replace(/\d(?!$)/g, '•') - : 'enter your pin'; + : 'entrez votre code'; function handleSubmit() { - alert(`submitted ${pin}`); + alert(`votre code : ${pin}`); } diff --git a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/Keypad.svelte b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/Keypad.svelte index b94e94453..5154457ff 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/Keypad.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-a/src/lib/Keypad.svelte @@ -22,11 +22,11 @@ effacer valider
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-b/src/lib/App.svelte index fb30a1e3f..640dcc056 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/app-b/src/lib/App.svelte @@ -4,10 +4,10 @@ let pin; $: view = pin ? pin.replace(/\d(?!$)/g, '•') - : 'enter your pin'; + : 'entrez votre code'; function handleSubmit() { - alert(`submitted ${pin}`); + alert(`votre code : ${pin}`); } diff --git a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md index 86dcba848..b6dda49f7 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md +++ b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md @@ -1,12 +1,12 @@ --- -title: Binding to component instances +title: Liaisons d'instance de composant --- -Just as you can bind to DOM elements, you can bind to component instances themselves with `bind:this`. +De la même façon que vous pouvez créer des liaisons avec les éléments [DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom), vous pouvez créer des liaisons avec les instances de composants elles-mêmes en utilisant `bind:this`. -This is useful in the rare cases that you need to interact with a component programmatically (rather than by providing it with updated props). Revisiting our canvas app from [a few exercises ago](actions), it would be nice to add a button to clear the screen. +Cela est pratique dans les rares cas où vous avez besoin d'interagir avec un composant programmatiquement (plutôt qu'en lui fournissant de nouvelles [props](PUBLIC_SVELTE_SITE_URL/docs/sveltejs#props)). Revenons à notre application de canvas croisée [il y a quelques exercices](actions). Une fonctionnalité sympa pourrait être d'ajouter un bouton pour effacer l'écran. -First, let's export a function from `Canvas.svelte`: +D'abord, exportons une fonction depuis `Canvas.svelte` : ```svelte /// file: Canvas.svelte @@ -18,7 +18,7 @@ export let size; }+++ ``` -Then, create a reference to the component instance: +Ensuite, créez une référence à l'instance du composant : ```svelte /// file: App.svelte @@ -26,7 +26,7 @@ Then, create a reference to the component instance: import Canvas from './Canvas.svelte'; import { trapFocus } from './actions.js'; - const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black']; + const colors = ["rouge", "orange", "jaune", "vert", "bleu", "indigo", "violet", "blanc", "noir"]; let selected = colors[0]; let size = 10; @@ -38,17 +38,17 @@ Then, create a reference to the component instance: ``` -Finally, add a button that calls the `clear` function: +Enfin, ajoutez un bouton qui appelle la fonction `clear` : ```svelte /// file: App.svelte
+++ +++
-``` \ No newline at end of file +``` diff --git a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-a/src/lib/App.svelte index 3c2ae8258..b2b8141ca 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-a/src/lib/App.svelte @@ -36,9 +36,9 @@
@@ -46,7 +46,7 @@
@@ -125,4 +125,4 @@ .menu input { flex: 1; } - \ No newline at end of file + diff --git a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-b/src/lib/App.svelte index f4e1b14f3..d1f75709f 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-b/src/lib/App.svelte @@ -38,9 +38,9 @@ @@ -48,11 +48,11 @@
@@ -131,4 +131,4 @@ .menu input { flex: 1; } - \ No newline at end of file + diff --git a/content/tutorial/02-advanced-svelte/05-bindings/meta.json b/content/tutorial/02-advanced-svelte/05-bindings/meta.json index 8141c6f64..be8588856 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/meta.json +++ b/content/tutorial/02-advanced-svelte/05-bindings/meta.json @@ -1,5 +1,5 @@ { - "title": "Advanced bindings", + "title": "Liaisons avancées", "scope": { "prefix": "/src/lib/", "name": "src" diff --git a/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/README.md b/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/README.md index 60c41f5da..b5ffcdf73 100644 --- a/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/README.md +++ b/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/README.md @@ -1,8 +1,8 @@ --- -title: The class directive +title: La directive de classe --- -Like any other attribute, you can specify classes with a JavaScript attribute. Here, we could add a `flipped` class to the card: +Comme pour tous les autres attributs, vous pouvez spécifier de classes avec un attribut JavaScript. Ici, nous pourrions ajouter une classe `flipped` à la carte : ```svelte /// file: App.svelte @@ -12,9 +12,9 @@ Like any other attribute, you can specify classes with a JavaScript attribute. H > ``` -This works as expected — if you click on the card now, it'll flip. +Cela fonctionne comme attendu — si maintenant vous cliquez sur la carte, elle va se retourner. -We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte includes a special directive to simplify it: +Nous pouvons toutefois faire mieux. Ajouter ou enlever une classe en fonction d'une condition est tellement courant dans le développement d'interface que Svelte inclut une directive spéciale pour le simplifier : ```svelte /// file: App.svelte @@ -25,4 +25,4 @@ We can make it nicer though. Adding or removing a class based on some condition > ``` -This directive means 'add the `flipped` class whenever `flipped` is truthy'. \ No newline at end of file +La directive signifie "ajoute la classe `flipped` lorsque `flipped` est [truthy](PUBLIC_SVELTE_SITE_URL/docs/javascript#falsy-truthy-truthy)". diff --git a/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/app-a/src/lib/App.svelte index bec03aab8..5c8428b30 100644 --- a/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/app-a/src/lib/App.svelte @@ -3,7 +3,7 @@
- Flip the card + Retourner la carte {#if part.slug === expanded_part} diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte index 63fbb2838..8899540a5 100644 --- a/src/routes/tutorial/[slug]/Sidebar.svelte +++ b/src/routes/tutorial/[slug]/Sidebar.svelte @@ -3,6 +3,8 @@ import Modal from '$lib/components/Modal.svelte'; import Menu from './Menu.svelte'; + import { PUBLIC_LEARN_SITE_URL, PUBLIC_GITHUB_ORG } from '$env/static/public'; + /** @type {import('$lib/types').PartStub[]} */ export let index; @@ -14,7 +16,7 @@ const dispatch = createEventDispatcher(); - const namespace = 'learn.svelte.dev'; + const namespace = PUBLIC_LEARN_SITE_URL; const copy_enabled = `${namespace}:copy_enabled`; let show_modal = false; @@ -66,7 +68,7 @@
{#if exercise.next} -

Next: {exercise.next.title}

+

À suivre : {exercise.next.title}

{/if} @@ -75,9 +77,9 @@ target="_blank" rel="noreferrer" class="edit" - href="https://github.com/sveltejs/learn.svelte.dev/tree/main/{exercise.dir}" + href="https://github.com/{PUBLIC_GITHUB_ORG}/learn.svelte.dev/tree/french/{exercise.dir}" > - Edit this page + Éditer cette page @@ -85,11 +87,11 @@ {#if show_modal} (show_modal = false)}>
-

Copy and paste is currently disabled!

+

La fonction Copier Coller est actuellement désactivée !

- We recommend typing the code into the editor to complete the exercise, as this results in - better retention and understanding. + Nous recommandons d'écrire vous-même le code dans l'éditeur pour compléter l'exercice, car + cela permet une meilleure rétention et compréhension de l'information.

diff --git a/tests/env_file.spec.ts b/tests/env_file.spec.ts index 7a546b29c..6cfe892f2 100644 --- a/tests/env_file.spec.ts +++ b/tests/env_file.spec.ts @@ -28,7 +28,7 @@ test('.env file: no timeout error occurs when switching a tutorials without a .e const iframe_locator = page.frameLocator(iframe_selector); // wait for the iframe to load - await iframe_locator.getByText('Welcome!').waitFor(); + await iframe_locator.getByText('Bienvenue !').waitFor(); // switch to another tutorial with a .env file await page.click('header > button > h1', { delay: 200 }); @@ -61,7 +61,7 @@ test('.env file: environment variables are available when switching a tutorial w const iframe_locator = page.frameLocator(iframe_selector); // wait for the iframe to load - await iframe_locator.getByText('Welcome!').waitFor(); + await iframe_locator.getByText('Bienvenue !').waitFor(); // switch to another tutorial with a .env file await page.click('header > button > h1', { delay: 200 });