add svelte app.

webapp/src/routes/[id].json.js

@@ -0,0 +1,9 @@
+import fetch from 'node-fetch';
+
+export async function get(req, res) {
+	const response = await fetch(`http://localhost:33842/api/${req.params.id}`);
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+	});
+	res.end(await response.text());
+}

webapp/src/routes/[id].svelte

@@ -0,0 +1,111 @@
+<script context="module">
+  export async function preload({ params }) {
+    // the `slug` parameter is available because
+    // this file is called [slug].svelte
+    const res = await this.fetch(`${params.id}.json`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      const related = [];
+      const others = data.related.filter(
+        (r) => r.id !== data.story.id && !!r.num_comments
+      );
+      for (const other of others) {
+        const r = await this.fetch(`${other.id}.json`);
+        if (r.ok) {
+          const d = await r.json();
+          related.push(d.story);
+        }
+      }
+      return { story: data.story, related };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
+</script>
+
+<script>
+  import Comment from "../components/Comment.svelte";
+  import StoryInfo from "../components/StoryInfo.svelte";
+  export let story;
+  export let related;
+
+  let hasComments = story.num_comments || related.length;
+</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;
+  }
+
+  .content :global(img) {
+    max-width: 100%;
+  }
+
+  .spacer {
+    margin: 3rem 0;
+  }
+</style>
+
+<svelte:head>
+  <title>{story.title}</title>
+</svelte:head>
+
+<h1>{story.title}</h1>
+<StoryInfo {story} />
+
+<div class="content">
+  {@html story.text}
+</div>
+
+{#if hasComments}
+  <hr class="spacer" />
+  <h2 id="comments">Comments</h2>
+  {#if related.length}
+    <h3>
+      Other discussions:
+      {#each related as r}
+        {#if r.num_comments}
+          <a href="/{r.id}#comments" rel="prefetch">{r.source}</a>
+        {/if}
+      {/each}
+    </h3>
+  {/if}
+  {#if story.comments.length}
+    <div class="comments">
+      {#each story.comments as comment}
+        <Comment {story} {comment} />
+      {/each}
+    </div>
+  {/if}
+{/if}

webapp/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}

webapp/src/routes/_layout.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Nav from "../components/Nav.svelte";
+  export let segment;
+</script>
+
+<style>
+  main {
+    position: relative;
+    max-width: 56em;
+    background-color: white;
+    padding: 2em;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+</style>
+
+<Nav {segment} />
+
+<main>
+  <slot {segment} />
+</main>

webapp/src/routes/index.json.js

@@ -0,0 +1,9 @@
+import fetch from 'node-fetch';
+
+export async function get(req, res) {
+	const response = await fetch(`http://localhost:33842/api`);
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+	});
+	res.end(await response.text());
+}

webapp/src/routes/index.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+  export function preload() {
+    return this.fetch(`index.json`)
+      .then((r) => r.json())
+      .then(({ stories }) => {
+        return { stories };
+      });
+  }
+</script>
+
+<script>
+  import { getLogoUrl } from "../utils/logos.js";
+  import StoryInfo from "../components/StoryInfo.svelte";
+
+  export let stories;
+</script>
+
+<style>
+  article {
+    margin: 0.5rem 0;
+  }
+</style>
+
+<svelte:head>
+  <title>News</title>
+</svelte:head>
+
+<section>
+  {#each stories as story}
+    <!-- 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 -->
+    <article>
+      <header>
+        <img
+          src={getLogoUrl(story)}
+          alt="logo"
+          style="height: 1rem; width: 1rem;" />
+        <a rel="prefetch" href="/{story.id}">{story.title}</a>
+        (<a href={story.url || story.link}>
+          {new URL(story.url || story.link).hostname.replace(/^www\./, '')}
+        </a>)
+      </header>
+      <section>
+        <StoryInfo {story} />
+      </section>
+    </article>
+  {/each}
+</section>