switch to another frontend framework wheeeeeeeeeeee

This commit is contained in:
sam 2024-09-05 22:29:12 +02:00
parent fa3c1ccaa7
commit c4adf6918c
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
58 changed files with 6246 additions and 1703 deletions

View file

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

View file

@ -1,19 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
let theme = localStorage.getItem("pronounscc-theme");
if (!theme)
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.setAttribute("data-theme", theme);
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View file

@ -1,8 +0,0 @@
@use "bulma/sass" with (
$family-primary: "FiraGO"
);
@import "@fontsource/firago/400.css";
@import "@fontsource/firago/400-italic.css";
@import "@fontsource/firago/700.css";
@import "bootstrap-icons/font/bootstrap-icons.css";

View file

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Internal error occurred</title>
<style>
body {
font-size: 1.2em;
font-family: sans-serif;
margin: 40px auto;
max-width: 650px;
background-color: #ffffff;
color: #212529;
}
h1,
h2,
h3 {
line-height: 1.2;
}
a:link,
a:visited {
color: #0d6efd;
}
.logo {
text-align: center;
}
.info {
color: rgba(33, 37, 41, 0.75);
font-size: 0.8em;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #212529;
color: #adb5bd;
}
a:link,
a:visited {
color: #6ea8fe;
}
.info {
color: rgba(173, 181, 189, 0.75);
}
}
</style>
</head>
<body>
<div>
<p class="logo">
<img src="/logo.svg" alt="pronouns.cc logo" width="50%" />
</p>
<h1>Internal error occurred</h1>
<p>An internal error has occurred. Don't worry, it's (probably) not your fault.</p>
<p>
If this is the first time this is happening, try reloading the page. Otherwise, check the
<a href="https://status.pronouns.cc/" target="_blank">status page</a> for updates.
</p>
</div>
<p class="info">
<strong>Status:</strong> %sveltekit.status%<br />
<strong>Error message:</strong> %sveltekit.error.message%
</p>
</body>
</html>

View file

@ -1,15 +0,0 @@
import { PRIVATE_API_BASE } from "$env/static/private";
import { PUBLIC_API_BASE } from "$env/static/public";
export async function handle({ event, resolve }) {
event.locals.token = event.cookies.get("pronounscc-token");
return await resolve(event);
}
export function handleFetch({ event, request, fetch }) {
if (request.url.startsWith(PUBLIC_API_BASE))
request = new Request(request.url.replace(PUBLIC_API_BASE, PRIVATE_API_BASE), request);
if (event.locals.token) request.headers.set("Authorization", event.locals.token);
return fetch(request);
}

View file

@ -1,18 +0,0 @@
import type { User } from "./user";
export type CallbackRequest = {
code: string;
state: string;
};
export type CallbackResponse = {
has_account: boolean;
ticket: string;
remote_username: string | null;
};
export type AuthResponse = {
user: User;
token: string;
expires_at: string;
};

View file

@ -1,11 +0,0 @@
export default interface Meta {
version: string;
hash: string;
users: {
total: number;
active_month: number;
active_week: number;
active_day: number;
};
members: number;
}

View file

@ -1,9 +0,0 @@
export type User = {
id: string;
username: string;
display_name: string | null;
bio: string | null;
member_title: string | null;
avatar_url: string | null;
links: string[];
};

View file

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

View file

@ -1,11 +0,0 @@
<script lang="ts">
let isOpen = false;
export let right = false;
</script>
<div class={"navbar-item has-dropdown" + (isOpen ? " is-active" : "") + (right ? " is-right" : "")}>
<button class="navbar-link" on:click={() => (isOpen = !isOpen)}><slot name="label" /></button>
<div class="navbar-dropdown">
<slot />
</div>
</div>

View file

