get hacker news example working

site/content/examples/hacker-news/App.html

@@ -1,11 +1,10 @@
 <script>
 	import { onMount } from 'svelte';
-
 	import List from './List.html';
 	import Item from './Item.html';
 
-	export let item;
+	let item;
-	export let page;
+	let page;
 
 	onMount(() => {
 		hashchange();
@@ -29,16 +28,6 @@
 	}
 </script>
 
-<svelte:window on:hashchange={hashchange}/>
-
-<main>
-	{#if item}
-		<Item {item}/>
-	{:elseif page}
-		<List {page}/>
-	{/if}
-</main>
-
 <style>
 	main {
 		position: relative;
@@ -58,3 +47,13 @@
 		color: rgb(0,0,150);
 	}
 </style>
+
+<svelte:window on:hashchange={hashchange}/>
+
+<main>
+	{#if item}
+		<Item {item}/>
+	{:elseif page}
+		<List {page}/>
+	{/if}
+</main>

site/content/examples/hacker-news/Comment.html

@@ -1,15 +1,3 @@
-<article>
-	<p class="meta">{comment.user} {comment.time_ago}</p>
-
-	{@html comment.content}
-
-	<div class="replies">
-		{#each comment.comments as child}
-			<svelte:self comment={child}/>
-		{/each}
-	</div>
-</article>
-
 <style>
 	article {
 		border-top: 1px solid #eee;
@@ -26,3 +14,15 @@
 		padding: 0 0 0 1em;
 	}
 </style>
+
+<article>
+	<p class="meta">{comment.user} {comment.time_ago}</p>
+
+	{@html comment.content}
+
+	<div class="replies">
+		{#each comment.comments as child}
+			<svelte:self comment={child}/>
+		{/each}
+	</div>
+</article>

site/content/examples/hacker-news/Item.html

@@ -9,6 +9,22 @@
 	}
 </script>
 
+<style>
+	article {
+		margin: 0 0 1em 0;
+	}
+
+	a {
+		display: block;
+		margin: 0 0 1em 0;
+	}
+
+	h1 {
+		font-size: 1.4em;
+		margin: 0;
+	}
+</style>
+
 <a href="#/top/1" on:click={back}>&laquo; back</a>
 
 <article>
@@ -25,19 +41,3 @@
 		<Comment {comment}/>
 	{/each}
 </div>
-
-<style>
-	article {
-		margin: 0 0 1em 0;
-	}
-
-	a {
-		display: block;
-		margin: 0 0 1em 0;
-	}
-
-	h1 {
-		font-size: 1.4em;
-		margin: 0;
-	}
-</style>

site/content/examples/hacker-news/List.html

@@ -21,16 +21,6 @@
 	});
 </script>
 
-{#if items}
-	{#each items as item, i}
-		<Summary {item} {i} {offset}/>
-	{/each}
-
-	<a href="#/top/{page + 1}">page {page + 1}</a>
-{:else}
-	<p class="loading">loading...</p>
-{/if}
-
 <style>
 	a {
 		padding: 2em;
@@ -47,3 +37,13 @@
 		to { opacity: 1; }
 	}
 </style>
+
+{#if items}
+	{#each items as item, i}
+		<Summary {item} {i} {offset}/>
+	{/each}
+
+	<a href="#/top/{page + 1}">page {page + 1}</a>
+{:else}
+	<p class="loading">loading...</p>
+{/if}

site/content/examples/hacker-news/Summary.html

@@ -9,12 +9,6 @@
 	}
 </script>
 
-<article>
-	<span>{i + offset + 1}</span>
-	<h2><a target="_blank" href={item.url}>{item.title}</a></h2>
-	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
-</article>
-
 <style>
 	article {
 		position: relative;
@@ -36,3 +30,9 @@
 		color: #333;
 	}
 </style>
+
+<article>
+	<span>{i + offset + 1}</span>
+	<h2><a target="_blank" href={item.url}>{item.title}</a></h2>
+	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
+</article>

site/src/routes/repl/_components/Output/Viewer.html

@@ -99,10 +99,10 @@
 
 				event.preventDefault();
 
-				if (el.href.startsWith(top.location.href)) {
+				if (el.href.startsWith(top.location.origin)) {
-					const hash = el.href.replace(top.location.href, '');
+					const url = new URL(el.href);
-					if (hash[0] === '#') {
+					if (url.hash[0] === '#') {
-						iframe.contentWindow.location.hash = hash;
+						iframe.contentWindow.location.hash = url.hash;
 						return;
 					}
 				}