style(frontend): format codebase with prettier
This commit is contained in:
@@ -1,16 +1,17 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.svelte",
|
||||
"options": {
|
||||
"parser": "svelte"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tailwindStylesheet": "./src/routes/layout.css"
|
||||
"useTabs": false,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.svelte",
|
||||
"options": {
|
||||
"parser": "svelte"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tailwindStylesheet": "./src/routes/layout.css"
|
||||
}
|
||||
|
||||
@@ -11,34 +11,34 @@ import svelteConfig from './svelte.config.js';
|
||||
const gitignorePath = path.resolve(import.meta.dirname, '.gitignore');
|
||||
|
||||
export default defineConfig(
|
||||
includeIgnoreFile(gitignorePath),
|
||||
js.configs.recommended,
|
||||
ts.configs.recommended,
|
||||
svelte.configs.recommended,
|
||||
prettier,
|
||||
svelte.configs.prettier,
|
||||
{
|
||||
languageOptions: { globals: { ...globals.browser, ...globals.node } },
|
||||
rules: {
|
||||
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
|
||||
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
|
||||
'no-undef': 'off'
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
projectService: true,
|
||||
extraFileExtensions: ['.svelte'],
|
||||
parser: ts.parser,
|
||||
svelteConfig
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// Override or add rule settings here, such as:
|
||||
// 'svelte/button-has-type': 'error'
|
||||
rules: {}
|
||||
}
|
||||
includeIgnoreFile(gitignorePath),
|
||||
js.configs.recommended,
|
||||
ts.configs.recommended,
|
||||
svelte.configs.recommended,
|
||||
prettier,
|
||||
svelte.configs.prettier,
|
||||
{
|
||||
languageOptions: { globals: { ...globals.browser, ...globals.node } },
|
||||
rules: {
|
||||
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
|
||||
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
|
||||
'no-undef': 'off'
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
projectService: true,
|
||||
extraFileExtensions: ['.svelte'],
|
||||
parser: ts.parser,
|
||||
svelteConfig
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// Override or add rule settings here, such as:
|
||||
// 'svelte/button-has-type': 'error'
|
||||
rules: {}
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write .",
|
||||
"test:e2e": "playwright test",
|
||||
"test": "npm run test:unit -- --run && npm run test:e2e",
|
||||
"test:unit": "vitest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^2.0.3",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@fontsource/fira-mono": "^5.2.7",
|
||||
"@neoconfetti/svelte": "^2.2.2",
|
||||
"@playwright/test": "^1.58.2",
|
||||
"@sveltejs/adapter-auto": "^7.0.0",
|
||||
"@sveltejs/kit": "^2.50.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@types/node": "^24",
|
||||
"@vitest/browser-playwright": "^4.1.0",
|
||||
"eslint": "^10.0.3",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-svelte": "^3.15.2",
|
||||
"globals": "^17.4.0",
|
||||
"playwright": "^1.58.2",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier-plugin-svelte": "^3.4.1",
|
||||
"prettier-plugin-tailwindcss": "^0.7.2",
|
||||
"svelte": "^5.54.0",
|
||||
"svelte-check": "^4.4.2",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.57.0",
|
||||
"vite": "^7.3.1",
|
||||
"vitest": "^4.1.0",
|
||||
"vitest-browser-svelte": "^2.0.2"
|
||||
}
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write .",
|
||||
"test:e2e": "playwright test",
|
||||
"test": "npm run test:unit -- --run && npm run test:e2e",
|
||||
"test:unit": "vitest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^2.0.3",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@fontsource/fira-mono": "^5.2.7",
|
||||
"@neoconfetti/svelte": "^2.2.2",
|
||||
"@playwright/test": "^1.58.2",
|
||||
"@sveltejs/adapter-auto": "^7.0.0",
|
||||
"@sveltejs/kit": "^2.50.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@types/node": "^24",
|
||||
"@vitest/browser-playwright": "^4.1.0",
|
||||
"eslint": "^10.0.3",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-svelte": "^3.15.2",
|
||||
"globals": "^17.4.0",
|
||||
"playwright": "^1.58.2",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier-plugin-svelte": "^3.4.1",
|
||||
"prettier-plugin-tailwindcss": "^0.7.2",
|
||||
"svelte": "^5.54.0",
|
||||
"svelte-check": "^4.4.2",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.57.0",
|
||||
"vite": "^7.3.1",
|
||||
"vitest": "^4.1.0",
|
||||
"vitest-browser-svelte": "^2.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
onlyBuiltDependencies:
|
||||
- esbuild
|
||||
- esbuild
|
||||
|
||||
14
frontend/src/app.d.ts
vendored
14
frontend/src/app.d.ts
vendored
@@ -1,13 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
<!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" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet" />
|
||||
<meta name="text-scale" content="scale" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="text-scale" content="scale" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import type { FileRecord } from "$lib/types";
|
||||
import type { FileRecord } from '$lib/types';
|
||||
|
||||
export async function loadFiles(): Promise<FileRecord[]> {
|
||||
const res = await fetch('/api/files', {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
|
||||
if (res.status === 401) {
|
||||
window.location.href = '/auth';
|
||||
return [];
|
||||
@@ -14,10 +14,9 @@ export async function loadFiles(): Promise<FileRecord[]> {
|
||||
throw new Error(`Failed to load files: ${res.status}`);
|
||||
}
|
||||
|
||||
return await res.json()
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
|
||||
export async function uploadFile(file: File): Promise<FileRecord> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
@@ -28,10 +27,10 @@ export async function uploadFile(file: File): Promise<FileRecord> {
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Upload failed: ${res.status}`)
|
||||
throw new Error(`Upload failed: ${res.status}`);
|
||||
}
|
||||
|
||||
return await res.json()
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
export async function downloadFile(fileId: number): Promise<Blob> {
|
||||
@@ -39,10 +38,10 @@ export async function downloadFile(fileId: number): Promise<Blob> {
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error(`Download failed: ${res.status}`)
|
||||
throw new Error(`Download failed: ${res.status}`);
|
||||
}
|
||||
|
||||
return await res.blob()
|
||||
return await res.blob();
|
||||
}
|
||||
|
||||
export async function deleteFile(fileId: number): Promise<void> {
|
||||
|
||||
@@ -1,33 +1,50 @@
|
||||
<script lang="ts">
|
||||
import type { FileRecord } from "$lib/types";
|
||||
import { fade } from "svelte/transition";
|
||||
import type { FileRecord } from '$lib/types';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
let { file, onclose }: { file: FileRecord; onclose: () => void } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={(e) => { if (e.key === 'Escape') onclose(); }} />
|
||||
<svelte:window
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Escape') onclose();
|
||||
}}
|
||||
/>
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
|
||||
onclick={onclose}
|
||||
transition:fade={{ duration: 150 }}
|
||||
>
|
||||
<div
|
||||
class="bg-[#0f1117] border border-sky-200/20 rounded-sm w-2/3 h-2/3 flex flex-col p-6"
|
||||
class="flex h-2/3 w-2/3 flex-col rounded-sm border border-sky-200/20 bg-[#0f1117] p-6"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-white text-sm font-medium">{file.name}</span>
|
||||
<button class="text-white/40 hover:text-white transition-colors cursor-pointer" onclick={onclose} aria-label="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-white">{file.name}</span>
|
||||
<button
|
||||
class="cursor-pointer text-white/40 transition-colors hover:text-white"
|
||||
onclick={onclose}
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center text-white/20 text-sm">
|
||||
<div class="flex flex-1 items-center justify-center text-sm text-white/20">
|
||||
preview coming soon
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
onselect,
|
||||
onpreview,
|
||||
ondownload,
|
||||
ondelete,
|
||||
ondelete
|
||||
}: {
|
||||
file: FileRecord;
|
||||
selected: boolean;
|
||||
@@ -28,59 +28,135 @@
|
||||
if (e.key === 'Enter') {
|
||||
onpreview();
|
||||
} else if (e.key === ' ') {
|
||||
e.preventDefault(); onselect();
|
||||
e.preventDefault();
|
||||
onselect();
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
onclick={onselect}
|
||||
ondblclick={onpreview}
|
||||
class="flex items-stretch border-l hover:bg-white/2 transition-all {selected ? 'border-sky-400/50 bg-white/2 ring-1 ring-inset ring-sky-400/50' : 'border-sky-200/20 border-l-transparent hover:border-l-sky-400/50'}"
|
||||
class="flex items-stretch border-l transition-all hover:bg-white/2 {selected
|
||||
? 'border-sky-400/50 bg-white/2 ring-1 ring-sky-400/50 ring-inset'
|
||||
: 'border-sky-200/20 border-l-transparent hover:border-l-sky-400/50'}"
|
||||
>
|
||||
<span class="font-medium text-white text-sm flex-1 truncate py-2 pl-6">{formatName(file.name)}</span>
|
||||
<span class="text-sm text-white/40 w-40 py-2">{formatSize(file.size)}</span>
|
||||
<span class="text-sm text-white/40 w-48 py-2">{new Date(file.uploadedAt).toLocaleString()}</span>
|
||||
<div class="w-px bg-sky-200/20 self-stretch"></div>
|
||||
<div class="flex items-center gap-4 w-32 justify-center relative">
|
||||
<span class="flex-1 truncate py-2 pl-6 text-sm font-medium text-white"
|
||||
>{formatName(file.name)}</span
|
||||
>
|
||||
<span class="w-40 py-2 text-sm text-white/40">{formatSize(file.size)}</span>
|
||||
<span class="w-48 py-2 text-sm text-white/40">{new Date(file.uploadedAt).toLocaleString()}</span
|
||||
>
|
||||
<div class="w-px self-stretch bg-sky-200/20"></div>
|
||||
<div class="relative flex w-32 items-center justify-center gap-4">
|
||||
<!-- Download -->
|
||||
<button class="text-white/40 hover:text-emerald-400 hover:scale-110 transition-all cursor-pointer" title="Download" onclick={ondownload}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
<button
|
||||
class="cursor-pointer text-white/40 transition-all hover:scale-110 hover:text-emerald-400"
|
||||
title="Download"
|
||||
onclick={ondownload}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||
<polyline points="7 10 12 15 17 10" />
|
||||
<line x1="12" y1="15" x2="12" y2="3" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- TODO: Copy -->
|
||||
<button class="text-white/40 hover:text-blue-400 hover:scale-110 transition-all cursor-pointer" title="Copy link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||
<button
|
||||
class="cursor-pointer text-white/40 transition-all hover:scale-110 hover:text-blue-400"
|
||||
title="Copy link"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Delete -->
|
||||
<div class="relative">
|
||||
<button class="text-white/40 hover:text-red-400 hover:scale-110 transition-all cursor-pointer" title="Delete" onclick={() => confirming = true}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"/>
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
|
||||
<path d="M10 11v6"/>
|
||||
<path d="M14 11v6"/>
|
||||
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
|
||||
<button
|
||||
class="cursor-pointer text-white/40 transition-all hover:scale-110 hover:text-red-400"
|
||||
title="Delete"
|
||||
onclick={() => (confirming = true)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
|
||||
<path d="M10 11v6" />
|
||||
<path d="M14 11v6" />
|
||||
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
|
||||
</svg>
|
||||
</button>
|
||||
{#if confirming}
|
||||
<div class="absolute left-6 top-1/2 -translate-y-1/2 flex items-center z-10">
|
||||
<div class="w-0 h-0 border-t-4 border-b-4 border-r-4 border-t-transparent border-b-transparent border-r-sky-200/20"></div>
|
||||
<div class="bg-[#0f1117] border border-sky-200/20 rounded px-3 py-2 flex items-center gap-2 whitespace-nowrap">
|
||||
<span class="text-white/40 text-xs">Confirm action</span>
|
||||
<button class="text-white/60 hover:text-white transition-colors cursor-pointer" title="Confirm" onclick={() => { ondelete(); confirming = false; }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
<div class="absolute top-1/2 left-6 z-10 flex -translate-y-1/2 items-center">
|
||||
<div
|
||||
class="h-0 w-0 border-t-4 border-r-4 border-b-4 border-t-transparent border-r-sky-200/20 border-b-transparent"
|
||||
></div>
|
||||
<div
|
||||
class="flex items-center gap-2 rounded border border-sky-200/20 bg-[#0f1117] px-3 py-2 whitespace-nowrap"
|
||||
>
|
||||
<span class="text-xs text-white/40">Confirm action</span>
|
||||
<button
|
||||
class="cursor-pointer text-white/60 transition-colors hover:text-white"
|
||||
title="Confirm"
|
||||
onclick={() => {
|
||||
ondelete();
|
||||
confirming = false;
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="text-white/60 hover:text-white transition-colors cursor-pointer" title="Cancel" onclick={() => confirming = false}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
<button
|
||||
class="cursor-pointer text-white/60 transition-colors hover:text-white"
|
||||
title="Cancel"
|
||||
onclick={() => (confirming = false)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
export function formatName(name: string): string {
|
||||
if (name.length > 65) {
|
||||
name = name.slice(0, 65).concat("...");
|
||||
}
|
||||
return name;
|
||||
}
|
||||
if (name.length > 65) {
|
||||
name = name.slice(0, 65).concat('...');
|
||||
}
|
||||
return name;
|
||||
}
|
||||
|
||||
export function formatSize(bytes: number): string {
|
||||
if (bytes < 1000) return bytes + 'B';
|
||||
if (bytes < 1000 * 1000) return (bytes / 1000).toFixed(1) + 'KB';
|
||||
if (bytes < 1000 * 1000 * 1000) return (bytes / 1000 / 1000).toFixed(1) + 'MB';
|
||||
return (bytes / 1000 / 1000 / 1000).toFixed(1) + 'GB';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,4 +3,4 @@ export type FileRecord = {
|
||||
name: string;
|
||||
size: number;
|
||||
uploadedAt: string;
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,45 +1,44 @@
|
||||
<script lang="ts">
|
||||
import './layout.css';
|
||||
import './layout.css';
|
||||
|
||||
let { children } = $props();
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
<main>{@render children()}</main>
|
||||
<main>{@render children()}</main>
|
||||
|
||||
<footer>
|
||||
</footer>
|
||||
<footer></footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
footer {
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
footer {
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate'
|
||||
import type { FileRecord } from '$lib/types';
|
||||
import { deleteFile, downloadFile, loadFiles, logout, uploadFile } from '$lib/api';
|
||||
import FileRow from '$lib/components/FileRow.svelte';
|
||||
import FilePreview from '$lib/components/FilePreview.svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import type { FileRecord } from '$lib/types';
|
||||
import { deleteFile, downloadFile, loadFiles, logout, uploadFile } from '$lib/api';
|
||||
import FileRow from '$lib/components/FileRow.svelte';
|
||||
import FilePreview from '$lib/components/FilePreview.svelte';
|
||||
|
||||
let fileRecords = $state<FileRecord[]>([]);
|
||||
let selectedFileId = $state<number | null>(null);
|
||||
let previewFile = $state<FileRecord | null>(null);
|
||||
let search = $state('');
|
||||
let loading = $state(true);
|
||||
|
||||
|
||||
async function refresh() {
|
||||
fileRecords = await loadFiles();
|
||||
loading = false;
|
||||
fileRecords = await loadFiles();
|
||||
loading = false;
|
||||
}
|
||||
|
||||
let filteredFileRecords = $derived(fileRecords.filter(f =>
|
||||
f.name.toLowerCase().includes(search.toLowerCase())
|
||||
));
|
||||
let filteredFileRecords = $derived(
|
||||
fileRecords.filter((f) => f.name.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
|
||||
let fileInput: HTMLInputElement;
|
||||
|
||||
@@ -28,12 +28,12 @@
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
await uploadFile(file)
|
||||
|
||||
await uploadFile(file);
|
||||
input.value = '';
|
||||
await refresh()
|
||||
await refresh();
|
||||
}
|
||||
|
||||
|
||||
async function handleDownload(fileId: number, fileName: string) {
|
||||
const blob = await downloadFile(fileId);
|
||||
const url = URL.createObjectURL(blob);
|
||||
@@ -48,42 +48,55 @@
|
||||
await deleteFile(fileId);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
|
||||
async function handleLogout() {
|
||||
await logout();
|
||||
window.location.href = '/auth';
|
||||
}
|
||||
|
||||
onMount(refresh)
|
||||
onMount(refresh);
|
||||
</script>
|
||||
|
||||
<div class="w-full px-4 py-8">
|
||||
<div class="relative mb-6 flex items-center justify-center">
|
||||
<h1 class="text-4xl text-white" style="font-family: 'Caveat', cursive;">loft</h1>
|
||||
<button
|
||||
<button
|
||||
onclick={handleLogout}
|
||||
class="fixed top-4 right-4 flex items-center gap-1.5 px-2 py-1 border border-sky-200/20 text-white/60 hover:border-sky-200/40 text-sm transition-colors rounded-sm cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
class="fixed top-4 right-4 flex cursor-pointer items-center gap-1.5 rounded-sm border border-sky-200/20 px-2 py-1 text-sm text-white/60 transition-colors hover:border-sky-200/40"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3.5 w-3.5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<polyline points="16 17 21 12 16 7" />
|
||||
<line x1="21" y1="12" x2="9" y2="12" />
|
||||
</svg>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="mb-4 flex justify-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search files..."
|
||||
bind:value={search}
|
||||
class="w-96 px-4 py-1.5 rounded-xl bg-white/5 border border-sky-200/20 transition-colors hover:border-sky-200/40 text-white placeholder-white/30 text-sm focus:outline-none focus:ring-1 focus:ring-white/10"
|
||||
class="w-96 rounded-xl border border-sky-200/20 bg-white/5 px-4 py-1.5 text-sm text-white placeholder-white/30 transition-colors hover:border-sky-200/40 focus:ring-1 focus:ring-white/10 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input type="file" bind:this={fileInput} onchange={handleUpload} class="hidden" />
|
||||
<div class="mb-1">
|
||||
<button class="px-2 py-1 border border-sky-200/20 text-white/60 hover:border-sky-200/40 text-sm transition-colors rounded-sm cursor-pointer" onclick={() => fileInput.click()}>
|
||||
<button
|
||||
class="cursor-pointer rounded-sm border border-sky-200/20 px-2 py-1 text-sm text-white/60 transition-colors hover:border-sky-200/40"
|
||||
onclick={() => fileInput.click()}
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
@@ -91,23 +104,23 @@
|
||||
<div class="rounded-sm border border-sky-200/20">
|
||||
<!-- Header row -->
|
||||
<div class="flex items-stretch border-b border-sky-200/20 bg-white/5">
|
||||
<span class="font-medium text-white/40 text-sm flex-1 py-2 pl-6">Name</span>
|
||||
<span class="text-sm text-white/40 w-40 py-2">Size</span>
|
||||
<span class="text-sm text-white/40 w-48 py-2">Uploaded at</span>
|
||||
<div class="w-px bg-sky-200/20 self-stretch"></div>
|
||||
<span class="text-sm text-white/40 w-32 text-center py-2">Actions</span>
|
||||
<span class="flex-1 py-2 pl-6 text-sm font-medium text-white/40">Name</span>
|
||||
<span class="w-40 py-2 text-sm text-white/40">Size</span>
|
||||
<span class="w-48 py-2 text-sm text-white/40">Uploaded at</span>
|
||||
<div class="w-px self-stretch bg-sky-200/20"></div>
|
||||
<span class="w-32 py-2 text-center text-sm text-white/40">Actions</span>
|
||||
</div>
|
||||
|
||||
{#each filteredFileRecords as fileRecord (fileRecord.id)}
|
||||
<div transition:fade={{ duration: 200 }} animate:flip={{ duration: 200 }}>
|
||||
<FileRow
|
||||
file={fileRecord}
|
||||
selected={selectedFileId === fileRecord.id}
|
||||
onselect={() => selectedFileId = fileRecord.id}
|
||||
onpreview={() => previewFile = fileRecord}
|
||||
ondownload={() => handleDownload(fileRecord.id, fileRecord.name)}
|
||||
ondelete={() => handleDelete(fileRecord.id)}
|
||||
/>
|
||||
<FileRow
|
||||
file={fileRecord}
|
||||
selected={selectedFileId === fileRecord.id}
|
||||
onselect={() => (selectedFileId = fileRecord.id)}
|
||||
onpreview={() => (previewFile = fileRecord)}
|
||||
ondownload={() => handleDownload(fileRecord.id, fileRecord.name)}
|
||||
ondelete={() => handleDelete(fileRecord.id)}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
{#if !loading}<p class="py-2 px-4 text-white/30 text-sm">No files yet.</p>{/if}
|
||||
@@ -116,5 +129,5 @@
|
||||
</div>
|
||||
|
||||
{#if previewFile}
|
||||
<FilePreview file={previewFile} onclose={() => previewFile = null} />
|
||||
<FilePreview file={previewFile} onclose={() => (previewFile = null)} />
|
||||
{/if}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { submit } from "$lib/api";
|
||||
import { submit } from '$lib/api';
|
||||
|
||||
let activeTab = $state<'login' | 'register'>('login');
|
||||
let username = $state('');
|
||||
@@ -16,20 +16,25 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center -mt-16">
|
||||
<div class="-mt-16 flex flex-1 items-center justify-center">
|
||||
<div class="w-full max-w-xs">
|
||||
<h1 class="text-4xl text-white mb-8" style="font-family: 'Caveat', cursive;">loft</h1>
|
||||
<h1 class="mb-8 text-4xl text-white" style="font-family: 'Caveat', cursive;">loft</h1>
|
||||
|
||||
<div class="flex mb-6 border-b border-sky-200/20">
|
||||
<div class="mb-6 flex border-b border-sky-200/20">
|
||||
<button
|
||||
onclick={() => activeTab = 'login'}
|
||||
class="flex-1 py-2 text-sm transition-colors cursor-pointer {activeTab === 'login' ? 'text-white border-b border-white -mb-px' : 'text-white/40 hover:text-white/60'}"
|
||||
onclick={() => (activeTab = 'login')}
|
||||
class="flex-1 cursor-pointer py-2 text-sm transition-colors {activeTab === 'login'
|
||||
? '-mb-px border-b border-white text-white'
|
||||
: 'text-white/40 hover:text-white/60'}"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
onclick={() => activeTab = 'register'}
|
||||
class="flex-1 py-2 text-sm transition-colors cursor-pointer {activeTab === 'register' ? 'text-white border-b border-white -mb-px' : 'text-white/40 hover:text-white/60'}"
|
||||
onclick={() => (activeTab = 'register')}
|
||||
class="flex-1 cursor-pointer py-2 text-sm transition-colors {activeTab ===
|
||||
'register'
|
||||
? '-mb-px border-b border-white text-white'
|
||||
: 'text-white/40 hover:text-white/60'}"
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
@@ -37,29 +42,30 @@
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="username" class="text-white/30 text-xs">Username</label>
|
||||
<label for="username" class="text-xs text-white/30">Username</label>
|
||||
<input
|
||||
id="username"
|
||||
bind:value={username}
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
class="px-4 py-2 rounded-sm bg-[#0f1117]! border border-sky-200/15 transition-colors hover:bg-black/20 hover:border-sky-200/30 text-white/80 text-sm focus:outline-none focus:border-sky-200/40"
|
||||
class="rounded-sm border border-sky-200/15 bg-[#0f1117]! px-4 py-2 text-sm text-white/80 transition-colors hover:border-sky-200/30 hover:bg-black/20 focus:border-sky-200/40 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="password" class="text-white/30 text-xs">Password</label>
|
||||
<label for="password" class="text-xs text-white/30">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
bind:value={password}
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
class="px-4 py-2 rounded-sm bg-[#0f1117]! border border-sky-200/15 transition-colors hover:bg-black/20 hover:border-sky-200/30 text-white/80 text-sm focus:outline-none focus:border-sky-200/40"
|
||||
class="rounded-sm border border-sky-200/15 bg-[#0f1117]! px-4 py-2 text-sm text-white/80 transition-colors hover:border-sky-200/30 hover:bg-black/20 focus:border-sky-200/40 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
{#if error}<p class="text-red-400/60 text-xs">{error}</p>{/if}
|
||||
<button
|
||||
{#if error}<p class="text-xs text-red-400/60">{error}</p>{/if}
|
||||
<button
|
||||
onclick={handleSubmit}
|
||||
class="mt-1 px-4 py-2 border border-sky-200/15 text-white/40 hover:border-sky-200/30 hover:text-white/60 text-sm transition-colors rounded-sm cursor-pointer">
|
||||
class="mt-1 cursor-pointer rounded-sm border border-sky-200/15 px-4 py-2 text-sm text-white/40 transition-colors hover:border-sky-200/30 hover:text-white/60"
|
||||
>
|
||||
{activeTab === 'login' ? 'Login' : 'Register'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -4,110 +4,110 @@
|
||||
@import '@fontsource/fira-mono';
|
||||
|
||||
:root {
|
||||
--font-body:
|
||||
Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Mono', monospace;
|
||||
--color-text: rgba(255, 255, 255, 0.87);
|
||||
--column-width: 42rem;
|
||||
--column-margin-top: 4rem;
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-text);
|
||||
--font-body:
|
||||
Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Mono', monospace;
|
||||
--color-text: rgba(255, 255, 255, 0.87);
|
||||
--column-width: 42rem;
|
||||
--column-margin-top: 4rem;
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #0f1117;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #0f1117;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-theme-1);
|
||||
text-decoration: none;
|
||||
color: var(--color-theme-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 16px;
|
||||
font-family: var(--font-mono);
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
|
||||
padding: 0.5em;
|
||||
overflow-x: auto;
|
||||
color: var(--color-text);
|
||||
font-size: 16px;
|
||||
font-family: var(--font-mono);
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
|
||||
padding: 0.5em;
|
||||
overflow-x: auto;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.text-column {
|
||||
display: flex;
|
||||
max-width: 48rem;
|
||||
flex: 0.6;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
max-width: 48rem;
|
||||
flex: 0.6;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 1000px #0f1117 inset !important;
|
||||
-webkit-text-fill-color: #ffffffcc !important;
|
||||
font-size: 16px !important;
|
||||
-webkit-box-shadow: 0 0 0 1000px #0f1117 inset !important;
|
||||
-webkit-text-fill-color: #ffffffcc !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
input:-moz-autofill {
|
||||
background-color: #0f1117 !important;
|
||||
color: #ffffffcc !important;
|
||||
filter: none !important;
|
||||
background-color: #0f1117 !important;
|
||||
color: #ffffffcc !important;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -2,12 +2,12 @@ import adapter from '@sveltejs/adapter-auto';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
|
||||
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
}
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
|
||||
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rewriteRelativeImportExtensions": true,
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// To make changes to top-level options such as include and exclude, we recommend extending
|
||||
// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rewriteRelativeImportExtensions": true,
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// To make changes to top-level options such as include and exclude, we recommend extending
|
||||
// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
|
||||
}
|
||||
|
||||
@@ -4,38 +4,38 @@ import tailwindcss from '@tailwindcss/vite';
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), sveltekit()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3000'
|
||||
}
|
||||
plugins: [tailwindcss(), sveltekit()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3000'
|
||||
}
|
||||
},
|
||||
test: {
|
||||
expect: { requireAssertions: true },
|
||||
projects: [
|
||||
{
|
||||
extends: './vite.config.ts',
|
||||
test: {
|
||||
name: 'client',
|
||||
browser: {
|
||||
enabled: true,
|
||||
provider: playwright(),
|
||||
instances: [{ browser: 'chromium', headless: true }]
|
||||
},
|
||||
include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
|
||||
exclude: ['src/lib/server/**']
|
||||
}
|
||||
},
|
||||
test: {
|
||||
expect: { requireAssertions: true },
|
||||
projects: [
|
||||
{
|
||||
extends: './vite.config.ts',
|
||||
test: {
|
||||
name: 'client',
|
||||
browser: {
|
||||
enabled: true,
|
||||
provider: playwright(),
|
||||
instances: [{ browser: 'chromium', headless: true }]
|
||||
},
|
||||
include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
|
||||
exclude: ['src/lib/server/**']
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
extends: './vite.config.ts',
|
||||
test: {
|
||||
name: 'server',
|
||||
environment: 'node',
|
||||
include: ['src/**/*.{test,spec}.{js,ts}'],
|
||||
exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
extends: './vite.config.ts',
|
||||
test: {
|
||||
name: 'server',
|
||||
environment: 'node',
|
||||
include: ['src/**/*.{test,spec}.{js,ts}'],
|
||||
exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user