Examples (#48)

* docs: add examples 00 to 04

* add examples 05

* add examples 06

* add examples 07

* add examples 08

* add examples 09

* add examples 10

* add examples 11

* add examples 12

* add examples 13

* add examples 14

* add examples 15

* add examples 16

* add examples 17

* add examples 18

* add examples 19-20

* add examples 21

* forgot flight booker

---------

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

Author: bleucitron

documentation/examples/05-bindings/00-text-inputs/App.svelte

@@ -2,5 +2,5 @@
 	let name = '';
 </script>
 
-<input bind:value={name} placeholder="enter your name" />
-<p>Hello {name || 'stranger'}!</p>
+<input bind:value={name} placeholder="tapez votre nom" />
+<p>Bonjour {name || 'étranger'} !</p>

documentation/examples/05-bindings/00-text-inputs/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Text inputs"
+	"title": "Inputs texte"
 }

documentation/examples/05-bindings/01-numeric-inputs/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Numeric inputs"
+	"title": "Inputs numériques"
 }

documentation/examples/05-bindings/02-checkbox-inputs/App.svelte

@@ -4,13 +4,13 @@
 
 <label>
 	<input type="checkbox" bind:checked={yes} />
-	Yes! Send me regular email spam
+	Oui ! Envoyez-moi du courrier indésirable
 </label>
 
 {#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+	<p>Merci. Nous allons bombarder votre boite mail et vendre vos données personnelles.</p>
 {:else}
-	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
+	<p>Vous devez accepter pour continuer. Si vous ne payez pas, vous êtes le produit.</p>
 {/if}
 
-<button disabled={!yes}> Subscribe </button>
+<button disabled={!yes}> S'abonner </button>

documentation/examples/05-bindings/02-checkbox-inputs/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Checkbox inputs"
+	"title": "Inputs checkbox"
 }

documentation/examples/05-bindings/03-group-inputs/App.svelte

@@ -1,49 +1,49 @@
 <script>
 	let scoops = 1;
-	let flavours = ['Mint choc chip'];
+	let flavours = ['Éclats de menthe'];
 
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
+	let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+		return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
 	}
 </script>
 
-<h2>Size</h2>
+<h2>Nombre de boules</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
+	<input type="radio" bind:group={scoops} name="scoops" value={1} />
+	Une boule
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
+	<input type="radio" bind:group={scoops} name="scoops" value={2} />
+	Deux boules
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
+	<input type="radio" bind:group={scoops} name="scoops" value={3} />
+	Trois boules
 </label>
 
-<h2>Flavours</h2>
+<h2>Parfums</h2>
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
+		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Veuillez choisir au moins un parfum</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
 {:else}
 	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
+		Vous avez commandé {scoops}
+		{scoops === 1 ? 'boule' : 'boules'}
+		de {join(flavours)}
 	</p>
 {/if}

documentation/examples/05-bindings/03-group-inputs/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Group inputs"
+	"title": "Inputs groupés"
 }

documentation/examples/05-bindings/04-textarea-inputs/App.svelte

@@ -1,11 +1,11 @@
 <script>
 	import { marked } from 'marked';
-	let text = `Some words are *italic*, some are **bold**`;
+	let value = `Certains mots sont en *italique*, d'autres sont en **gras**`;
 </script>
 
-<textarea bind:value={text} />
+{@html marked(value)}
 
-{@html marked(text)}
+<textarea bind:value />
 
 <style>
 	textarea {

documentation/examples/05-bindings/04-textarea-inputs/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Textarea inputs"
+	"title": "Inputs de zone de texte"
 }

documentation/examples/05-bindings/05-file-inputs/App.svelte

@@ -2,25 +2,25 @@
 	let files;
 
 	$: if (files) {
-		// Note that `files` is of type `FileList`, not an Array:
-		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
+		// Notez que `files` est de type `FileList`, ce n'est pas un tableau :
+		// https://developer.mozilla.org/fr/docs/Web/API/FileList
 		console.log(files);
 
 		for (const file of files) {
-			console.log(`${file.name}: ${file.size} bytes`);
+			console.log(`${file.name}: ${file.size} octets`);
 		}
 	}
 </script>
 
-<label for="avatar">Upload a picture:</label>
+<label for="avatar">Sélectionnez une image :</label>
 <input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
 
