Changing tutorial/example order from script-style-html to script-html…

…-style (#6213) Also change button style in one tutorial
sveltejs · Apr 22, 2021 · ec25407 · ec25407
1 parent 697d4c7
commit ec25407
Show file tree

Hide file tree

Showing 148 changed files with 1,529 additions and 1,447 deletions.
diff --git a/site/content/examples/00-introduction/02-styling/App.svelte b/site/content/examples/00-introduction/02-styling/App.svelte
@@ -1,9 +1,9 @@
+<p>Styled!</p>
+
 <style>
 	p {
 		color: purple;
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
-</style>
-
-<p>Styled!</p>
+</style>
diff --git a/site/content/examples/00-introduction/03-nested-components/App.svelte b/site/content/examples/00-introduction/03-nested-components/App.svelte
@@ -2,13 +2,13 @@
 	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>
-
-<p>These styles...</p>
-<Nested/>
+</style>
diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte
@@ -7,10 +7,10 @@
 	}
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div on:mousemove={handleMousemove}>
 	The mouse position is {m.x} x {m.y}
-</div>
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte
@@ -2,10 +2,10 @@
 	let m = { x: 0, y: 0 };
 </script>
 
-<style>
-	div { width: 100%; height: 100%; }
-</style>
-
 <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
 	The mouse position is {m.x} x {m.y}
-</div>
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
@@ -1,3 +1,7 @@
+<button on:click>
+	Click me
+</button>
+
 <style>
 	button {
 		height: 4rem;
@@ -15,8 +19,4 @@
 		background-position: 0;
 		color: #aaa;
 	}
-</style>
-
-<button on:click>
-	Click me
-</button>
+</style>
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -3,10 +3,10 @@
 	let text = `Some words are *italic*, some are **bold**`;
 </script>
 
-<style>
-	textarea { width: 100%; height: 200px; }
-</style>
-
 <textarea bind:value={text}></textarea>
 
-{@html marked(text)}
+{@html marked(text)}
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
diff --git a/site/content/examples/05-bindings/06-select-bindings/App.svelte b/site/content/examples/05-bindings/06-select-bindings/App.svelte
@@ -14,10 +14,6 @@
 	}
 </script>
 
-<style>
-	input { display: block; width: 500px; max-width: 100%; }
-</style>
-
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
@@ -36,4 +32,8 @@
 	</button>
 </form>
 
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+
+<style>
+	input { display: block; width: 500px; max-width: 100%; }
+</style>
diff --git a/site/content/examples/05-bindings/09-media-elements/App.svelte b/site/content/examples/05-bindings/09-media-elements/App.svelte
@@ -51,6 +51,32 @@
 	}
 </script>
 
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused>
+			<track kind="captions"/>
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
 <style>
 	div {
 		position: relative;
@@ -102,30 +128,4 @@
 	video {
 		width: 100%;
 	}
-</style>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
-		on:mousedown={handleMousedown}
-		bind:currentTime={time}
-		bind:duration
-		bind:paused>
-			<track kind="captions"/>
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value="{(time / duration) || 0}"/>
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
+</style>
diff --git a/site/content/examples/05-bindings/10-dimensions/App.svelte b/site/content/examples/05-bindings/10-dimensions/App.svelte
@@ -5,16 +5,16 @@
 	let text = 'edit me';
 </script>
 
-<style>
-	input { display: block; }
-	div { display: inline-block; }
-</style>
-
 <input type=range bind:value={size}>
 <input bind:value={text}>
 
 <p>size: {w}px x {h}px</p>
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
-</div>
+</div>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+</style>
diff --git a/site/content/examples/05-bindings/11-bind-this/App.svelte b/site/content/examples/05-bindings/11-bind-this/App.svelte
@@ -38,6 +38,12 @@
 	});
 </script>
 
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
+
 <style>
 	canvas {
 		width: 100%;
@@ -46,10 +52,4 @@
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
-</style>
-
-<canvas
-	bind:this={canvas}
-	width={32}
-	height={32}
-></canvas>
+</style>
diff --git a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
@@ -10,19 +10,6 @@
 	const submit = () => dispatch('submit');
 </script>
 
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em
-	}
-
-	button {
-		margin: 0
-	}
-</style>
-
 <div class="keypad">
 	<button on:click={select(1)}>1</button>
 	<button on:click={select(2)}>2</button>
@@ -37,4 +24,17 @@
 	<button disabled={!value} on:click={clear}>clear</button>
 	<button on:click={select(0)}>0</button>
 	<button disabled={!value} on:click={submit}>submit</button>
-</div>
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -9,6 +9,20 @@
 	});
 </script>
 
+<h1>Photo album</h1>
+
+<div class="photos">
+	{#each photos as photo}
+		<figure>
+			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<figcaption>{photo.title}</figcaption>
+		</figure>
+	{:else}
+		<!-- this block renders when photos.length === 0 -->
+		<p>loading...</p>
+	{/each}
+</div>
+
 <style>
 	.photos {
 		width: 100%;
@@ -22,17 +36,3 @@
 		margin: 0;
 	}
 </style>
-
-<h1>Photo album</h1>
-
-<div class="photos">
-	{#each photos as photo}
-		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title}>
-			<figcaption>{photo.title}</figcaption>
-		</figure>
-	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
-	{/each}
-</div>
diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte
@@ -51,6 +51,20 @@
 	}
 </script>
 
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown}>
+</div>
+
 <style>
 	.chat {
 		display: flex;
@@ -90,17 +104,3 @@
 		border-radius: 1em 1em 0 1em;
 	}
 </style>
-
-<div class="chat">
-	<h1>Eliza</h1>
-
-	<div class="scrollable" bind:this={div}>
-		{#each comments as comment}
-			<article class={comment.author}>
-				<span>{comment.text}</span>
-			</article>
-		{/each}
-	</div>
-
-	<input on:keydown={handleKeydown}>
-</div>
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte
@@ -27,11 +27,11 @@
 	}
 </script>
 
+<textarea value={text} on:keydown={handleKeydown}></textarea>
+
 <style>
 	textarea {
 		width: 100%;
 		height: 200px;
 	}
-</style>
-
-<textarea value={text} on:keydown={handleKeydown}></textarea>
+</style>