From 3173fdde8961ba79e238b9de98799064ff88117f Mon Sep 17 00:00:00 2001
From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com>
Date: Fri, 4 Aug 2023 19:12:17 +0530
Subject: [PATCH] chore: Sitekit footer (#9072)

* Push

* Bump site-kit
---
 pnpm-lock.yaml                           |   8 +-
 sites/svelte.dev/package.json            |   2 +-
 sites/svelte.dev/src/routes/+page.svelte | 136 ++++++++---------------
 3 files changed, 51 insertions(+), 95 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31f1fe9e22..a63b35d859 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -185,8 +185,8 @@ importers:
         specifier: ^1.22.4
         version: 1.22.4(svelte@packages+svelte)(vite@4.4.8)
       '@sveltejs/site-kit':
-        specifier: 6.0.0-next.24
-        version: 6.0.0-next.24(@sveltejs/kit@1.22.4)(svelte@packages+svelte)
+        specifier: 6.0.0-next.25
+        version: 6.0.0-next.25(@sveltejs/kit@1.22.4)(svelte@packages+svelte)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^2.4.3
         version: 2.4.3(svelte@packages+svelte)(vite@4.4.8)
@@ -2057,8 +2057,8 @@ packages:
       svelte-local-storage-store: 0.4.0(svelte@packages+svelte)
     dev: false
 
-  /@sveltejs/site-kit@6.0.0-next.24(@sveltejs/kit@1.22.4)(svelte@packages+svelte):
-    resolution: {integrity: sha512-cyibvq5dmqWD9qzR4dIj66h+wzXG1Awfx//zpwkD9R3kPUhejxYFzdlPkuMBH8NXDydB8YXXCW/1T83Mw5J4Hg==}
+  /@sveltejs/site-kit@6.0.0-next.25(@sveltejs/kit@1.22.4)(svelte@packages+svelte):
+    resolution: {integrity: sha512-MZen4ZdjHoWVHn5DQdYBYprryhsyTHVT3XxW/hUp8K6dgFBXK5Cg/foHcxwzkepP6Gmabgi9eHC8e3PPGNKaAA==}
     peerDependencies:
       '@sveltejs/kit': ^1.20.0
       svelte: ^4.0.0
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index 563ac4b644..b74cb730bb 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -30,7 +30,7 @@
     "@resvg/resvg-js": "^2.4.1",
     "@sveltejs/adapter-vercel": "^3.0.3",
     "@sveltejs/kit": "^1.22.4",
-    "@sveltejs/site-kit": "6.0.0-next.24",
+    "@sveltejs/site-kit": "6.0.0-next.25",
     "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@types/cookie": "^0.5.1",
     "@types/node": "^20.4.7",
diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index 4c8396f9fa..63d84ee6b8 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Blurb, TrySection } from '@sveltejs/site-kit/home';
+	import { Blurb, Footer, TrySection } from '@sveltejs/site-kit/home';
 	import Demo from './_components/Demo.svelte';
 	import Hero from './_components/Hero.svelte';
 	import Supporters from './_components/Supporters/index.svelte';
@@ -52,33 +52,51 @@
 
 <Supporters />
 
-<section>
-	<footer>
-		<div class="logo" />
-		<div class="links">
-			<h4>resources</h4>
-			<a href="/docs">documentation</a>
-			<a href="/tutorial">tutorial</a>
-			<a href="/examples">examples</a>
-			<a href="/blog">blog</a>
-		</div>
-		<div class="links">
-			<h4>connect</h4>
-			<a href="https://github.com/sveltejs/svelte">github</a>
-			<a href="https://opencollective.com/svelte">open collective</a>
-			<a href="/chat">discord</a>
-			<a href="https://twitter.com/sveltejs">twitter</a>
-		</div>
-		<div class="copyright">
-			© 2023 <a href="https://github.com/sveltejs/svelte/graphs/contributors">Svelte contributors</a
-			>
-		</div>
-		<div class="open-source">
-			Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
-			under the MIT license
-		</div>
-	</footer>
-</section>
+<Footer
+	links={{
+		resources: [
+			{
+				title: 'documentation',
+				href: '/docs'
+			},
+			{
+				title: 'tutorial',
+				href: '/tutorial'
+			},
+			{
+				title: 'examples',
+				href: '/examples'
+			},
+			{
+				title: 'blog',
+				href: '/blog'
+			}
+		],
+		connect: [
+			{
+				title: 'github',
+				href: 'https://github.com/sveltejs/svelte'
+			},
+			{
+				title: 'opencollective',
+				href: 'https://opencollective.com/svelte'
+			},
+			{
+				title: 'discord',
+				href: '/chat'
+			},
+			{
+				title: 'twitter',
+				href: 'https://twitter.com/sveltejs'
+			}
+		]
+	}}
+>
+	<span slot="copyright">
+		Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
+		under the MIT license
+	</span>
+</Footer>
 
 <style>
 	h2 {
@@ -88,66 +106,4 @@
 	p {
 		font-size: var(--sk-text-m);
 	}
-
-	section {
-		background: var(--sk-back-4);
-		padding: 10rem 0;
-	}
-
-	footer {
-		max-width: 120rem;
-		padding: 0 var(--sk-page-padding-side);
-		margin: 0 auto;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-template-rows: 1fr;
-		grid-row-gap: 6rem;
-	}
-
-	footer .logo {
-		display: none;
-		background: url('@sveltejs/site-kit/branding/svelte-logo.svg');
-		background-repeat: no-repeat;
-		background-size: 8rem;
-		filter: grayscale(100%) opacity(84%);
-	}
-
-	footer h4 {
-		font-size: var(--sk-text-m);
-		padding-bottom: 1rem;
-	}
-
-	.links a {
-		color: var(--sk-text-2);
-		font-size: var(--sk-text-s);
-		display: block;
-		line-height: 1.8;
-	}
-
-	.open-source {
-		display: none;
-		grid-column: span 2;
-	}
-
-	.copyright {
-		grid-column: span 2;
-	}
-
-	@media (min-width: 500px) {
-		footer {
-			grid-template-columns: repeat(3, 1fr);
-		}
-
-		footer .logo {
-			display: block;
-		}
-
-		.copyright {
-			grid-column: span 1;
-		}
-
-		.open-source {
-			display: block;
-		}
-	}
 </style>