experimental new structure

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>

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();
+init({
+	target: document.querySelector('#sapper'),
+	routes,
+	App
+});

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);