-<label for="many">Upload multiple files of any type:</label>
+<label for="many">Sélectionnez plusieurs images de n'importe quel type :</label>
 <input bind:files id="many" multiple type="file" />
 
 {#if files}
-	<h2>Selected files:</h2>
+	<h2>Images sélectionnées :</h2>
 	{#each Array.from(files) as file}
-		<p>{file.name} ({file.size} bytes)</p>
+		<p>{file.name} ({file.size} octets)</p>
 	{/each}
 {/if}

documentation/examples/05-bindings/05-file-inputs/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "File inputs"
+	"title": "Inputs de fichiers"
 }

documentation/examples/05-bindings/06-select-bindings/App.svelte

@@ -1,20 +1,23 @@
 <script>
 	let questions = [
-		{ id: 1, text: `Where did you go to school?` },
-		{ id: 2, text: `What is your mother's name?` },
-		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+		{ id: 1, text: `Où alliez-vous à l'école ?` },
+		{ id: 2, text: `Quel est le nom de jeune de fille de votre mère ?` },
+		{
+			id: 3,
+			text: `Donnez-nous un autre élément personnel qu'une personne mal intentionnée pourrait facilement trouver sur Google`
+		}
 	];
 
 	let selected;
 
 	let answer = '';
 
 	function handleSubmit() {
-		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+		alert(`la réponse à la question ${selected.id} (${selected.text}) est "${answer}"`);
 	}
 </script>
 
-<h2>Insecurity questions</h2>
+<h2>Questions de non-sécurité</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
 	<select bind:value={selected} on:change={() => (answer = '')}>
@@ -27,10 +30,10 @@
 
 	<input bind:value={answer} />
 
-	<button disabled={!answer} type="submit"> Submit </button>
+	<button disabled={!answer} type="submit"> Envoyer </button>
 </form>
 
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+<p>question choisie {selected ? selected.id : '[en attente...]'}</p>
 
 <style>
 	input {

documentation/examples/05-bindings/06-select-bindings/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Select bindings"
+	"title": "Liaisons de sélection"
 }

documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte

@@ -1,33 +1,33 @@
 <script>
 	let scoops = 1;
-	let flavours = ['Mint choc chip'];
+	let flavours = ['Éclats de menthe'];
 
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
+	let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+		return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
 	}
 </script>
 
 <h2>Size</h2>
 
 <label>
 	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
+	Une boule
 </label>
 
 <label>
 	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
+	Deux boules
 </label>
 
 <label>
 	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
+	Trois boules
 </label>
 
-<h2>Flavours</h2>
+<h2>Parfums</h2>
 
 <select multiple bind:value={flavours}>
 	{#each menu as flavour}
@@ -38,13 +38,13 @@
 </select>
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Veuillez choisir au moins un parfum</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
 {:else}
 	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
+		Vous avez commandé {scoops}
+		{scoops === 1 ? 'boule' : 'boules'}
+		de {join(flavours)}
 	</p>
 {/if}

documentation/examples/05-bindings/07-multiple-select-bindings/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Select multiple"
+	"title": "Sélection multiple"
 }

documentation/examples/05-bindings/08-each-block-bindings/App.svelte

@@ -1,8 +1,8 @@
 <script>
 	let todos = [
-		{ done: false, text: 'finish Svelte tutorial' },
-		{ done: false, text: 'build an app' },
-		{ done: false, text: 'world domination' }
+		{ done: false, text: 'finir le tutoriel Svelte' },
+		{ done: false, text: 'construire une app' },
+		{ done: false, text: 'dominer le monde' }
 	];
 
 	function add() {
@@ -22,12 +22,16 @@
 	<div>
 		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
+		<input
+			placeholder="Qu'avez-vous besoin de faire ?"
+			bind:value={todo.text}
+			disabled={todo.done}
+		/>
 	</div>
 {/each}
 
-<p>{remaining} remaining</p>
+<p>Encore {remaining}</p>
 
-<button on:click={add}> Add new </button>
+<button on:click={add}> Ajouter </button>
 
-<button on:click={clear}> Clear completed </button>
+<button on:click={clear}> Effacer les tâches complétées </button>

documentation/examples/05-bindings/08-each-block-bindings/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Each block bindings"
+	"title": "Liaisons de bloc each"
 }

documentation/examples/05-bindings/09-media-elements/App.svelte

@@ -1,32 +1,33 @@
 <script>
-	// These values are bound to properties of the video
+	// Ces valeurs sont liées aux propriétés de la vidéo
 	let time = 0;
 	let duration;
 	let paused = true;
 
 	let showControls = true;
 	let showControlsTimeout;
 
-	// Used to track time of last mouse down event
+	// Utilisée pour suivre le timing du dernier évènement mousedown
 	let lastMouseDown;
 
 	function handleMove(e) {
-		// Make the controls visible, but fade out after
-		// 2.5 seconds of inactivity
+		// Rend les contrôles visibles, mais les estompe après
+		// 2.5 secondes d'inactivité
 		clearTimeout(showControlsTimeout);
 		showControlsTimeout = setTimeout(() => (showControls = false), 2500);
 		showControls = true;
 
-		if (!duration) return; // video not loaded yet
-		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
+		if (!duration) return; // la vidéo n'est pas encore chargée
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // la souris n'est pas encore enfoncée
 
 		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
 		const { left, right } = this.getBoundingClientRect();
 		time = (duration * (clientX - left)) / (right - left);
 	}
 
-	// we can't rely on the built-in click event, because it fires
-	// after a drag — we have to listen for clicks ourselves
+	// nous ne pouvons pas nous fier à l'évènement clic natif,
+	// parce qu'il est déclenché après avoir fait glisser (drag) la souris
+	// — nous devons écouter les clics nous-mêmes
 	function handleMousedown(e) {
 		lastMouseDown = new Date();
 	}
@@ -50,7 +51,7 @@
 </script>
 
 <h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
+<p>Par <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
 
 <div>
 	<video
@@ -72,7 +73,9 @@
 
 		<div class="info">
 			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span
+				>cliquez n'importe où pour {paused ? 'lire' : 'mettre en pause'} / glissez pour chercher</span
+			>
 			<span class="time">{format(duration)}</span>
 		</div>
 	</div>

documentation/examples/05-bindings/09-media-elements/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Media elements"
+	"title": "Éléments media"
 }