From 94b31717f09d384686c9313e5123c6b561c17e86 Mon Sep 17 00:00:00 2001
From: Reinaldy Rafli <aldy505@tutanota.com>
Date: Fri, 9 Jul 2021 23:43:26 +0700
Subject: [PATCH] chore(wip): work

---
 client/src/components/navbar.svelte   |   3 +
 client/src/hooks.ts                   |   1 +
 client/src/lib/Counter/index.svelte   |  98 ---------------------
 client/src/lib/Header/index.svelte    | 120 --------------------------
 client/src/lib/Header/svelte-logo.svg |   1 -
 client/src/lib/form.ts                |  60 -------------
 client/src/lib/types.d.ts             |   7 --
 client/src/locale.ts                  |   7 ++
 client/src/routes/__layout.svelte     |  74 ++++++++--------
 client/src/routes/api.svelte          |   4 +
 client/src/routes/guide.svelte        |   3 +
 client/src/routes/index.svelte        |  45 +---------
 12 files changed, 56 insertions(+), 367 deletions(-)
 create mode 100644 client/src/components/navbar.svelte
 delete mode 100644 client/src/lib/Counter/index.svelte
 delete mode 100644 client/src/lib/Header/index.svelte
 delete mode 100644 client/src/lib/Header/svelte-logo.svg
 delete mode 100644 client/src/lib/form.ts
 delete mode 100644 client/src/lib/types.d.ts
 create mode 100644 client/src/locale.ts
 create mode 100644 client/src/routes/api.svelte
 create mode 100644 client/src/routes/guide.svelte

diff --git a/client/src/components/navbar.svelte b/client/src/components/navbar.svelte
new file mode 100644
index 0000000..f1e4cb7
--- /dev/null
+++ b/client/src/components/navbar.svelte
@@ -0,0 +1,3 @@
+<nav class="flex flex-col md:flex-row">
+  <div class="flex-1">Home</div>
+</nav>
\ No newline at end of file
diff --git a/client/src/hooks.ts b/client/src/hooks.ts
index ae4039e..7140f07 100644
--- a/client/src/hooks.ts
+++ b/client/src/hooks.ts
@@ -1,3 +1,4 @@
+// TODO: Find out what the fuck this file is doing
 import cookie from 'cookie';
 import { v4 as uuid } from '@lukeed/uuid';
 import type { Handle } from '@sveltejs/kit';
