add some sample tutorial data

site/content/tutorials/01-introduction/01-basics/App.svelte

@@ -0,0 +1 @@
+<h1>Hello world!</h1>

site/content/tutorials/01-introduction/01-basics/text.md

@@ -0,0 +1,30 @@
+---
+title: Basics
+---
+
+Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily.
+
+You can also consult the [API docs](docs) and the [examples](examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](blog/the-easiest-way-to-get-started).
+
+
+## What is Svelte?
+
+Svelte is a tool for building fast web applications.
+
+It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.
+
+But there's a crucial difference: Svelte converts your app into ideal JavaScript at *build time*, rather than interpreting your application code at *run time*. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.
+
+You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.
+
+
+## How to use this tutorial
+
+TKTK is this necessary?
+
+You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte. Later on we'll be using Node.js and the command line, but don't worry if that's new territory for you — you won't be thrown in at the deep end.
+
+
+## Understanding components
+
+In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The 'hello world' example on the right is a simple component.

site/content/tutorials/01-introduction/02-adding-data/App.svelte

@@ -0,0 +1 @@
+<h1>Hello world!</h1>

site/content/tutorials/01-introduction/02-adding-data/text.md

@@ -0,0 +1,23 @@
+---
+title: Adding data
+---
+
+A component that just renders some static markup isn't very interesting. Let's add some data.
+
+First, add a script tag to your component and declare a `name` variable:
+
+```html
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello world!</h1>
+```
+
+Then, we can refer to `name` in the markup:
+
+```html
+<h1>Hello {name}!</h1>
+```
+
+Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.

site/content/tutorials/01-introduction/03-dynamic-attributes/App.svelte

@@ -0,0 +1,5 @@
+<script>
+	let src = 'tutorial/image.gif';
+</script>
+
+<img>

site/content/tutorials/01-introduction/03-dynamic-attributes/text.md

@@ -0,0 +1,35 @@
+---
+title: Dynamic attributes
+---
+
+Just like you can use curly braces to control text, you can use them to control element attributes.
+
+Our image is missing a `src` — let's add one:
+
+```html
+<img src={src}>
+```
+
+That's better. But Svelte is giving us a warning:
+
+> A11y: &lt;img&gt; element should have an alt attribute
+
+When building web apps, it's important to make sure that they're *accessible* to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
+
+In this case, we're missing the `alt` tag that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
+
+```html
+<img src={src} alt="A man dancing">
+```
+
+We can use curly braces *inside* attributes. Try changing it to `"{name} dancing"` — remember to declare a `name` variable in the `<script>` block.
+
+
+## Shorthand attributes
+
+It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
+
+```html
+<img {src} alt="...">
+```
+

site/src/routes/tutorial/data/_tutorials.js

@@ -0,0 +1,4 @@
+export function get_tutorials() {
+	// TODO
+	return [];
+}

site/src/routes/tutorial/data/sections.json.js

@@ -0,0 +1,15 @@
+import get_tutorials from './_tutorials.js';
+
+let json;
+
+export function get(req, res) {
+	if (!json || process.env.NODE_ENV !== 'production') {
+		json = JSON.stringify(get_tutorials());
+	}
+
+	res.set({
+		'Content-Type': 'application/json'
+	});
+
+	res.end(json);
+}

site/src/routes/tutorial/index.svelte

@@ -1 +1,26 @@
+<script context="module">
+	export function preload() {
+		return {};
+	}
+</script>
+
+<script>
+	export let sections;
+</script>
+
+<style>
+	.tutorial-outer {
+		position: relative;
+		height: calc(100vh - var(--nav-h));
+		overflow: hidden;
+		background-color: var(--back);
+		padding: 0;
+		margin: 0 calc(var(--side-nav) * -1);
+		box-sizing: border-box;
+	}
+</style>
+
+<div class="tutorial-outer">
 	<h1>Tutorial</h1>
+</div>
+