feat: bring over examples (#294)

* bring over examples (old syntax) and wire them up correctly

* expose examples in the UI through select

* migrate to runes, remove deprecated stuff

* add redirect

* prettier

* fix entries generation

* use temporary redirects so we don't regret it in the future when we want to reuse those

* get it working on build by moving examples retrieval into prerendered endpoint

* lint

* move examples dropdown to icon on the right

* show "edited" in the title once changing contents

* add "create new" option

* add examples to search (with low priority)

* fix

* remove duplicate content

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

Author: dummdidumm

apps/svelte.dev/content/examples/00-introduction/00-hello-world/+assets/App.svelte

@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>

apps/svelte.dev/content/examples/00-introduction/00-hello-world/index.md

@@ -0,0 +1,7 @@
+<script>
+	let src = '/tutorial/image.gif';
+	let name = 'Rick Astley';
+</script>
+
+<!-- {src} is short for src={src} -->
+<img {src} alt="{name} dancing" />

apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/+assets/App.svelte

@@ -0,0 +1,9 @@
+<p>Styled!</p>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>

apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/index.md

@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<p>These styles...</p>
+<Nested />
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>

apps/svelte.dev/content/examples/00-introduction/02-styling/+assets/App.svelte

@@ -0,0 +1 @@
+<p>...don't affect this element</p>

apps/svelte.dev/content/examples/00-introduction/02-styling/index.md

@@ -0,0 +1,5 @@
+<script>
+	let string = `here's some <strong>HTML!!!</strong>`;
+</script>
+
+<p>{@html string}</p>

apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/App.svelte

@@ -0,0 +1,12 @@
+<script>
+	let count = $state(0);
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button onclick={handleClick}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>

apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/Nested.svelte

@@ -0,0 +1,17 @@
+<script>
+	let count = $state(1);
+
+	let doubled = $derived(count * 2);
+	let quadrupled = $derived(doubled * 2);
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button onclick={handleClick}>
+	Count: {count}
+</button>
+
+<p>{count} * 2 = {doubled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>

apps/svelte.dev/content/examples/00-introduction/03-nested-components/index.md

@@ -0,0 +1,19 @@
+<script>
+	let count = $state(0);
+
+	$effect(() => {
+		if (count >= 10) {
+			alert(`count is dangerously high!`);
+			count = 9;
+		}
+	});
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button onclick={handleClick}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>

apps/svelte.dev/content/examples/00-introduction/04-html-tags/+assets/App.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42} />

apps/svelte.dev/content/examples/00-introduction/04-html-tags/index.md

@@ -0,0 +1,5 @@
+<script>
+	let { answer } = $props();
+</script>
+
+<p>The answer is {answer}</p>

apps/svelte.dev/content/examples/00-introduction/index.md

@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42} />
+<Nested />

apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/+assets/App.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { answer = 'a mystery' } = $props();
+</script>
+
+<p>The answer is {answer}</p>

apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/index.md

@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.dev'
+	};
+</script>
+
+<Info {...pkg} />

apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/+assets/App.svelte

@@ -0,0 +1,14 @@
+<script>
+	let {
+		name,
+		version,
+		speed,
+		website
+	} = $props();
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast. Download version {version} from
+	<a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>

apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/index.md

@@ -0,0 +1,15 @@
+<script>
+	let user = $state({ loggedIn: false });
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button onclick={toggle}> Log out </button>
+{/if}
+
+{#if !user.loggedIn}
+	<button onclick={toggle}> Log in </button>
+{/if}

apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/+assets/App.svelte

@@ -0,0 +1,13 @@
+<script>
+	let user = $state({ loggedIn: false });
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button onclick={toggle}> Log out </button>
+{:else}
+	<button onclick={toggle}> Log in </button>
+{/if}

apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/index.md

@@ -0,0 +1,11 @@
+<script>
+	let x = 7;
+</script>
+
+{#if x > 10}
+	<p>{x} is greater than 10</p>
+{:else if 5 > x}
+	<p>{x} is less than 5</p>
+{:else}
+	<p>{x} is between 5 and 10</p>
+{/if}

apps/svelte.dev/content/examples/01-reactivity/index.md

@@ -0,0 +1,19 @@
+<script>
+	let cats = [
+		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+		{ id: 'z_AbfPXTKms', name: 'Maru' },
+		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+	];
+</script>
+
+<h1>The Famous Cats of YouTube</h1>
+
+<ul>
+	{#each cats as { id, name }, i}
+		<li>
+			<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v={id}">
+				{i + 1}: {name}
+			</a>
+		</li>
+	{/each}
+</ul>

apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/App.svelte

@@ -0,0 +1,33 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = $state([
+		{ id: 1, color: 'darkblue' },
+		{ id: 2, color: 'indigo' },
+		{ id: 3, color: 'deeppink' },
+		{ id: 4, color: 'salmon' },
+		{ id: 5, color: 'gold' }
+	]);
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button onclick={handleClick}> Remove first thing </button>
+
+<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
+	<div>
+		<h2>Keyed</h2>
+		{#each things as thing (thing.id)}
+			<Thing current={thing.color} />
+		{/each}
+	</div>
+
+	<div>
+		<h2>Unkeyed</h2>
+		{#each things as thing}
+			<Thing current={thing.color} />
+		{/each}
+	</div>
+</div>

apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/Nested.svelte

@@ -0,0 +1,24 @@
+<script>
+	// `current` is updated whenever the prop value changes...
+	let { current } = $props();
+
+	// ...but `initial` is fixed upon initialisation
+	const initial = current;
+</script>
+
+<p>
+	<span style="background-color: {initial}">initial</span>
+	<span style="background-color: {current}">current</span>
+</p>
+
+<style>
+	span {
+		display: inline-block;
+		padding: 0.2em 0.5em;
+		margin: 0 0.2em 0.2em 0;
+		width: 4em;
+		text-align: center;
+		border-radius: 0.2em;
+		color: white;
+	}
+</style>

apps/svelte.dev/content/examples/02-props/00-declaring-props/index.md

@@ -0,0 +1,28 @@
+<script>
+	let promise = $state(getRandomNumber());
+
+	async function getRandomNumber() {
+		const res = await fetch(`/tutorial/random-number`);
+		const text = await res.text();
+
+		if (res.ok) {
+			return text;
+		} else {
+			throw new Error(text);
+		}
+	}
+
+	function handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button onclick={handleClick}> generate random number </button>
+
+{#await promise}
+	<p>...waiting</p>
+{:then number}
+	<p>The number is {number}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}