chore: add env variables

Author: bleucitron

README.md

@@ -32,4 +32,4 @@ Bump the dependency (for example Svelte) in both the root and the `content/commo
 
 ## i18n
 
-You need to add the `SVELTE_SITE_URL` to your environment variables to point to your locale svelte site.
+You need to add the `PUBLIC_SVELTE_SITE_URL`, `PUBLIC_KIT_SITE_URL`, `PUBLIC_LEARN_SITE_URL` and `PUBLIC_GITHUB_ORG` to your environment variables to point to your local svelte sites and Github organization.

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

@@ -4,15 +4,15 @@ title: Bienvenue dans le monde de Svelte !
 
 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.
 
-<!-- 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). -->
+<!-- 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). -->
 
 ## C'est quoi Svelte ?
 
-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.
+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.
 
 Ces composants sont _compilés_ en petits modules JavaScript efficaces qui éliminent les inconvénients traditionnellement associés aux frameworks UI.
 
-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.
+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.
 
 ## Comment se servir de ce tutoriel ?
 

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

@@ -7,7 +7,7 @@ In Svelte, an application is composed from one or more _components_. Un composan
 
 ## Ajouter de la donnée
 
-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.
+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.
 
 D'abord, ajoutez une balise `<script>` à votre composant, et déclarez une variable `name` :
 
@@ -20,7 +20,7 @@ D'abord, ajoutez une balise `<script>` à votre composant, et déclarez une vari
 <h1>Bonjour tout le monde !</h1>
 ```
 
-Puis, vous pouvez utilisez `name` dans le <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> :
+Puis, vous pouvez utilisez `name` dans le <span class="vo">[markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup)</span> :
 
 ```svelte
 /// file: App.svelte

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

@@ -15,7 +15,7 @@ Voilà qui est mieux. Mais Svelte nous avertit :
 
 > A11y: <img> element should have an alt attribute
 
-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.
+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.
 
 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 :
 

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

@@ -17,4 +17,4 @@ Comme en HTML, vous pouvez ajouter une balise `<style>` à votre composant. Donn
 </style>
 ```
 
-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.
+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/05-nested-components/README.md

@@ -13,7 +13,7 @@ Ajoutons une balise `<script>` à `App.svelte` pour importer le fichier (notre c
 </script>+++
 ```
 
-... puis utilisons le composant `Nested` dans le <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> de l'application :
+... 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

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

@@ -13,4 +13,4 @@ Dans Svelte, vous le faites avec la balise spéciale `{@html ...}` :
 <p>{+++@html+++ string}</p>
 ```
 
-> **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](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).
+> **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/02-reactivity/01-reactive-assignments/README.md

@@ -2,7 +2,7 @@
 title: Assignations
 ---
 
