From 1cd9346a154ad820b2fd12da949317a24ba3e177 Mon Sep 17 00:00:00 2001 From: cubedhuang <99danielh@gmail.com> Date: Sun, 10 Sep 2023 17:10:18 -0400 Subject: [PATCH] add spotify and navbar --- package.json | 1 + pnpm-lock.yaml | 21 +++++ postcss.config.cjs | 8 +- src/app.postcss | 33 +++++-- src/lib/components/SpotifyInfo.svelte | 13 --- src/lib/components/icons/Envelope.svelte | 13 +++ src/lib/components/icons/GitHub.svelte | 3 +- src/lib/components/icons/Linkedin.svelte | 10 ++ src/lib/components/icons/MusicalNote.svelte | 12 +++ src/lib/components/icons/Spotify.svelte | 3 +- src/lib/components/icons/Twitter.svelte | 3 +- src/lib/types.ts | 9 ++ src/routes/(home)/+page.svelte | 58 ++++++++++++ .../components => routes/(home)}/Clock.svelte | 22 +++-- .../(home)}/DiscordInfo.svelte | 15 +-- src/routes/(home)/SocialLink.svelte | 14 +++ src/routes/(home)/SpotifyInfo.svelte | 91 +++++++++++++++++++ src/routes/+error.svelte | 15 +++ src/routes/+layout.svelte | 13 ++- src/routes/+page.svelte | 60 ------------ src/routes/NavLink.svelte | 13 +++ src/routes/api/now-playing/+server.ts | 32 +++---- src/routes/music/+page.svelte | 0 src/routes/projects/+page.svelte | 0 24 files changed, 335 insertions(+), 127 deletions(-) delete mode 100644 src/lib/components/SpotifyInfo.svelte create mode 100644 src/lib/components/icons/Envelope.svelte create mode 100644 src/lib/components/icons/Linkedin.svelte create mode 100644 src/lib/components/icons/MusicalNote.svelte create mode 100644 src/lib/types.ts create mode 100644 src/routes/(home)/+page.svelte rename src/{lib/components => routes/(home)}/Clock.svelte (62%) rename src/{lib/components => routes/(home)}/DiscordInfo.svelte (75%) create mode 100644 src/routes/(home)/SocialLink.svelte create mode 100644 src/routes/(home)/SpotifyInfo.svelte create mode 100644 src/routes/+error.svelte delete mode 100644 src/routes/+page.svelte create mode 100644 src/routes/NavLink.svelte create mode 100644 src/routes/music/+page.svelte create mode 100644 src/routes/projects/+page.svelte diff --git a/package.json b/package.json index 4f5ff58..3645c5f 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "eslint-config-prettier": "^9.0.0", "eslint-plugin-svelte": "^2.33.1", "postcss": "^8.4.29", + "postcss-each": "^1.1.0", "postcss-load-config": "^4.0.1", "prettier": "^2.8.8", "prettier-plugin-svelte": "^2.10.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b1167d8..d72fc31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,6 +43,9 @@ devDependencies: postcss: specifier: ^8.4.29 version: 8.4.29 + postcss-each: + specifier: ^1.1.0 + version: 1.1.0(postcss@8.4.29) postcss-load-config: specifier: ^4.0.1 version: 4.0.1(postcss@8.4.29) @@ -1682,6 +1685,15 @@ packages: engines: {node: '>= 6'} dev: true + /postcss-each@1.1.0(postcss@8.4.29): + resolution: {integrity: sha512-YfTPHHAPFVRgEJfLg9RM4R9WYEHVU9Rf1R8QgZfnObwV2dgNqzTLzTl0w5tF71ApFcYLiJAXiTpHAoqJFYcZVw==} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss: 8.4.29 + postcss-simple-vars: 6.0.3(postcss@8.4.29) + dev: true + /postcss-import@15.1.0(postcss@8.4.29): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -1774,6 +1786,15 @@ packages: util-deprecate: 1.0.2 dev: true + /postcss-simple-vars@6.0.3(postcss@8.4.29): + resolution: {integrity: sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==} + engines: {node: '>=10.0'} + peerDependencies: + postcss: ^8.2.1 + dependencies: + postcss: 8.4.29 + dev: true + /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} dev: true diff --git a/postcss.config.cjs b/postcss.config.cjs index fe10e55..b9e6f27 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,13 +1,9 @@ +const postcssEach = require('postcss-each'); const tailwindcss = require('tailwindcss'); const autoprefixer = require('autoprefixer'); const config = { - plugins: [ - //Some plugins, like tailwindcss/nesting, need to run before Tailwind, - tailwindcss(), - //But others, like autoprefixer, need to run after, - autoprefixer - ] + plugins: [postcssEach, tailwindcss(), autoprefixer] }; module.exports = config; diff --git a/src/app.postcss b/src/app.postcss index 6837609..57ca471 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -53,16 +53,33 @@ @apply mx-auto max-w-screen-md px-8; } - .focus-outline { - @apply outline-none outline-2 outline-offset-2 - focus-visible:outline-purple-500; + main > *, + nav { + animation-name: fade-in; + animation-duration: 800ms; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.37, 0.69, 0.39, 0.99); } - .link { - @apply focus-outline rounded-lg - inline-block no-underline mx-0.5 text-purple-600 font-semibold relative transition duration-300 - after:absolute after:block after:-inset-x-1 after:bottom-1 after:h-4 after:opacity-10 after:bg-current after:rounded-full after:transition-all after:duration-300 - hocus:text-purple-700 hocus:after:inset-x-0 hocus:after:bottom-1 hocus:after:h-2 hocus:after:opacity-30; + nav { + animation-delay: 1500ms; + } + + @each $i in 1, 2, 3, 4, 5, 6, 7, 8, 9 { + main > *:nth-child($(i)) { + animation-delay: calc($(i) * 100ms); + } + } + + @keyframes fade-in { + from { + opacity: 0; + transform: translateY(1rem); + } + to { + opacity: 1; + transform: translateY(0); + } } } diff --git a/src/lib/components/SpotifyInfo.svelte b/src/lib/components/SpotifyInfo.svelte deleted file mode 100644 index bf2598e..0000000 --- a/src/lib/components/SpotifyInfo.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - -
{JSON.stringify(data, null, 2)}
diff --git a/src/lib/components/icons/Envelope.svelte b/src/lib/components/icons/Envelope.svelte new file mode 100644 index 0000000..f596e51 --- /dev/null +++ b/src/lib/components/icons/Envelope.svelte @@ -0,0 +1,13 @@ + + + + diff --git a/src/lib/components/icons/GitHub.svelte b/src/lib/components/icons/GitHub.svelte index 756bbcd..2ab2d27 100644 --- a/src/lib/components/icons/GitHub.svelte +++ b/src/lib/components/icons/GitHub.svelte @@ -1,9 +1,8 @@ + + diff --git a/src/lib/components/icons/MusicalNote.svelte b/src/lib/components/icons/MusicalNote.svelte new file mode 100644 index 0000000..7e1e254 --- /dev/null +++ b/src/lib/components/icons/MusicalNote.svelte @@ -0,0 +1,12 @@ + + + diff --git a/src/lib/components/icons/Spotify.svelte b/src/lib/components/icons/Spotify.svelte index 11b7777..4906d5b 100644 --- a/src/lib/components/icons/Spotify.svelte +++ b/src/lib/components/icons/Spotify.svelte @@ -1,9 +1,8 @@ + import Clock from './Clock.svelte'; + import DiscordInfo from './DiscordInfo.svelte'; + import SocialLink from './SocialLink.svelte'; + import SpotifyInfo from './SpotifyInfo.svelte'; + + import GitHub from '$lib/components/icons/GitHub.svelte'; + import Envelope from '$lib/components/icons/Envelope.svelte'; + import Linkedin from '$lib/components/icons/Linkedin.svelte'; + import Spotify from '$lib/components/icons/Spotify.svelte'; + import Twitter from '$lib/components/icons/Twitter.svelte'; + + + + Daniel + + +
+

