add REPL to tutorial

site/src/components/Repl/Input/ComponentSelector.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import Icon from '../../../../components/Icon.svelte';
+	import Icon from '../../Icon.svelte';
-	import { enter } from '../events.js';
+	import { enter } from '../../../utils/events.js';
 
 	const dispatch = createEventDispatcher();
 

site/src/components/Repl/Output/Viewer.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-	import getLocationFromStack from '../../_utils/getLocationFromStack.js';
+	import getLocationFromStack from './getLocationFromStack.js';
-	import ReplProxy from '../../_utils/replProxy.js';
+	import ReplProxy from './replProxy.js';
 	import { decode } from 'sourcemap-codec';
 
 	const dispatch = createEventDispatcher();

site/src/components/Repl/index.svelte

@@ -36,12 +36,6 @@
 		selected_store.set(app.components[0]);
 	}
 
-	$: {
-		// necessary pending https://github.com/sveltejs/svelte/issues/1889
-		$component_store;
-		$values_store;
-	}
-
 	let workers;
 
 	let bundle = null;

site/src/routes/repl/_components/AppControls/index.svelte

@@ -6,7 +6,7 @@
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
-	import { enter } from '../events.js';
+	import { enter } from '../../../../utils/events.js';
 
 	const dispatch = createEventDispatcher();
 

site/src/routes/repl/embed.svelte

@@ -11,7 +11,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import * as fleece from 'golden-fleece';
-	import Repl from './_components/Repl.svelte';
+	import Repl from '../../components/Repl/index.svelte';
 
 	export let version, gist, demo;
 

site/src/routes/repl/index.svelte

@@ -13,7 +13,7 @@
 	import { locate } from 'locate-character';
 	import * as fleece from 'golden-fleece';
 	import AppControls from './_components/AppControls/index.svelte';
-	import Repl from './_components/Repl.svelte';
+	import Repl from '../../components/Repl/index.svelte';
 	import examples from '../../../content/examples/manifest.json';
 
 	export let version, demo, gist_id;
@@ -115,6 +115,8 @@
 
 				name = data.title;
 
+				console.log(data.components);
+
 				app = {
 					values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
 					components: data.components

site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte

@@ -15,7 +15,7 @@
 	nav {
 		display: grid;
 		grid-template-columns: 2.5em 1fr 2.5em;
-		border-bottom: 1px solid #eee;
+		border-bottom: 1px solid rgba(255,255,255,0.1);
 	}
 
 	div {
@@ -23,7 +23,7 @@
 		padding: 1em 0.5em;
 		font-weight: 300;
 		font-size: var(--h6);
-		color: var(--text);
+		color: white;
 		cursor: pointer;
 	}
 
@@ -31,19 +31,20 @@
 		display: block;
 		padding: 0.7em 0;
 		text-align: center;
+		opacity: 0.7;
 	}
 
 	a.disabled, a.disabled:hover, a.disabled:active {
-		color: var(--second);
+		color: white;
+		opacity: 0.4;
 	}
 
 	span {
 		white-space: nowrap;
-		color: var(--prime);
 	}
 
 	strong {
-		color: var(--heading);
+		opacity: 0.7;
 	}
 
 	select {

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

@@ -1,4 +1,5 @@
 import * as fs from 'fs';
+import * as path from 'path';
 import marked from 'marked';
 import PrismJS from 'prismjs';
 import { extract_frontmatter, extract_metadata, langs } from '../../../utils/markdown';
@@ -66,10 +67,17 @@ function get_tutorial(slug) {
 
 	return {
 		html,
-		files: files.map(file => ({
+		files: files.map(file => {
-			file,
+			const ext = path.extname(file);
-			contents: fs.readFileSync(`${dir}/${file}`, 'utf-8')
+			const name = file.slice(0, -ext.length);
-		}))
+			const type = ext.slice(1);
+
+			return {
+				name,
+				type,
+				source: fs.readFileSync(`${dir}/${file}`, 'utf-8')
+			};
+		})
 	};
 }
 

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

@@ -12,6 +12,7 @@
 <script>
 	import TableOfContents from './_components/TableOfContents.svelte';
 	import Icon from '../../../components/Icon.svelte';
+	import Repl from '../../../components/Repl/index.svelte';
 	import { getContext } from 'svelte';
 
 	export let slug;
@@ -41,6 +42,11 @@
 	});
 
 	$: selected = lookup.get(slug);
+
+	$: app = {
+		components: chapter.files,
+		values: {}
+	};
 </script>
 
 <style>
@@ -60,6 +66,8 @@
 		flex-direction: column;
 		height: 100%;
 		border-right: 1px solid var(--second);
+		background-color: var(--second);
+		color: white;
 	}
 
 	.tutorial-repl {
@@ -67,7 +75,7 @@
 	}
 
 	.table-of-contents {
-		background-color: white;
+
 	}
 
 	.chapter-markup {
@@ -79,9 +87,41 @@
 
 	.chapter-markup :global(h2) {
 		font-size: var(--h3);
-		color: var(--second);
 		margin: 3.2rem 0 1.6rem 0;
 		line-height: 1;
+		color: white;
+	}
+
+	.chapter-markup :global(blockquote) {
+		background-color: rgba(255,255,255,0.1);
+		color: white;
+	}
+
+	/* .chapter-markup::-webkit-scrollbar-track {
+		background-color: var(--second);
+		width: 4px;
+	} */
+
+	.chapter-markup::-webkit-scrollbar {
+		background-color: var(--second);
+		width: 8px;
+	}
+
+	.chapter-markup::-webkit-scrollbar-thumb {
+		background-color: rgba(255,255,255,0.7);
+		border-radius: 1em;
+		outline: 1px solid green;
+	}
+
+	.chapter-markup :global(p) > :global(code) {
+		color: white;
+		background: rgba(255,255,255,0.1);
+		padding: 0.2em 0.4em;
+		white-space: nowrap;
+	}
+
+	.chapter-markup :global(pre) :global(code) {
+		/* color: var(--text); */
 	}
 
 	.next {
@@ -106,7 +146,7 @@
 	</div>
 
 	<div class="tutorial-repl">
-		TODO add the REPL
+		<Repl {app}/>
 	</div>
 
 </div>

site/src/user.js

@@ -5,6 +5,7 @@ export const user = writable(null);
 if (process.browser) {
 	// TODO this is a workaround for the fact that there's currently
 	// no way to pass session data from server to client
+	// TODO there is now! replace this with the session mechanism
 	fetch('/auth/me.json', { credentials: 'include' })
 		.then(r => r.json())
 		.then(user.set);