From e7126efb44982a9e604906b18742fce360131475 Mon Sep 17 00:00:00 2001 From: Mihkel Martin Kasterpalu Date: Tue, 21 Jan 2025 17:39:17 +0200 Subject: [PATCH] Add frontpage, move pakubiiti to subpage. Add new fonts, styling tweaks --- package.json | 3 +- pnpm-lock.yaml | 14 +- src/app.css | 145 ++++++++++-------- src/lib/components/DNDGroup.svelte | 2 +- src/lib/server/PlayerState.svelte.ts | 1 - src/routes/(landing)/+layout.svelte | 7 + src/routes/(landing)/+page.svelte | 30 ++++ src/routes/(trivia)/+layout.svelte | 7 + .../{ => (trivia)/pakubiiti}/+page.server.ts | 13 +- .../{ => (trivia)/pakubiiti}/+page.svelte | 76 +++++---- src/routes/+layout.svelte | 51 +++--- .../getAlbums/[count]/+server.ts | 0 tailwind.config.ts | 6 +- 13 files changed, 223 insertions(+), 132 deletions(-) create mode 100644 src/routes/(landing)/+layout.svelte create mode 100644 src/routes/(landing)/+page.svelte create mode 100644 src/routes/(trivia)/+layout.svelte rename src/routes/{ => (trivia)/pakubiiti}/+page.server.ts (84%) rename src/routes/{ => (trivia)/pakubiiti}/+page.svelte (61%) rename src/routes/api/{ => pakubiiti}/getAlbums/[count]/+server.ts (100%) diff --git a/package.json b/package.json index 0a06995..8e2fe7e 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "eslint-config-prettier": "^10.0.1", "eslint-plugin-svelte": "^2.46.1", "globals": "^15.14.0", + "lucide-svelte": "^0.473.0", "prettier": "^3.4.2", "prettier-plugin-svelte": "^3.3.3", "prettier-plugin-tailwindcss": "^0.6.10", @@ -43,8 +44,8 @@ "vite": "^5.4.11" }, "dependencies": { + "@fontsource-variable/kode-mono": "^5.1.1", "@fontsource-variable/smooch-sans": "^5.1.1", - "lucide-svelte": "^0.473.0", "mode-watcher": "^0.5.0", "nanoid": "^5.0.9", "spotify-web-api-node": "^5.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44dcf6c..accb577 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,12 +8,12 @@ importers: .: dependencies: + '@fontsource-variable/kode-mono': + specifier: ^5.1.1 + version: 5.1.1 '@fontsource-variable/smooch-sans': specifier: ^5.1.1 version: 5.1.1 - lucide-svelte: - specifier: ^0.473.0 - version: 0.473.0(svelte@5.19.0) mode-watcher: specifier: ^0.5.0 version: 0.5.0(svelte@5.19.0) @@ -72,6 +72,9 @@ importers: globals: specifier: ^15.14.0 version: 15.14.0 + lucide-svelte: + specifier: ^0.473.0 + version: 0.473.0(svelte@5.19.0) prettier: specifier: ^3.4.2 version: 3.4.2 @@ -312,6 +315,9 @@ packages: '@floating-ui/utils@0.2.9': resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} + '@fontsource-variable/kode-mono@5.1.1': + resolution: {integrity: sha512-lS06Ow0N3YEFnSxr886WJPA2be0ndCm6mZFvCPYkTfv4BLxoiISNhPFL4M17jatKQ3/MoGbs95mjQv+YGkGcDg==} + '@fontsource-variable/smooch-sans@5.1.1': resolution: {integrity: sha512-ADcY3Pjkvu74x4T+p2gNIo8Ba7DGrX1IhQgJFefztWB8Tf5nX7Qb+tqAbtW7O/KYWJi4EjzrxCefHBM1PfOOsg==} @@ -1949,6 +1955,8 @@ snapshots: '@floating-ui/utils@0.2.9': {} + '@fontsource-variable/kode-mono@5.1.1': {} + '@fontsource-variable/smooch-sans@5.1.1': {} '@humanfs/core@0.19.1': {} diff --git a/src/app.css b/src/app.css index bd56ec4..1e0a3a6 100644 --- a/src/app.css +++ b/src/app.css @@ -3,73 +3,86 @@ @tailwind utilities; @layer base { - :root { - --background: 0 0% 100%; - --foreground: 20 14.3% 4.1%; - --muted: 60 4.8% 95.9%; - --muted-foreground: 25 5.3% 44.7%; - --popover: 0 0% 100%; - --popover-foreground: 20 14.3% 4.1%; - --card: 0 0% 100%; - --card-foreground: 20 14.3% 4.1%; - --border: 20 5.9% 90%; - --input: 20 5.9% 90%; - --primary: 24 9.8% 10%; - --primary-foreground: 60 9.1% 97.8%; - --secondary: 60 4.8% 95.9%; - --secondary-foreground: 24 9.8% 10%; - --accent: 60 4.8% 95.9%; - --accent-foreground: 24 9.8% 10%; - --destructive: 0 72.2% 50.6%; - --destructive-foreground: 60 9.1% 97.8%; - --ring: 20 14.3% 4.1%; - --radius: 0.5rem; - --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; - --sidebar-primary: 240 5.9% 10%; - --sidebar-primary-foreground: 0 0% 98%; - --sidebar-accent: 240 4.8% 95.9%; - --sidebar-accent-foreground: 240 5.9% 10%; - --sidebar-border: 220 13% 91%; - --sidebar-ring: 217.2 91.2% 59.8%; - } + :root { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + --primary: 24 9.8% 10%; + --primary-foreground: 60 9.1% 94%; + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 60 9.1% 94%; + --ring: 20 14.3% 4.1%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } - .dark { - --background: 20 14.3% 4.1%; - --foreground: 60 9.1% 97.8%; - --muted: 12 6.5% 15.1%; - --muted-foreground: 24 5.4% 63.9%; - --popover: 20 14.3% 4.1%; - --popover-foreground: 60 9.1% 97.8%; - --card: 20 14.3% 4.1%; - --card-foreground: 60 9.1% 97.8%; - --border: 12 6.5% 15.1%; - --input: 12 6.5% 15.1%; - --primary: 60 9.1% 97.8%; - --primary-foreground: 24 9.8% 10%; - --secondary: 12 6.5% 15.1%; - --secondary-foreground: 60 9.1% 97.8%; - --accent: 12 6.5% 15.1%; - --accent-foreground: 60 9.1% 97.8%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 60 9.1% 97.8%; - --ring: 24 5.7% 82.9%; - --sidebar-background: 240 5.9% 10%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; - } + .dark { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 94%; + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 94%; + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 94%; + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + --primary: 60 9.1% 94%; + --primary-foreground: 24 9.8% 10%; + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 94%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 94%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 94%; + --ring: 24 5.7% 82.9%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } } @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} \ No newline at end of file + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + +@layer components { + .shadow-sharp { + box-shadow: hsl(var(--primary)) 4px 3px 0px; + } + button.shadow-sharp, + a.shadow-sharp { + &:hover { + box-shadow: hsl(var(--primary)) 2px 1px 0px; + translate: 2px 1px; + } + } +} diff --git a/src/lib/components/DNDGroup.svelte b/src/lib/components/DNDGroup.svelte index c0e3ed8..9c3eab8 100644 --- a/src/lib/components/DNDGroup.svelte +++ b/src/lib/components/DNDGroup.svelte @@ -31,7 +31,7 @@ {#each items as item, i (item.id)}
([]); diff --git a/src/routes/(landing)/+layout.svelte b/src/routes/(landing)/+layout.svelte new file mode 100644 index 0000000..3efb8c2 --- /dev/null +++ b/src/routes/(landing)/+layout.svelte @@ -0,0 +1,7 @@ + + +
+ {@render children()} +
diff --git a/src/routes/(landing)/+page.svelte b/src/routes/(landing)/+page.svelte new file mode 100644 index 0000000..e0a60fb --- /dev/null +++ b/src/routes/(landing)/+page.svelte @@ -0,0 +1,30 @@ + + +
+

+ stuff.kasterpalu.ee +

+

Minimängud ja muud huvitavat

+
+
+ {#each games as { name, image, href }} + + + {name} + + + {/each} +
diff --git a/src/routes/(trivia)/+layout.svelte b/src/routes/(trivia)/+layout.svelte new file mode 100644 index 0000000..aa7f751 --- /dev/null +++ b/src/routes/(trivia)/+layout.svelte @@ -0,0 +1,7 @@ + + +
+ {@render children()} +
diff --git a/src/routes/+page.server.ts b/src/routes/(trivia)/pakubiiti/+page.server.ts similarity index 84% rename from src/routes/+page.server.ts rename to src/routes/(trivia)/pakubiiti/+page.server.ts index f2c0afc..55ac24e 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/(trivia)/pakubiiti/+page.server.ts @@ -33,17 +33,20 @@ export const load: PageServerLoad = async ({ fetch, locals }) => { }; } - const albumData = fetch(`/api/getAlbums/${count}`) + const albumData = fetch(`/api/pakubiiti/getAlbums/${count}`) .then((res) => { return res.json(); }) .then((data) => { - const albumNames = data.albums.map((album) => ({ id: nanoid(), value: album.name })); - const albumImages = data.albums.map((album) => ({ + const albumNames = data.albums.map((album: SpotifyApi.AlbumObjectSimplified) => ({ id: nanoid(), - value: album.images.at(0).url + value: album.name })); - const albumArtists = data.albums.map((album) => ({ + const albumImages = data.albums.map((album: SpotifyApi.AlbumObjectSimplified) => ({ + id: nanoid(), + value: album.images.at(0)?.url || '' + })); + const albumArtists = data.albums.map((album: SpotifyApi.AlbumObjectSimplified) => ({ id: nanoid(), value: album.artists.map((artist) => artist.name).join(', ') })); diff --git a/src/routes/+page.svelte b/src/routes/(trivia)/pakubiiti/+page.svelte similarity index 61% rename from src/routes/+page.svelte rename to src/routes/(trivia)/pakubiiti/+page.svelte index d1994ab..e85140f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/(trivia)/pakubiiti/+page.svelte @@ -70,46 +70,56 @@ -
- {#if data?.streamed?.albums} - {#await data.streamed.albums} - {#each { length: 2 } as _} +
+

Paku biiti

+

+ Lohista kokku õiged albumi nimed, + artistid ja + pildid. +

+
+
+ + {#if data?.streamed?.albums} + {#await data.streamed.albums} + {#each { length: 2 } as _} +
+ {#each { length: 3 } as _} + + {/each} +
+ + {/each} +
{#each { length: 3 } as _} - + {/each}
+ + {@render footer(true)} + {:then albums} + - {/each} + + + -
- {#each { length: 3 } as _} - - {/each} -
- - {@render footer(true)} - {:then albums} - + {@render footer(false)} + {/await} + {:else} + - + - + {@render footer(false)} - {/await} - {:else} - - - - - - - {@render footer(false)} - {/if} - + {/if} + +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 7051239..de4bbf7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,13 +1,32 @@ @@ -16,27 +35,17 @@ Mihkel Martin Kasterpalu logo - -
-
-

Paku biiti

-

- Lohista kokku õiged albumi nimed, - artistid ja - pildid. -

-
-
- {@render children()} -
-
+{@render children()} diff --git a/src/routes/api/getAlbums/[count]/+server.ts b/src/routes/api/pakubiiti/getAlbums/[count]/+server.ts similarity index 100% rename from src/routes/api/getAlbums/[count]/+server.ts rename to src/routes/api/pakubiiti/getAlbums/[count]/+server.ts diff --git a/tailwind.config.ts b/tailwind.config.ts index 9f78648..bd19454 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -68,7 +68,8 @@ const config: Config = { }, fontFamily: { sans: [...fontFamily.sans], - title: ['Smooch Sans Variable', ...fontFamily.sans] + title: ['Smooch Sans Variable', ...fontFamily.sans], + mono: ['Kode Mono Variable', ...fontFamily.mono] }, keyframes: { 'accordion-down': { @@ -88,6 +89,9 @@ const config: Config = { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', 'caret-blink': 'caret-blink 1.25s ease-out infinite' + }, + transitionTimingFunction: { + default: 'cubic-bezier(0.16, 1, 0.3, 1)' } } },