From 12bcb257550099dae1ea90fba522059ba38518a3 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Wed, 31 May 2023 11:19:56 -0400
Subject: [PATCH] tidy up

---
 .../src/routes/examples/[slug]/+page.svelte   | 128 ------------------
 .../[slug]/{+page.server.js => +server.js}    |   2 +-
 .../examples/[slug]/TableOfContents.svelte    | 123 -----------------
 3 files changed, 1 insertion(+), 252 deletions(-)
 delete mode 100644 sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
 rename sites/svelte.dev/src/routes/examples/[slug]/{+page.server.js => +server.js} (68%)
 delete mode 100644 sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte

diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
deleted file mode 100644
index b9126e63ae..0000000000
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<!-- FIXME sometimes it adds a trailing slash when landing -->
-<script>
-	// @ts-check
-	import { navigating } from '$app/stores';
-	import ScreenToggle from '$lib/components/ScreenToggle.svelte';
-	import Repl from '@sveltejs/repl';
-	import { theme } from '@sveltejs/site-kit/components';
-	import { mapbox_setup, svelteUrl } from '../../../config';
-	import TableOfContents from './TableOfContents.svelte';
-
-	export let data;
-
-	/** @type {number} */
-	let width;
-	let offset = 1;
-	/** @type {import('@sveltejs/repl').default} */
-	let repl;
-
-	const clone = (file) => ({
-		name: file.name.replace(/.\w+$/, ''),
-		type: file.type,
-		source: file.content
-	});
-
-	$: mobile = width < 768; // note: same as per media query below
-	/** @type {'columns' | 'rows'} */
-	$: replOrientation = mobile || width > 1080 ? 'columns' : 'rows';
-
-	$: repl && repl.set({ files: data.example.files.map(clone) });
-</script>
-
-<svelte:head>
-	<title>{data.example?.title} {data.example?.title ? '•' : ''} Svelte Examples</title>
-
-	<meta name="twitter:title" content="Svelte examples" />
-	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
-	<meta name="Description" content="Interactive example Svelte apps" />
-</svelte:head>
-
-<h1 class="visually-hidden">Examples</h1>
-<div class="examples-container" bind:clientWidth={width}>
-	<div class="viewport offset-{offset}">
-		<TableOfContents
-			sections={data.examples_list}
-			active_section={data.example?.slug}
-			isLoading={!!$navigating}
-		/>
-		<div class="repl-container" class:loading={$navigating}>
-			<Repl
-				bind:this={repl}
-				{svelteUrl}
-				orientation={replOrientation}
-				fixed={mobile}
-				relaxed
-				injectedJS={mapbox_setup}
-				previewTheme={$theme.current}
-			/>
-		</div>
-	</div>
-	{#if mobile}
-		<ScreenToggle bind:offset labels={['index', 'input', 'output']} />
-	{/if}
-</div>
-
-<style>
-	.examples-container {
-		position: relative;
-		height: calc(100vh - var(--sk-nav-height));
-		overflow: hidden;
-		padding: 0 0 42px 0;
-		box-sizing: border-box;
-	}
-
-	.viewport {
-		display: grid;
-		width: 300%;
-		height: 100%;
-		grid-template-columns: 33.333% 66.666%;
-		transition: transform 0.3s;
-		grid-auto-rows: 100%;
-	}
-
-	.repl-container.loading {
-		opacity: 0.6;
-	}
-
-	/* temp fix for #2499 and #2550 while waiting for a fix for https://github.com/sveltejs/svelte-repl/issues/8 */
-
-	.repl-container :global(.tab-content),
-	.repl-container :global(.tab-content.visible) {
-		pointer-events: all;
-		opacity: 1;
-	}
-	.repl-container :global(.tab-content) {
-		visibility: hidden;
-	}
-	.repl-container :global(.tab-content.visible) {
-		visibility: visible;
-	}
-
-	.offset-1 {
-		transform: translate(-33.333%, 0);
-	}
-	.offset-2 {
-		transform: translate(-66.666%, 0);
-	}
-
-	@media (min-width: 768px) {
-		.examples-container {
-			padding: 0;
-		}
-
-		.viewport {
-			width: 100%;
-			height: 100%;
-			display: grid;
-			/* TODO */
-			grid-template-columns: 36rem auto;
-			grid-auto-rows: 100%;
-			transition: none;
-		}
-
-		.offset-1,
-		.offset-2 {
-			transform: none;
-		}
-	}
-</style>
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js b/sites/svelte.dev/src/routes/examples/[slug]/+server.js
similarity index 68%
rename from sites/svelte.dev/src/routes/examples/[slug]/+page.server.js
rename to sites/svelte.dev/src/routes/examples/[slug]/+server.js
index 43d673dd32..11cdbe5841 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js
+++ b/sites/svelte.dev/src/routes/examples/[slug]/+server.js
@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
-export async function load({ params }) {
+export async function GET({ params }) {
 	throw redirect(308, `/repl/${params.slug}`);
 }
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte b/sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte
deleted file mode 100644
index 1aa8a7965a..0000000000
--- a/sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	export let sections = [];
-	export let active_section = null;
-	export let isLoading = false;
-
-	let active_el;
-
-	onMount(() => {
-		active_el.scrollIntoView({ block: 'center' });
-	});
-</script>
-
-<ul class="examples-toc">
-	{#each sections as section}
-		<!-- Avoid embeds -->
-		{#if section.title !== 'Embeds'}
-			<li>
-				<span class="section-title">{section.title}</span>
-
-				{#each section.examples as example}
-					<div class="row" class:active={example.slug === active_section} class:loading={isLoading}>
-						<a
-							href="/examples/{example.slug}"
-							class="row"
-							class:active={example.slug === active_section}
-							class:loading={isLoading}
-						>
-							<img
-								class="thumbnail"
-								alt="{example.title} thumbnail"
-								src="/examples/thumbnails/{example.slug}.jpg"
-							/>
-
-							<span>{example.title}</span>
-						</a>
-						{#if example.slug === active_section}
-							<a bind:this={active_el} href="/repl/{example.slug}" class="repl-link">REPL</a>
-						{/if}
-					</div>
-				{/each}
-			</li>
-		{/if}
-	{/each}
-</ul>
-
-<style>
-	.examples-toc {
-		overflow-y: auto;
-		height: 100%;
-		border-right: 1px solid var(--sk-back-4);
-		background-color: var(--sk-back-3);
-		color: var(--sk-text-2);
-		padding: 3rem 3rem 0 3rem;
-		margin: 0;
-	}
-
-	.examples-toc li {
-		display: block;
-		line-height: 1.2;
-		margin: 0 0 4.8rem 0;
-	}
-
-	.section-title {
-		display: block;
-		padding: 0 0 0.8rem 0;
-		font: 400 var(--sk-text-xs) var(--sk-font);
-		text-transform: uppercase;
-		letter-spacing: 0.12em;
-		font-weight: 700;
-	}
-
-	div {
-		display: flex;
-		flex-direction: row;
-		padding: 0.2rem 3rem;
-		margin: 0 -3rem;
-	}
-
-	div.active {
-		color: white;
-	}
-
-	div.active.loading {
-		background: rgba(0, 0, 0, 0.1) calc(100% - 3rem) 47% no-repeat url(/icons/loading.svg);
-		background-size: 1em 1em;
-		color: white;
-	}
-
-	a {
-		display: flex;
-		flex: 1 1 auto;
-		position: relative;
-		color: var(--sk-text-2);
-		border-bottom: none;
-		font-size: 1.6rem;
-		align-items: center;
-		justify-content: start;
-		padding: 0;
-	}
-
-	a:hover {
-		color: var(--sk-text-1);
-	}
-
-	.repl-link {
-		flex: 0 1 auto;
-		font-size: 1.2rem;
-		font-weight: 700;
-		margin-right: 2.5rem;
-	}
-
-	.thumbnail {
-		background-color: #fff;
-		object-fit: contain;
-		width: 5rem;
-		height: 5rem;
-		border-radius: 2px;
-		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.13);
-		margin: 0.2em 0.5em 0.2em 0;
-	}
-</style>