diff --git a/client/src/lib/Counter/index.svelte b/client/src/lib/Counter/index.svelte
deleted file mode 100644
index ae70bc3..0000000
--- a/client/src/lib/Counter/index.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-  import { spring } from 'svelte/motion';
-
-  let count = 0;
-
-  const displayed_count = spring();
-  $: displayed_count.set(count);
-  $: offset = modulo($displayed_count, 1);
-
-  function modulo(n: number, m: number) {
-    // handle negative numbers
-    return ((n % m) + m) % m;
-  }
-</script>
-
-<div class="counter">
-  <button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-    <svg aria-hidden="true" viewBox="0 0 1 1">
-      <path d="M0,0.5 L1,0.5" />
-    </svg>
-  </button>
-
-  <div class="counter-viewport">
-    <div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-      <strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-      <strong>{Math.floor($displayed_count)}</strong>
-    </div>
-  </div>
-
-  <button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-    <svg aria-hidden="true" viewBox="0 0 1 1">
-      <path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-    </svg>
-  </button>
-</div>
-
-<style>
-  .counter {
-    display: flex;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    margin: 1rem 0;
-  }
-
-  .counter button {
-    width: 2em;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background-color: transparent;
-    color: var(--text-color);
-    font-size: 2rem;
-  }
-
-  .counter button:hover {
-    background-color: var(--secondary-color);
-  }
-
-  svg {
-    width: 25%;
-    height: 25%;
-  }
-
-  path {
-    vector-effect: non-scaling-stroke;
-    stroke-width: 2px;
-    stroke: var(--text-color);
-  }
-
-  .counter-viewport {
-    width: 8em;
-    height: 4em;
-    overflow: hidden;
-    text-align: center;
-    position: relative;
-  }
-
-  .counter-viewport strong {
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 100%;
-    font-weight: 400;
-    color: var(--accent-color);
-    font-size: 4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .counter-digits {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-</style>
diff --git a/client/src/lib/Header/index.svelte b/client/src/lib/Header/index.svelte
deleted file mode 100644
index b9b795b..0000000
--- a/client/src/lib/Header/index.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  import logo from './svelte-logo.svg';
-</script>
-
-<header>
-  <div class="corner">
-    <a href="https://kit.svelte.dev">
-      <img src={logo} alt="SvelteKit" />
-    </a>
-  </div>
-
-  <nav>
-    <svg viewBox="0 0 2 3" aria-hidden="true">
-      <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
-    </svg>
-    <ul>
-      <li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-      <li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
-      <li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
-    </ul>
-    <svg viewBox="0 0 2 3" aria-hidden="true">
-      <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
-    </svg>
-  </nav>
-
-  <div class="corner">
-    <!-- TODO put something else here? github link? -->
-  </div>
-</header>
-
-<style>
-  header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .corner {
-    width: 3em;
-    height: 3em;
-  }
-
-  .corner a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .corner img {
-    width: 2em;
-    height: 2em;
-    object-fit: contain;
-  }
-
-  nav {
-    display: flex;
-    justify-content: center;
-    --background: rgba(255, 255, 255, 0.7);
-  }
-
-  svg {
-    width: 2em;
-    height: 3em;
-    display: block;
-  }
-
-  path {
-    fill: var(--background);
-  }
-
-  ul {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    height: 3em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    list-style: none;
-    background: var(--background);
-    background-size: contain;
-  }
-
-  li {
-    position: relative;
-    height: 100%;
-  }
-
-  li.active::before {
-    --size: 6px;
-    content: '';
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: calc(50% - var(--size));
-    border: var(--size) solid transparent;
-    border-top: var(--size) solid var(--accent-color);
-  }
-
-  nav a {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 1em;
-    color: var(--heading-color);
-    font-weight: 700;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 10%;
-    text-decoration: none;
-    transition: color 0.2s linear;
-  }
-
-  a:hover {
-    color: var(--accent-color);
-  }
-</style>
diff --git a/client/src/lib/Header/svelte-logo.svg b/client/src/lib/Header/svelte-logo.svg
deleted file mode 100644
index 49492a8..0000000
--- a/client/src/lib/Header/svelte-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/client/src/lib/form.ts b/client/src/lib/form.ts
deleted file mode 100644
index abbc575..0000000
--- a/client/src/lib/form.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-// this action (https://svelte.dev/tutorial/actions) allows us to
-// progressively enhance a <form> that already works without JS
-export function enhance(
-  form: HTMLFormElement,
-  {
-    pending,
-    error,
-    result,
-  }: {
-    pending?: (data: FormData, form: HTMLFormElement) => void;
-    error?: (res: Response, error: Error, form: HTMLFormElement) => void;
-    result: (res: Response, form: HTMLFormElement) => void;
-  }
-) {
-  let current_token: Record<string, unknown>;
-
-  async function handle_submit(e: Event) {
-    const token = (current_token = {});
-
-    e.preventDefault();
-
-    const body = new FormData(form);
-
-    if (pending) pending(body, form);
-
-    try {
-      const res = await fetch(form.action, {
-        method: form.method,
-        headers: {
-          accept: 'application/json',
-        },
-        body,
-      });
-
-      if (token !== current_token) return;
-
-      if (res.ok) {
-        result(res, form);
-      } else if (error) {
-        error(res, null, form);
-      } else {
-        console.error(await res.text());
-      }
-    } catch (e) {
-      if (error) {
-        error(null, e, form);
-      } else {
-        throw e;
-      }
-    }
-  }
-
-  form.addEventListener('submit', handle_submit);
-
-  return {
-    destroy() {
-      form.removeEventListener('submit', handle_submit);
-    },
-  };
-}
diff --git a/client/src/lib/types.d.ts b/client/src/lib/types.d.ts
deleted file mode 100644
index 7798432..0000000
--- a/client/src/lib/types.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Can be made globally available by placing this
- * inside `global.d.ts` and removing `export` keyword
- */
-export interface Locals {
-  userid: string;
-}
diff --git a/client/src/locale.ts b/client/src/locale.ts
new file mode 100644
index 0000000..5b28346
--- /dev/null
+++ b/client/src/locale.ts
@@ -0,0 +1,7 @@
+/**
+ * TODO: Check user locale, then determines whether they should go to english route or indonesian route.
+ */
+
+const getLanguage = () => navigator?.languages[0] || navigator?.language || 'en';
+
+export {}
\ No newline at end of file
diff --git a/client/src/routes/__layout.svelte b/client/src/routes/__layout.svelte
index 07e321b..ecc0830 100644
--- a/client/src/routes/__layout.svelte
+++ b/client/src/routes/__layout.svelte
@@ -1,46 +1,46 @@
 <script lang="ts">
-  import Header from '$lib/Header/index.svelte';
-  import '../app.postcss';
+  import Navbar from '../components/navbar.svelte';
 </script>
 
-<Header>
-  <main>
-    <slot />
-  </main>
+<header>
+  <Navbar />
+</header>
+<main>
+  <slot />
+</main>
 
-  <footer>
-    <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
-  </footer>
+<footer>
+  <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+</footer>
 
-  <style windi:preflights:global windi:safelist:global>
-    main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      padding: 1rem;
-      width: 100%;
-      max-width: 1024px;
-      margin: 0 auto;
-      box-sizing: border-box;
-    }
+<style windi:preflights:global windi:safelist:global>
+  main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    width: 100%;
+    max-width: 1024px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
 
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+  }
+
+  footer a {
+    font-weight: bold;
+  }
+
+  @media (min-width: 480px) {
     footer {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      padding: 40px;
+      padding: 40px 0;
     }
-
-    footer a {
-      font-weight: bold;
-    }
-
-    @media (min-width: 480px) {
-      footer {
-        padding: 40px 0;
-      }
-    }
-  </style>
-</Header>
+  }
+</style>
 <slot />