@ -1,10 +0,0 @@
<script lang="ts">
export let divider = false;
export let href: string | undefined = undefined;
</script>
{#if divider}
<hr class="navbar-divider" />
{:else}
<a {href} class="navbar-item"><slot /></a>
{/if}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.9 KiB

View file

@ -1,66 +0,0 @@
<script lang="ts">
import { IconSun, IconMoon } from "@tabler/icons-svelte";
import { onMount } from "svelte";
import Dropdown from "./Dropdown.svelte";
import DropdownItem from "./DropdownItem.svelte";
import Logo from "./Logo.svelte";
import type { User } from "$lib/api/user";
import { themeStore } from "$lib/store";
export let user: User | undefined;
let navIsOpen = false;
onMount(() => {
let theme = localStorage.getItem("pronounscc-theme");
if (!theme)
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
themeStore.set(theme);
});
const toggleTheme = () => {
themeStore.set($themeStore === "dark" ? "light" : "dark");
document.documentElement.setAttribute("data-theme", $themeStore);
localStorage.setItem("pronounscc-theme", $themeStore);
};
</script>
<nav class="navbar" aria-label="Main navigation">
<div class="navbar-brand">
<a href="/" class="navbar-item">
<Logo />
</a>
<button
class={"navbar-burger" + (navIsOpen ? " is-active" : "")}
aria-label="menu"
aria-expanded="false"
on:click={() => (navIsOpen = !navIsOpen)}
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class={"navbar-menu" + (navIsOpen ? " is-active" : "")}>
<div class="navbar-end">
{#if user}
<Dropdown>
<span slot="label">@{user.username}</span>
<DropdownItem href="/@{user.username}">View profile</DropdownItem>
<DropdownItem href="/settings">Settings</DropdownItem>
<DropdownItem divider />
<DropdownItem href="/auth/logout">Log out</DropdownItem>
</Dropdown>
{:else}
<a href="/auth/login" class="navbar-item">Log in or sign up</a>
{/if}
<button class="navbar-item" on:click={() => toggleTheme()}>
{#if $themeStore === "dark"}
<IconSun size={20} />&nbsp;Light theme
{:else}
<IconMoon size={20} />&nbsp;Dark theme
{/if}
</button>
</div>
</div>
</nav>

View file

@ -1,72 +0,0 @@
import { PUBLIC_API_BASE } from "$env/static/public";
export type RequestParams = {
token?: string;
body?: any;
headers?: 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 fetchFn A function like `fetch`, such as from the `load` function
* @param method The HTTP method, i.e. GET, POST, PATCH
* @param path The path to request, minus the leading `/api/v2`
* @param params Extra options for this request
* @returns T
* @throws APIError
*/
export default async function request<T>(
fetchFn: typeof fetch,
method: string,
path: string,
params: RequestParams = {},
) {
const url = `${PUBLIC_API_BASE}/v2${path}`;
const resp = await fetchFn(url, {
method,
body: params.body ? JSON.stringify(params.body) : undefined,
headers: {
...params.headers,
...(params.token ? { Authorization: params.token } : {}),
"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 fetchFn A function like `fetch`, such as from the `load` function
* @param method The HTTP method, i.e. GET, POST, PATCH
* @param path The path to request, minus the leading `/api/v2`
* @param params Extra options for this request
* @returns T
* @throws APIError
*/
export async function fastRequest(
fetchFn: typeof fetch,
method: string,
path: string,
params: RequestParams = {},
): Promise<void> {
const url = `${PUBLIC_API_BASE}/v2${path}`;
const resp = await fetchFn(url, {
method,
body: params.body ? JSON.stringify(params.body) : undefined,
headers: {
...params.headers,
...(params.token ? { Authorization: params.token } : {}),
"Content-Type": "application/json",
},
});
if (resp.status < 200 || resp.status >= 400) throw await resp.json();
}

View file

@ -1,9 +0,0 @@
import { writable } from "svelte/store";
import { browser } from "$app/environment";
const defaultThemeValue = "light";
const initialThemeValue = browser
? window.localStorage.getItem("pronouns-theme") ?? defaultThemeValue
: defaultThemeValue;
export const themeStore = writable<string>(initialThemeValue);

View file

@ -1,14 +0,0 @@
<script lang="ts">
import { page } from "$app/stores";
import neofox from "./neofox_confused_2048.png";
</script>
{#if $page.status === 404}
<div class="has-text-centered">
<img src={neofox} alt="A very confused-looking fox" width="25%" />
<h1 class="title">Not found</h1>
<p>Our foxes can't find the page you're looking for, sorry!</p>
</div>
{:else}
div.has-text-centered
{/if}

View file

@ -1,13 +0,0 @@
import type Meta from "$lib/api/meta";
import type { User } from "$lib/api/user";
import request from "$lib/request";
export async function load({ fetch, locals }) {
const meta = await request<Meta>(fetch, "GET", "/meta");
let user: User | undefined;
try {
user = await request<User>(fetch, "GET", "/users/@me");
} catch {}
return { meta, currentUser: user, token: locals.token };
}

View file

@ -1,10 +0,0 @@
<script lang="ts">
import type { LayoutData } from "./$types";
import "../app.scss";
import Navbar from "$lib/nav/Navbar.svelte";
export let data: LayoutData;
</script>
<Navbar user={data.currentUser} />
<slot />

View file

@ -1,24 +0,0 @@
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>
<svelte:head>
<title>pronouns.cc</title>
</svelte:head>
<h1 class="title">Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<p>
are you logged in? {data.currentUser !== undefined}
{#if data.currentUser}
<br />hello, {data.currentUser.username}!
<br />your ID: {data.currentUser.id}
{/if}
</p>
<p>
<strong>stats:</strong>
{data.meta.users.total} users, {data.meta.members} members
</p>

View file

@ -1,12 +0,0 @@
import { error } from "@sveltejs/kit";
import type { User } from "$lib/api/user";
import request from "$lib/request";
export const load = async ({ params, fetch }) => {
try {
const user = await request<User>(fetch, "GET", `/users/${params.username}`);
return { user };
} catch {
error(404, { message: "User not found" });
}
};

View file

@ -1,10 +0,0 @@
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>
<svelte:head>
<title>@{data.user.username} • pronouns.cc</title>
</svelte:head>
<h1>this is the user page for @{data.user.username}</h1>

View file

@ -1,12 +0,0 @@
import request from "$lib/request.js";
type UrlsResponse = {
discord: string | null;
google: string | null;
tumblr: string | null;
};
export const load = async ({ fetch }) => {
const urls = await request<UrlsResponse>(fetch, "POST", "/auth/urls");
return { urls };
};

View file

@ -1,53 +0,0 @@
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
$: hasUrls = !!(data.urls.discord || data.urls.google || data.urls.tumblr);
</script>
<div class="container mt-6">
<div class="fixed-grid has-1-cols has-2-cols-desktop">
<div class="grid">
<div class="cell">
<p class="title">Log in with email address</p>
<form method="POST" action="?/login">
<div class="field">
<label for="email" class="label">Email address</label>
<div class="control">
<input type="email" id="email" class="input" placeholder="Email address" />
</div>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input type="password" id="password" class="input" placeholder="Password" />
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Log in</button>
</div>
<div class="control">
<a href="/auth/signup" class="button">Sign up</a>
</div>
</div>
</form>
</div>
{#if hasUrls}
<div class="cell">
<p class="title">Log in with third-party provider</p>
<ul>
{#if data.urls.discord}
<li><a href={data.urls.discord}>Log in with Discord</a></li>
{/if}
{#if data.urls.google}
<li><a href={data.urls.google}>Log in with Google</a></li>
{/if}
{#if data.urls.tumblr}
<li><a href={data.urls.tumblr}>Log in with Tumblr</a></li>
{/if}
</ul>
</div>
{/if}
</div>
</div>
</div>

View file

@ -1,51 +0,0 @@
import request from "$lib/request";
import type { AuthResponse, CallbackResponse } from "$lib/api/auth";
export const load = async ({ fetch, url, cookies, parent }) => {
const data = await parent();
if (data.user) {
return { loggedIn: true, token: data.token, user: data.user };
}
const resp = await request<AuthResponse | CallbackResponse>(
fetch,
"POST",
"/auth/discord/callback",
{
body: {
code: url.searchParams.get("code"),
state: url.searchParams.get("state"),
},
},
);
if ("token" in resp) {
const authResp = resp as AuthResponse;
cookies.set("pronounscc-token", authResp.token, { path: "/" });
return { loggedIn: true, token: authResp.token, user: authResp.user };
}
const callbackResp = resp as CallbackResponse;
return {
loggedIn: false,
hasAccount: callbackResp.has_account,
ticket: resp.ticket,
remoteUsername: resp.remote_username,
};
};
export const actions = {
register: async ({ cookies, request: req, fetch, locals }) => {
const data = await req.formData();
const username = data.get("username");
const ticket = data.get("ticket");
const resp = await request<AuthResponse>(fetch, "POST", "/auth/discord/register", {
body: { username, ticket },
});
cookies.set("pronounscc-token", resp.token, { path: "/" });
locals.token = resp.token;
return { token: resp.token, user: resp.user };
},
};

View file

@ -1,79 +0,0 @@
<script lang="ts">
import { onMount } from "svelte";
import { goto } from "$app/navigation";
import { enhance } from "$app/forms";
import type { PageData, ActionData } from "./$types";
export let data: PageData;
export let form: ActionData;
onMount(async () => {
if (data.user) {
await new Promise((r) => setTimeout(r, 3000));
await goto(`/@${data.user.username}`);
}
});
const redirectOnForm = async (action: ActionData) => {
if (form?.user) {
await new Promise((r) => setTimeout(r, 3000));
await goto(`/@${form.user.username}`);
}
};
$: redirectOnForm(form);
</script>
<div class="container">
{#if form?.user}
<h1 class="title">Successfully created account!</h1>
<p>Welcome, <strong>@{form.user.username}</strong>!</p>
<p>
You should automatically be redirected to your profile in a few seconds. If you're not
redirected, please press the link above.
</p>
{:else if data.loggedIn}
<h1 class="title">Successfully logged in!</h1>
<p>You are now logged in as <a href="/@{data.user?.username}">@{data.user?.username}</a>.</p>
<p>
You should automatically be redirected to your profile in a few seconds. If you're not
redirected, please press the link above.
</p>
{:else}
<h1 class="title">Finish signing up with a Discord account</h1>
<form method="POST" action="?/register" use:enhance>
<div class="field">
<label for="remote_username" class="label">Discord username</label>
<div class="control">
<input
type="text"
name="remote_username"
id="remote_username"
class="input"
value={data.remoteUsername}
disabled
/>
</div>
</div>
<div class="field">
<label for="username" class="label">Username</label>
<div class="control">
<input type="text" name="username" id="username" class="input" placeholder="Username" />
</div>
</div>
<input
type="text"
name="ticket"
id="ticket"
class="hidden"
style="display: hidden;"
value={data.ticket}
/>
<div class="field">
<div class="control">
<button class="button is-primary">Sign up</button>
</div>
</div>
</form>
{/if}
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 143 KiB