chore(wip): work
This commit is contained in:
parent
ac3b5be635
commit
94b31717f0
|
|
@ -0,0 +1,3 @@
|
||||||
|
<nav class="flex flex-col md:flex-row">
|
||||||
|
<div class="flex-1">Home</div>
|
||||||
|
</nav>
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
// TODO: Find out what the fuck this file is doing
|
||||||
import cookie from 'cookie';
|
import cookie from 'cookie';
|
||||||
import { v4 as uuid } from '@lukeed/uuid';
|
import { v4 as uuid } from '@lukeed/uuid';
|
||||||
import type { Handle } from '@sveltejs/kit';
|
import type { Handle } from '@sveltejs/kit';
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -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);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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 {}
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Header from '$lib/Header/index.svelte';
|
import Navbar from '../components/navbar.svelte';
|
||||||
import '../app.postcss';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Header>
|
<header>
|
||||||
|
<Navbar />
|
||||||
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -42,5 +43,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</Header>
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<script lang="ts">
|
||||||
|
// TODO: Move to specific locale
|
||||||
|
// This page is meant to explain available API endpoints.
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script lang="ts">
|
||||||
|
// TODO: Move to specific locale, turns the page for guide (per language if I could)
|
||||||
|
</script>
|
||||||
|
|
@ -3,57 +3,14 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Counter from '$lib/Counter/index.svelte';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Home</title>
|
<title>Home</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section>
|
<section class="">
|
||||||
<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>
|
</section>
|
||||||
|
|
||||||
<style>
|
<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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue