slightly nicer error page (sveltejs#69)

Author: Rich-Harris

content/tutorial/01-svelte/common/src/routes/__error.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+{#if $page.status === 404}
+	<h1>Not found</h1>
+	<p><a href="/">Go to /</a></p>
+{:else}
+	<p>
+		Server-side rendering failed with HTTP status
+		code
+		<a
+			target="_blank"
+			href="https://httpstatusdogs.com/{$page.status}"
+			>{$page.status}</a
+		>
+	</p>
+
+	<pre>{$page.error?.stack || ''}</pre>
+{/if}
+
+<style>
+	h1 {
+		font-weight: 200;
+		font-size: 2rem;
+		margin: 0 0 0.5em 0;
+	}
+
+	pre {
+		font-family: Menlo, Monaco, monospace;
+		font-size: 13px;
+		background: hsl(0, 100%, 95%);
+		padding: 1rem;
+		overflow-x: auto;
+		border-radius: 5px;
+		color: hsl(0, 100%, 30%);
+	}
+</style>

content/tutorial/01-svelte/common/src/routes/__layout.svelte

@@ -0,0 +1,20 @@
+<main>
+	<slot />
+</main>
+
+<style>
+	:global(body) {
+		font-family: -apple-system, BlinkMacSystemFont,
+			'Segoe UI', Roboto, Oxygen, Ubuntu,
+			Cantarell, 'Open Sans', 'Helvetica Neue',
+			sans-serif;
+		margin: 0;
+	}
+
+	main {
+		width: 100%;
+		height: 100vh;
+		box-sizing: border-box;
+		padding: 8px;
+	}
+</style>

content/tutorial/01-svelte/common/src/routes/index.svelte

@@ -0,0 +1,5 @@
+<script>
+	import App from '$lib/App.svelte';
+</script>
+
+<App />

content/tutorial/03-advanced-svelte/common/src/routes/__error.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+{#if $page.status === 404}
+	<h1>Not found</h1>
+	<p><a href="/">Go to /</a></p>
+{:else}
+	<p>
+		Server-side rendering failed with HTTP status
+		code
+		<a
+			target="_blank"
+			href="https://httpstatusdogs.com/{$page.status}"
+			>{$page.status}</a
+		>
+	</p>
+
+	<pre>{$page.error?.stack || ''}</pre>
+{/if}
+
+<style>
+	h1 {
+		font-weight: 200;
+		font-size: 2rem;
+		margin: 0 0 0.5em 0;
+	}
+
+	pre {
+		font-family: Menlo, Monaco, monospace;
+		font-size: 13px;
+		background: hsl(0, 100%, 95%);
+		padding: 1rem;
+		overflow-x: auto;
+		border-radius: 5px;
+		color: hsl(0, 100%, 30%);
+	}
+</style>

content/tutorial/03-advanced-svelte/common/src/routes/__layout.svelte

@@ -0,0 +1,20 @@
+<main>
+	<slot />
+</main>
+
+<style>
+	:global(body) {
+		font-family: -apple-system, BlinkMacSystemFont,
+			'Segoe UI', Roboto, Oxygen, Ubuntu,
+			Cantarell, 'Open Sans', 'Helvetica Neue',
+			sans-serif;
+		margin: 0;
+	}
+
+	main {
+		width: 100%;
+		height: 100vh;
+		box-sizing: border-box;
+		padding: 8px;
+	}
+</style>

content/tutorial/03-advanced-svelte/common/src/routes/index.svelte

@@ -0,0 +1,5 @@
+<script>
+	import App from '$lib/App.svelte';
+</script>
+
+<App />