merge sites

sites/svelte.dev/.env

@@ -13,7 +13,5 @@ GITHUB_CLIENT_SECRET=
 SUPABASE_URL=https://kpaaohfbmxvespqoqdzp.supabase.co
 SUPABASE_KEY=
 
-PUBLIC_API_BASE="https://api.svelte.dev"
-
 # client-side
 VITE_MAPBOX_ACCESS_TOKEN=

sites/svelte.dev/.gitignore

@@ -10,3 +10,4 @@
 /src/routes/_components/Supporters/donors.jpg
 /src/routes/_components/Supporters/donors.js
 .vercel
+examples-data.js

sites/svelte.dev/package.json

@@ -4,8 +4,8 @@
 	"description": "Docs and examples for Svelte",
 	"type": "module",
 	"scripts": {
-		"dev": "node scripts/update.js && vite dev",
+		"dev": "node scripts/generate_examples.js && node scripts/update.js && vite dev",
-		"build": "node scripts/update.js && vite build",
+		"build": "node scripts/generate_examples.js && node scripts/update.js && vite build",
 		"update": "node scripts/update.js --force=true",
 		"preview": "vite preview",
 		"start": "node build",
@@ -23,12 +23,11 @@
 		"do-not-zip": "^1.0.0",
 		"flexsearch": "^0.7.31",
 		"flru": "^1.0.2",
-		"sourcemap-codec": "^1.4.8",
+		"sourcemap-codec": "^1.4.8"
-		"svelte-local-storage-store": "^0.4.0"
 	},
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.4.1",
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-vercel": "^2.4.1",
 		"@sveltejs/kit": "^1.15.0",
 		"@sveltejs/site-kit": "^3.3.6",
 		"@sveltejs/vite-plugin-svelte": "^2.0.4",

sites/svelte.dev/scripts/generate_examples.js

@@ -0,0 +1,13 @@
+import { get_examples_data } from '../src/lib/server/examples/get-examples.js';
+import fs from 'node:fs';
+
+const examples_data = get_examples_data(
+	new URL('../../../site/content/examples', import.meta.url).pathname
+);
+
+fs.mkdirSync(new URL('../src/lib/generated/', import.meta.url), { recursive: true });
+
+fs.writeFileSync(
+	new URL('../src/lib/generated/examples-data.js', import.meta.url),
+	`export default ${JSON.stringify(examples_data)}`
+);

sites/svelte.dev/src/lib/components/ReplWidget.svelte

@@ -1,21 +1,21 @@
 <script>
-	import Repl from '@sveltejs/repl';
-	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { process_example } from '$lib/utils/examples';
-	import { PUBLIC_API_BASE } from '$env/static/public';
+	import Repl from '@sveltejs/repl';
+	import { onMount } from 'svelte';
 
 	export let version = '3';
 	export let gist = null;
 	export let example = null;
 	export let embedded = false;
 
+	/** @type {import('@sveltejs/repl').default} */
 	let repl;
 	let name = 'loading...';
 
 	let mounted = false;
 
