add some logic chapters

site/content/tutorial/03-logic/01-if-blocks/app-a/App.svelte

@@ -0,0 +1,15 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+<button on:click={toggle}>
+	Log out
+</button>
+
+<button on:click={toggle}>
+	Log in
+</button>

site/content/tutorial/03-logic/01-if-blocks/app-b/App.svelte

@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}

site/content/tutorial/03-logic/01-if-blocks/text.md

@@ -0,0 +1,23 @@
+---
+title: If blocks
+---
+
+HTML doesn't have a way of expressing *logic*, like conditionals and loops. Svelte does.
+
+To conditionally render some markup, we wrap it in an `if` block:
+
+```html
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
+```
+
+Try it — update the component, and click on the buttons.

site/content/tutorial/03-logic/02-else-blocks/app-a/App.svelte

@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}

site/content/tutorial/03-logic/02-else-blocks/app-b/App.svelte

@@ -0,0 +1,17 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}

site/content/tutorial/03-logic/02-else-blocks/text.md

@@ -0,0 +1,19 @@
+---
+title: Else blocks
+---
+
+Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
+
+```html
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
+```
+
+> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.

site/content/tutorial/03-logic/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Logic"
+}

site/content/tutorial/99-todo/99-todo/text.md

@@ -37,7 +37,7 @@ Side-quest: create a 'Svelte for new developers' blog post that assumes no knowl
 
 ## Logic
 
-* [ ] If blocks
+* [x] If blocks
 * [ ] Else/elseif blocks
 * [ ] Each blocks
 * [ ] Keyed each blocks (maybe? kind of need to cover transitions before we can make this obvious)