forked from tanner/qotnews
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
2.8 KiB
147 lines
2.8 KiB
<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 |
|
action="submit.json" |
|
method="POST" |
|
on:submit|preventDefault={handleSubmit} |
|
autocomplete="off"> |
|
<input |
|
type="text" |
|
name="url" |
|
placeholder="Enter article link" |
|
pattern="^https?:\/\/(www\.)?.*" |
|
value="" |
|
bind:this={input} |
|
required /> |
|
<button value="true" name="redirect" type="submit">Go</button> |
|
</form> |
|
|
|
<p class="error">Something went wrong.</p> |
|
</section>
|
|
|