feat: Bump site-kit to 5.0 (#9695)

* push

* Use tryTerminal

* Update site-kit, fix legacy issue

Author: PuruVJ

pnpm-lock.yaml

@@ -14,7 +14,7 @@
 		"@sveltejs/adapter-vercel": "workspace:^",
 		"@sveltejs/amp": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
-		"@sveltejs/site-kit": "4.1.1",
+		"@sveltejs/site-kit": "5.0.3",
 		"@types/d3-geo": "^3.0.2",
 		"@types/node": "^16.18.6",
 		"flexsearch": "^0.7.31",

sites/kit.svelte.dev/package.json

@@ -1,5 +1,5 @@
 <script>
-	import { Section } from '@sveltejs/site-kit/components';
+	import { Section, theme } from '@sveltejs/site-kit/components';
 	import html5 from './logos/html5.svg';
 	import node from './logos/node.svg';
 	import vercel from './logos/vercel.svg';
@@ -10,7 +10,6 @@
 	import lambda from './logos/lambda.svg';
 	import azure from './logos/azure.svg';
 	import plus from '$lib/icons/plus.svg';
-	import { theme } from '@sveltejs/site-kit/theme';
 </script>
 
 <Section --background="var(--background-1)">

sites/kit.svelte.dev/src/routes/home/Deployment.svelte

@@ -120,7 +120,7 @@
 			padding: calc(10rem + var(--sk-nav-height)) var(--sk-page-padding-side) 16rem;
 		}
 		.hero-contents {
-			max-width: calc(120rem - 2 * var(--side-nav));
+			max-width: calc(120rem - 2 * var(--sk-page-padding-side));
 			padding-bottom: 0rem;
 		}
 

sites/kit.svelte.dev/src/routes/home/Hero.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Section } from '@sveltejs/site-kit/components';
+	import { Section, TryTerminal } from '@sveltejs/site-kit/components';
 </script>
 
 <Section --background="var(--background-2)">
@@ -27,22 +27,7 @@
 			see for yourself
 		</h2>
 		<div class="try">
-			<div class="terminal">
-				<div class="chrome">
-					<span class="red dot" />
-					<span class="yellow dot" />
-					<span class="green dot" />
-					<span class="title">terminal</span>
-				</div>
-				<pre><code
-						><span class="line"
-							>npm create <span class="orange-highlight">svelte</span>@latest my-app</span
-						>
-<span class="line">cd my-app</span>
-<span class="line">npm install</span>
-<span class="line">npm run dev -- --open</span></code
-					></pre>
-			</div>
+			<TryTerminal />
 		</div>
 	</div>
 	<p class="create-an-app">
@@ -65,63 +50,6 @@
 		color: white;
 	}
 
-	.terminal {
-		background: rgba(0, 0, 0, 0.7);
-		margin: 0;
-		border-radius: var(--sk-border-radius);
-		overflow: hidden;
-	}
-
-	.terminal .chrome {
-		position: relative;
-		background: var(--sk-back-3);
-		color: var(--sk-text-3);
-		display: flex;
-		align-items: center;
-		font-size: var(--sk-text-s);
-		padding: 1rem;
-		gap: 1rem;
-	}
-
-	.terminal .dot {
-		width: 1rem;
-		height: 1rem;
-		border-radius: 50%;
-	}
-
-	.red {
-		background-color: hsl(15, 100%, 65%);
-	}
-
-	.yellow {
-		background-color: hsl(48, 100%, 67%);
-	}
-
-	.green {
-		background-color: hsl(141, 53%, 53%);
-	}
-
-	.title {
-		position: absolute;
-		display: flex;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.terminal pre {
-		padding: 1em;
-		font-size: var(--sk-text-xs);
-	}
-
-	.line::before {
-		content: '$ ';
-		opacity: 0.3;
-	}
-
 	h2 {
 		color: white;
 		font-size: var(--sk-text-xl);
@@ -133,15 +61,6 @@
 		display: none;
 	}
 
-	pre code {
-		color: white;
-		font-size: 1em;
-	}
-
-	.orange-highlight {
-		color: hsl(15, 100%, 65%);
-	}
-
 	.create-an-app {
 		color: white;
 	}
@@ -151,18 +70,6 @@
 		text-decoration: underline;
 	}
 
-	@media (min-width: 440px) {
-		.terminal pre {
-			font-size: var(--sk-text-s);
-		}
-	}
-
-	@media (min-width: 1080px) {
-		.terminal pre {
-			font-size: var(--sk-text-m);
-		}
-	}
-
 	@media (min-width: 900px) {
 		svg {
 			display: initial;

sites/kit.svelte.dev/src/routes/home/Try.svelte

@@ -2,7 +2,8 @@
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
-		"allowSyntheticDefaultImports": true
+		"allowSyntheticDefaultImports": true,
+		"moduleResolution": "bundler"
 	},
 	"extends": "./.svelte-kit/tsconfig.json"
 }