From 9f3b48a7bbdeb295ef9b3fcdef764d7f6f9ffac5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 08:47:09 -0400
Subject: [PATCH 1/2] unify edit links and pagination

---
 .../src/lib/components/PageControls.svelte    | 98 +++++++++++++++++++
 .../src/routes/docs/[...path]/+layout.svelte  |  2 +-
 .../src/routes/docs/[...path]/+page.svelte    | 93 +++---------------
 .../routes/tutorial/[...slug]/+page.svelte    |  1 -
 .../routes/tutorial/[...slug]/Sidebar.svelte  | 44 +++------
 .../tutorial/[...slug]/content.server.ts      |  2 +-
 packages/site-kit/src/lib/styles/tokens.css   |  2 +-
 7 files changed, 128 insertions(+), 114 deletions(-)
 create mode 100644 apps/svelte.dev/src/lib/components/PageControls.svelte

diff --git a/apps/svelte.dev/src/lib/components/PageControls.svelte b/apps/svelte.dev/src/lib/components/PageControls.svelte
new file mode 100644
index 0000000000..66d35560c7
--- /dev/null
+++ b/apps/svelte.dev/src/lib/components/PageControls.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Icon } from '@sveltejs/site-kit/components';
+
+	interface Props {
+		repo: string;
+		path: string;
+		prev: null | {
+			path: string;
+			title: string;
+		};
+		next: null | {
+			path: string;
+			title: string;
+		};
+	}
+
+	let { repo, path, prev, next }: Props = $props();
+</script>
+
+<p class="edit">
+	<a href="{repo}/edit/main/{path}">
+		<Icon name="edit" /> Edit this page on GitHub
+	</a>
+</p>
+
+<div class="controls">
+	<div class="flex">
+		<span class:faded={!prev}>previous</span>
+		<span class="next" class:faded={!next}>next</span>
+	</div>
+
+	<div class="flex">
+		{#if prev}
+			<a href={prev.path}>{prev.title}</a>
+		{/if}
+
+		{#if next}
+			<a class="next" href={next.path}>{next.title}</a>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.edit {
+		position: relative;
+		margin: 6rem 0 2rem 0;
+		font: var(--sk-font-ui-small);
+
+		a {
+			text-decoration: none;
+		}
+
+		:global(svg) {
+			position: relative;
+			top: -0.1rem;
+			left: 0.3rem;
+			width: 1.4rem;
+			height: 1.4rem;
+			margin-right: 0.5rem;
+		}
+	}
+
+	.controls {
+		max-width: calc(var(--sk-page-content-width) + 1rem);
+		border-top: 1px solid var(--sk-back-4);
+		padding: 1rem 0 0 0;
+		margin: 1rem 0 0 0;
+		text-wrap: balance;
+
+		.flex {
+			display: flex;
+			justify-content: space-between;
+			gap: 2rem;
+
+			.next {
+				text-align: right;
+			}
+
+			.next:first-child {
+				flex: 1;
+			}
+		}
+
+		span {
+			font: var(--sk-font-ui-medium);
+			text-transform: uppercase;
+			color: var(--sk-text-3);
+
+			&.faded {
+				opacity: 0.4;
+			}
+		}
+
+		a {
+			font: var(--sk-font-body-small);
+		}
+	}
+</style>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index c90495b60e..d33977d047 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -24,7 +24,7 @@
 	}
 
 	.page {
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) var(--sk-page-padding-bottom);
 
 		min-width: 0 !important;
 	}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 0e1d44bc82..c8226cabbe 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { Icon, Text } from '@sveltejs/site-kit/components';
+	import { Text } from '@sveltejs/site-kit/components';
 	import { legacy_details } from '@sveltejs/site-kit/actions';
 	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
 	import OnThisPage from './OnThisPage.svelte';
 	import Breadcrumbs from './Breadcrumbs.svelte';
+	import PageControls from '$lib/components/PageControls.svelte';
 
 	let { data } = $props();
 
@@ -38,82 +39,16 @@
 		</Text>
 	</div>
 
