Analysing for translation (#1)

* analysis for translation

* some css

Author: tomoam

apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md

@@ -1,15 +1,15 @@
 ---
-title: Svelte 5 is alive
-description: Our biggest release yet
+title: Svelte 5 誕生
+description: 最も大きなリリース
 author: The Svelte team
 authorURL: https://svelte.dev/
 ---
 
-After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable.
+およそ18ヶ月の開発を経て、そしてたくさんのコントリビューターによる数千ものコミットによって、ついに Svelte 5 は安定版(stable)になりました。
 
-It’s the most significant release in the project’s history. Svelte 5 is a ground-up rewrite: your apps will be faster, smaller and more reliable. You’ll be able to write more consistent and idiomatic code. For newcomers to the framework, there’s less stuff to learn.
+このプロジェクトの歴史上、最も重要なリリースとなります。Svelte 5 は根本から書き直されました: あなたのアプリはより高速に、よりサイズが小さく、そしてより信頼性が高くなります。あなたはより一貫性があり、よりイディオマティックなコードを書くことができます。Svelte を使用したことがない方からすると、学ぶべきことがより少なくなりました。
 
-Despite all that, Svelte is almost completely backwards-compatible with Svelte 4 — for the majority of users, the initial upgrade will be completely seamless:
+それにもかかわらず、Svelte はほぼ完全に Svelte 4 と後方互換性があります。ユーザーの多くは、最初のアップグレードを完全にシームレスに行うことができるでしょう:
 
 ```json
 {

apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md

@@ -1,18 +1,18 @@
 ---
-title: Introduction
+title: イントロダクション
 ---
 
 ## Before we begin
 
-> [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](https://learn.svelte.dev).
+> [!NOTE] Svelte や SvelteKit が初めてなら、こちらの[インタラクティブなチュートリアル](/tutorial)をチェックしてみることをおすすめします。
 >
-> If you get stuck, reach out for help in the [Discord chatroom](https://svelte.dev/chat).
+> 行き詰まったら、[Discord chatroom](https://svelte.dev/chat) でヘルプを求めてください。
 
 ## What is SvelteKit?
 
-SvelteKit is a framework for rapidly developing robust, performant web applications using [Svelte](https://svelte.dev/). If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.
+SvelteKit は、[Svelte](https://svelte.dev/) を使用して堅牢でハイパフォーマンスな web アプリケーションを迅速に開発するためのフレームワークです。もしあなたが React 界隈から来たのであれば、SvelteKit は Next に似ているものです。Vue 界隈から来たのであれば、Nuxt に似ています。
 
-To learn more about the kinds of applications you can build with SvelteKit, see the [FAQ](faq#What-can-I-make-with-SvelteKit).
+SvelteKit で構築することのできるアプリケーションの種類については、[FAQ](faq#What-can-I-make-with-SvelteKit) をご覧ください。
 
 ## What is Svelte?
 

apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md

@@ -1,8 +1,8 @@
 ---
-title: Overview
+title: 概要
 ---
 
-Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...
+Svelte は Web 上のユーザーインターフェースを構築するためのフレームワークです。Svelte はコンパイラを使用し、HTML、CSS、JavaScript で記述された宣言的なコンポーネントを...
 
 ```svelte
 <!--- file: App.svelte --->
@@ -21,10 +21,10 @@ Svelte is a framework for building user interfaces on the web. It uses a compile
 </style>
 ```
 
-...into lean, tightly optimized JavaScript.
+...無駄のない、タイトで最適化された JavaScript に変換します。
 
-You can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelte's companion application framework, [SvelteKit](../kit)) and everything in between.
+これにより、スタンドアローンなコンポーネントからフルスタックアプリ (Svelte のアプリケーションフレームワークである [SvelteKit](../kit) を使用) まで、お望みのものをなんでも構築することができます。
 
-These pages serve as reference documentation. If you're new to Svelte, we recommend starting with the [interactive tutorial](/tutorial) and coming back here when you have questions.
+こちらのページはリファレンスドキュメントとして提供されています。もしあなたが Svelte の初心者なら、先に[インタラクティブなチュートリアル](/tutorial)から始めて、わからないことがあるときにこちらに戻ってくることをおすすめします。
 
-You can also try Svelte online in the [playground](/playground) or, if you need a more fully-featured environment, on [StackBlitz](https://sveltekit.new).
+また、[Playground](/playground) を使ってオンラインで Svelte を試すこともできますし、より高機能な環境が必要なら [StackBlitz](https://sveltekit.new) で試すこともできます。

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md

@@ -2,9 +2,9 @@
 title: Welcome to 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.
+Svelte チュートリアルにようこそ！ ここでは、高速でフットプリントが小さい、あらゆるサイズの Web アプリケーションを簡単に構築するために必要なこと全てを学ぶことができます。
 
-You can also consult the [API docs](https://svelte.dev/docs) and visit the [playground](https://svelte.dev/playground), or — if you're impatient to start hacking on your machine locally — create a project with `npx sv create`.
+[API ドキュメント](/docs) や [Playground](/playground) を参照することもできます。また、すぐにローカルで動かしたい場合は、`npx sv create` を実行してプロジェクトを作成してください。
 
 ## What is Svelte?
 

apps/svelte.dev/src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="theme-default typo-default">
+<html lang="ja" class="theme-default typo-default">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width,initial-scale=1" />

apps/svelte.dev/src/routes/+page.svelte

@@ -31,7 +31,7 @@
 			<Video />
 			<figcaption>
 				<a href="https://www.offerzen.com/community/svelte-origins-documentary"
-					>Watch the full Svelte Origins documentary</a
+					>Svelte Origins ドキュメンタリーをフルで視聴する</a
 				>
 			</figcaption>
 		</figure>

apps/svelte.dev/src/routes/_home/Community.svelte

@@ -3,12 +3,11 @@
 </script>
 
 <Section --max-width="200rem">
-	<h2>join our friendly community</h2>
+	<h2>私たちのフレンドリーなコミュニティに参加しませんか</h2>
 	<p>
-		Our sister organisation, <a href="https://www.sveltesociety.dev/">Svelte Society</a>, organises
-		events around the globe.
+		私たちの姉妹組織である <a href="https://www.sveltesociety.dev/">Svelte Society</a> は、世界中でイベントを運営しています。
 	</p>
-	<p>Find your chapter and join us in <a href="/chat">our Discord server</a>.</p>
+	<p>あなたが所属する支部を見つけに、<a href="/chat">Discord サーバー</a>に参加しましょう。</p>
 
 	<figure>
 		<enhanced:img

apps/svelte.dev/src/routes/_home/Companies.svelte

@@ -8,7 +8,7 @@
 			<enhanced:img src="./companies/apple.svg" alt="Apple logo" />
 		</div>
 	</div>
-	<h2>used by companies you’ve heard of</h2>
+	<h2>誰もが知っている企業でも使用されています</h2>
 	<div class="wing">
 		<div class="logos">
 			<enhanced:img src="./companies/spotify.svg" alt="Spotify logo" />

apps/svelte.dev/src/routes/_home/Hero.svelte

@@ -9,7 +9,7 @@
 <div class="hero">
 	<div class="hero-content">
 		<h1>web development for the rest of us</h1>
-		<a href="/docs" class="cta">get started <Icon name="arrow-right" /></a>
+		<a href="/docs" class="cta">始める <Icon name="arrow-right" /></a>
 	</div>
 
 	<picture class="machine">

apps/svelte.dev/src/routes/_home/Supporters/index.svelte

@@ -9,8 +9,8 @@
 </script>
 
 <p class="intro">
-	Backed by <a href="https://vercel.com" target="_blank" rel="noreferrer">Vercel</a> and countless donors,
-	developed by full-time and part-time maintainers, Svelte is here to stay.
+	<a href="https://vercel.com" target="_blank" rel="noreferrer">Vercel</a> と数え切れない貢献者による支援、
+	そしてフルタイムまたはパートタイムのメンテナーによる開発のおかげで、Svelte はここに存在しています。
 </p>
 
 <div class="wrapper">
@@ -51,6 +51,8 @@
 		text-align: center;
 		max-width: 27em;
 		padding: 0 var(--sk-page-padding-side);
+		font: var(--sk-font-body-small);
+		word-break: auto-phrase;
 	}
 
 	.layout {