chore: Try Section (#9059)

* Commit

* bump deps

* remove redundant @types

sites/svelte.dev/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.4.15",
-    "@supabase/supabase-js": "^2.26.0",
+    "@supabase/supabase-js": "^2.31.0",
     "@sveltejs/repl": "0.5.0",
     "cookie": "^0.5.0",
     "devalue": "^4.3.2",
@@ -28,35 +28,33 @@
   },
   "devDependencies": {
     "@resvg/resvg-js": "^2.4.1",
-    "@sveltejs/adapter-vercel": "^3.0.2",
+    "@sveltejs/adapter-vercel": "^3.0.3",
-    "@sveltejs/kit": "^1.22.2",
+    "@sveltejs/kit": "^1.22.4",
-    "@sveltejs/site-kit": "6.0.0-next.20",
+    "@sveltejs/site-kit": "6.0.0-next.24",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@types/cookie": "^0.5.1",
-    "@types/marked": "^5.0.0",
+    "@types/node": "^20.4.7",
-    "@types/node": "^20.3.3",
+    "browserslist": "^4.21.10",
-    "@types/prettier": "^2.7.3",
-    "browserslist": "^4.21.9",
     "degit": "^2.8.4",
     "dotenv": "^16.3.1",
-    "jimp": "^0.22.8",
+    "jimp": "^0.22.10",
     "lightningcss": "^1.21.5",
-    "magic-string": "^0.30.1",
+    "magic-string": "^0.30.2",
-    "marked": "^5.1.0",
+    "marked": "^6.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.1",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-svelte": "^3.0.3",
-    "sass": "^1.63.6",
+    "sass": "^1.64.2",
-    "satori": "^0.10.1",
+    "satori": "^0.10.2",
     "satori-html": "^0.3.2",
     "shelljs": "^0.8.5",
     "shiki": "^0.14.3",
     "shiki-twoslash": "^3.1.2",
     "svelte": "workspace:*",
-    "svelte-check": "^3.4.4",
+    "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",
     "tiny-glob": "^0.2.9",
     "typescript": "^5.1.6",
-    "vite": "^4.4.3",
+    "vite": "^4.4.8",
-    "vite-imagetools": "^5.0.5"
+    "vite-imagetools": "^5.0.7"
   }
 }

sites/svelte.dev/scripts/type-gen/index.js

@@ -1,7 +1,7 @@
 // @ts-check
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import prettier from 'prettier';
+import { format } from 'prettier';
 import ts from 'typescript';
 
 /** @typedef {{
@@ -20,7 +20,7 @@ const modules = [];
  * @param {string} code
  * @param {ts.NodeArray<ts.Statement>} statements
  */
-function get_types(code, statements) {
+async function get_types(code, statements) {
 	/** @type {Extracted[]} */
 	const exports = [];
 
@@ -106,14 +106,15 @@ function get_types(code, statements) {
 					}
 				}
 
-				const snippet = prettier
+				const snippet = (
-					.format(snippet_unformatted, {
+					await format(snippet_unformatted, {
 						parser: 'typescript',
 						printWidth: 60,
 						useTabs: true,
 						singleQuote: true,
 						trailingComma: 'none'
 					})
+				)
 					.replace(/\s*(\/\*…\*\/)\s*/g, '/*…*/')
 					.trim();
 
@@ -273,7 +274,7 @@ async function read_d_ts_file(file) {
 				name,
 				comment,
 				// @ts-ignore
-				...get_types(code, statement.body?.statements)
+				...(await get_types(code, statement.body?.statements))
 			});
 		}
 	}

sites/svelte.dev/src/routes/+page.svelte

@@ -1,9 +1,8 @@
 <script>
-	import { Blurb } from '@sveltejs/site-kit/components';
+	import { Blurb, 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';
-	import Try from './_components/Try.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
 </script>
 
@@ -45,7 +44,7 @@
 	</div>
 </Blurb>
 
-<Try />
+<TrySection />
 
 <Demo />
 

sites/svelte.dev/src/routes/_components/Try.svelte

@@ -1,92 +0,0 @@
-<script>
-	import { Section } from '@sveltejs/site-kit/components';
-	import { TryTerminal } from '@sveltejs/site-kit/components';
-</script>
-
-<div class="try-container">
-	<Section --background="var(--background-2)">
-		<div class="grid" style="--columns: 2">
-			<div class="copy">
-				<h2>see for yourself</h2>
-				<div>
-					Try it locally, <a target="_blank" rel="noreferrer" href="https://sveltekit.new"
-						>on StackBlitz</a
-					>, or with
-					<a target="_blank" href="https://learn.svelte.dev">the interactive tutorial</a>.
-				</div>
-			</div>
-
-			<div class="try">
-				<TryTerminal />
-			</div>
-		</div>
-	</Section>
-</div>
-
-<style>
-	.try-container {
-		--background-2: var(--sk-back-4);
-	}
-
-	:global(body.dark .try-container) {
-		--background-2: #444;
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.try-container {
-			--background-2: #444;
-		}
-
-		:global(body.light .try-container) {
-			--background-2: var(--sk-back-4) !important;
-		}
-	}
-
-	.grid {
-		display: grid;
-		gap: 2em;
-		margin: 0 0 4rem 0;
-	}
-
-	.grid:last-child {
-		margin-bottom: 0;
-	}
-
-	.try {
-		width: 100%;
-		margin: 0 auto;
-		font-size: var(--sk-text-m);
-		color: var(--sk-text-1);
-	}
-
-	.copy {
-		text-align: left;
-	}
-
-	h2 {
-		display: inline-block;
-		width: 25rem;
-		margin: 0 0 1rem;
-		font-size: var(--sk-text-xl);
-	}
-
-	@media (min-width: 900px) {
-		.grid {
-			grid-template-columns: repeat(var(--columns), 1fr);
-			gap: 7rem;
-		}
-
-		.copy {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			order: 2;
-		}
-
-		.copy div {
-			max-width: 15em;
-			text-align: center;
-		}
-	}
-</style>