@ -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 |