Daniel!

+ +

+ Hey! I'm Daniel, a 17-year-old developer from + Atlanta, Georgia. +

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + diff --git a/src/lib/components/Clock.svelte b/src/routes/(home)/Clock.svelte similarity index 62% rename from src/lib/components/Clock.svelte rename to src/routes/(home)/Clock.svelte index 66afa24..056de99 100644 --- a/src/lib/components/Clock.svelte +++ b/src/routes/(home)/Clock.svelte @@ -1,8 +1,8 @@ -{#if isDay} - -{:else} - -{/if} +

+ {#if isDay} + + {:else} + + {/if} -{df.format($now)} -· -{tf.format($now)} + {df.format($now)} + · + {tf.format($now)} +

diff --git a/src/lib/components/DiscordInfo.svelte b/src/routes/(home)/DiscordInfo.svelte similarity index 75% rename from src/lib/components/DiscordInfo.svelte rename to src/routes/(home)/DiscordInfo.svelte index 8f8c780..b4f5795 100644 --- a/src/lib/components/DiscordInfo.svelte +++ b/src/routes/(home)/DiscordInfo.svelte @@ -10,37 +10,38 @@ const statusColors: Record = { online: 'bg-emerald-500', idle: 'bg-amber-400', - dnd: 'bg-rose-400' + dnd: 'bg-rose-400', + offline: 'bg-gray-600' }; $: customStatus = $lanyard?.activities.find(a => a.type === 4); -
+
{#if $lanyard} {:else} -
+
{/if}
-
+

{#if $lanyard} {$lanyard.discord_user.display_name} - + {$lanyard.discord_user.username} {/if} diff --git a/src/routes/(home)/SocialLink.svelte b/src/routes/(home)/SocialLink.svelte new file mode 100644 index 0000000..43f8621 --- /dev/null +++ b/src/routes/(home)/SocialLink.svelte @@ -0,0 +1,14 @@ + + + + + diff --git a/src/routes/(home)/SpotifyInfo.svelte b/src/routes/(home)/SpotifyInfo.svelte new file mode 100644 index 0000000..4a7c28c --- /dev/null +++ b/src/routes/(home)/SpotifyInfo.svelte @@ -0,0 +1,91 @@ + + +

+ {#if data?.track?.album.images[0]?.url} + + {:else} +
+ + + +
+ {/if} + +
+

+ {#if data?.track} + + {data.track.name} + + + {#each data.track.artists as artist, i (artist.id)} + {#if i !== 0} + , + {/if} + + {artist.name} + {/each} + {:else} + Not Listening to Anything + {/if} +

+ +

+ + + {#if data?.isPlayingNow} + Listening on + {:else if data?.track} + Last Played on + {/if} + Spotify +

+
+
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte new file mode 100644 index 0000000..af64bab --- /dev/null +++ b/src/routes/+error.svelte @@ -0,0 +1,15 @@ + + +
+

+ {$page.status} – + {$page.error?.message ?? 'Unknown error'} +

+ +

+ Seems like this page doesn't exist. Let's go back + home. +

+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index da212a0..ba0b38d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,16 @@ - + + +
+ +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte deleted file mode 100644 index 9d33489..0000000 --- a/src/routes/+page.svelte +++ /dev/null @@ -1,60 +0,0 @@ - - - - Daniel - - -
-

Daniel!

- -

- Hey! I'm Daniel, a 17-year-old developer from - Atlanta, Georgia. -

- -
- - - - - - - - - - - -
- -

- -

- - - -
- - diff --git a/src/routes/NavLink.svelte b/src/routes/NavLink.svelte new file mode 100644 index 0000000..810f811 --- /dev/null +++ b/src/routes/NavLink.svelte @@ -0,0 +1,13 @@ + + +
  • + + + +
    • diff --git a/src/routes/api/now-playing/+server.ts b/src/routes/api/now-playing/+server.ts index 675572d..958d55e 100644 --- a/src/routes/api/now-playing/+server.ts +++ b/src/routes/api/now-playing/+server.ts @@ -1,21 +1,8 @@ import { error, json } from '@sveltejs/kit'; import { env } from '$env/dynamic/private'; +import type { NowPlayingResponse } from '$lib/types'; import Spotify from 'spotify-web-api-node'; -export type NowPlayingResponseSuccess = { - /** - * Whether the track is from recently played or currently playing. - */ - isPlayingNow: boolean; - isPaused: boolean; - progessMs: number; - track: SpotifyApi.TrackObjectFull | null; -}; -export type NowPlayingResponseError = { error: unknown }; -export type NowPlayingResponse = - | NowPlayingResponseSuccess - | NowPlayingResponseError; - const api = new Spotify({ clientId: env.SPOTIFY_CLIENT_ID, clientSecret: env.SPOTIFY_CLIENT_SECRET, @@ -32,7 +19,7 @@ export async function GET() { expirationTime = Date.now() + response.body.expires_in * 1000; } - let response: NowPlayingResponseSuccess = { + const response: NowPlayingResponse = { isPlayingNow: false, isPaused: false, progessMs: 0, @@ -58,6 +45,19 @@ export async function GET() { return json(response); } catch (err) { - throw error(500, (err as any)?.message ?? err ?? 'Unknown error'); + console.error(err); + + throw error( + 500, + `${ + !err + ? 'Unknown error' + : typeof err !== 'object' + ? err + : 'message' in err + ? err.message + : err + }` + ); } } diff --git a/src/routes/music/+page.svelte b/src/routes/music/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte new file mode 100644 index 0000000..e69de29