sveltefr · bleucitron · Jul 5, 2023 · Jul 4, 2023 · Jul 4, 2023 · Jul 4, 2023
diff --git a/documentation/docs/01-getting-started/01-introduction.md b/documentation/docs/01-getting-started/01-introduction.md
@@ -2,13 +2,15 @@
 title: Introduction
 ---
 
-Welcome to the Svelte reference documentation! This is intended as a resource for people who already have some familiarity with Svelte and want to learn more about using it.
+Bienvenue sur la documentation Svelte de référence ! Ces pages sont pensées comme une ressource utile pour des personnes ayant déjà une certaine familiarité avec Svelte, et souhaitant en apprendre davantage.
 
-If that's not you (yet), you may prefer to visit the [interactive tutorial](https://learn.svelte.dev) or the [examples](/examples) before consulting this reference. You can try Svelte online using the [REPL](/repl). Alternatively, if you'd like a more fully-featured environment, you can try Svelte on [StackBlitz](https://sveltekit.new).
+Si ce n'est pas (encore) le cas pour vous, vous préférerez probablement jeter un oeil au [tutoriel interactif](/tutorial) ou aux [exemples](/examples) avant de consulter cette section. Vous pouvez essayez Svelte en ligne en utilisant le [REPL](/repl), ou bien sur [StackBlitz](https://sveltekit.new) si vous préférez un environnement de développement plus complet.
 
-## Start a new project
+Cette documentation en français, ainsi que l'intégralité du contenu en français de ce site est une **traduction bénévole et non officielle** de la [documentation et du site officiels](https://svelte.dev) (en anglais). N'hésitez pas à y jeter un oeil. Vous pouvez aussi [nous faire part de vos suggestions de traduction](https://github.com/Svelte-Society-Fr/svelte/issues) si celles que vous trouverez dans ces pages ne vous conviennent pas.
 
-We recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
+## Démarrer un nouveau projet
+
+Nous recommandons d'utiliser [SvelteKit](https://kit.svelte.dev/), le framework d'application officiel créé par l'équipe Svelte :
 
 ```
 npm create svelte@latest myapp
@@ -17,18 +19,18 @@ npm install
 npm run dev
 ```
 
-SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, deployment, and SSR support. [SvelteKit](https://kit.svelte.dev/) uses [Vite](https://vitejs.dev/) to build your code.
+SvelteKit se charge d'exécuter [le compilateur Svelte](https://www.npmjs.com/package/svelte) pour convertir vos fichiers `.svelte` en fichiers `.js` qui créent le DOM, et en fichiers `.css` qui le stylisent. Il fournit également tout ce dont vous avez besoin pour créer une application web, comme un serveur de développement, du routage, et des outils de déploiement. [SvelteKit](https://kit.svelte.dev/) utilise [Vite](https://vitejs.dev/) pour empaqueter votre code.
 
-### Alternatives to SvelteKit
+### Alternatives à SvelteKit
 
-If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
+Si vous ne souhaitez pas utiliser SvelteKit, vous pouvez aussi utiliser Svelte (sans SvelteKit) avec Vite en exécutant `npm init vite`, puis en choisissant l'option `svelte`. De cette manière, `npm run build` génèrera les fichiers HTML, JS et CSS dans le dossier `dist`. Dans la plupart des cas, vous aurez aussi probablement besoin de [choisir une librairie de routing](/faq#is-there-a-router).
 
-Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
+Il existe également des [plugins pour les bundlers web majeurs](https://sveltesociety.dev/tools#bundling) pour gérer la compilation Svelte — qui génèreront les `.js` et `.css` à insérer dans votre HTML — mais la plupart ne gèreront pas pas le rendu côté serveur (SSR).
 
-## Editor tooling
+## Outillage d'éditeur
 
-The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
+L'équipe Svelte maintient une extension [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), et des intégrations existent également pour d'autres [éditeurs](https://sveltesociety.dev/tools#editor-support) ou outils.
 
-## Getting help
+## Obtenir de l'aide
 
-Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).
+Si vous rencontrez des difficultés, vous trouverez de l'aide sur le [Discord officiel](https://svelte.dev/chat) ou sur le [Discord francophone](/chat). Vous trouverez également des réponses sur [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
diff --git a/documentation/docs/01-getting-started/meta.json b/documentation/docs/01-getting-started/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Getting Started"
+	"title": "Bien commencer"
 }
diff --git a/sites/svelte.dev/src/routes/+layout.server.js b/sites/svelte.dev/src/routes/+layout.server.js
@@ -10,13 +10,13 @@ export const load = async ({ url, fetch }) => {
 /** @param {URL} url */
 function get_nav_title(url) {
 	const list = new Map([
-		[/^docs/, 'Docs'],
+		[/^docs/, 'Documentation'],
 		[/^repl/, 'REPL'],
 		[/^blog/, 'Blog'],
-		[/^faq/, 'FAQ'],
-		[/^tutorial/, 'Tutorial'],
-		[/^search/, 'Search'],
-		[/^examples/, 'Examples']
+		[/^faq/, 'FÀQ'],
+		[/^tutorial/, 'Tutoriel'],
+		[/^search/, 'Recherche'],
+		[/^examples/, 'Exemples']
 	]);
 
 	for (const [regex, title] of list) {

diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
@@ -35,7 +35,7 @@
 			</svelte:fragment>
 
 			<svelte:fragment slot="external-links">
-				<a href="https://learn.svelte.dev/">Tutorial</a>
+				<a href="https://learn.svelte.dev/">Tutoriel</a>
 
 				<a href="https://kit.svelte.dev">SvelteKit</a>
 

diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
@@ -21,26 +21,28 @@
 
 <Blurb --background="var(--sk-back-1)">
 	<div slot="one">
-		<h2>stylé</h2>
+		<h2>compilé</h2>
 		<p>
-			Svelte shifts as much work as possible out of the browser and into your build step. No more
-			manual optimisations — just faster, more efficient apps.
+			Svelte allège le travail du navigateur en déléguant un maximum de tâches au compilateur. Plus
+			besoin d'optimisations manuelles — vos apps sont simplement plus rapides et plus efficaces.
 		</p>
 	</div>
 
 	<div slot="two">
-		<h2>génial</h2>
+		<h2>compact</h2>
 		<p>
-			Write breathtakingly concise components using languages you already know — HTML, CSS and
-			JavaScript. Oh, and your application bundles will be tiny as well.
+			Écrivez des composants vraiment plus concis en utilisant des langages que vous connaissez déjà
+			— HTML, CSS et JavaScript. Ah, et les bundles de vos applications seront également plus
+			légers.
 		</p>
 	</div>
 
 	<div slot="three">
-		<h2>beau gosse</h2>
+		<h2>complet</h2>
 		<p>
-			Built-in scoped styling, state management, motion primitives, form bindings and more — don't
-			waste time trawling npm for the bare essentials. It's all here.
+			Styles scopés par défaut, gestion d'état, primitives d'animation, liaisons de formulaire et
+			bien d'autres — ne perdez plus votre temps à fouiller npm pour des fonctionnalités de bases.
+			Tout est inclus.
 		</p>
 	</div>
 </Blurb>
@@ -57,26 +59,27 @@
 	<footer>
 		<div class="logo" />
 		<div class="links">
-			<h4>resources</h4>
+			<h4>ressources</h4>
 			<a href="/docs">documentation</a>
-			<a href="/tutorial">tutorial</a>
-			<a href="/examples">examples</a>
+			<a href="/tutorial">tutoriel</a>
+			<a href="/examples">exemples</a>
 			<a href="/blog">blog</a>
 		</div>
 		<div class="links">
-			<h4>connect</h4>
+			<h4>réseau</h4>
 			<a href="https://github.com/sveltejs/svelte">github</a>
 			<a href="https://opencollective.com/svelte">open collective</a>
 			<a href="/chat">discord</a>
 			<a href="https://twitter.com/sveltejs">twitter</a>
 		</div>
 		<div class="copyright">
-			© 2023 <a href="https://github.com/sveltejs/svelte/graphs/contributors">Svelte contributors</a
+			© 2023 <a href="https://github.com/sveltejs/svelte/graphs/contributors"
+				>contributeurs Svelte</a
 			>
 		</div>
 		<div class="open-source">
-			Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
-			under the MIT license
+			Svelte est <a href="https://github.com/sveltejs/svelte">logiciel gratuit en license ouverte</a
+			> publié sous la license MIT
 		</div>
 	</footer>
 </section>

diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
@@ -6,25 +6,26 @@
 		{
 			id: 'hello-world',
 			title: 'Hello World',
-			description: 'Svelte components are built on top of HTML. Just add data.'
+			description:
+				"Les composants Svelte sont construits en se basant sur du HTML. Vous n'avez qu'à ajouter de la donnée."
 		},
 		{
 			id: 'nested-components',
-			title: 'Scoped CSS',
+			title: 'CSS scopé',
 			description:
-				'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.'
+				'Votre CSS est par défaut scopé à votre composant — plus aucune collision de style ou guerre de spécificité. Vous pouvez aussi <a href="/blog/svelte-css-in-js">utiliser votre librairie CSS-in-JS préférée</a >.'
 		},
 		{
 			id: 'reactive-assignments',
-			title: 'Reactivity',
+			title: 'Réactivité',
 			description:
-				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.'
+				"Déclenchez des mises à jour granulaires en assignant à des variables locales. Le compilateur s'occupe du reste."
 		},
 		{
 			id: 'svg-transitions',
 			title: 'Transitions',
 			description:
-				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.'
+				"Construisez de superbes interfaces à l'aide d'un moteur de transition puissant et performant intégré dans le framework."
 		}
 	];
 
@@ -36,7 +37,7 @@
 </svelte:head>
 
 <Section --background="var(--sk-back-2)">
-	<h3>build with ease</h3>
+	<h3>développez en toute simplicité</h3>
 
 	<div class="container">
 		<div class="controls">
@@ -53,7 +54,7 @@
 				{/each}
 			</div>
 
-			<a href="/examples">more <span class="large-show">&nbsp;examples</span> &rarr;</a>
+			<a href="/examples">plus d'<span class="large-show">exemples</span> &rarr;</a>
 		</div>
 
 		{#if selected}

diff --git a/sites/svelte.dev/src/routes/_components/Hero.svelte b/sites/svelte.dev/src/routes/_components/Hero.svelte
@@ -17,9 +17,9 @@
 		</strong>
 		<div class="buttons">
 			<a href="https://learn.svelte.dev" rel="external" class="cta">
-				tutorial<Icon name="external-link" size="1em" />
+				tutoriel<Icon name="external-link" size="1em" />
 			</a>
-			<a href="/docs/introduction" class="cta basic">read the docs</a>
+			<a href="/docs/introduction" class="cta basic">lire la documentation</a>
 		</div>
 	</div>
 
@@ -42,7 +42,10 @@
 		<source srcset={srcset(MachineMobile.sources.avif)} type="image/avif" />
 		<source srcset={srcset(MachineMobile.sources.webp)} type="image/webp" />
 		<source srcset={srcset(MachineMobile.sources.png)} type="image/png" />
-		<img alt="The Svelte compiler packaging up your component code" src={MachineMobile.img.src} />
+		<img
+			alt="Le compilateur Svelte préparant le code de vos composants"
+			src={MachineMobile.img.src}
+		/>
 	</picture>
 </div>
 

diff --git a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
@@ -5,15 +5,15 @@
 </script>
 
 <Section --background="var(--sk-back-2">
-	<p class="intro">
-		Svelte is made possible by the work of hundreds of supporters.
-	</p>
+	<p class="intro">Svelte existe grâce au travail de centaines de personnes.</p>
 
 	<div class="layout">
 		<div class="contributors blurb">
-			<h3>contributors</h3>
+			<h3>contributeurs</h3>
 			<p>
-				<a href="https://github.com/sveltejs/svelte/graphs/contributors">Join us on GitHub</a>
+				<a href="https://github.com/sveltejs/svelte/graphs/contributors"
+					>Rejoignez-nous sur Github</a
+				>
 			</p>
 		</div>
 
@@ -30,8 +30,8 @@
 		</div>
 
 		<div class="donors blurb">
-			<h3>donors</h3>
-			<p><a href="https://opencollective.com/svelte">Support us on OpenCollective</a></p>
+			<h3>donateurs</h3>
+			<p><a href="https://opencollective.com/svelte">Soutenez-nous sur OpenCollective</a></p>
 		</div>
 
 		<div class="donors grid">

diff --git a/sites/svelte.dev/src/routes/_components/Try.svelte b/sites/svelte.dev/src/routes/_components/Try.svelte
@@ -7,12 +7,12 @@
 	<Section --background="var(--background-2)">
 		<div class="grid" style="--columns: 2">
 			<div class="copy">
-				<h2>see for yourself</h2>
+				<h2>faites-vous votre opinion</h2>
 				<div>
-					Try it locally, <a target="_blank" rel="noreferrer" href="https://sveltekit.new"
-						>on StackBlitz</a
-					>, or with
-					<a target="_blank" href="https://learn.svelte.dev">the interactive tutorial</a>.
+					Essayez en local, <a target="_blank" rel="noreferrer" href="https://sveltekit.new"
+						>sur StackBlitz</a
+					>, ou avec
+					<a target="_blank" href="https://learn.svelte.dev">le tutoriel interactif</a>.
 				</div>
 			</div>
 

diff --git a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
@@ -7,17 +7,19 @@
 </script>
 
 <Section --background={$theme.current === 'light' ? 'var(--sk-back-4)' : '#222'}>
-	<h3>loved by developers</h3>
+	<h3>adoré par les développeurs et développeuses</h3>
 
 	<p>
-		We're proud that Svelte was recently voted the <a
+		Nous sommes fiers que Svelte ait récemment été élu <a
 			href="https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies"
-			>most admired JS web framework</a
+			>framework JS web le plus admiré</a
 		>
-		in one industry survey while drawing the most interest in learning it in <a
-		href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
-		>two</a> <a href="https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/"
-		>others</a>. We think you'll love it too.
+		dans un sondage à l'échelle de l'industrie, tout étant suscitant le plus de curiosité dans
+		<a
+			href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
+			>deux</a
+		> <a href="https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/">autres</a>. Nous
+		pensons que vous allez l'aimer aussi.
 	</p>
 
 	<section class="whos-using-svelte-container" class:dark={$theme.current === 'dark'}>

diff --git a/sites/svelte.dev/src/routes/chat/+server.js b/sites/svelte.dev/src/routes/chat/+server.js
@@ -1,6 +1,6 @@
 export function GET() {
 	return new Response(undefined, {
 		status: 302,
-		headers: { Location: 'https://discord.gg/svelte' }
+		headers: { Location: 'https://discord.gg/D6Dzc5m3' }
 	});
 }