fix(site-2): styles (#8288)

sites/svelte.dev/package.json

@@ -16,8 +16,8 @@
     "test": "uvu -r ts-node/register src/lib/server/markdown"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.7.1",
-    "@sveltejs/repl": "^0.1.2",
+    "@supabase/supabase-js": "^2.11.0",
+    "@sveltejs/repl": "^0.2.0",
     "cookie": "^0.5.0",
     "devalue": "^4.3.0",
     "do-not-zip": "^1.0.0",
@@ -27,31 +27,31 @@
     "svelte-local-storage-store": "^0.4.0"
   },
   "devDependencies": {
-    "@resvg/resvg-js": "^2.4.0",
+    "@resvg/resvg-js": "^2.4.1",
     "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.5.6",
+    "@sveltejs/kit": "^1.12.0",
     "@sveltejs/site-kit": "^3.2.2",
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.0.3",
     "@types/marked": "^4.0.8",
     "@types/prismjs": "^1.26.0",
     "degit": "^2.8.4",
     "dotenv": "^16.0.3",
-    "jimp": "^0.22.4",
+    "jimp": "^0.22.7",
     "marked": "^4.2.12",
-    "node-fetch": "^3.3.0",
+    "node-fetch": "^3.3.1",
     "prettier": "^2.8.4",
     "prettier-plugin-svelte": "^2.9.0",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
-    "satori": "^0.3.1",
+    "satori": "^0.4.3",
     "satori-html": "^0.3.2",
     "shelljs": "^0.8.5",
     "shiki": "^0.14.1",
-    "shiki-twoslash": "^3.1.0",
-    "svelte": "^3.55.1",
-    "svelte-check": "^3.0.3",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
+    "shiki-twoslash": "^3.1.1",
+    "svelte": "^3.57.0",
+    "svelte-check": "^3.1.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.0",
     "vite-imagetools": "^4.0.18"
   }
 }

sites/svelte.dev/src/routes/auth/callback/+server.js

@@ -12,7 +12,7 @@ export async function GET({ url }) {
 				stringify({
 					code: url.searchParams.get('code'),
 					client_id,
-					client_secret
+					client_secret,
 				})
 		);
 		const access_token = new URLSearchParams(await r1.text()).get('access_token');
@@ -21,8 +21,8 @@ export async function GET({ url }) {
 		const r2 = await fetch('https://api.github.com/user', {
 			headers: {
 				'User-Agent': 'svelte.dev',
-				Authorization: `token ${access_token}`
-			}
+				Authorization: `token ${access_token}`,
+			},
 		});
 
 		const profile = await r2.json();
@@ -33,7 +33,7 @@ export async function GET({ url }) {
 			github_id: profile.id,
 			github_name: profile.name,
 			github_login: profile.login,
-			github_avatar_url: profile.avatar_url
+			github_avatar_url: profile.avatar_url,
 		};
 
 		const { sessionid, expires } = await session.create(user, access_token);
@@ -52,10 +52,10 @@ export async function GET({ url }) {
 						expires: new Date(expires),
 						path: '/',
 						httpOnly: true,
-						secure: url.protocol === 'https'
+						secure: url.protocol === 'https',
 					}),
