split/ava
1
0
Fork 0
Code Issues 4 Pull requests Actions Packages Projects 1 Releases Wiki Activity

Svelte 5 port

Browse source
This commit is contained in:
May 2024-11-19 18:40:03 -08:00
parent eb5b86556d
commit a1294b145f
Signed by: split
GPG key ID: C325C61F0BF517C0
6 changed files with 419 additions and 1628 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1931
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

16
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "ava-node", "name": "ava-node",
"version": "1.3.2", "version": "2.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
@ -13,23 +13,23 @@
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-node": "^5.2.0", "@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", "@types/node": "^20.14.10",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.2.6",
"prisma": "^5.16.2", "prisma": "^5.16.2",
"svelte": "^4.2.7", "svelte": "^5.0.0",
"svelte-check": "^3.6.0", "svelte-check": "^4.0.0",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.0.0", "typescript": "^5.5.0",
"vite": "^5.0.3" "vite": "^5.4.4"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fontsource-variable/inter": "^5.0.18", "@fontsource-variable/inter": "^5.0.18",
"@fontsource-variable/noto-sans-mono": "^5.0.20", "@fontsource-variable/noto-sans-mono": "^5.0.20",
"@prisma/client": "5.16.2", "@prisma/client": "5.16.2",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.5.27",
"mime": "^4.0.4", "mime": "^4.0.4",
"sharp": "^0.33.4" "sharp": "^0.33.4"
}, },

35
src/routes/+layout.svelte
View file

@ -3,7 +3,13 @@
import "@fontsource-variable/noto-sans-mono" import "@fontsource-variable/noto-sans-mono"
import ava from "../assets/ava_icon.svg?raw" import ava from "../assets/ava_icon.svg?raw"
import type { User } from "$lib/types"; 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__}` const buildName = `${__APP_NAME__} ${__APP_VERSION__}`
</script> </script>
@ -64,20 +70,17 @@
} }
</style> </style>
</svelte:head> </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> {@render children?.()}
<a href="/">{@html ava}</a>
<a href="/set">Set avatar</a>
{#if data.user}
<a href="/logout">Log out</a>
{/if}
</nav>
<slot />
<footer> <footer>
{import.meta.env.DEV ? "[DEV]" : ""} {import.meta.env.DEV ? "[DEV]" : ""}
{buildName} {buildName}
</footer> </footer>
</body>

6
src/routes/info/[identifier]/+page.svelte
View file

@ -1,12 +1,16 @@
<script lang="ts"> <script lang="ts">
import FilePreviewSet from "../../set/FilePreviewSet.svelte"; import FilePreviewSet from "../../set/FilePreviewSet.svelte";
export let data: { interface Props {
data: {
identifier: string, identifier: string,
name: string, name: string,
altText: string, altText: string,
source: string source: string
}; };
}
let { data }: Props = $props();
</script> </script>
<style> <style>

51
src/routes/set/+page.svelte
View file

@ -2,7 +2,8 @@
import type { User } from "$lib/types"; import type { User } from "$lib/types";
import FilePreviewSet from "./FilePreviewSet.svelte"; import FilePreviewSet from "./FilePreviewSet.svelte";
export let data: { export interface Props {
data: {
user: User, user: User,
url: string, url: string,
avatar: { avatar: {
@ -13,14 +14,13 @@
allowedImageTypes: string[], allowedImageTypes: string[],
renderSizes: number[] renderSizes: number[]
}; };
export let form: { success: true, message: string } | { success: false, error: string } | undefined; form: { success: true, message: string } | { success: false, error: string } | undefined;
let files: FileList; }
let fileSrc = `/avatar/${data.user.identifier}/`
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> </script>
<style> <style>
@ -82,24 +82,23 @@
</style> </style>
<h1>Hi, {data.user.name}</h1> <h1>Hi, {data.user.name}</h1>
<p> <details>
<details> <summary>View user information...</summary>
<summary>View user information...</summary> <div>
<div> <pre>{JSON.stringify(data.user, null, 4)}</pre>
<pre>{JSON.stringify(data.user, null, 4)}</pre> </div>
</div> </details>
</details> <details>
<details> <summary>Avatar URLs...</summary>
<summary>Avatar URLs...</summary> <div>
<div> <ul>
<ul> {#each ["", ...data.renderSizes] as variant}
{#each ["", ...data.renderSizes] as variant} <li>{new URL(`/avatar/${data.user.identifier}/${variant}`, data.url)}</li>
<li>{new URL(`/avatar/${data.user.identifier}/${variant}`, data.url)}</li> {/each}
{/each} </ul>
</ul> </div>
</div> </details>
</details> <br>
</p>
<form method="post" enctype="multipart/form-data"> <form method="post" enctype="multipart/form-data">
<input type="file" bind:files={files} accept={data.allowedImageTypes.join(",")} name="newAvatar"> <input type="file" bind:files={files} accept={data.allowedImageTypes.join(",")} name="newAvatar">
<div class="metadata"> <div class="metadata">

8
src/routes/set/FilePreviewSet.svelte
View file

@ -1,6 +1,10 @@
<script lang="ts"> <script lang="ts">
export let style: string = ""; export interface Props {
export let avatarUrl: string; style?: string;
avatarUrl: string;
}
let { style = "", avatarUrl }: Props = $props();
</script> </script>
<style> <style>
div { div {