move example data into components

Author: Rich-Harris

site/content/examples/7guis-circles/data.json5

@@ -1,3 +1,7 @@
+<script>
+	let count = 0;
+</script>
+
 <!-- https://github.com/eugenkiss/7guis/wiki#counter -->
 <input type=number bind:value={count}>
 <button on:click="{() => count += 1}">count</button>

site/content/examples/7guis-counter/App.svelte

@@ -1,7 +1,20 @@
 <!-- https://eugenkiss.github.io/7guis/tasks#crud -->
 
 <script>
-	export let people = [];
+	let people = [
+		{
+			first: 'Hans',
+			last: 'Emil'
+		},
+		{
+			first: 'Max',
+			last: 'Mustermann'
+		},
+		{
+			first: 'Roman',
+			last: 'Tisch'
+		}
+	];
 
 	let prefix = '';
 	let first = '';

site/content/examples/7guis-counter/data.json5

@@ -1,7 +1,14 @@
 <script>
 	import { scaleLinear } from 'd3-scale';
 
-	export let points;
+	const points = [
+		{ year: 1990, birthrate: 16.7 },
+		{ year: 1995, birthrate: 14.6 },
+		{ year: 2000, birthrate: 14.4 },
+		{ year: 2005, birthrate: 14 },
+		{ year: 2010, birthrate: 13 },
+		{ year: 2015, birthrate: 12.4 }
+	];
 
 	const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
 	const yTicks = [0, 5, 10, 15, 20];

site/content/examples/7guis-crud/App.svelte

@@ -1,3 +1,7 @@
+<script>
+	const selected = ['blue'];
+</script>
+
 <label>
 	<input type=checkbox bind:group={selected} value="red">
 	red

site/content/examples/7guis-crud/data.json5

@@ -1,9 +1,19 @@
-{#each todos as todo}
-	<div class="todo {todo.done ? 'done': ''}">
-		<input type=checkbox bind:checked={todo.done}>
-		<input type=text bind:value={todo.description}>
-	</div>
-{/each}
+<script>
+	const todos = [
+		{
+			description: "Buy some milk",
+			done: true
+		},
+		{
+			description: "Do the laundry",
+			done: true
+		},
+		{
+			description: "Find life's true purpose",
+			done: false
+		}
+	];
+</script>
 
 <style>
 	input[type="text"] {
@@ -14,4 +24,11 @@
 	.done {
 		opacity: 0.6;
 	}
-</style>
+</style>
+
+{#each todos as todo}
+	<div class="todo {todo.done ? 'done': ''}">
+		<input type=checkbox bind:checked={todo.done}>
+		<input type=text bind:value={todo.description}>
+	</div>
+{/each}

site/content/examples/7guis-flight-booker/data.json5

@@ -1,12 +1,17 @@
-<!-- number and range inputs are bound to numeric values -->
-<input bind:value={a} type=number min=0 max=10>
-<input bind:value={b} type=range min=0 max=10>
-
-<p>{a} * {b} = {a * b}</p>
+<script>
+	let a = 5;
+	let b = 5;
+</script>
 
 <style>
 	input {
 		display: block;
 		width: 10em
 	}
-</style>
+</style>
+
+<!-- number and range inputs are bound to numeric values -->
+<input bind:value={a} type=number min=0 max=10>
+<input bind:value={b} type=range min=0 max=10>
+
+<p>{a} * {b} = {a * b}</p>

site/content/examples/7guis-temperature/data.json5

@@ -1,3 +1,7 @@
+<script>
+	let selected = 'blue';
+</script>
+
 <label>
 	<input type=radio bind:group={selected} value="red">
 	red

site/content/examples/7guis-timer/data.json5

@@ -1,2 +1,6 @@
+<script>
+	let name = '';
+</script>
+
 <input bind:value={name} placeholder="enter your name">
 <p>Hello {name || 'stranger'}!</p>

site/content/examples/await-block/data.json5

@@ -1,15 +1,15 @@
 <script>
 	import marked from 'marked';
 
-	export let markdown;
+	let markdown = `# Markdown editor\n\nTODOs:\n\n* make a Svelte app\n* think of a third item for this list`;
 </script>
 
-<textarea bind:value={markdown} resize="none"></textarea>
-<div class="output">{@html marked(markdown)}</div>
-
 <style>
 	textarea {
 		width: 100%;
 		height: 50%;
 	}
-</style>
+</style>
+
+<textarea bind:value={markdown} resize="none"></textarea>
+<div class="output">{@html marked(markdown)}</div>

site/content/examples/bar-chart/App.svelte

@@ -1,3 +1,20 @@
+<script>
+	const cats = [
+		{
+			name: 'Keyboard Cat',
+			video: 'https://www.youtube.com/watch?v=J---aiyznGQ'
+		},
+		{
+			name: 'Maru',
+			video: 'https://www.youtube.com/watch?v=z_AbfPXTKms'
+		},
+		{
+			name: 'Henri The Existential Cat',
+			video: 'https://www.youtube.com/watch?v=OUtn3pvWmpg'
+		}
+	];
+</script>
+
 <h1>Cats of YouTube</h1>
 
 <ul>

site/content/examples/bar-chart/data.json5

@@ -1,14 +1,5 @@
-<h1>Hello {name}!</h1>
+<script>
+	let name = 'world';
+</script>
 
-<!--
-This is a Svelte component. Click 'JS output' in
-the output section to see compiled code.
-
-You can interact with this component via your
-browser's console - try running the following:
-
-    app.name = 'everybody';
-
-You can also update the name via the props
-editor on this page.
--->
+<h1>Hello {name}!</h1>

site/content/examples/binding-input-checkbox-group/App.svelte

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

site/content/examples/binding-input-checkbox-group/data.json5

@@ -1,3 +1,7 @@
+<script>
+	let foo = true;
+</script>
+
 {#if foo}
 	<p>foo!</p>
 {:else}

site/content/examples/binding-input-checkbox/App.svelte

@@ -4,7 +4,11 @@
 	import ImmutableTodo from './ImmutableTodo.svelte';
 	import MutableTodo from './MutableTodo.svelte';
 
-	export let todos;
+	let todos = [
+		{ id: 1, done: true, text: 'wash the car' },
+		{ id: 2, done: false, text: 'take the dog for a walk' },
+		{ id: 3, done: false, text: 'mow the lawn' }
+	];
 
 	function toggle(id) {
 		todos = todos.map(todo => {