Move SyllabusLink to learn content template where it belongs

Addresses a longstanding workaround where I was dropping in links between lessons in the svx files rather than at the [slug] level. This was due to a bug/feature (see here for context: sveltejs/kit#552) where the links were getting all messed up. By wrapping the component in a `#key` logic block, ensuring it's recreated any time the slug changes, they don't any more. Best practice? Who knows, but it seems to work

website/src/learn-content/connecting-letters.svx

@@ -10,7 +10,6 @@ order: 6
     import OutlineCardAnimated from '$lib/cards/OutlineCardAnimated.svelte'
     import WordDisemvoweler from '$lib/disemvoweler/WordDisemvoweler.svelte'
     import WordToOutline from '$lib/WordToOutline.svelte'
-    import SyllabusLink from '$lib/SyllabusLink.svelte'
 </script> 
 
 The full process going on in the shorthand writer's brain is as follows:
@@ -37,5 +36,3 @@ Look at that. One motion of the pen. Eleven would be needed to write it out in l
 <WordDisemvoweler word="conference" />
 
 This is an extreme example given 'conference' has an extra succinct special outline, but it represents a key tenet of shorthand: **the fewer pen strokes the better**.
-
-<SyllabusLink sectionKey={slug} />

website/src/learn-content/disemvowelment.svx

@@ -8,7 +8,6 @@ order: 4
 <script>
     import PassageDisemvoweler from '$lib/disemvoweler/PassageDisemvoweler.svelte'
     import WordDisemvoweler from '$lib/disemvoweler/WordDisemvoweler.svelte'
-    import SyllabusLink from '$lib/SyllabusLink.svelte'
 </script>    
 
 One of the main ways Teeline saves time and space is by removing as many vowels as possible.
@@ -46,5 +45,3 @@ The sum total of this is saving a lot of time and space even before you get into
 <PassageDisemvoweler />
 
 When the time comes to read what you've written, a lot depends on context. Does ‘tb’ mean ‘tab’ or ‘tub’? Or tube?! In the context of the sentence the word is in the answers will usually be clear.
-
-<SyllabusLink sectionKey={slug} />

website/src/learn-content/introduction.svx

@@ -5,14 +5,8 @@ slug: introduction
 order: 1
 ---
 
-<script>
-    import SyllabusLink from '$lib/SyllabusLink.svelte'
-</script>
-
 Shorthand is a way of writing lots of words really quickly. Teeline is a type of shorthand and the recommended system of the [National Council for the Training of Journalists](https://www.nctj.com/). Trainees need to be able to transcribe at 60 words per minute (wpm) to get their NCTJ diploma, while 100 is needed to achieve the 'gold standard'. Some can write as fast as 120 wpm and beyond.
 
 Although audio recording technology makes shorthand less essential than it once was, it remains an important part of the journalist skillset. In a pinch it can be the difference between getting a killer quote and going home empty handed.
 
 The core principles of Teeline shorthand are pretty simple - remove as many letters as possible and write words using as few pen strokes as possible - but there are lots of tricks and techniques for cranking the speed up. With (a shitload of) practice you won't need to think, which is just as well given you won't have time to.
-
-<SyllabusLink sectionKey={slug} />

website/src/learn-content/letter-positioning-and-hierarchy.svx

@@ -8,7 +8,6 @@ order: 3
 <script>
     import OutlineCardAnimated from '$lib/cards/OutlineCardAnimated.svelte'
 	import OutlineCardGrid from '$lib/cards/OutlineCardGrid.svelte'
-	import SyllabusLink from '$lib/SyllabusLink.svelte'
 </script> 
 
 Unlike longhand, in which all letters are sat on the same line and go left to right, in Teeline shorthand thought must be given to how high or low letters are.
@@ -42,5 +41,3 @@ If you have a 't' next to a 'd', put the 'd' just below. If the situation is rev
 <OutlineCardGrid wordsAndPhrases={["toad", "different"]} />
 
 We'll get into this in more depth in the ['Connecting letters'](/learn/connecting-letters) section. For now it is enough to know that the vertical position of certain letters is essential to what they mean, and this makes those letters more dominant than their kin.
-
-<SyllabusLink sectionKey={slug} />

website/src/learn-content/silent-and-double-letters.svx

@@ -7,7 +7,6 @@ order: 5
 
 <script>
     import WordDisemvoweler from '$lib/disemvoweler/WordDisemvoweler.svelte'
-    import SyllabusLink from '$lib/SyllabusLink.svelte'
 </script>
 
 Another way to cut down on letters is to remove silent and double letters. Although Teeline is spelling based there's seldom use in writing letters that can't be heard. There are two main ways that this happens.
@@ -27,5 +26,3 @@ In a similar vein, silent letters should also be cut.
 <WordDisemvoweler word="bone" />
 
 The same applies to groupings of silent letters. For example, the word 'right' can afford to lose the 'g' and the 'h' and be just as understandable. Put all these little savings together and they can really add up: **'Th dbl dcr bs trnd rt at th trfc lts'**.
-
-<SyllabusLink sectionKey={slug} />

website/src/learn-content/special-outlines.svx

@@ -7,7 +7,6 @@ order: 7
 
 <script>
     import OutlineCardGrid from '$lib/cards/OutlineCardGrid.svelte'
-    import SyllabusLink from '$lib/SyllabusLink.svelte'
 </script> 
 
 There are words and turns of phrases so common that it makes sense to have succinct versions of them, even by the standards of Teeline. These abbreviated - or sometimes straight up symbolic - words are called **special outlines**.
@@ -19,5 +18,3 @@ Here are a few examples:
 Imagine how much longer it would take to write those out fully, even in Teeline. When you're desperately scrawling down a statement those fractions of a second will be invaluable.
 
 There is no real trick to special outlines. Of course it doesn't hurt to understand _why_ it represents what it represents, but the main thing is that they are remembered. It's with special outlines that it's especially important to [revise](/revise). When you hear 'ladies and gentlemen' the special outline should come instinctively.
-
-<SyllabusLink sectionKey={slug} />

website/src/learn-content/the-alphabet.svx

@@ -6,7 +6,6 @@ order: 2
 ---
 
 <script>
-    import SyllabusLink from '$lib/SyllabusLink.svelte'
     import OutlineCardGrid from '$lib/cards/OutlineCardGrid.svelte'
 </script>
 
@@ -17,5 +16,3 @@ Teeline is spelling-based rather than phonetic and as such has a typical A-to-Z
 You'll notice most letters have [special meanings](/learn/special-outlines) in addition to the letter itself. You'll know which is which translating your notes. Reading Teeline is often heavily reliant on context. If you see an 'f' on its own it's unlikely that you've transcribed someone saying the letter 'f'. Odds are you've taken advantage of a nice quick way of writing 'from'. 
 
 You don't _always_ write words as they are spelt - sometimes it's faster to opt for a phonetic approach - but more often than not in Teeline that will be your starting point. The words still need to be [disemvoweled](/learn/disemvowelment) and [have their silent and double letters done away with](/learn/silent-and-double-letters), but we'll get to that.
-
-<SyllabusLink sectionKey={slug} />

website/src/routes/learn/[slug]/+page.js

@@ -2,13 +2,15 @@ export async function load({ params }) {
 	const post = await import(`../../../learn-content/${params.slug}.svx`);
 	const title = post.metadata.title;
 	const description = post.metadata.description;
+	const slug = post.metadata.slug;
 	const order = post.metadata.order;
 	const content = post.default;
 
 	return {
 		title,
 		description,
 		order,
+		slug,
 		content
 	};
 }

website/src/routes/learn/[slug]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	export let data: { title: string; description: string; content: any };
+	import SyllabusLink from '$lib/SyllabusLink.svelte';
+	export let data: { title: string; description: string; slug: string; content: any };
 </script>
 
 <svelte:head>
@@ -10,6 +11,9 @@
 <div class="copy-container">
 	<h2>{data.title}</h2>
 	<svelte:component this={data.content} />
+	{#key data.slug}
+		<SyllabusLink sectionKey={data.slug} />
+	{/key}
 </div>
 
 <style>