From a474468e90214b36950685d61239215ed2e12fc9 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 26 Feb 2019 12:01:34 -0500
Subject: [PATCH] add styling/nested components

---
 .../01-introduction/04-styling/App.svelte     |  5 +++++
 .../01-introduction/04-styling/text.md        | 19 ++++++++++++++++
 .../tutorial/01-introduction/04-todo/text.md  |  9 --------
 .../05-nested-components/App.svelte           |  9 ++++++++
 .../05-nested-components/Nested.svelte        |  1 +
 .../05-nested-components/text.md              | 22 +++++++++++++++++++
 .../{04-todo => 99-todo}/App.svelte           |  0
 .../tutorial/01-introduction/99-todo/text.md  |  7 ++++++
 8 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 site/content/tutorial/01-introduction/04-styling/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/04-styling/text.md
 delete mode 100644 site/content/tutorial/01-introduction/04-todo/text.md
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/Nested.svelte
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/text.md
 rename site/content/tutorial/01-introduction/{04-todo => 99-todo}/App.svelte (100%)
 create mode 100644 site/content/tutorial/01-introduction/99-todo/text.md

diff --git a/site/content/tutorial/01-introduction/04-styling/App.svelte b/site/content/tutorial/01-introduction/04-styling/App.svelte
new file mode 100644
index 0000000000..c13ed6f072
--- /dev/null
+++ b/site/content/tutorial/01-introduction/04-styling/App.svelte
@@ -0,0 +1,5 @@
+<style>
+	/* styles goes here */
+</style>
+
+<p>This is a paragraph.</p>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/04-styling/text.md b/site/content/tutorial/01-introduction/04-styling/text.md
new file mode 100644
index 0000000000..9f285d2f51
--- /dev/null
+++ b/site/content/tutorial/01-introduction/04-styling/text.md
@@ -0,0 +1,19 @@
+---
+title: Styling
+---
+
+Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+
+```html
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>This is a paragraph.</p>
+```
+
+Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/04-todo/text.md b/site/content/tutorial/01-introduction/04-todo/text.md
deleted file mode 100644
index 1986341cb2..0000000000
--- a/site/content/tutorial/01-introduction/04-todo/text.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: TODO
----
-
-* write the rest of the tutorial
-* change the orientation of the REPL, so that it's editor on top, result on bottom
-* remove the props editor. it's superfluous in this context
-* add an 'open this in REPL' button that takes you to the full REPL
-* figure out wtf to do on mobile
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/05-nested-components/App.svelte b/site/content/tutorial/01-introduction/05-nested-components/App.svelte
new file mode 100644
index 0000000000..ab87af83d8
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/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>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/05-nested-components/Nested.svelte b/site/content/tutorial/01-introduction/05-nested-components/Nested.svelte
new file mode 100644
index 0000000000..5297ab1044
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/Nested.svelte
@@ -0,0 +1 @@
+<p>This is another paragraph.</p>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/05-nested-components/text.md b/site/content/tutorial/01-introduction/05-nested-components/text.md
new file mode 100644
index 0000000000..f1406f93db
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/text.md
@@ -0,0 +1,22 @@
+---
+title: Nested components
+---
+
+It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements.
+
+Add a `<script>` tag that imports `Nested.svelte`...
+
+```html
+<script>
+	import Nested from './Nested.svelte';
+</script>
+```
+
+...then add it to the markup:
+
+```html
+<p>This is a paragraph.</p>
+<Nested/>
+```
+
+Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/04-todo/App.svelte b/site/content/tutorial/01-introduction/99-todo/App.svelte
similarity index 100%
rename from site/content/tutorial/01-introduction/04-todo/App.svelte
rename to site/content/tutorial/01-introduction/99-todo/App.svelte
diff --git a/site/content/tutorial/01-introduction/99-todo/text.md b/site/content/tutorial/01-introduction/99-todo/text.md
new file mode 100644
index 0000000000..fcf5c49223
--- /dev/null
+++ b/site/content/tutorial/01-introduction/99-todo/text.md
@@ -0,0 +1,7 @@
+---
+title: TODO
+---
+
+* write the rest of the tutorial
+* add an 'open this in REPL' button that takes you to the full REPL
+* figure out wtf to do on mobile
\ No newline at end of file