From 47e6ead4eb004fb9b6e235763baed420ae76e599 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 8 Feb 2019 19:39:25 -0500
Subject: [PATCH] .html -> .svelte

---
 src/routes/_error.svelte      | 40 ++++++++++++++++++++++
 src/routes/_layout.svelte     | 22 ++++++++++++
 src/routes/about.svelte       |  7 ++++
 src/routes/blog/[slug].svelte | 64 +++++++++++++++++++++++++++++++++++
 src/routes/blog/index.svelte  | 34 +++++++++++++++++++
 src/routes/index.svelte       | 46 +++++++++++++++++++++++++
 6 files changed, 213 insertions(+)
 create mode 100644 src/routes/_error.svelte
 create mode 100644 src/routes/_layout.svelte
 create mode 100644 src/routes/about.svelte
 create mode 100644 src/routes/blog/[slug].svelte
 create mode 100644 src/routes/blog/index.svelte
 create mode 100644 src/routes/index.svelte

diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
new file mode 100644
index 0000000..320e587
--- /dev/null
+++ b/src/routes/_error.svelte
@@ -0,0 +1,40 @@
+<script>
+	export let status;
+	export let error;
+
+	const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
new file mode 100644
index 0000000..1bb13af
--- /dev/null
+++ b/src/routes/_layout.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Nav from '../components/Nav.html';
+
+	export let child;
+</script>
+
+<style>
+	main {
+		position: relative;
+		max-width: 56em;
+		background-color: white;
+		padding: 2em;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+</style>
+
+<Nav segment={child.segment}/>
+
+<main>
+	<svelte:component this={child.component} {...child.props}/>
+</main>
\ No newline at end of file
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
new file mode 100644
index 0000000..e1734b3
--- /dev/null
+++ b/src/routes/about.svelte
@@ -0,0 +1,7 @@
+<svelte:head>
+	<title>About</title>
+</svelte:head>
+
+<h1>About this site</h1>
+
+<p>This is the 'about' page. There's not much here.</p>
\ No newline at end of file
diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug].svelte
new file mode 100644
index 0000000..368e02e
--- /dev/null
+++ b/src/routes/blog/[slug].svelte
@@ -0,0 +1,64 @@
+<script context="module">
+	export async function preload({ params, query }) {
+		// the `slug` parameter is available because
+		// this file is called [slug].html
+		const res = await this.fetch(`blog/${params.slug}.json`);
+		const data = await res.json();
+
+		if (res.status === 200) {
+			return { post: data };
+		} else {
+			this.error(res.status, data.message);
+		}
+	}
+</script>
+
+<script>
+	export let post;
+</script>
+
+<style>
+	/*
+		By default, CSS is locally scoped to the component,
+		and any unused styles are dead-code-eliminated.
+		In this page, Svelte can't know which elements are
+		going to appear inside the {{{post.html}}} block,
+		so we have to use the :global(...) modifier to target
+		all elements inside .content
+	*/
+	.content :global(h2) {
+		font-size: 1.4em;
+		font-weight: 500;
+	}
+
+	.content :global(pre) {
+		background-color: #f9f9f9;
+		box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
+		padding: 0.5em;
+		border-radius: 2px;
+		overflow-x: auto;
+	}
+
+	.content :global(pre) :global(code) {
+		background-color: transparent;
+		padding: 0;
+	}
+
+	.content :global(ul) {
+		line-height: 1.5;
+	}
+
+	.content :global(li) {
+		margin: 0 0 0.5em 0;
+	}
+</style>
+
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
+
+<h1>{post.title}</h1>
+
+<div class='content'>
+	{@html post.html}
+</div>
\ No newline at end of file
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
new file mode 100644
index 0000000..e24f711
--- /dev/null
+++ b/src/routes/blog/index.svelte
@@ -0,0 +1,34 @@
+<script context="module">
+	export function preload({ params, query }) {
+		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
+			return { posts };
+		});
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<style>
+	ul {
+		margin: 0 0 1em 0;
+		line-height: 1.5;
+	}
+</style>
+
+<svelte:head>
+	<title>Blog</title>
+</svelte:head>
+
+<h1>Recent posts</h1>
+
+<ul>
+	{#each posts as post}
+		<!-- we're using the non-standard `rel=prefetch` attribute to
+				tell Sapper to load the data for the page as soon as
+				the user hovers over the link or taps it, instead of
+				waiting for the 'click' event -->
+		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
new file mode 100644
index 0000000..3365406
--- /dev/null
+++ b/src/routes/index.svelte
@@ -0,0 +1,46 @@
+<style>
+	h1, figure, p {
+		text-align: center;
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		text-transform: uppercase;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	figure {
+		margin: 0 0 1em 0;
+	}
+
+	img {
+		width: 100%;
+		max-width: 400px;
+		margin: 0 0 1em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>Sapper project template</title>
+</svelte:head>
+
+<h1>Great success!</h1>
+
+<figure>
+	<img alt='Borat' src='great-success.png'>
+	<figcaption>HIGH FIVE!</figcaption>
+</figure>
+
+<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
\ No newline at end of file