add edit this page links - closes #21

Author: Rich-Harris

src/lib/server/content.js

@@ -106,6 +106,7 @@ export function get_section(slug) {
 					slug: section.slug,
 					prev: section.prev,
 					next: section.next,
+					dir: section.dir,
 					html: transform(section.markdown), // TODO syntax highlighting
 					a,
 					b

src/lib/types/index.d.ts

@@ -37,6 +37,7 @@ export interface Section {
 	prev: string | null;
 	next: string | null;
 	html: string;
+	dir: string;
 	a: Record<string, Stub>;
 	b: Record<string, Stub>;
 }

src/routes/tutorial/[slug]/index.svelte

@@ -19,6 +19,7 @@
 	import Editor from './_/Editor.svelte';
 	import Folder from './_/Folder.svelte';
 	import { monaco } from '$lib/client/monaco/monaco.js';
+	import { Icon } from '@sveltejs/site-kit';
 
 	/** @type {import('$lib/types').SectionIndex} */
 	export let index;
@@ -169,9 +170,11 @@
 
 			<div class="text">{@html section.html}</div>
 
-			{#if Object.keys(section.b).length > 0}
-				<div class="controls" />
-			{/if}
+			<footer>
+				<a class="edit" href="https://github.com/sveltejs/learn.svelte.dev/tree/main/{section.dir}">
+					<Icon size={16} name="edit" /> Edit this page
+				</a>
+			</footer>
 		</section>
 
 		<section slot="b">
@@ -337,13 +340,20 @@
 		list-style-position: inside;
 	}
 
-	.controls {
-		padding: 1rem 3rem;
+	.content footer {
+		padding: 1rem 4rem;
 		display: flex;
 		justify-content: space-between;
 		border-top: 1px solid rgba(255, 255, 255, 0.1);
 	}
 
+	.content footer a {
+		color: var(--sidebar-text);
+		font-size: 1.4rem;
+		display: flex;
+		gap: 0.5rem;
+	}
+
 	.navigator {
 		background: #f9f9f9;
 		display: flex;