add a "show me" button

site/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte

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

site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte

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

site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte

@@ -0,0 +1,9 @@
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>This is a paragraph.</p>

site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte

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

site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte

@@ -0,0 +1 @@
+<p>This is another paragraph.</p>

site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte

@@ -0,0 +1,14 @@
+<script>
+	let count = 0;
+	$: doubled = count * 2;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
+
+<p>{count} doubled is {doubled}</p>

site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>

site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte

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

site/src/routes/tutorial/[slug]/index.json.js

@@ -26,7 +26,8 @@ function get_tutorial(slug) {
 	const dir = `content/tutorial/${found.section}/${found.chapter}`;
 
 	const markdown = fs.readFileSync(`${dir}/text.md`, 'utf-8');
-	const files = fs.readdirSync(dir).filter(file => file[0] !== '.' && file !== 'text.md');
+	const app_a = fs.readdirSync(`${dir}/app-a`);
+	const app_b = fs.existsSync(`${dir}/app-b`) && fs.readdirSync(`${dir}/app-b`);
 
 	const { content } = extract_frontmatter(markdown);
 
@@ -69,10 +70,7 @@ function get_tutorial(slug) {
 		html = `<h2>${meta.title}</h2>\n${html}`;
 	}
 
-
-	return {
-		html,
-		files: files.map(file => {
+	function get_file(stage, file) {
 		const ext = path.extname(file);
 		const name = file.slice(0, -ext.length);
 		const type = ext.slice(1);
@@ -80,9 +78,14 @@ function get_tutorial(slug) {
 		return {
 			name,
 			type,
-				source: fs.readFileSync(`${dir}/${file}`, 'utf-8')
+			source: fs.readFileSync(`${dir}/${stage}/${file}`, 'utf-8')
 		};
-		})
+	}
+
+	return {
+		html,
+		app_a: app_a.map(file => get_file('app-a', file)),
+		app_b: app_b && app_b.map(file => get_file('app-b', file))
 	};
 }
 

site/src/routes/tutorial/[slug]/index.svelte

@@ -47,10 +47,28 @@
 
 	$: selected = lookup.get(slug);
 
-	$: app = {
-		components: chapter.files,
+	// TODO once reactive values are fixed
+	// $: app = {
+	// 	components: chapter.app_a,
+	// 	values: {}
+	// };
+
+	let app;
+	$: start(chapter);
+
+	function start(chapter) {
+		app = {
+			components: chapter.app_a,
 			values: {}
 		};
+	}
+
+	function complete() {
+		app = {
+			components: chapter.app_b,
+			values: {}
+		};
+	}
 </script>
 
 <style>
@@ -134,9 +152,29 @@
 		/* color: var(--text); */
 	}
 
+	.controls {
+		border-top: 1px solid rgba(255,255,255,0.1);
+		padding: 1em 0 0 0;
+	}
+
+	.show {
+		float: left;
+		text-transform: uppercase;
+		background: rgba(255,255,255,0.1);
+		padding: 0.2em 0.7em;
+		border-radius: 2em;
+		top: 0.1em;
+		position: relative;
+		font-size: var(--h5);
+		font-weight: 300;
+	}
+
+	.show:hover {
+		background: rgba(255,255,255,0.2);
+	}
+
 	.next {
-		display: block;
-		text-align: right;
+		float: right;
 	}
 </style>
 
@@ -149,11 +187,21 @@
 		<div class="chapter-markup">
 			{@html chapter.html}
 
+			<div class="controls">
+				{#if chapter.app_b}
+					<!-- TODO disable this button when the contents of the REPL
+						matches the expected end result -->
+					<button class="show" on:click={complete}>
+						Show me
+					</button>
+				{/if}
+
 				{#if selected.next}
 					<a class="next" href="tutorial/{selected.next.slug}">Next <Icon name="arrow-right" /></a>
 				{/if}
 			</div>
 		</div>
+	</div>
 
 	<div class="tutorial-repl">
 		<Repl {app} orientation="rows" show_props={false}/>