From 98813dd8fde5bf6f1351aca2efff70a035ceccc3 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 4 May 2018 22:36:17 -0400
Subject: [PATCH] experimental new structure

---
 app/App.html                                | 31 +++++++++++++++++++++
 app/client.js                               | 10 ++++---
 app/server.js                               |  6 +++-
 assets/global.css                           |  9 ------
 {routes/_components => components}/Nav.html |  0
 package.json                                |  2 +-
 routes/4xx.html                             | 18 ++----------
 routes/5xx.html                             | 16 ++---------
 routes/_components/Layout.html              | 15 ----------
 routes/about.html                           | 16 ++---------
 routes/blog/[slug].html                     | 16 +++--------
 routes/blog/index.html                      | 28 +++++++------------
 routes/index.html                           | 26 +++++------------
 13 files changed, 71 insertions(+), 122 deletions(-)
 create mode 100644 app/App.html
 rename {routes/_components => components}/Nav.html (100%)
 delete mode 100644 routes/_components/Layout.html

diff --git a/app/App.html b/app/App.html
new file mode 100644
index 0000000..862341d
--- /dev/null
+++ b/app/App.html
@@ -0,0 +1,31 @@
+<Nav page={
+	props.path === '/' ? 'home' :
+	props.path === '/about' ? 'about' :
+	props.path.startsWith('/blog') ? 'blog' :
+	null
+}/>
+
+<main>
+	<svelte:component this={Page} {...props}/>
+</main>
+
+<style>
+	main {
+		position: relative;
+		max-width: 56em;
+		background-color: white;
+		padding: 2em;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+</style>
+
+<script>
+	import Nav from '../components/Nav.html';
+
+	export default {
+		components: {
+			Nav
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/app/client.js b/app/client.js
index 05d30aa..0d3fa40 100644
--- a/app/client.js
+++ b/app/client.js
@@ -1,7 +1,9 @@
 import { init } from 'sapper/runtime.js';
 import { routes } from './manifest/client.js';
+import App from './App.html';
 
-// `routes` is an array of route objects injected by Sapper
-init(document.querySelector('#sapper'), routes);
-
-if (module.hot) module.hot.accept();
\ No newline at end of file
+init({
+	target: document.querySelector('#sapper'),
+	routes,
+	App
+});
\ No newline at end of file
diff --git a/app/server.js b/app/server.js
index fa4a6d2..5a17318 100644
--- a/app/server.js
+++ b/app/server.js
@@ -3,11 +3,15 @@ import compression from 'compression';
 import sapper from 'sapper';
 import serve from 'serve-static';
 import { routes } from './manifest/server.js';
+import App from './App.html';
 
 polka() // You can also use Express
 	.use(
 		compression({ threshold: 0 }),
 		serve('assets'),
-		sapper({ routes })
+		sapper({
+			routes,
+			App
+		})
 	)
 	.listen(process.env.PORT);
diff --git a/assets/global.css b/assets/global.css
index 3831b79..3566e73 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -6,15 +6,6 @@ body {
 	color: #333;
 }
 
-main {
-	position: relative;
-	max-width: 56em;
-	background-color: white;
-	padding: 2em;
-	margin: 0 auto;
-	box-sizing: border-box;
-}
-
 h1, h2, h3, h4, h5, h6 {
 	margin: 0 0 0.5em 0;
 	font-weight: 400;
diff --git a/routes/_components/Nav.html b/components/Nav.html
similarity index 100%
rename from routes/_components/Nav.html
rename to components/Nav.html
diff --git a/package.json b/package.json
index b62a1e3..d6e838e 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "polka": "^0.3.4",
     "sapper": "^0.10.0",
     "serve-static": "^1.13.1",
-    "svelte": "^2.0.0",
+    "svelte": "^2.4.4",
     "svelte-loader": "^2.3.3",
     "webpack": "^4.1.0"
   }
diff --git a/routes/4xx.html b/routes/4xx.html
index 21d4dfa..9ff1ae7 100644
--- a/routes/4xx.html
+++ b/routes/4xx.html
@@ -2,11 +2,9 @@
 	<title>Not found</title>
 </svelte:head>
 
-<Layout page='home'>
-	<h1>Not found</h1>
+<h1>Not found</h1>
 
-	<p>Please check the URL</p>
-</Layout>
+<p>Please check the URL</p>
 
 <style>
 	h1, p {
@@ -30,14 +28,4 @@
 			font-size: 4em;
 		}
 	}
-</style>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
+</style>
\ No newline at end of file
diff --git a/routes/5xx.html b/routes/5xx.html
index bbd413b..7f008e0 100644
--- a/routes/5xx.html
+++ b/routes/5xx.html
@@ -2,9 +2,7 @@
 	<title>Internal server error</title>
 </svelte:head>
 
-<Layout page='home'>
-	<h1>Internal server error</h1>
-</Layout>
+<h1>Internal server error</h1>
 
 <style>
 	h1 {
@@ -21,14 +19,4 @@
 			font-size: 4em;
 		}
 	}
-</style>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
+</style>
\ No newline at end of file
diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
deleted file mode 100644
index f5e0742..0000000
--- a/routes/_components/Layout.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<Nav page={page}/>
-
-<main>
-	<slot></slot>
-</main>
-
-<script>
-	import Nav from './Nav.html';
-
-	export default {
-		components: {
-			Nav
-		}
-	};
-</script>
\ No newline at end of file
diff --git a/routes/about.html b/routes/about.html
index 04597a2..e1734b3 100644
--- a/routes/about.html
+++ b/routes/about.html
@@ -2,18 +2,6 @@
 	<title>About</title>
 </svelte:head>
 
-<Layout page='about'>
-	<h1>About this site</h1>
+<h1>About this site</h1>
 
-	<p>This is the 'about' page. There's not much here.</p>
-</Layout>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
\ No newline at end of file
+<p>This is the 'about' page. There's not much here.</p>
\ No newline at end of file
diff --git a/routes/blog/[slug].html b/routes/blog/[slug].html
index 2d7ede7..61f4a97 100644
--- a/routes/blog/[slug].html
+++ b/routes/blog/[slug].html
@@ -2,13 +2,11 @@
 	<title>{post.title}</title>
 </svelte:head>
 
-<Layout page='blog'>
-	<h1>{post.title}</h1>
+<h1>{post.title}</h1>
 
-	<div class='content'>
-		{@html post.html}
-	</div>
-</Layout>
+<div class='content'>
+	{@html post.html}
+</div>
 
 <style>
 	/*
@@ -47,13 +45,7 @@
 </style>
 
 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
 			// the `slug` parameter is available because this file
 			// is called [slug].html
diff --git a/routes/blog/index.html b/routes/blog/index.html
index 9c1dad8..f1c80ac 100644
--- a/routes/blog/index.html
+++ b/routes/blog/index.html
@@ -2,19 +2,17 @@
 	<title>Blog</title>
 </svelte:head>
 
-<Layout page='blog'>
-	<h1>Recent posts</h1>
+<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>
-</Layout>
+<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>
 
 <style>
 	ul {
@@ -24,13 +22,7 @@
 </style>
 
 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
 			return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
diff --git a/routes/index.html b/routes/index.html
index 2118c60..95b2980 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -2,16 +2,14 @@
 	<title>Sapper project template</title>
 </svelte:head>
 
-<Layout page='home'>
-	<h1>Great success!</h1>
+<h1>Great success!</h1>
 
-	<figure>
-		<img alt='Borat' src='great-success.png'>
-		<figcaption>HIGH FIVE!</figcaption>
-	</figure>
+<figure>
+	<img alt='Borat' src='great-success.png'>
+	<figcaption>HIGH FIVE!</figcaption>
+</figure>
 
-	<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
-</Layout>
+<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
 
 <style>
 	h1, figure, p {
@@ -45,14 +43,4 @@
 			font-size: 4em;
 		}
 	}
-</style>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
+</style>
\ No newline at end of file