style: config prettier
This commit is contained in:
parent
168bb36883
commit
9bb26c1279
|
|
@ -1,6 +1,10 @@
|
|||
{
|
||||
"useTabs": true,
|
||||
"useTabs": false,
|
||||
"endOfLine": "lf",
|
||||
"arrowParens": "always",
|
||||
"semi": true,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 120
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,110 +0,0 @@
|
|||
/* Write your global styles here, in PostCSS syntax */
|
||||
|
||||
@import '@fontsource/fira-mono';
|
||||
|
||||
:root {
|
||||
font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Mono', monospace;
|
||||
--pure-white: #ffffff;
|
||||
--primary-color: #b9c6d2;
|
||||
--secondary-color: #d0dde9;
|
||||
--tertiary-color: #edf0f8;
|
||||
--accent-color: #ff3e00;
|
||||
--heading-color: rgba(0, 0, 0, 0.7);
|
||||
--text-color: #444444;
|
||||
--background-without-opacity: rgba(255, 255, 255, 0.7);
|
||||
--column-width: 42rem;
|
||||
--column-margin-top: 4rem;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background-color: var(--primary-color);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--secondary-color) 10.45%,
|
||||
var(--tertiary-color) 41.35%
|
||||
);
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10vw;
|
||||
z-index: -1;
|
||||
background: radial-gradient(
|
||||
50% 50% at 50% 50%,
|
||||
var(--pure-white) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
#svelte {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
font-weight: 400;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0 0 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 16px;
|
||||
font-family: var(--font-mono);
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
|
||||
padding: 0.5em;
|
||||
overflow-x: auto;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ export function enhance(
|
|||
{
|
||||
pending,
|
||||
error,
|
||||
result
|
||||
result,
|
||||
}: {
|
||||
pending?: (data: FormData, form: HTMLFormElement) => void;
|
||||
error?: (res: Response, error: Error, form: HTMLFormElement) => void;
|
||||
|
|
@ -27,9 +27,9 @@ export function enhance(
|
|||
const res = await fetch(form.action, {
|
||||
method: form.method,
|
||||
headers: {
|
||||
accept: 'application/json'
|
||||
accept: 'application/json',
|
||||
},
|
||||
body
|
||||
body,
|
||||
});
|
||||
|
||||
if (token !== current_token) return;
|
||||
|
|
@ -55,6 +55,6 @@ export function enhance(
|
|||
return {
|
||||
destroy() {
|
||||
form.removeEventListener('submit', handle_submit);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,22 +22,22 @@
|
|||
<h1>About this app</h1>
|
||||
|
||||
<p>
|
||||
This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
|
||||
following into your command line and following the prompts:
|
||||
This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the following into your
|
||||
command line and following the prompts:
|
||||
</p>
|
||||
|
||||
<!-- TODO lose the @next! -->
|
||||
<pre>npm init svelte@next</pre>
|
||||
|
||||
<p>
|
||||
The page you're looking at is purely static HTML, with no client-side interactivity needed.
|
||||
Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
|
||||
the devtools network panel and reloading.
|
||||
The page you're looking at is purely static HTML, with no client-side interactivity needed. Because of that, we
|
||||
don't need to load any JavaScript. Try viewing the page's source, or opening the devtools network panel and
|
||||
reloading.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
|
||||
it with JavaScript disabled!
|
||||
The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using it with JavaScript
|
||||
disabled!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type { Locals } from '$lib/types';
|
|||
export const patch: RequestHandler<Locals, FormData> = async (request) => {
|
||||
return api(request, `todos/${request.locals.userid}/${request.params.uid}`, {
|
||||
text: request.body.get('text'),
|
||||
done: request.body.has('done') ? !!request.body.get('done') : undefined
|
||||
done: request.body.has('done') ? !!request.body.get('done') : undefined,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@ export async function api(request: Request<Locals>, resource: string, data?: {})
|
|||
const res = await fetch(`${base}/${resource}`, {
|
||||
method: request.method,
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
body: data && JSON.stringify(data)
|
||||
body: data && JSON.stringify(data),
|
||||
});
|
||||
|
||||
// if the request came from a <form> submission, the browser's default
|
||||
|
|
@ -36,13 +36,13 @@ export async function api(request: Request<Locals>, resource: string, data?: {})
|
|||
return {
|
||||
status: 303,
|
||||
headers: {
|
||||
location: '/todos'
|
||||
}
|
||||
location: '/todos',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status: res.status,
|
||||
body: await res.json()
|
||||
body: await res.json(),
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const post: RequestHandler<Locals, FormData> = async (request) => {
|
|||
// request.body is _also_ a (readonly) FormData
|
||||
// object, which allows us to get form data
|
||||
// with the `body.get(key)` method
|
||||
text: request.body.get('text')
|
||||
text: request.body.get('text'),
|
||||
});
|
||||
|
||||
return response;
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
const todos = await res.json();
|
||||
|
||||
return {
|
||||
props: { todos }
|
||||
props: { todos },
|
||||
};
|
||||
}
|
||||
|
||||
const { message } = await res.json();
|
||||
|
||||
return {
|
||||
error: new Error(message)
|
||||
error: new Error(message),
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
|
@ -62,19 +62,14 @@
|
|||
todos = [...todos, created];
|
||||
|
||||
form.reset();
|
||||
}
|
||||
},
|
||||
}}
|
||||
>
|
||||
<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
|
||||
</form>
|
||||
|
||||
{#each todos as todo (todo.uid)}
|
||||
<div
|
||||
class="todo"
|
||||
class:done={todo.done}
|
||||
transition:scale|local={{ start: 0.7 }}
|
||||
animate:flip={{ duration: 200 }}
|
||||
>
|
||||
<div class="todo" class:done={todo.done} transition:scale|local={{ start: 0.7 }} animate:flip={{ duration: 200 }}>
|
||||
<form
|
||||
action="/todos/{todo.uid}.json?_method=patch"
|
||||
method="post"
|
||||
|
|
@ -82,7 +77,7 @@
|
|||
pending: (data) => {
|
||||
todo.done = !!data.get('done');
|
||||
},
|
||||
result: patch
|
||||
result: patch,
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
|
||||
|
|
@ -94,7 +89,7 @@
|
|||
action="/todos/{todo.uid}.json?_method=patch"
|
||||
method="post"
|
||||
use:enhance={{
|
||||
result: patch
|
||||
result: patch,
|
||||
}}
|
||||
>
|
||||
<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
|
||||
|
|
@ -107,7 +102,7 @@
|
|||
use:enhance={{
|
||||
result: () => {
|
||||
todos = todos.filter((t) => t.uid !== todo.uid);
|
||||
}
|
||||
},
|
||||
}}
|
||||
>
|
||||
<button class="delete" aria-label="Delete todo" />
|
||||
|
|
|
|||
|
|
@ -17,13 +17,9 @@ const config = {
|
|||
// default options are shown
|
||||
pages: 'dist',
|
||||
assets: 'dist',
|
||||
fallback: '200.html'
|
||||
})
|
||||
}
|
||||
fallback: '200.html',
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
// Workaround until SvelteKit uses Vite 2.3.8 (and it's confirmed to fix the Tailwind JIT problem)
|
||||
const mode = process.env.NODE_ENV;
|
||||
const dev = mode === 'development';
|
||||
process.env.TAILWIND_MODE = dev ? 'watch' : 'build';
|
||||
|
|
|
|||
Loading…
Reference in New Issue