Svelte 5 port
This commit is contained in:
parent
eb5b86556d
commit
a1294b145f
GPG key ID:
C325C61F0BF517C0
1931
package-lock.json
generated
1931
package-lock.json
generated
File diff suppressed because it is too large
Load diff
16
package.json
16
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ava-node",
|
||||
"version": "1.3.2",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
|
@ -13,23 +13,23 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-node": "^5.2.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@types/node": "^20.14.10",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"prettier-plugin-svelte": "^3.2.6",
|
||||
"prisma": "^5.16.2",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3"
|
||||
"typescript": "^5.5.0",
|
||||
"vite": "^5.4.4"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource-variable/inter": "^5.0.18",
|
||||
"@fontsource-variable/noto-sans-mono": "^5.0.20",
|
||||
"@prisma/client": "5.16.2",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/kit": "^2.5.27",
|
||||
"mime": "^4.0.4",
|
||||
"sharp": "^0.33.4"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,13 @@
|
|||
import "@fontsource-variable/noto-sans-mono"
|
||||
import ava from "../assets/ava_icon.svg?raw"
|
||||
import type { User } from "$lib/types";
|
||||
export let data: { user?: User };
|
||||
import type { Snippet } from "svelte";
|
||||
interface Props {
|
||||
data: { user?: User };
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { data, children }: Props = $props();
|
||||
|
||||
const buildName = `${__APP_NAME__} ${__APP_VERSION__}`
|
||||
</script>
|
||||
|
|
@ -64,20 +70,17 @@
|
|||
}
|
||||
</style>
|
||||
</svelte:head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/">{@html ava}</a>
|
||||
<a href="/set">Set avatar</a>
|
||||
{#if data.user}
|
||||
<a href="/logout">Log out</a>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<nav>
|
||||
<a href="/">{@html ava}</a>
|
||||
<a href="/set">Set avatar</a>
|
||||
{#if data.user}
|
||||
<a href="/logout">Log out</a>
|
||||
{/if}
|
||||
</nav>
|
||||
{@render children?.()}
|
||||
|
||||
<slot />
|
||||
|
||||
<footer>
|
||||
{import.meta.env.DEV ? "[DEV]" : ""}
|
||||
{buildName}
|
||||
</footer>
|
||||
</body>
|
||||
<footer>
|
||||
{import.meta.env.DEV ? "[DEV]" : ""}
|
||||
{buildName}
|
||||
</footer>
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
<script lang="ts">
|
||||
import FilePreviewSet from "../../set/FilePreviewSet.svelte";
|
||||
|
||||
export let data: {
|
||||
interface Props {
|
||||
data: {
|
||||
identifier: string,
|
||||
name: string,
|
||||
altText: string,
|
||||
source: string
|
||||
};
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
import type { User } from "$lib/types";
|
||||
import FilePreviewSet from "./FilePreviewSet.svelte";
|
||||
|
||||
export let data: {
|
||||
export interface Props {
|
||||
data: {
|
||||
user: User,
|
||||
url: string,
|
||||
avatar: {
|
||||
|
|
@ -13,14 +14,13 @@
|
|||
allowedImageTypes: string[],
|
||||
renderSizes: number[]
|
||||
};
|
||||
export let form: { success: true, message: string } | { success: false, error: string } | undefined;
|
||||
let files: FileList;
|
||||
let fileSrc = `/avatar/${data.user.identifier}/`
|
||||
form: { success: true, message: string } | { success: false, error: string } | undefined;
|
||||
}
|
||||
|
||||
let { data = $bindable(), form }: Props = $props();
|
||||
let files: FileList | undefined = $state();
|
||||
let fileSrc = $derived(files && files.length >= 0 ? URL.createObjectURL(files.item(0)!) : `/avatar/${data.user.identifier}/`)
|
||||
|
||||
$: if (files && files.length >= 0) {
|
||||
data.avatar.altText = "", data.avatar.source = "", data.avatar.default = false
|
||||
fileSrc = URL.createObjectURL(files.item(0)!)
|
||||
} else fileSrc = `/avatar/${data.user.identifier}/`
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -82,24 +82,23 @@
|
|||
</style>
|
||||
|
||||
<h1>Hi, {data.user.name}</h1>
|
||||
<p>
|
||||
<details>
|
||||
<summary>View user information...</summary>
|
||||
<div>
|
||||
<pre>{JSON.stringify(data.user, null, 4)}</pre>
|
||||
</div>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Avatar URLs...</summary>
|
||||
<div>
|
||||
<ul>
|
||||
{#each ["", ...data.renderSizes] as variant}
|
||||
<li>{new URL(`/avatar/${data.user.identifier}/${variant}`, data.url)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</p>
|
||||
<details>
|
||||
<summary>View user information...</summary>
|
||||
<div>
|
||||
<pre>{JSON.stringify(data.user, null, 4)}</pre>
|
||||
</div>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Avatar URLs...</summary>
|
||||
<div>
|
||||
<ul>
|
||||
{#each ["", ...data.renderSizes] as variant}
|
||||
<li>{new URL(`/avatar/${data.user.identifier}/${variant}`, data.url)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<br>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input type="file" bind:files={files} accept={data.allowedImageTypes.join(",")} name="newAvatar">
|
||||
<div class="metadata">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<script lang="ts">
|
||||
export let style: string = "";
|
||||
export let avatarUrl: string;
|
||||
export interface Props {
|
||||
style?: string;
|
||||
avatarUrl: string;
|
||||
}
|
||||
|
||||
let { style = "", avatarUrl }: Props = $props();
|
||||
</script>
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
Loading…
Reference in a new issue