add frontend skeleton

This commit is contained in:
sam 2024-03-26 22:10:04 +01:00
parent 0c52ebb7bc
commit a80f89d038
23 changed files with 2110 additions and 3 deletions

13
frontend/src/app.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
frontend/src/app.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View file

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

View file

@ -0,0 +1,63 @@
export type FetchOptions = {
fetchFn?: typeof fetch;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data?: any;
version?: number;
extraHeaders?: Record<string, string>;
};
/**
* Fetch a path from the API and parse the response.
* To make sure the request is authenticated in load functions,
* pass `fetch` from the request object into opts.
*
* @param method The HTTP method, i.e. GET, POST, PATCH
* @param path The path to request, minus the leading `/api/v2`
* @param opts Extra options for this request
* @returns T
* @throws APIError
*/
export default async function request<T>(
method: string,
path: string,
opts: FetchOptions = {},
): Promise<T> {
const { data, version, extraHeaders } = opts;
const fetchFn = opts.fetchFn ?? fetch;
const resp = await fetchFn(`/api/v${version ?? 2}${path}`, {
method,
body: data ? JSON.stringify(data) : undefined,
headers: { ...extraHeaders, "Content-Type": "application/json" },
});
if (resp.status < 200 || resp.status >= 400) throw await resp.json();
return (await resp.json()) as T;
}
/**
* Fetch a path from the API and discard the response.
* To make sure the request is authenticated in load functions,
* pass `fetch` from the request object into opts.
*
* @param method The HTTP method, i.e. GET, POST, PATCH
* @param path The path to request, minus the leading `/api/v2`
* @param opts Extra options for this request
* @throws APIError
*/
export async function fastRequest(
method: string,
path: string,
opts: FetchOptions = {},
): Promise<void> {
const { data, version, extraHeaders } = opts;
const fetchFn = opts.fetchFn ?? fetch;
const resp = await fetchFn(`/api/v2${version ?? 2}${path}`, {
method,
body: data ? JSON.stringify(data) : undefined,
headers: { ...extraHeaders, "Content-Type": "application/json" },
});
if (resp.status < 200 || resp.status >= 400) throw await resp.json();
}

View file

@ -0,0 +1,12 @@
import request from "$lib/request";
export async function load({ fetch, cookies }) {
const meta = await request("GET", "/meta", { fetchFn: fetch });
let user;
if (cookies.get("pronounscc-token")) {
user = await request("GET", "/users/@me", { fetchFn: fetch });
}
return { meta, user };
}

View file

@ -0,0 +1,11 @@
<script lang="ts">
import "bootstrap/scss/bootstrap.scss";
import "bootstrap-icons/font/bootstrap-icons.scss";
import type { LayoutData } from "./$types";
export let data: LayoutData
</script>
{JSON.stringify(data.meta)}
<slot />

View file

@ -0,0 +1,2 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>