Jason Schwarzenberger
3 years ago
@ -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()); |
||||
} |
||||
@ -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> |
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,21 @@ |
||||
The MIT License (MIT) |
||||
|
||||
Copyright (c) 2014 Sam Herbert |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 694 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |