build: upgrade all dependencies

Before making any changes to the logic of the code I've updated all
dependencies and adjusted the configurations according to the migration
documentation. I ensured that I can still run the npm scripts like
before.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2023-12-20 23:10:18 +01:00
parent 723c6127da
commit aea63c0b4b
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
18 changed files with 1710 additions and 796 deletions

View file

@ -1,20 +1,25 @@
module.exports = { module.exports = {
root: true, root: true,
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], extends: [
plugins: ['svelte3', '@typescript-eslint'], 'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:svelte/recommended'
],
plugins: ['@typescript-eslint'],
ignorePatterns: ['*.cjs'], ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], overrides: [{ files: ['*.svelte'], parser: 'svelte-eslint-parser' }],
settings: { settings: {
'svelte3/typescript': () => require('typescript') 'svelte3/typescript': () => require('typescript')
}, },
parserOptions: { parserOptions: {
sourceType: 'module', sourceType: 'module',
ecmaVersion: 2020 ecmaVersion: 2023
}, },
env: { env: {
browser: true, browser: true,
es2017: true, es2023: true,
node: true node: true
} }
}; };

View file

@ -4,6 +4,5 @@
"trailingComma": "none", "trailingComma": "none",
"printWidth": 100, "printWidth": 100,
"plugins": ["prettier-plugin-svelte"], "plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
} }

View file

@ -1,7 +1,5 @@
{ {
"prettier.documentSelectors": [ "prettier.documentSelectors": ["**/*.svelte"],
"**/*.svelte"
],
"tailwindCSS.classAttributes": [ "tailwindCSS.classAttributes": [
"class", "class",
"accent", "accent",
@ -96,4 +94,4 @@
"track", "track",
"width" "width"
] ]
} }

2333
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,6 +1,6 @@
{ {
"name": "anvil", "name": "anvil",
"version": "0.0.1", "version": "0.0.2",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
@ -10,33 +10,36 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:unit": "vitest", "test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check . && eslint .", "lint": "prettier --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.28.1", "@playwright/test": "1.40.1",
"@skeletonlabs/skeleton": "^1.2.5", "@skeletonlabs/skeleton": "2.6.1",
"@sveltejs/adapter-auto": "^2.0.0", "@skeletonlabs/tw-plugin": "0.3.0",
"@sveltejs/kit": "^1.5.0", "@sveltejs/adapter-auto": "3.0.1",
"@tailwindcss/forms": "^0.5.3", "@sveltejs/kit": "2.0.4",
"@tailwindcss/typography": "^0.5.9", "@sveltejs/vite-plugin-svelte": "3.0.1",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@tailwindcss/forms": "0.5.7",
"@typescript-eslint/parser": "^5.45.0", "@tailwindcss/typography": "0.5.10",
"autoprefixer": "^10.4.14", "@types/node": "20.10.5",
"eslint": "^8.28.0", "@typescript-eslint/eslint-plugin": "6.15.0",
"eslint-config-prettier": "^8.5.0", "@typescript-eslint/parser": "6.15.0",
"eslint-plugin-svelte3": "^4.0.0", "autoprefixer": "10.4.16",
"postcss": "^8.4.23", "eslint": "8.56.0",
"prettier": "^2.8.0", "eslint-config-prettier": "9.1.0",
"prettier-plugin-svelte": "^2.8.1", "eslint-plugin-svelte": "2.35.1",
"svelte": "^3.54.0", "postcss": "8.4.32",
"svelte-check": "^3.0.1", "prettier": "3.1.1",
"svelte-octicons": "^18.3.0", "prettier-plugin-svelte": "3.1.2",
"tailwindcss": "^3.3.2", "svelte": "4.2.8",
"tslib": "^2.4.1", "svelte-check": "3.6.2",
"typescript": "^5.0.0", "svelte-octicons": "18.6.0",
"vite": "^4.3.0", "tailwindcss": "3.4.0",
"vitest": "^0.25.3" "tslib": "2.6.2",
"typescript": "5.3.3",
"vite": "5.0.10",
"vitest": "1.1.0"
}, },
"type": "module" "type": "module"
} }

View file

@ -1,6 +1,6 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
} };

View file

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en" class="dark"> <html lang="en" class="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

View file

@ -1,2 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
/*place global styles here */ /*place global styles here */
html, body { @apply h-full overflow-hidden; } html,
body {
@apply h-full overflow-hidden;
}

View file

@ -1,9 +1,9 @@
<script lang='ts'> <script lang="ts">
// The ordering of these imports is critical to your app working properly // The ordering of these imports is critical to your app working properly
//import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; //import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
import '../theme.postcss'; import '../theme.postcss';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/skeleton.css'; //import '@skeletonlabs/skeleton/styles/skeleton.css';
// Most of your app wide CSS should be put in this file // Most of your app wide CSS should be put in this file
import '../app.postcss'; import '../app.postcss';
import { AppShell, AppBar } from '@skeletonlabs/skeleton'; import { AppShell, AppBar } from '@skeletonlabs/skeleton';

View file

@ -17,8 +17,8 @@
<!-- / --> <!-- / -->
<h1 class="h1 font-bold">Welcome to Anvil!</h1> <h1 class="h1 font-bold">Welcome to Anvil!</h1>
<p> <p>
Anvil is a F2 (Federated Forge) client. Would you like to create a Anvil is a F2 (Federated Forge) client. Would you like to create a new F2 account or log in
new F2 account or log in with your existing one? with your existing one?
</p> </p>
<div class="text-center space-y-3"> <div class="text-center space-y-3">
<div> <div>
@ -61,7 +61,8 @@
} }
.img-bg { .img-bg {
@apply absolute z-[-1] rounded-full blur-[50px] transition-all; @apply absolute z-[-1] rounded-full blur-[50px] transition-all;
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, animation:
pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
glow 5s linear infinite; glow 5s linear infinite;
} }
@keyframes glow { @keyframes glow {

View file

@ -1,13 +1,13 @@
<script lang='ts'> <script lang="ts">
import { AlertFill24, Mention24 } from "svelte-octicons"; import { AlertFill24, Mention24 } from 'svelte-octicons';
</script> </script>
<div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10"> <div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10">
<div class="space-y-10"> <div class="space-y-10">
<h1 class="h1 font-bold">Create a new account</h1> <h1 class="h1 font-bold">Create a new account</h1>
<p> <p>
Choose a server, username and password to create a new account on a Choose a server, username and password to create a new account on a server. An email address
server. An email address is needed for verification. is needed for verification.
</p> </p>
<div class="space-y-4"> <div class="space-y-4">
<label class="label"> <label class="label">

View file

@ -1,9 +1,7 @@
<div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10"> <div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10">
<div class="space-y-10"> <div class="space-y-10">
<h1 class="h1 font-bold">Log in</h1> <h1 class="h1 font-bold">Log in</h1>
<p> <p>To use Anvil with your F2 account, fill in your credentials.</p>
To use Anvil with your F2 account, fill in your credentials.
</p>
<div class="space-y-4"> <div class="space-y-4">
<label class="label"> <label class="label">
<span>F2 server</span> <span>F2 server</span>

View file

@ -1,5 +1,5 @@
<script lang='ts'> <script lang="ts">
import { Smiley24 } from "svelte-octicons"; import { Smiley24 } from 'svelte-octicons';
</script> </script>
<div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10"> <div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10">
@ -8,9 +8,7 @@
<h1 class="h1 font-bold">Success!</h1> <h1 class="h1 font-bold">Success!</h1>
<Smiley24 class="w-full scale-[2] fill-success-500" /> <Smiley24 class="w-full scale-[2] fill-success-500" />
</div> </div>
<p class="px-4"> <p class="px-4">Your account is created and verified.</p>
Your account is created and verified.
</p>
<a href="/account/login" class="w-full btn variant-filled-primary">Log in</a> <a href="/account/login" class="w-full btn variant-filled-primary">Log in</a>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
<script lang='ts'> <script lang="ts">
import { AlertFill24 } from "svelte-octicons"; import { AlertFill24 } from 'svelte-octicons';
</script> </script>
<div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10"> <div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10">
@ -7,14 +7,18 @@
<h1 class="h1 font-bold">Verify account</h1> <h1 class="h1 font-bold">Verify account</h1>
<p> <p>
A verification code has been sent to A verification code has been sent to
<strong>jane@doe-mail.com</strong>. Please copy the code from your <strong>jane@doe-mail.com</strong>. Please copy the code from your e-mail and paste it below.
e-mail and paste it below.
</p> </p>
<div class="space-y-4"> <div class="space-y-4">
<label class="label"> <label class="label">
<span>Verification code</span> <span>Verification code</span>
<div class="input-group input-group-divider grid-cols-[1fr_auto]"> <div class="input-group input-group-divider grid-cols-[1fr_auto]">
<input class="input" title="Verification code" type="text" placeholder="0cY23hX52xIjNCt7g0gR" /> <input
class="input"
title="Verification code"
type="text"
placeholder="0cY23hX52xIjNCt7g0gR"
/>
<a title="Code is too short or too log"> <a title="Code is too short or too log">
<AlertFill24 class="fill-warning-500 animate-pulse" /> <AlertFill24 class="fill-warning-500 animate-pulse" />
</a> </a>

View file

@ -93,8 +93,4 @@
--color-surface-700: 23 34 48; /* ⬅ #172230 */ --color-surface-700: 23 34 48; /* ⬅ #172230 */
--color-surface-800: 18 27 38; /* ⬅ #121b26 */ --color-surface-800: 18 27 38; /* ⬅ #121b26 */
--color-surface-900: 15 22 31; /* ⬅ #0f161f */ --color-surface-900: 15 22 31; /* ⬅ #0f161f */
} }

View file

@ -1,5 +1,5 @@
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {

View file

@ -1,9 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{html,js,svelte,ts}', require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography'),...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()],
}

18
tailwind.config.js Normal file
View file

@ -0,0 +1,18 @@
// @ts-check
import { join } from 'node:path';
import { skeleton } from '@skeletonlabs/tw-plugin';
import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
],
theme: {
extend: {}
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), forms, skeleton]
};