From 46c3f71404675b029552dde6b0012e9899b7107d Mon Sep 17 00:00:00 2001
From: Justin Edmund <383021+jedmund@users.noreply.github.com>
Date: Fri, 12 Jul 2024 16:56:08 -0400
Subject: [PATCH] Extract content into Page component

---
 src/lib/components/Page.svelte | 41 +++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte      | 42 +---------------------------------
 src/routes/+page.svelte        | 14 +++++++++++-
 3 files changed, 55 insertions(+), 42 deletions(-)
 create mode 100644 src/lib/components/Page.svelte

diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
new file mode 100644
index 0000000..e90a734
--- /dev/null
+++ b/src/lib/components/Page.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+</script>
+
+<section class="page">
+	<header>
+		<slot name="header" />
+	</header>
+
+	<slot />
+</section>
+
+<style lang="scss">
+	.page {
+		background: var(--page-color);
+		border-radius: 16px;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+		margin: $unit-6x auto $unit-6x;
+		padding: $unit-5x;
+		width: 100%;
+		max-width: 784px;
+
+		@include breakpoint('phone') {
+			margin-top: $unit-2x;
+			margin-bottom: $unit-3x;
+			padding: $unit-3x;
+		}
+
+		@include breakpoint('small-phone') {
+			padding: $unit-2x;
+		}
+
+		header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e4bd11..5f8d920 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import Avatar from '$components/Avatar.svelte'
-	import Squiggly from '$components/Squiggly.svelte'
 </script>
 
 <svelte:head>
@@ -13,16 +11,7 @@
 </svelte:head>
 
 <main>
-	<section class="page">
-		<header>
-			<h1 aria-label="@jedmund">
-				<Avatar />
-			</h1>
-			<Squiggly text="@jedmund is a software designer" />
-		</header>
-
-		<slot />
-	</section>
+	<slot />
 </main>
 
 <style lang="scss">
@@ -31,33 +20,4 @@
 		color: var(--text-color);
 		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	}
-
-	.page {
-		background: var(--page-color);
-		border-radius: 16px;
-		box-sizing: border-box;
-		display: flex;
-		flex-direction: column;
-		gap: $unit-4x;
-		margin: $unit-6x auto $unit-6x;
-		padding: $unit-5x;
-		width: 100%;
-		max-width: 784px;
-
-		@include breakpoint('phone') {
-			margin-top: $unit-2x;
-			margin-bottom: $unit-3x;
-			padding: $unit-3x;
-		}
-
-		@include breakpoint('small-phone') {
-			padding: $unit-2x;
-		}
-
-		header {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-		}
-	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e8b87b2..99abb3f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,17 @@
 <script lang="ts">
+	import Avatar from '$components/Avatar.svelte'
+	import Page from '$components/Page.svelte'
 	import ProjectList from '$components/ProjectList.svelte'
+	import Squiggly from '$components/Squiggly.svelte'
 </script>
 
-<ProjectList />
+<Page>
+	<svelte:fragment slot="header">
+		<h1 aria-label="@jedmund">
+			<Avatar />
+		</h1>
+		<Squiggly text="@jedmund is a software designer" />
+	</svelte:fragment>
+
+	<ProjectList />
+</Page>