diff --git a/client/src/routes/api.svelte b/client/src/routes/api.svelte
new file mode 100644
index 0000000..cda8e7c
--- /dev/null
+++ b/client/src/routes/api.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+  // TODO: Move to specific locale
+  // This page is meant to explain available API endpoints.
+</script>
\ No newline at end of file
diff --git a/client/src/routes/guide.svelte b/client/src/routes/guide.svelte
new file mode 100644
index 0000000..ee9a011
--- /dev/null
+++ b/client/src/routes/guide.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+  // TODO: Move to specific locale, turns the page for guide (per language if I could)
+</script>
\ No newline at end of file
diff --git a/client/src/routes/index.svelte b/client/src/routes/index.svelte
index c2cbbe4..3f327f9 100644
--- a/client/src/routes/index.svelte
+++ b/client/src/routes/index.svelte
@@ -3,57 +3,14 @@
 </script>
 
 <script lang="ts">
-  import Counter from '$lib/Counter/index.svelte';
 </script>
 
 <svelte:head>
   <title>Home</title>
 </svelte:head>
 
-<section>
-  <h1>
-    <div class="welcome">
-      <picture>
-        <source srcset="svelte-welcome.webp" type="image/webp" />
-        <img src="svelte-welcome.png" alt="Welcome" />
-      </picture>
-    </div>
-
-    to your new<br />SvelteKit app
-  </h1>
-
-  <h2>
-    try editing <strong>src/routes/index.svelte</strong>
-  </h2>
-
-  <Counter />
+<section class="">
 </section>
 
 <style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-
-  h1 {
-    width: 100%;
-  }
-
-  .welcome {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding: 0 0 calc(100% * 495 / 2048) 0;
-  }
-
-  .welcome img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: block;
-  }
 </style>