-	function load(gist, example) {
+	async function load(gist, example) {
 		if (version !== 'local') {
 			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
@@ -58,17 +58,14 @@
 					repl.set({ components });
 				});
 		} else if (example) {
-			fetch(`${PUBLIC_API_BASE}/docs/svelte/examples/${example}`).then(async (response) => {
+			const components = process_example(
-				if (response.ok) {
+				(await fetch(`/examples/api/${example}.json`).then((r) => r.json())).files
-					const data = await response.json();
+			);
-					const components = process_example(data.files);
 
 			repl.set({
 				components,
 			});
 		}
-			});
-		}
 	}
 
 	onMount(() => {

sites/svelte.dev/src/lib/server/examples/get-examples.js

@@ -1,18 +1,15 @@
 // @ts-check
 import fs from 'node:fs';
 
-const base = '../../site/content/examples/';
+const BASE = '../../site/content/examples/';
 
 /**
  * @returns {import('./types').ExamplesData}
  */
-export function get_examples_data() {
+export function get_examples_data(base = BASE) {
 	const examples = [];
 
 	for (const subdir of fs.readdirSync(base)) {
-		// Exclude embeds
-		if (subdir.endsWith('99-embeds')) continue;
-
 		const section = {
 			title: '', // Initialise with empty
 			slug: subdir.split('-').slice(1).join('-'),
@@ -42,7 +39,7 @@ export function get_examples_data() {
 				.readdirSync(example_base_dir)
 				.filter((file) => !file.endsWith('meta.json'))) {
 				files.push({
-					filename: file,
+					name: file,
 					type: file.split('.').at(-1),
 					content: fs.readFileSync(`${example_base_dir}/${file}`, 'utf-8')
 				});

sites/svelte.dev/src/lib/server/examples/types.d.ts

@@ -6,8 +6,8 @@ export type ExamplesData = {
 		slug: string;
 		files: {
 			content: string;
-			type: 'svelte' | 'js';
+			type: string;
-			filename: string;
+			name: string;
 		}[];
 	}[];
 }[];

sites/svelte.dev/src/lib/server/faq/get-faq.js

@@ -0,0 +1,24 @@
+// @ts-check
+import fs from 'node:fs';
+import { extract_frontmatter } from '../markdown';
+
+const base = '../../site/content/faq';
+
+/**
+ * @returns {import('./types').FAQData}
+ */
+export function get_faq_data() {
+	const faqs = [];
+
+	for (const file of fs.readdirSync(base)) {
+		const { metadata, body } = extract_frontmatter(fs.readFileSync(`${base}/${file}`, 'utf-8'));
+
+		faqs.push({
+			title: metadata.question, // Initialise with empty
+			slug: file.split('-').slice(1).join('-').replace('.md', ''),
+			content: body,
+		});
+	}
+
+	return faqs;
+}

sites/svelte.dev/src/lib/server/faq/index.js

@@ -0,0 +1,87 @@
+// @ts-check
+import { createShikiHighlighter } from 'shiki-twoslash';
+import { transform } from '../markdown';
+
+const languages = {
+	bash: 'bash',
+	env: 'bash',
+	html: 'svelte',
+	svelte: 'svelte',
+	sv: 'svelte',
+	js: 'javascript',
+	css: 'css',
+	diff: 'diff',
+	ts: 'typescript',
+	'': '',
+};
+
+/**
+ * @param {import('./types').FAQData} faq_data
+ */
+export async function get_parsed_faq(faq_data) {
+	const highlighter = await createShikiHighlighter({ theme: 'css-variables' });
+
+	return Promise.all(
+		faq_data.map(async ({ content, slug, title }) => {
+			return {
+				title,
+				slug,
+				content: transform(content, {
+					/**
+					 * @param {string} html
+					 */
+					heading(html) {
+						const title = html
+							.replace(/<\/?code>/g, '')
+							.replace(/&quot;/g, '"')
+							.replace(/&lt;/g, '<')
+							.replace(/&gt;/g, '>');
+
+						return title;
+					},
+					code: (source, language) => {
+						let html = '';
+
+						source = source
+							.replace(/^([\-\+])?((?:    )+)/gm, (match, prefix = '', spaces) => {
+								if (prefix && language !== 'diff') return match;
+
+								// for no good reason at all, marked replaces tabs with spaces
+								let tabs = '';
+								for (let i = 0; i < spaces.length; i += 4) {
+									tabs += '  ';
+								}
+								return prefix + tabs;
+							})
+							.replace(/\*\\\//g, '*/');
+
+						html = highlighter.codeToHtml(source, { lang: languages[language] });
+
+						html = html
+							.replace(
+								/^(\s+)<span class="token comment">([\s\S]+?)<\/span>\n/gm,
+								(match, intro_whitespace, content) => {
+									// we use some CSS trickery to make comments break onto multiple lines while preserving indentation
+									const lines = (intro_whitespace + content + '').split('\n');
+									return lines
+										.map((line) => {
+											const match = /^(\s*)(.*)/.exec(line);
+											const indent = (match?.[1] ?? '').replace(/\t/g, '  ').length;
+
+											return `<span class="token comment wrapped" style="--indent: ${indent}ch">${
+												line ?? ''
+											}</span>`;
+										})
+										.join('');
+								}
+							)
+							.replace(/\/\*…\*\//g, '…');
+
+						return html;
+					},
+					codespan: (text) => '<code>' + text + '</code>',
+				}),
+			};
+		})
+	);
+}

sites/svelte.dev/src/lib/server/faq/types.d.ts

@@ -0,0 +1,5 @@
+export type FAQData = {
+	title: string;
+	slug: string;
+	content: string;
+}[];

sites/svelte.dev/src/lib/server/tutorial/get-tutorial.js

@@ -2,12 +2,12 @@
 import fs from 'node:fs';
 import { extract_frontmatter } from '../markdown/index.js';
 
-const base = '../../site/content/tutorial/';
+const BASE = '../../site/content/tutorial/';
 
 /**
  * @returns {import('./types').TutorialData}
  */
-export function get_tutorial_data() {
+export function get_tutorial_data(base = BASE) {
 	const tutorials = [];
 
 	for (const subdir of fs.readdirSync(base)) {

sites/svelte.dev/src/routes/(authed)/+layout.server.js

@@ -2,6 +2,6 @@ import * as session from '$lib/db/session';
 
 export async function load({ request }) {
 	return {
-		user: await session.from_cookie(request.headers.get('cookie'))
+		user: session.from_cookie(request.headers.get('cookie')),
 	};
 }

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

@@ -1,15 +1,19 @@
-import { error, json } from '@sveltejs/kit';
 import { dev } from '$app/environment';
-import * as session from '$lib/db/session';
 import { client } from '$lib/db/client';
 import * as gist from '$lib/db/gist';
-import { PUBLIC_API_BASE } from '$env/static/public';
+import { get_example } from '$lib/server/examples';
+import { 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';
 
 const UUID_REGEX = /^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/;
 
 /** @type {Set<string>} */
 let examples;
 
+/** @param {import('$lib/server/examples/types').ExamplesData[number]['examples'][number]['files'][number][]} files  */
 function munge(files) {
 	return files
 		.map((file) => {
@@ -18,6 +22,7 @@ function munge(files) {
 			let type = file.name.slice(dot + 1);
 
 			if (type === 'html') type = 'svelte';
+			// @ts-expect-error what is file.source? by @PuruVJ
 			return { name, type, source: file.source ?? file.content ?? '' };
 		})
 		.sort((a, b) => {
@@ -31,33 +36,25 @@ function munge(files) {
 }
 
 export async function GET({ params }) {
-	if (!examples) {
+	// Currently, these pages(that are in examples/) are prerendered. To avoid making any FS requests,
-		const res = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples`);
+	// We prerender examples pages during build time. That means, when something like `/repl/hello-world.json`
+	// is accessed, this function won't be run at all, as it will be served from the filesystem
+
 	examples = new Set(
-			(await res.json())
+		get_examples_list(examples_data)
 			.map((category) => category.examples)
 			.flat()
 			.map((example) => example.slug)
 	);
-	}
 
 	if (examples.has(params.id)) {
-		const res = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples/${params.id}`);
+		const example = get_example(examples_data, params.id);
-
-		if (!res.ok) {
-			return new Response(await res.json(), {
-				status: res.status,
-				headers: { 'Content-Type': 'application/json' }
-			});
-		}
-
-		const example = await res.json();
 
 		return json({
 			id: params.id,
-			name: example.name,
+			name: example.title,
 			owner: null,
-			relaxed: example.relaxed, // TODO is this right?
+			relaxed: false, // TODO is this right? EDIT: It was example.relaxed before, which no example return to my knowledge. By @PuruVJ
 			components: munge(example.files)
 		});
 	}
@@ -65,7 +62,16 @@ export async function GET({ params }) {
 	if (dev && !client) {
 		// in dev with no local Supabase configured, proxy to production
 		// this lets us at least load saved REPLs
-		return await fetch(`https://svelte.dev/repl/${params.id}.json`);
+		const res = await fetch(`https://svelte.dev/repl/${params.id}.json`);
+
+		// returning the response directly results in a bizarre
+		// content encoding error, so we create a new one
+		return new Response(await res.text(), {
+			status: res.status,
+			headers: {
+				'content-type': 'application/json'
+			}
+		});
 	}
 
 	if (!UUID_REGEX.test(params.id)) {
@@ -83,17 +89,7 @@ export async function GET({ params }) {
 		name: app.name,
 		owner: app.userid,
 		relaxed: false,
+		// @ts-expect-error app.files has a `source` property
 		components: munge(app.files)
 	});
 }
-
-// TODO reimplement as an action
-export async function PUT({ params, request }) {
-	const user = await session.from_cookie(request.headers.get('cookie'));
-	if (!user) throw error(401, 'Unauthorized');
-
-	const body = await request.json();
-	await gist.update(user, params.id, body);
-
-	return new Response(undefined, { status: 204 });
-}

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

@@ -11,6 +11,6 @@ export async function load({ fetch, params, url }) {
 
 	return {
 		gist,
-		version: url.searchParams.get('version') || '3'
+		version: url.searchParams.get('version') || '3',
 	};
 }

sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte

@@ -106,7 +106,7 @@
 			// ~> Any missing files are considered deleted!
 			const { components } = repl.toJSON();
 
-			const r = await fetch(`/repl/${gist.id}.json`, {
+			const r = await fetch(`/repl/save/${gist.id}.json`, {
 				method: 'PUT',
 				credentials: 'include',
 				headers: {

sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte

@@ -2,7 +2,6 @@
 	import { browser } from '$app/environment';
 	import ReplWidget from '$lib/components/ReplWidget.svelte';
 
-	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
 

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

@@ -0,0 +1,14 @@
+import * as gist from '$lib/db/gist';
+import * as session from '$lib/db/session';
+import { error } from '@sveltejs/kit';
+
+// TODO reimplement as an action
+export async function PUT({ params, request }) {
+	const user = await session.from_cookie(request.headers.get('cookie'));
+	if (!user) throw error(401, 'Unauthorized');
+
+	const body = await request.json();
+	await gist.update(user, params.id, body);
+
+	return new Response(undefined, { status: 204 });
+}

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

@@ -15,6 +15,7 @@
 </svelte:head>
 
 <Shell nav_visible={$page.url.pathname !== '/repl/embed'}>
+	{#if $page.url.pathname !== '/repl/embed'}
 		<Nav logo="/svelte-logo.svg">
 			<svelte:fragment slot="nav-center">
 				{#if $page.url.pathname !== '/search'}
@@ -45,6 +46,7 @@
 				</NavItem>
 			</svelte:fragment>
 		</Nav>
+	{/if}
 
 	<slot />
 </Shell>

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

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

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

@@ -48,10 +48,12 @@
 			<a href="/examples">more <span class="large-show">&nbsp;examples</span> &rarr;</a>
 		</div>
 
-		<Example id={selected.id} />
+		{#if selected}
+			<Example id={selected?.id} />
+		{/if}
 	</div>
 
-	<p class="description">{@html selected.description}</p>
+	<p class="description">{@html selected?.description}</p>
 </Section>
 
 <style>

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

@@ -16,7 +16,7 @@
 	let repl;
 
 	const clone = (file) => ({
-		name: file.filename.replace(/.\w+$/, ''),
+		name: file.name.replace(/.\w+$/, ''),
 		type: file.type,
 		source: file.content,
 	});

sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte

@@ -14,6 +14,7 @@
 
 <ul class="examples-toc">
 	{#each sections as section}
+		{#if section.title !== undefined}
 			<li>
 				<span class="section-title">{section.title}</span>
 
@@ -39,6 +40,7 @@
 					</div>
 				{/each}
 			</li>
+		{/if}
 	{/each}
 </ul>
 

sites/svelte.dev/src/routes/examples/api/+server.js

@@ -0,0 +1,8 @@
+// @ts-check
+import examples_data from '$lib/generated/examples-data.js';
+import { get_examples_list } from '$lib/server/examples/get-examples';
+import { json } from '@sveltejs/kit';
+
+export const GET = () => {
+	return json(get_examples_list(examples_data));
+};

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

@@ -0,0 +1,17 @@
+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 { error, json } from '@sveltejs/kit';
+
+export const GET = ({ params }) => {
+	const examples = new Set(
+		get_examples_list(examples_data)
+			.map((category) => category.examples)
+			.flat()
+			.map((example) => example.slug)
+	);
+
+	if (!examples.has(params.slug)) throw error(404, 'Example not found');
+
+	return json(get_example(examples_data, params.slug));
+};

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

@@ -1,12 +0,0 @@
-import { PUBLIC_API_BASE } from '$env/static/public';
-
-/** @type {import('./$types').PageLoad} */
-export async function load({ fetch, setHeaders }) {
-	const faqs = await fetch(`${PUBLIC_API_BASE}/docs/svelte/faq?content`).then((r) => r.json());
-
-	setHeaders({
-		'cache-control': 'public, max-age=60'
-	});
-
-	return { faqs };
-}

sites/svelte.dev/src/routes/faq/+page.server.js

@@ -0,0 +1,8 @@
+import { get_parsed_faq } from '$lib/server/faq';
+import { get_faq_data } from '$lib/server/faq/get-faq';
+
+export const prerender = true;
+
+export async function load() {
+	return { faqs: get_parsed_faq(get_faq_data()) };
+}

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

@@ -1,7 +1,6 @@
 <script>
 	import '@sveltejs/site-kit/styles/code.css';
 
-	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
 
@@ -85,11 +84,7 @@
 
 	@media (min-width: 768px) {
 		.faqs :global(.anchor:focus),
-		.faqs :global(h2):hover :global(.anchor),
+		.faqs :global(:where(h2, h3, h4, h5, h6)):hover :global(.anchor) {
-		.faqs :global(h3):hover :global(.anchor),
-		.faqs :global(h4):hover :global(.anchor),
-		.faqs :global(h5):hover :global(.anchor),
-		.faqs :global(h6):hover :global(.anchor) {
 			opacity: 1;
 		}
 

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

@@ -1,5 +1,5 @@
 import { get_parsed_tutorial } from '$lib/server/tutorial';
-import { get_tutorial_data, get_tutorial_list } from '$lib/server/tutorial/get-tutorial-data';
+import { get_tutorial_data, get_tutorial_list } from '$lib/server/tutorial/get-tutorial';
 import { error } from '@sveltejs/kit';
 
 export const prerender = true;

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

@@ -153,16 +153,6 @@
 	{/if}
 </div>
 
-<!-- HACK to prerender -->
-<p style="display: none;">
-	{#each data.tutorials_list as { tutorials }}
-		{#each tutorials as { slug }}
-			<!-- svelte-ignore a11y-missing-content -->
-			<a href="/tutorial/{slug}" />
-		{/each}
-	{/each}
-</p>
-
 <style>
 	.tutorial-outer {
 		position: relative;

sites/svelte.dev/svelte.config.js

@@ -1,9 +1,31 @@
 // @ts-check
-import adapter from '@sveltejs/adapter-auto';
+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()
+		adapter: adapter(),
+		prerender: {
+			// TODO use route entries instead, once https://github.com/sveltejs/kit/pull/9571 is merged
+			entries: ['*', ...repl_json_entries(), ...tutorial_entries()]
+		}
 	}
 };
+
+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}`))
+	);
+}