style: config prettier

client/.prettierrc

@@ -1,6 +1,10 @@
 {
-	"useTabs": true,
+	"useTabs": false,
+	"endOfLine": "lf",
+	"arrowParens": "always",
+	"semi": true,
+	"tabWidth": 2,
 	"singleQuote": true,
-	"trailingComma": "none",
+	"trailingComma": "es5",
-	"printWidth": 100
+	"printWidth": 120
 }

client/src/app.postcss

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

client/src/lib/form.ts

@@ -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);
-		}
+    },
   };
 }

client/src/routes/about.svelte

@@ -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
+    This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the following into your
-		following into your command line and following the prompts:
+    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.
+    The page you're looking at is purely static HTML, with no client-side interactivity needed. Because of that, we
-		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+    don't need to load any JavaScript. Try viewing the page's source, or opening the devtools network panel and
-		the devtools network panel and reloading.
+    reloading.
   </p>
 
   <p>
-		The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
+    The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using it with JavaScript
-		it with JavaScript disabled!
+    disabled!
   </p>
 </div>
 

client/src/routes/todos/[uid].json.ts

@@ -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,
   });
 };
 

client/src/routes/todos/_api.ts

@@ -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(),
   };
 }

client/src/routes/todos/index.json.ts

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

client/src/routes/todos/index.svelte

@@ -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
+    <div class="todo" class:done={todo.done} transition:scale|local={{ start: 0.7 }} animate:flip={{ duration: 200 }}>
-			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" />

client/svelte.config.js

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