-Au coeur de Svelte se trouve un système efficace de **réactivité** qui permet de garder le <span class="vo">[DOM](SVELTE_SITE_URL/docs/web#dom)</span> en phase avec l'état de votre application — par exemple en réaction à un évènement.
+Au coeur de Svelte se trouve un système efficace de **réactivité** qui permet de garder le <span class="vo">[DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom)</span> en phase avec l'état de votre application — par exemple en réaction à un évènement.
 
 Pour le mettre en valeur, nous devons d'abord mettre en place un gestionnaire d'évènement (nous en apprendrons plus [plus tard](/tutorial/dom-events)):
 
@@ -23,4 +23,4 @@ function increment() {
 }
 ```
 
-Svelte "instrumente" cette assignation avec du code qui va informer le <span class="vo">[DOM](SVELTE_SITE_URL/docs/web#dom)</span> de ce qui a besoin d'être mis à jour.
+Svelte "instrumente" cette assignation avec du code qui va informer le <span class="vo">[DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom)</span> de ce qui a besoin d'être mis à jour.

content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md

@@ -2,7 +2,7 @@
 title: Déclarations
 ---
 
-Svelte met automatiquement à jour le <span class="vo">[DOM](SVELTE_SITE_URL/docs/web#dom)</span> lorsque l'état de votre composant change. Certaines parties de l'état d'un composant doivent être calculées à partir d'autres variables et doivent être recalculées à chaque fois que ces dernières changent (comme un `nomComplet` dérivé d'un `prenom` et d'un `nom`),
+Svelte met automatiquement à jour le <span class="vo">[DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom)</span> lorsque l'état de votre composant change. Certaines parties de l'état d'un composant doivent être calculées à partir d'autres variables et doivent être recalculées à chaque fois que ces dernières changent (comme un `nomComplet` dérivé d'un `prenom` et d'un `nom`),
 
 Pour ces cas, nous avons les _déclarations réactives_. Elles se présentent comme suit :
 
@@ -16,7 +16,7 @@ Si une déclaration réactive consiste entièrement en une affectation à une va
 
 > Ne vous inquiétez pas si cela semble un peu étrange. Cette syntaxe est du JavaScript [valide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/label), même si peu conventionnel, que Svelte interprète ainsi : "ré-exécute ce code dès qu'une des variables référencées change". Une fois l'habitude prise, vous ne pourrez plus vous en passer.
 
-Utilisons `doubled` dans notre <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> :
+Utilisons `doubled` dans notre <span class="vo">[markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup)</span> :
 
 ```svelte
 /// file: App.svelte
@@ -25,6 +25,6 @@ Utilisons `doubled` dans notre <span class="vo">[markup](SVELTE_SITE_URL/docs/we
 <p>{count} fois 2 vaut {doubled}</p>
 ```
 
-Bien sûr, vous pourriez très bien vous contenter d'écrire `{count * 2}` dans le <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> — vous n'êtes pas obligé•e•s d'utiliser des valeurs réactives. Les valeurs réactives deviennent particulièrement utiles lorsque vous avez besoin de les référencer plusieurs fois, ou lorsque vous avez des valeurs qui dépendent d'_autres_ valeurs réactives.
+Bien sûr, vous pourriez très bien vous contenter d'écrire `{count * 2}` dans le <span class="vo">[markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup)</span> — vous n'êtes pas obligé•e•s d'utiliser des valeurs réactives. Les valeurs réactives deviennent particulièrement utiles lorsque vous avez besoin de les référencer plusieurs fois, ou lorsque vous avez des valeurs qui dépendent d'_autres_ valeurs réactives.
 
-> Notez que les déclarations et les instructions réactives seront exécutées après les autres parties du script et avant que le <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span> du composant ne soit rendu.
+> Notez que les déclarations et les instructions réactives seront exécutées après les autres parties du script et avant que le <span class="vo">[markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup)</span> du composant ne soit rendu.

content/tutorial/01-svelte/03-props/02-default-values/README.md

@@ -2,7 +2,7 @@
 title: Default values
 ---
 
-Nous pouvons facilement définir des valeurs par défaut pour les <span class="vo">[props](SVELTE_SITE_URL/docs/sveltejs#props)</span> de `Nested.svelte` :
+Nous pouvons facilement définir des valeurs par défaut pour les <span class="vo">[props](PUBLIC_SVELTE_SITE_URL/docs/sveltejs#props)</span> de `Nested.svelte` :
 
 ```svelte
 /// file: Nested.svelte
@@ -11,7 +11,7 @@ Nous pouvons facilement définir des valeurs par défaut pour les <span class="v
 </script>
 ```
 
-Si nous ajoutons maintenant un second appel au composant _sans_ la <span class="vo">[props](SVELTE_SITE_URL/docs/sveltejs#props)</span> `answer`, celle-ci prendra la valeur par défaut :
+Si nous ajoutons maintenant un second appel au composant _sans_ la <span class="vo">[props](PUBLIC_SVELTE_SITE_URL/docs/sveltejs#props)</span> `answer`, celle-ci prendra la valeur par défaut :
 
 ```svelte
 /// file: App.svelte

content/tutorial/01-svelte/03-props/03-spread-props/README.md

@@ -23,4 +23,4 @@ Nous _pourrions_ corriger cela en ajoutant la propriété `version`...
 <PackageInfo +++{...pkg}+++ />
 ```
 
-> Inversement, si vous avez besoin de référencer toutes les <span class="vo">[props](SVELTE_SITE_URL/docs/sveltejs#props)</span> qui ont été passées à un composant, y compris celles non spécifiées avec le mot clé `export`, vous pouvez le faire avec l'objet `$$props` directement. Ce n'est pas recommandé, car cela rend difficile l'optimisation pour Svelte, mais peut être très pratique dans de rares cas.
+> Inversement, si vous avez besoin de référencer toutes les <span class="vo">[props](PUBLIC_SVELTE_SITE_URL/docs/sveltejs#props)</span> qui ont été passées à un composant, y compris celles non spécifiées avec le mot clé `export`, vous pouvez le faire avec l'objet `$$props` directement. Ce n'est pas recommandé, car cela rend difficile l'optimisation pour Svelte, mais peut être très pratique dans de rares cas.

content/tutorial/01-svelte/04-logic/01-if-blocks/README.md

@@ -4,7 +4,7 @@ title: Blocs if
 
 Le HTML n'est pas prévu pour exprimer de la _logique_, comme des conditions ou des boucles. Svelte si.
 
-Pour afficher conditionnellement du <span class="vo">[markup](SVELTE_SITE_URL/docs/web#markup)</span>, nous pouvons le placer dans un bloc `if`. Ajoutons du texte qui apparaîtra lorsque le compteur `count`sera supérieur à `10` :
+Pour afficher conditionnellement du <span class="vo">[markup](PUBLIC_SVELTE_SITE_URL/docs/web#markup)</span>, nous pouvons le placer dans un bloc `if`. Ajoutons du texte qui apparaîtra lorsque le compteur `count`sera supérieur à `10` :
 
 ```svelte
 /// file: App.svelte

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md

@@ -4,9 +4,9 @@ title: Blocs each à clé
 
 Par défaut, quand vous modifiez la valeur d'un bloc `each`, celui-ci va ajouter et enlever les éléments à la _fin_ du bloc, et mettre à jour les valeurs qui ont changé. cela n'est peut-être pas ce que vous souhaitez.
 
-Ce cas est plus simple à montrer qu'à expliquer. Ouvrez la console du <span class="vo">[REPL](SVELTE_SITE_URL/docs/web#repl)</span> en cliquant sur "Console", puis cliquez sur "Supprimer le premier élément" quelques fois, et notez ce qu'il se passe : le premier composant `<Thing>` n'est pas supprimé, mais plutôt le _dernier_ noeud du <span class="vo">[DOM](SVELTE_SITE_URL/docs/web#dom)</span>. Puis la valeur `name` dans les noeuds DOM restants est mise à jour, mais pas l'emoji correspondant.
+Ce cas est plus simple à montrer qu'à expliquer. Ouvrez la console du <span class="vo">[REPL](PUBLIC_SVELTE_SITE_URL/docs/web#repl)</span> en cliquant sur "Console", puis cliquez sur "Supprimer le premier élément" quelques fois, et notez ce qu'il se passe : le premier composant `<Thing>` n'est pas supprimé, mais plutôt le _dernier_ noeud du <span class="vo">[DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom)</span>. Puis la valeur `name` dans les noeuds DOM restants est mise à jour, mais pas l'emoji correspondant.
 
-Nous aimerions plutôt supprimer unniquement le premier composant `<Thing>` ainsi que son noeud <span class="vo">[DOM](SVELTE_SITE_URL/docs/web#dom)</span> associé, et laisser les autres inchangés.
+Nous aimerions plutôt supprimer unniquement le premier composant `<Thing>` ainsi que son noeud <span class="vo">[DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom)</span> associé, et laisser les autres inchangés.
 
 Pour faire cela, nous allons spécifier un identifiant unique (une "clé") pour le bloc `each` :
 
@@ -17,6 +17,6 @@ Pour faire cela, nous allons spécifier un identifiant unique (une "clé") pour
 {/each}
 ```
 
-Ici, `(thing.id)` est la _clé_, et aide Svelte à déterminer quel noeud <span class="vo">[DOM](SVELTE_SITE_URL/docs/web#dom)</span> changer lorsque le composant se met à jour.
+Ici, `(thing.id)` est la _clé_, et aide Svelte à déterminer quel noeud <span class="vo">[DOM](PUBLIC_SVELTE_SITE_URL/docs/web#dom)</span> changer lorsque le composant se met à jour.
 
-> Vous pouvez utiliser n'importe quel objet en tant que clé, puisque Svelte utilise une [`Map`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) en interne — en d'autres termes, vous pourriez utiliser `(thing)` au lieu de `(thing.id)`. Cependant, utiliser une <span class="vo">[string](SVELTE_SITE_URL/docs/development#string)</span> ou un <span class="vo">[number](SVELTE_SITE_URL/docs/development#number)</span> est généralement plus sécurisé, car l'identité sera persistée sans avoir à vérifier l'identité par référence, par exemple lorsque vous rafraîchissez de la donnée depuis une <span class="vo">[API](SVELTE_SITE_URL/docs/development#api)</span>.
+> Vous pouvez utiliser n'importe quel objet en tant que clé, puisque Svelte utilise une [`Map`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) en interne — en d'autres termes, vous pourriez utiliser `(thing)` au lieu de `(thing.id)`. Cependant, utiliser une <span class="vo">[string](PUBLIC_SVELTE_SITE_URL/docs/development#string)</span> ou un <span class="vo">[number](PUBLIC_SVELTE_SITE_URL/docs/development#number)</span> est généralement plus sécurisé, car l'identité sera persistée sans avoir à vérifier l'identité par référence, par exemple lorsque vous rafraîchissez de la donnée depuis une <span class="vo">[API](PUBLIC_SVELTE_SITE_URL/docs/development#api)</span>.