submit form.

webapp/src/components/Nav.svelte

@@ -6,11 +6,16 @@
   const { page } = stores();
 
   let search;
+  let isSearching;
 
-  let handleSearch = debounce(_handleSearch, 300, {
+  let __handleSearch = debounce(_handleSearch, 300, {
     trailing: true,
     leading: false,
   });
+  let handleSearch = (e) => {
+    isSearching = true;
+    __handleSearch(e);
+  };
 
   page.subscribe((page) => {
     setTimeout(() => {
@@ -24,6 +29,7 @@
     const url = `/search?q=${event.target.value}`;
     await prefetch(url);
     await goto(url);
+    isSearching = false;
   }
 </script>
 
@@ -57,6 +63,12 @@
     flex-direction: row;
     justify-content: space-between;
   }
+
+  /* @media (max-device-width: 480px) {
+    .navigation-container {
+      justify-content: space-evenly;
+    }
+  } */
   .navigation-container > * {
     vertical-align: middle;
   }
@@ -77,29 +89,61 @@
   }
   .navigation-input {
     line-height: 2;
-    margin: 1em;
     vertical-align: middle;
-    width: 20rem;
-    max-width: 50vw;
+    width: 30rem;
+    max-width: 45vw;
+    font-size: 1.1rem;
+    padding: 0.25em 0.5em;
+    margin: 0.25em 0.5em;
+    border-radius: 5px;
+    border: solid 1px #aaa;
+  }
+  input:focus {
+    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
+  }
+
+  .is-searching {
+    padding-right: 0.5rem;
+    background-image: url(/svg-loaders/black/grid.svg);
+    background-size: 1.2em 1.2em;
+    background-position: right 0.5em center;
+    background-repeat: no-repeat;
   }
 </style>
 
+<svelte:head>
+  <link rel="preload" href="/svg-loaders/black/grid.svg" as="image" />
+</svelte:head>
+
 <nav class="navigation">
   <div class="navigation-container">
-    <ul class="navigation-list" role="menubar">
+    <ul class="navigation-list" role="menu">
       <li class="navigation-item">
         <a
           class="navigation-link"
           aria-current={segment === undefined ? 'page' : undefined}
           rel="prefetch"
           href=".">
-          {#if segment === undefined}Qot.{:else}&larr; News feed{/if}
+          {#if [undefined, 'submit'].includes(segment)}
+            Qot. news
+          {:else}&larr; News feed{/if}
         </a>
       </li>
+      {#if [undefined, 'submit'].includes(segment)}
+        <li class="navigation-item">
+          <a
+            class="navigation-link"
+            aria-current={segment === 'submit' ? 'page' : undefined}
+            rel="prefetch"
+            href="/submit">
+            Submit
+          </a>
+        </li>
+      {/if}
     </ul>
     <form action="/search" method="GET" rel="prefetch" role="search">
       <input
-        class="navigation-input"
+        class="navigation-input {(isSearching && 'is-searching') || ''}"
         id="search"
         bind:this={search}
         type="text"

webapp/src/components/Pagination.svelte

@@ -37,6 +37,14 @@
     flex-direction: row;
     justify-content: space-between;
   }
+
+  .pagination-link {
+    font-size: 1.5rem;
+    text-decoration: none;
+  }
+  .pagination-link:hover {
+    text-decoration: underline;
+  }
   .pagination-link.is-next {
     margin-left: auto;
   }
@@ -44,12 +52,11 @@
 
 <div class="pagination">
   {#if skip > 0}
-    <a
-      class="pagination-link is-prev"
-      href={prevLink}
-      rel="prefetch">Previous</a>
+    <a class="pagination-link is-prev" href={prevLink} rel="prefetch">&larr;
+      Previous</a>
   {/if}
   {#if count >= limit}
-    <a class="pagination-link is-next" href={nextLink} rel="prefetch">Next</a>
+    <a class="pagination-link is-next" href={nextLink} rel="prefetch">Next
+      &rarr;</a>
   {/if}
 </div>

webapp/src/routes/submit.json.js

@@ -0,0 +1,12 @@
+import FormData from 'form-data';
+import fetch from 'isomorphic-fetch';
+
+const API_URL = process.env.API_URL || 'http://localhost:33842';
+
+export async function post(req, res) {
+	const data = new FormData();
+	data.append('url', req.body.url);
+	const response = await fetch(`${API_URL}/api/submit`, { method: "POST", body: data });
+	res.writeHead(response.status, { 'Content-Type': 'application/json' });
+	res.end(await response.text());
+}

webapp/src/routes/submit.svelte

@@ -0,0 +1,143 @@
+<script>
+  import { onMount } from "svelte";
+  import { goto, prefetch } from "@sapper/app";
+
+  let input;
+  let handleSubmit;
+  let hasError;
+  let isLoading;
+
+  onMount(() => {
+    setTimeout(() => {
+      input && input.focus();
+    }, 0);
+    handleSubmit = async () => {
+      isLoading = true;
+      hasError = false;
+      const url = input.value;
+      const response = await fetch(`submit.json`, {
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+        body: JSON.stringify({ url }),
+      });
+      if (!response.ok) {
+        hasError = true;
+        isLoading = false;
+        return;
+      }
+      const { nid } = await response.json();
+      await prefetch(`/${nid}`);
+      await goto(`/${nid}`);
+    };
+  });
+</script>
+
+<style>
+  section {
+    max-width: 45rem;
+    margin: 5rem auto 0;
+  }
+  form {
+    text-align: center;
+    width: 95%;
+    border: solid 1px #aaa;
+    margin: 3.5rem auto;
+    border-radius: 5px;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: row;
+  }
+
+  form:focus-within {
+    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
+  }
+
+  input {
+    width: 85%;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    margin: 0;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border: none;
+    border-radius: 0;
+    background: #fff;
+    vertical-align: middle;
+  }
+
+  form:has(input:focus) {
+    box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2);
+  }
+
+  button {
+    width: 15%;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    margin: 0;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border: none;
+    border-left: solid 1px #aaa;
+    border-radius: 0;
+    background: #f1f1f1;
+    vertical-align: middle;
+  }
+
+  .loading,
+  .is-loading form,
+  .is-loading .error {
+    display: none;
+  }
+
+  .is-loading .loading {
+    display: block;
+    margin: 3.5rem auto 0;
+  }
+
+  .error {
+    display: none;
+  }
+
+  .has-error .error {
+    box-sizing: border-box;
+    height: 3rem;
+    padding: 0;
+    margin: 0;
+    color: darkred;
+    display: block;
+  }
+  .has-error form {
+    margin-top: 5rem;
+  }
+</style>
+
+<svelte:head>
+  <title>QotNews</title>
+  <meta property="og:title" content="QotNews" />
+  <meta property="og:type" content="website" />
+  <link rel="preload" href="/loading.svg" as="image" />
+</svelte:head>
+
+<section class="{isLoading ? 'is-loading' : ''} {hasError ? 'has-error' : ''}">
+  <img
+    class="loading"
+    src="/loading.svg"
+    alt="loading..."
+    width="200"
+    height="200" />
+
+  <form on:submit|preventDefault={handleSubmit} autocomplete="off">
+    <input
+      type="text"
+      name="url"
+      placeholder="Enter article link"
+      pattern="^https?:\/\/(www\.)?.*"
+      value=""
+      bind:this={input}
+      required />
+    <button type="submit">Go</button>
+  </form>
+
+  <p class="error">Something went wrong.</p>
+</section>

webapp/src/server.js

@@ -2,12 +2,14 @@ import sirv from 'sirv';
 import polka from 'polka';
 import compression from 'compression';
 import * as sapper from '@sapper/server';
+import { json } from 'body-parser';
 
 const { PORT, NODE_ENV } = process.env;
 const dev = NODE_ENV === 'development';
 
 polka() // You can also use Express
 	.use(
+		json(),
 		compression({ threshold: 0 }),
 		sirv('static', { dev }),
 		sapper.middleware(),