Merge branch 'sites' into feat/ts-in-docs

sites/svelte.dev/package.json

@@ -29,30 +29,29 @@
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^2.4.3",
-		"@sveltejs/kit": "^1.15.9",
+		"@sveltejs/kit": "^1.16.3",
 		"@sveltejs/site-kit": "^5.0.4",
-		"@types/marked": "^4.0.8",
-		"@types/node": "^18.16.3",
+		"@types/marked": "^4.3.0",
 		"degit": "^2.8.4",
 		"dotenv": "^16.0.3",
 		"jimp": "^0.22.7",
-		"marked": "^4.3.0",
+		"marked": "^5.0.1",
 		"node-fetch": "^3.3.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.0",
-		"rollup": "^3.21.2",
+		"rollup": "^3.21.5",
 		"rollup-plugin-dts": "^5.3.0",
 		"sass": "^1.62.1",
-		"satori": "^0.7.3",
+		"satori": "^0.7.4",
 		"satori-html": "^0.3.2",
 		"shelljs": "^0.8.5",
 		"shiki": "^0.14.2",
 		"shiki-twoslash": "^3.1.2",
-		"svelte": "^3.58.0",
-		"svelte-check": "^3.2.0",
+		"svelte": "^3.59.1",
+		"svelte-check": "^3.3.2",
 		"ts-morph": "^18.0.0",
 		"typescript": "^5.0.4",
-		"vite": "^4.3.3",
-		"vite-imagetools": "^4.0.19"
+		"vite": "^4.3.5",
+		"vite-imagetools": "^5.0.3"
 	}
 }

sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js

@@ -1,10 +1,10 @@
 import { dev } from '$app/environment';
 import { client } from '$lib/db/client';
 import * as gist from '$lib/db/gist';
+import examples_data from '$lib/generated/examples-data.js';
 import { get_example } from '$lib/server/examples';
-import { get_examples_list } from '$lib/server/examples/get-examples';
+import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples';
 import { error, json } from '@sveltejs/kit';
-import examples_data from '$lib/generated/examples-data.js';
 
 export const prerender = 'auto';
 
@@ -87,9 +87,17 @@ export async function GET({ params }) {
 	return json({
 		id: params.id,
 		name: app.name,
+		// @ts-ignore
 		owner: app.userid,
 		relaxed: false,
 		// @ts-expect-error app.files has a `source` property
 		components: munge(app.files)
 	});
 }
+
+/** @type {import('./$types.js').EntryGenerator}  */
+export async function entries() {
+	return get_examples_list(get_examples_data())
+		.map(({ examples }) => examples)
+		.flatMap((val) => val.map(({ slug }) => ({ id: slug })));
+}

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

@@ -1,6 +1,6 @@
 <script>
 	import { Blurb } from '@sveltejs/site-kit/components';
-	import Balls from './svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
+	import Balls from './svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&as=picture';
 	import Demo from './_components/Demo.svelte';
 	import Hero from './_components/Hero.svelte';
 	import Image from './_components/Image.svelte';

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

@@ -1,16 +1,18 @@
 <script>
 	import Image from './Image.svelte';
-	import Machine from './svelte-machine.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
+	import Machine from './svelte-machine.png?w=640;1280;2560;3840&q=95;format=avif;webp;png&as=picture';
 	import SvelteLogotype from './svelte-logotype.svg';
 </script>
 
 <div class="hero">
 	<strong>Cybernetically enhanced web apps</strong>
+
 	<Image
 		src={Machine}
 		alt="The Svelte compiler packaging up your component code"
 		--max-height="65vh"
 	/>
+
 	<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} />
 </div>
 

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

@@ -7,10 +7,10 @@
 </script>
 
 <picture>
-	{#each Object.entries(src.sources) as [format, images]}
-		<source srcset={images.map((i) => `${i.src} ${i.w}w`).join(', ')} type={'image/' + format} />
+	{#each Object.entries(src?.sources ?? {}) as [format, images]}
+		<source srcset={images?.map((i) => `${i?.src} ${i?.w}w`).join(', ')} type="image/{format}" />
 	{/each}
-	<img src={src.fallback.src} {alt} />
+	<img src={src?.img?.src} {alt} />
 </picture>
 
 <style>

sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js

@@ -1,6 +1,6 @@
 import examples_data from '$lib/generated/examples-data.js';
 import { get_example } from '$lib/server/examples';
-import { get_examples_list } from '$lib/server/examples/get-examples';
+import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples';
 import { error, json } from '@sveltejs/kit';
 
 export const prerender = true;
@@ -17,3 +17,10 @@ export const GET = ({ params }) => {
 
 	return json(get_example(examples_data, params.slug));
 };
+
+export async function entries() {
+	const examples_list = get_examples_list(get_examples_data());
+	return examples_list
+		.map(({ examples }) => examples)
+		.flatMap((val) => val.map(({ slug }) => ({ slug })));
+}

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

@@ -18,3 +18,10 @@ export async function load({ params }) {
 		slug: params.slug
 	};
 }
+
+export async function entries() {
+	const tutorials_list = get_tutorial_list(get_tutorial_data());
+	return tutorials_list
+		.map(({ tutorials }) => tutorials)
+		.flatMap((val) => val.map(({ slug }) => ({ slug })));
+}

sites/svelte.dev/svelte.config.js

@@ -1,39 +1,9 @@
 // @ts-check
 import adapter from '@sveltejs/adapter-vercel';
-import { get_examples_data, get_examples_list } from './src/lib/server/examples/get-examples.js';
-import { get_tutorial_data, get_tutorial_list } from './src/lib/server/tutorial/get-tutorial.js';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
-		adapter: adapter(),
-		prerender: {
-			// TODO use route entries instead, once https://github.com/sveltejs/kit/pull/9571 is merged
-			entries: ['*', ...repl_json_entries(), ...tutorial_entries(), ...examples_json_entries()]
-		}
+		adapter: adapter()
 	}
 };
-
-function repl_json_entries() {
-	return get_examples_list(
-		get_examples_data(new URL('../../site/content/examples', import.meta.url).pathname)
-	).flatMap(({ examples }) =>
-		examples.map(({ slug }) => /** @type {(`/${string}`)} */ (`/repl/${slug}.json`))
-	);
-}
-
-function tutorial_entries() {
-	return get_tutorial_list(
-		get_tutorial_data(new URL('../../site/content/tutorial', import.meta.url).pathname)
-	).flatMap(({ tutorials }) =>
-		tutorials.map(({ slug }) => /** @type {(`/${string}`)} */ (`/tutorial/${slug}`))
-	);
-}
-
-function examples_json_entries() {
-	return get_examples_list(
-		get_examples_data(new URL('../../site/content/examples', import.meta.url).pathname)
-	).flatMap(({ examples }) =>
-		examples.map(({ slug }) => /** @type {(`/${string}`)} */ (`/examples/api/${slug}.json`))
-	);
-}