From 8057a142c0f7b442aefac37c194871e83ba3a071 Mon Sep 17 00:00:00 2001
From: Simon <simon.holthausen@accso.de>
Date: Fri, 8 Apr 2022 15:30:46 +0200
Subject: [PATCH] add tutorial section

---
 .../03-svelte-element/app-a/App.svelte        | 18 +++++++++++++++
 .../03-svelte-element/app-b/App.svelte        | 12 ++++++++++
 .../03-svelte-element/text.md                 | 23 +++++++++++++++++++
 .../app-a/App.svelte                          |  0
 .../app-b/App.svelte                          |  0
 .../text.md                                   |  0
 .../app-a/App.svelte                          |  0
 .../app-b/App.svelte                          |  0
 .../text.md                                   |  0
 .../app-a/App.svelte                          |  0
 .../app-b/App.svelte                          |  0
 .../text.md                                   |  0
 .../app-a/App.svelte                          |  0
 .../app-b/App.svelte                          |  0
 .../text.md                                   |  0
 .../app-a/App.svelte                          |  0
 .../app-a/Todo.svelte                         |  0
 .../app-a/flash.js                            |  0
 .../app-b/App.svelte                          |  0
 .../app-b/Todo.svelte                         |  0
 .../app-b/flash.js                            |  0
 .../text.md                                   |  0
 .../app-a/App.svelte                          |  0
 .../app-a/Box.svelte                          |  0
 .../app-b/App.svelte                          |  0
 .../app-b/Box.svelte                          |  0
 .../text.md                                   |  0
 27 files changed, 53 insertions(+)
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-element/text.md
 rename site/content/tutorial/16-special-elements/{03-svelte-window => 04-svelte-window}/app-a/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{03-svelte-window => 04-svelte-window}/app-b/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{03-svelte-window => 04-svelte-window}/text.md (100%)
 rename site/content/tutorial/16-special-elements/{04-svelte-window-bindings => 05-svelte-window-bindings}/app-a/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{04-svelte-window-bindings => 05-svelte-window-bindings}/app-b/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{04-svelte-window-bindings => 05-svelte-window-bindings}/text.md (100%)
 rename site/content/tutorial/16-special-elements/{05-svelte-body => 06-svelte-body}/app-a/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{05-svelte-body => 06-svelte-body}/app-b/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{05-svelte-body => 06-svelte-body}/text.md (100%)
 rename site/content/tutorial/16-special-elements/{06-svelte-head => 07-svelte-head}/app-a/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{06-svelte-head => 07-svelte-head}/app-b/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{06-svelte-head => 07-svelte-head}/text.md (100%)
 rename site/content/tutorial/16-special-elements/{07-svelte-options => 08-svelte-options}/app-a/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{07-svelte-options => 08-svelte-options}/app-a/Todo.svelte (100%)
 rename site/content/tutorial/16-special-elements/{07-svelte-options => 08-svelte-options}/app-a/flash.js (100%)
 rename site/content/tutorial/16-special-elements/{07-svelte-options => 08-svelte-options}/app-b/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{07-svelte-options => 08-svelte-options}/app-b/Todo.svelte (100%)
 rename site/content/tutorial/16-special-elements/{07-svelte-options => 08-svelte-options}/app-b/flash.js (100%)
 rename site/content/tutorial/16-special-elements/{07-svelte-options => 08-svelte-options}/text.md (100%)
 rename site/content/tutorial/16-special-elements/{08-svelte-fragment => 09-svelte-fragment}/app-a/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{08-svelte-fragment => 09-svelte-fragment}/app-a/Box.svelte (100%)
 rename site/content/tutorial/16-special-elements/{08-svelte-fragment => 09-svelte-fragment}/app-b/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{08-svelte-fragment => 09-svelte-fragment}/app-b/Box.svelte (100%)
 rename site/content/tutorial/16-special-elements/{08-svelte-fragment => 09-svelte-fragment}/text.md (100%)

diff --git a/site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
new file mode 100644
index 0000000000..0718efd949
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}
diff --git a/site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
new file mode 100644
index 0000000000..068f7b3c4f
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
diff --git a/site/content/tutorial/16-special-elements/03-svelte-element/text.md b/site/content/tutorial/16-special-elements/03-svelte-element/text.md
new file mode 100644
index 0000000000..ace344db42
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-element/text.md
@@ -0,0 +1,23 @@
+---
+title: <svelte:element>
+---
+
+Sometimes we don't know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. Instead of a sequence of `if` blocks...
+
+```html
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}
+```
+
+...we can have a single dynamic component:
+
+```html
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
+```
+
+The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/text.md b/site/content/tutorial/16-special-elements/04-svelte-window/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/03-svelte-window/text.md
rename to site/content/tutorial/16-special-elements/04-svelte-window/text.md
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/text.md b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/04-svelte-window-bindings/text.md
rename to site/content/tutorial/16-special-elements/05-svelte-window-bindings/text.md
diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/text.md b/site/content/tutorial/16-special-elements/06-svelte-body/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/05-svelte-body/text.md
rename to site/content/tutorial/16-special-elements/06-svelte-body/text.md
diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/app-a/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/06-svelte-head/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/text.md b/site/content/tutorial/16-special-elements/07-svelte-head/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/06-svelte-head/text.md
rename to site/content/tutorial/16-special-elements/07-svelte-head/text.md
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
rename to site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js
rename to site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
rename to site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js
rename to site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/text.md b/site/content/tutorial/16-special-elements/08-svelte-options/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/07-svelte-options/text.md
rename to site/content/tutorial/16-special-elements/08-svelte-options/text.md
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
rename to site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/09-svelte-fragment/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
rename to site/content/tutorial/16-special-elements/09-svelte-fragment/text.md