spruce up slot examples

site/content/tutorial/14-composition/01-slots/app-a/Box.svelte

@@ -1,7 +1,11 @@
 <style>
 	.box {
-		border: 2px solid black;
+		width: 300px;
-		padding: 0.5em;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
 	}
 </style>
 

site/content/tutorial/14-composition/01-slots/app-b/Box.svelte

@@ -1,7 +1,11 @@
 <style>
 	.box {
-		border: 2px solid black;
+		width: 300px;
-		padding: 0.5em;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
 	}
 </style>
 

site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>

site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte

@@ -0,0 +1,14 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
+
+<div class="box">
+	<slot></slot>
+</div>

site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>

site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte

@@ -0,0 +1,16 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
+
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>

site/content/tutorial/14-composition/02-slot-fallbacks/text.md

@@ -0,0 +1,24 @@
+---
+title: Slot fallbacks
+---
+
+A component can specify *fallbacks* for any slots that are left empty, by putting content inside the `<slot>` element:
+
+```html
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+```
+
+We can now create instances of `<Box>` eithout any children:
+
+```html
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>
+```

site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte

@@ -0,0 +1,7 @@
+<script>
+	import ContactCard from './ContactCard.html';
+</script>
+
+<ContactCard>
+	<!-- contact details go here -->
+</ContactCard>

site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte

@@ -0,0 +1,47 @@
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 50% no-repeat;
+		background-size: 1em 1em;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address { background-image: url(tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(tutorial/icons/email.svg) }
+	.missing { color: #999 }
+</style>
+
+<article class="contact-card">
+	<h2>
+		<slot>
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot>
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot>
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>

site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte

@@ -0,0 +1,14 @@
+<script>
+	import ContactCard from './ContactCard.html';
+</script>
+
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>

site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte

@@ -0,0 +1,47 @@
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 0 no-repeat;
+		background-size: 20px 20px;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address { background-image: url(tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(tutorial/icons/email.svg) }
+	.missing { color: #999 }
+</style>
+
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>

site/content/tutorial/14-composition/03-named-slots/text.md

@@ -0,0 +1,44 @@
+---
+title: Named slots
+---
+
+The previous example contained a *default slot*, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this `<ContactCard>`. In those cases, we can use *named slots*.
+
+In `ContactCard.svelte`, add a `name` attribute to each slot:
+
+```html
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+```
+
+Then, add elements with corresponding `slot="..."` attributes inside the `<ContactCard>` component:
+
+```html
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>
+```

site/static/tutorial/icons/email.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
+</svg>

site/static/tutorial/icons/map-marker.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
+</svg>