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 {

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

@@ -7,20 +7,19 @@
 		/>
 
 		<span class="description">
-			<span class="adjective"></span> attractively thin, graceful and stylish
+			<span class="adjective"></span> 魅力的でスリム、優雅でスタイリッシュ
 		</span>
 	</p>
 
 	<div class="blurb">
 		<p>
-			Svelte is a UI framework that uses a compiler to let you write breathtakingly concise
-			components that do minimal work in the browser, using languages you already know — HTML, CSS
-			and JavaScript. <strong>It’s a love letter to web development.</strong>
+			Svelte はコンパイラを使用する UI フレームワークで、息を呑むほど簡潔にコンポーネントを記述でき、
+			ブラウザで最小限の動作となるようにしてくれます。開発者には既知の言語である HTML、CSS、JavaScript を使うことができます。
+			<strong>これは、web 開発へのラブレターです。</strong>
 		</p>
 
 		<p>
-			But don’t take our word for it. Developers consistently rank Svelte as the framework they’re
-			most excited about using.
+			私たちだけでなく、常に開発者たちからも、Svelte は使用する上で最もエキサイティングなフレームワークとしてランク付けされています。
 		</p>
 	</div>
 
@@ -149,6 +148,7 @@
 		.description {
 			position: relative;
 			font: var(--sk-font-ui-medium);
+			font-feature-settings: "palt";
 			bottom: 0.2em;
 			text-wrap: balance;
 			width: 16rem;
@@ -182,7 +182,7 @@
 			}
 
 			.adjective::after {
-				content: 'adjective';
+				content: '形容詞';
 			}
 		}
 	}
@@ -191,7 +191,7 @@
 		.outer {
 			display: grid;
 			margin: 4em auto;
-			grid-template-columns: 1fr 1fr;
+			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 			column-gap: 4rem;
 			grid-template-areas:
 				'definition definition'

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

@@ -57,42 +57,42 @@
 </script>
 
 <div class="page">
-	<h1>Documentation</h1>
+	<h1>ドキュメント</h1>
 	<p>
-		Head to the <a href="/docs/svelte">Svelte</a> or <a href="/docs/kit">SvelteKit</a> reference docs,
-		or choose your adventure:
+		<a href="/docs/svelte">Svelte</a> または <a href="/docs/kit">SvelteKit</a> のリファレンスドキュメントに移動するか、
+		<br/>あなたに合った冒険を以下から選択してください:
 	</p>
 
 	<div class="options">
 		<a href="/tutorial">
-			<h2>I&rsquo;m brand new here</h2>
+			<h2>初めての方</h2>
 			<p>
-				We recommend starting with the interactive tutorial, which will teach you how to use Svelte
-				right here in your browser.
+				インタラクティブなチュートリアルから始めることをおすすめします。
+				今すぐブラウザで Svelte の使い方を学ぶことができます。
 			</p>
 		</a>
 
 		<a href="/docs/svelte/v5-migration-guide">
-			<h2>I&rsquo;m migrating an app from Svelte 4</h2>
+			<h2>アプリを Svelte 4 から移行される方</h2>
 			<p>
-				If you&rsquo;re already experienced with an older version of Svelte, the migration guide
-				will bring you up to speed on the changes in Svelte 5.
+				既に Svelte の旧バージョンをお使いの場合は、
+				移行ガイドで Svelte 5 の変更点を迅速に把握することができます。
 			</p>
 		</a>
 
 		<a href="/playground">
-			<h2>I just want to try it out</h2>
+			<h2>とりあえず試してみたい方</h2>
 			<p>
-				Head over to the playground to see examples, create your own Svelte apps in the browser, and
-				share them with other people.
+				Playground に移動し、example を確認したり、Svelte アプリをブラウザ上で作ったり、
+				それを他の人にシェアすることができます。
 			</p>
 		</a>
 
 		<a href="/chat" class="external">
-			<h2>Help! I'm stuck</h2>
+			<h2>助けて！行き詰まった！という方</h2>
 			<p>
-				Join our Discord server where you can hang out with fellow Svelte users and ask them
-				questions. It's like an LLM but with people.
+				私たちの Discord サーバーで他の Svelte ユーザーたちと一緒に過ごしたり、質問したりしましょう。
+				まるで LLM のように思えるかもしれませんが、ちゃんと人間が答えてくれますよ。
 			</p>
 		</a>
 	</div>

apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte

@@ -115,7 +115,7 @@
 
 	.text {
 		flex: 1 1 auto;
-		padding: 2.2rem var(--sk-page-padding-side);
+		padding: 2.2rem var(--sk-sidebar-padding-side);
 		background: var(--sk-back-1);
 
 		:global {

packages/site-kit/src/lib/components/Text.svelte

@@ -71,6 +71,18 @@
 </div>
 
 <style>
+
+	:global section > div > div > .text {
+
+		p {
+			font-size: 1.9rem;
+		}
+
+		code {
+			font-size: initial;
+		}
+	}
+
 	.text :global {
 		h2,
 		h3 {
@@ -346,7 +358,7 @@
 			}
 
 			@media (min-width: 768px) {
-				left: 1.6rem;
+				left: 2.4rem;
 				opacity: 0;
 				transition: opacity 0.2s;
 

packages/site-kit/src/lib/styles/base.css

@@ -45,6 +45,8 @@ p,
 ul,
 ol {
 	font: var(--sk-font-body);
+	font-feature-settings: "palt";
+	word-break: auto-phrase;
 	margin: 1em 0;
 
 	&:first-child {
@@ -84,6 +86,7 @@ h2,
 h3 {
 	position: relative;
 	text-wrap: balance;
+	word-break: auto-phrase;
 	color: var(--sk-text-1);
 }
 

packages/site-kit/src/lib/styles/tokens.css

@@ -17,6 +17,7 @@
 	--sk-page-padding-top: 6rem;
 	--sk-page-padding-bottom: 8rem;
 	--sk-page-padding-side: 1.6rem;
+	--sk-sidebar-padding-side: 1.6rem;
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;
 	--sk-page-content-width: 84rem;
@@ -180,6 +181,7 @@
 @media screen and (min-width: 480px) {
 	:root {
 		--sk-page-padding-side: 3.2rem;
+		--sk-sidebar-padding-side: 2.4rem;
 	}
 }