fixes

package_template.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "npm-run-all": "^4.1.5",
     "sapper": "alpha",
-    "svelte": "beta"
+    "svelte": "^3.0.0"
   },
   "merge-configs": {
     "rollup": {

src/components/Nav.svelte

@@ -1,13 +1,6 @@
-<nav>
+<script>
-	<ul>
+	export let segment;
-		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
+</script>
-		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
-
-		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
-	</ul>
-</nav>
 
 <style>
 	nav {
@@ -54,3 +47,14 @@
 		display: block;
 	}
 </style>
+
+<nav>
+	<ul>
+		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
+		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
+
+		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+		     the blog data when we hover over the link or tap it on a touchscreen -->
+		<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
+	</ul>
+</nav>

src/routes/_layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Nav from '../components/Nav.html';
+	import Nav from '../components/Nav.svelte';
 
 	export let segment;
 </script>