-	<p class="edit">
-		<a
-			href="https://github.com/sveltejs/svelte.dev/edit/main/apps/svelte.dev/content/{data.document
-				.file}"
-		>
-			<Icon name="edit" /> Edit this page on GitHub
-		</a>
-	</p>
-</div>
-
-<div class="controls">
-	<div>
-		<span class:faded={!data.document.prev}>previous</span>
-
-		{#if data.document.prev}
-			<a href="/{data.document.prev.slug}">{data.document.prev.title}</a>
-		{/if}
-	</div>
-
-	<div>
-		<span class:faded={!data.document.next}>next</span>
-		{#if data.document.next}
-			<a href="/{data.document.next.slug}">{data.document.next.title}</a>
-		{/if}
-	</div>
+	<PageControls
+		repo="https://github.com/sveltejs/svelte.dev"
+		path="apps/svelte.dev/content/{data.document.file}"
+		prev={data.document.prev && {
+			title: data.document.prev.title,
+			path: `/${data.document.prev.slug}`
+		}}
+		next={data.document.next && {
+			title: data.document.next.title,
+			path: `/${data.document.next.slug}`
+		}}
+	/>
 </div>
-
-<style>
-	.edit {
-		position: relative;
-		margin: 6rem 0 2rem 0;
-		font: var(--sk-font-ui-small);
-
-		a {
-			text-decoration: none;
-		}
-
-		:global(svg) {
-			position: relative;
-			top: -0.1rem;
-			left: 0.3rem;
-			width: 1.4rem;
-			height: 1.4rem;
-			margin-right: 0.5rem;
-		}
-	}
-
-	.controls {
-		max-width: calc(var(--sk-page-content-width) + 1rem);
-		border-top: 1px solid var(--sk-back-4);
-		padding: 1rem 0 0 0;
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		margin: 1rem 0 0 0;
-	}
-
-	.controls > :first-child {
-		text-align: left;
-	}
-
-	.controls > :last-child {
-		text-align: right;
-	}
-
-	.controls span {
-		display: block;
-		font: var(--sk-font-ui-medium);
-		text-transform: uppercase;
-		color: var(--sk-text-3);
-	}
-
-	.controls a {
-		font: var(--sk-font-body-small);
-	}
-
-	.controls span.faded {
-		opacity: 0.4;
-	}
-</style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index bc9c5b5f5f..2a92105af2 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -1,7 +1,6 @@
 <script>
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
-	import { Icon } from '@sveltejs/site-kit/components';
 	import { reset } from './adapter.svelte';
 	import Editor from './Editor.svelte';
 	import ContextMenu from './filetree/ContextMenu.svelte';
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 4eaf488cb1..b5577d528b 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -2,6 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import { Text } from '@sveltejs/site-kit/components';
+	import PageControls from '$lib/components/PageControls.svelte';
 
 	/** @type {import('$lib/tutorial').Exercise} */
 	export let exercise;
@@ -62,21 +63,19 @@
 			</Text>
 		</div>
 
-		{#if exercise.next}
-			<p><a href="/tutorial/{exercise.next.slug}">Next: {exercise.next.title}</a></p>
-		{/if}
+		<PageControls
+			repo="https://github.com/sveltejs/svelte.dev"
+			path="apps/svelte.dev/content/{exercise.dir}"
+			prev={exercise.prev && {
+				title: exercise.prev.title,
+				path: `/tutorial/${exercise.prev.slug}`
+			}}
+			next={exercise.next && {
+				title: exercise.next.title,
+				path: `/tutorial/${exercise.next.slug}`
+			}}
+		/>
 	</div>
-
-	<footer>
-		<a
-			target="_blank"
-			rel="noreferrer"
-			class="edit"
-			href="https://github.com/sveltejs/svelte.dev/tree/main/apps/svelte.dev/content/{exercise.dir}"
-		>
-			Edit this page
-		</a>
-	</footer>
 </section>
 
 {#if show_modal}
@@ -178,23 +177,6 @@
 		}
 	}
 
-	footer {
-		padding: 1rem 2.9rem;
-		display: flex;
-		justify-content: space-between;
-		background: var(--sk-back-3);
-		border-top: 1px solid var(--sk-back-4);
-		border-right: 1px solid var(--sk-back-4);
-
-		.edit {
-			color: var(--sk-text-2);
-			font: var(--sk-font-ui-small);
-			padding: 0 0 0 1.4em;
-			background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
-			background-size: 1em 1em;
-		}
-	}
-
 	.modal-contents {
 		h2 {
 			font: var(--sk-font-ui-large);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts
index ac72b4cf43..9c434917bd 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts
@@ -149,7 +149,7 @@ export async function load_exercise(slug: string): Promise<Exercise> {
 		title: exercise.metadata.title,
 		path: (metadata.path as string) ?? '/',
 		slug: exercise.slug,
-		prev: prev && { slug: prev.slug },
+		prev,
 		next,
 		markdown: exercise.body,
 		html: (await render_content(exercise.file, exercise.body, { check: false })).replace(
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index fec5d38489..10707a6793 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -15,7 +15,7 @@
 	--sk-nav-height: 6rem;
 	--sk-secondary-nav-height: 5rem;
 	--sk-page-padding-top: 6rem;
-	--sk-page-padding-bottom: 6rem;
+	--sk-page-padding-bottom: 8rem;
 	--sk-page-padding-side: 1.6rem;
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;

From c15dbdb762e959440b8429dce96e0974b496d1de Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 08:50:34 -0400
Subject: [PATCH 2/2] fix

---
 apps/svelte.dev/src/lib/tutorial/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/lib/tutorial/index.d.ts b/apps/svelte.dev/src/lib/tutorial/index.d.ts
index deea27f393..20b8f8fde2 100644
--- a/apps/svelte.dev/src/lib/tutorial/index.d.ts
+++ b/apps/svelte.dev/src/lib/tutorial/index.d.ts
@@ -43,7 +43,7 @@ export interface Exercise {
 	/** the initial path to navigate to */
 	path: string;
 	slug: string;
-	prev: { slug: string } | null;
+	prev: { slug: string; title: string } | null;
 	next: { slug: string; title: string } | null;
 	markdown: string;
 	html: string;