-					'Content-Type': 'text/html; charset=utf-8'
-				}
+					'Content-Type': 'text/html; charset=utf-8',
+				},
 			}
 		);
 	} catch (err) {

sites/svelte.dev/src/routes/docs/+layout.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="container">
-	<div class="page content ">
+	<div class="page content">
 		{#if title}
 			<h1>{title}</h1>
 		{/if}
@@ -24,7 +24,7 @@
 
 <style>
 	.container {
-		--sidebar-menu-width: 20rem;
+		--sidebar-menu-width: 28rem;
 		--sidebar-width: var(--sidebar-menu-width);
 		--ts-toggle-height: 4.2rem;
 	}
@@ -38,13 +38,13 @@
 		display: none;
 	}
 
-	.content {
+	/* .content {
 		width: 100%;
 		margin: 0;
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
 		tab-size: 2;
 		-moz-tab-size: 2;
-	}
+	} */
 
 	@media (min-width: 832px) {
 		/* can't use vars in @media :( */
@@ -229,34 +229,6 @@
 		cursor: pointer;
 	}
 
-	.content :global(blockquote) {
-		color: var(--sk-text-1);
-		background-color: rgba(255, 62, 0, 0.1);
-		border-left: 4px solid var(--sk-theme-1-variant);
-		padding: 1rem;
-	}
-
-	.content :global(blockquote) :global(:first-child) {
-		margin-top: 0;
-	}
-
-	.content :global(blockquote) :global(:last-child) {
-		margin-bottom: 0;
-	}
-
-	.content :global(blockquote) :global(code) {
-		background: var(--sk-code-bg);
-	}
-
-	.content :global(section) :global(a):hover {
-		text-decoration: underline;
-	}
-
-	.content :global(section) :global(a) :global(code) {
-		color: inherit;
-		background: rgba(255, 62, 0, 0.1) !important;
-	}
-
 	/* this replaces the offset-anchor hack, which we should remove from this CSS
 	   once https://github.com/sveltejs/action-deploy-docs/issues/1 is closed */
 	.content :global(h2[id]),
@@ -289,7 +261,7 @@
 	@media (min-width: 832px) {
 		.toc-container {
 			width: var(--sidebar-width);
-			height: calc(100vh - var(--sk-nav-height) - var(--ts-toggle-height));
+			height: calc(100vh - var(--sk-nav-height));
 			position: fixed;
 			left: 0;
 			top: var(--sk-nav-height);
@@ -323,7 +295,7 @@
 
 	@media (min-width: 1200px) {
 		.container {
-			--sidebar-width: max(20rem, 18vw);
+			--sidebar-width: max(28rem, 23vw);
 		}
 
 		.page {

sites/svelte.dev/src/routes/docs/Contents.svelte

@@ -27,9 +27,6 @@
 		top: 0;
 		left: 0;
 		color: var(--sk-text-3);
-
-		display: grid;
-		justify-content: center;
 	}
 
 	.sidebar {
@@ -74,17 +71,21 @@
 		color: var(--sk-text-1);
 	}
 
+	ul ul li {
+		margin: 0;
+	}
+
 	@media (min-width: 600px) {
 		.sidebar {
 			columns: 2;
-			padding-left: var(--sk-page-padding-side);
+			/* padding-left: var(--sk-page-padding-side); */
 			padding-right: var(--sk-page-padding-side);
 		}
 	}
 
 	@media (min-width: 700px) {
 		.sidebar {
-			/* columns: 3; */
+			columns: 3;
 		}
 	}
 

sites/svelte.dev/src/routes/docs/[slug]/+page.svelte

@@ -9,7 +9,9 @@
 	<title>{data.page.title} - Svelte</title>
 </svelte:head>
 
-{@html data.page.content}
+<div class="text">
+	{@html data.page.content}
+</div>
 
 {#if data.page.sections.length !== 0}
 	<OnThisPage details={data.page} />

sites/svelte.dev/src/routes/docs/[slug]/OnThisPage.svelte

@@ -101,16 +101,14 @@
 		position: fixed;
 		padding: 0 var(--sk-page-padding-side) 0 0;
 		width: min(280px, calc(var(--sidebar-width) - var(--sk-page-padding-side)));
-		/* top: calc(var(--sk-page-padding-top) + var(--sk-nav-height)); */
 		top: var(--sk-nav-height);
 		left: calc(100vw - (var(--sidebar-width)));
 	}
 
 	h2 {
 		text-transform: uppercase;
-		font-size: 1.4rem;
+		font-size: 1.4rem !important;
 		font-weight: 400;
-		line-height: 0;
 		margin: 0 0 1rem 0 !important;
 		padding: 0 0 0 0.6rem;
 		color: var(--sk-text-3);
@@ -125,8 +123,6 @@
 		padding: 0.3rem 0.5rem;
 		color: var(--sk-text-3);
 		border-left: 2px solid transparent;
-
-		font-size: 1.3rem;
 	}
 
 	a:hover {

sites/svelte.dev/src/routes/tutorial/[slug]/+page.js

@@ -2,6 +2,7 @@ import { redirect } from '@sveltejs/kit';
 import { PUBLIC_API_BASE } from '$env/static/public';
 
 export async function load({ fetch, params, setHeaders }) {
+	// TODO: Use local data
 	const tutorial = await fetch(`${PUBLIC_API_BASE}/docs/svelte/tutorial/${params.slug}`);
 
 	if (!tutorial.ok) {
@@ -9,7 +10,7 @@ export async function load({ fetch, params, setHeaders }) {
 	}
 
 	setHeaders({
-		'cache-control': 'public, max-age=60'
+		'cache-control': 'public, max-age=60',
 	});
 
 	return { tutorial: await tutorial.json(), slug: params.slug };