From cc008eac72f99b59e32997503c35b23775033e0d Mon Sep 17 00:00:00 2001 From: Andrew B Date: Mon, 17 Apr 2023 18:10:21 -0400 Subject: [PATCH] feat: social links!! --- package.json | 2 + pnpm-lock.yaml | 58 ++++++++++++++++++++ src/app.d.ts | 3 + src/app.html | 2 +- src/lib/components/Intro.svelte | 82 ++++++++++++++++++++++------ src/routes/+layout.svelte | 10 ++-- src/routes/+page.server.ts | 2 +- src/routes/+page.svelte | 2 +- src/routes/api/spotify/np/+server.ts | 17 ++++-- svelte.config.js | 2 +- vite.config.ts | 10 +++- 11 files changed, 157 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 84cb05d..919a9cc 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "format": "prettier --plugin-search-dir . --write ." }, "devDependencies": { + "@iconify-json/carbon": "^1.1.16", "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/kit": "^1.5.0", "@types/node": "^18.15.11", @@ -28,6 +29,7 @@ "tslib": "^2.4.1", "typescript": "^5.0.0", "unocss": "^0.51.4", + "unplugin-icons": "^0.16.1", "vite": "^4.2.0", "vite-imagetools": "^4.0.18" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e21fb05..0462263 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,9 @@ dependencies: version: 5.0.2 devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.16 + version: 1.1.16 '@sveltejs/adapter-auto': specifier: ^2.0.0 version: 2.0.0(@sveltejs/kit@1.15.5) @@ -57,6 +60,9 @@ devDependencies: unocss: specifier: ^0.51.4 version: 0.51.4(postcss@8.4.21)(vite@4.2.1) + unplugin-icons: + specifier: ^0.16.1 + version: 0.16.1 vite: specifier: ^4.2.0 version: 4.2.1(@types/node@18.15.11) @@ -344,6 +350,12 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@iconify-json/carbon@1.1.16: + resolution: {integrity: sha512-AD8bcnRSGA0WfcGEass2FbA0sagrUzrpFx5WchuDy3uf7yKBWumdypdQK121DH321fQDl5+zZQ26T6gC9knwUQ==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + /@iconify/types@2.0.0: resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} dev: true @@ -2412,6 +2424,43 @@ packages: - vite dev: true + /unplugin-icons@0.16.1: + resolution: {integrity: sha512-qTunFUkpAyDnwzwV7YV1ZgCWRYfLuURcCurhhXOWMy2ipY88qx1pADvral2hJu4Xymh0X0t3Zcll3BIru2AVLQ==} + peerDependencies: + '@svgr/core': '>=7.0.0' + '@vue/compiler-sfc': ^3.0.2 || ^2.7.0 + vue-template-compiler: ^2.6.12 + vue-template-es2015-compiler: ^1.9.0 + peerDependenciesMeta: + '@svgr/core': + optional: true + '@vue/compiler-sfc': + optional: true + vue-template-compiler: + optional: true + vue-template-es2015-compiler: + optional: true + dependencies: + '@antfu/install-pkg': 0.1.1 + '@antfu/utils': 0.7.2 + '@iconify/utils': 2.1.5 + debug: 4.3.4 + kolorist: 1.7.0 + local-pkg: 0.4.3 + unplugin: 1.3.1 + transitivePeerDependencies: + - supports-color + dev: true + + /unplugin@1.3.1: + resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==} + dependencies: + acorn: 8.8.2 + chokidar: 3.5.3 + webpack-sources: 3.2.3 + webpack-virtual-modules: 0.5.0 + dev: true + /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: @@ -2477,6 +2526,15 @@ packages: vite: 4.2.1(@types/node@18.15.11) dev: true + /webpack-sources@3.2.3: + resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} + engines: {node: '>=10.13.0'} + dev: true + + /webpack-virtual-modules@0.5.0: + resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==} + dev: true + /which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} diff --git a/src/app.d.ts b/src/app.d.ts index f59b884..a29896e 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -9,4 +9,7 @@ declare global { } } +/// +/// + export {}; diff --git a/src/app.html b/src/app.html index a20adba..6769ed5 100644 --- a/src/app.html +++ b/src/app.html @@ -3,7 +3,7 @@ - + %sveltekit.head% diff --git a/src/lib/components/Intro.svelte b/src/lib/components/Intro.svelte index 79907a6..cf73e09 100644 --- a/src/lib/components/Intro.svelte +++ b/src/lib/components/Intro.svelte @@ -2,12 +2,34 @@ import ProfileImage from '$lib/assets/profile.png?w=300&h=300&webp'; // LSP complains here but it's a thing I pinky promise import skills from '$lib/skills'; - // This is a bit of a hack to get the skills to wrap nicely on smaller screens - // it'll add a break roughly halfway instead of at the first one that doesn't fit - let skillsHalfwayPoint = Math.ceil(skills.length / 2); + // This is a bit of a hack to get the skills to wrap nicely on smaller screens + // it'll add a break roughly halfway instead of at the first one that doesn't fit + let skillsHalfwayPoint = Math.ceil(skills.length / 2); import type { Song } from '$lib/types'; export let data: { song: Song }; + + import IconGithub from '~icons/carbon/logo-github'; + import IconLinkedin from '~icons/carbon/logo-linkedin'; + import IconDiscord from '~icons/carbon/logo-discord'; + import IconInstagram from '~icons/carbon/logo-instagram'; + import IconYoutube from '~icons/carbon/logo-youtube'; + + const links = [ + { name: 'GitHub', icon: IconGithub, href: 'https://github.com/bigspeedfpv' }, + { + name: 'LinkedIn', + icon: IconLinkedin, + href: 'https://www.linkedin.com/in/andrew-brower-6366a9251/' + }, + { + name: 'Discord', + icon: IconDiscord, + href: 'https://discord.com/users/277822562116042753' + }, + { name: 'Instagram', icon: IconInstagram, href: 'https://www.instagram.com/bigspeedfpv/' }, + { name: 'YouTube', icon: IconYoutube, href: 'https://youtube.com/@bigspeedfpv' } + ]; @@ -17,31 +39,57 @@ /> -
- Profile +
+ Profile

Hey! I'm Andrew.

-

I'm a Full-Stack web developer.

+

+ I'm a Full-Stack web developer. +

+ + {#if data.song.isPlaying} + + + Now Playing: + {data.song.artist} - {data.song.title} + + + {/if} +
{#each skills as skill, index} {skill.alt} - {#if skillsHalfwayPoint === index + 1} - - {/if} + {#if skillsHalfwayPoint === index + 1} + + {/if} {/each}
-
- {#if data.song.isPlaying} - - - Now Playing: - {data.song.artist} - {data.song.title} - + + +
+ {#each links as link} + + - {/if} + {/each}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index af680de..d49cd18 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -5,7 +5,7 @@ - +
@@ -13,8 +13,8 @@
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index f768763..a3d3d8b 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,5 +1,5 @@ import type { PageServerLoad } from './$types'; -import { dev } from '$app/environment' +import { dev } from '$app/environment'; export const csr = dev; // homepage doesn't have any interactivity diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 75d7739..06f461d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -9,7 +9,7 @@ Andrew Brower - + diff --git a/src/routes/api/spotify/np/+server.ts b/src/routes/api/spotify/np/+server.ts index 0b46fc5..dcb469e 100644 --- a/src/routes/api/spotify/np/+server.ts +++ b/src/routes/api/spotify/np/+server.ts @@ -1,9 +1,14 @@ +// This site is deployed on Cloudflare Pages, NOT workers. +// Pages supports Functions, but they need to be SvelteKit API endpoints, +// NOT in the /functions directory. + import { SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, SPOTIFY_REFRESH_TOKEN } from '$env/static/private'; +// btoa is deprecated in node but we're not running in node! const basic = btoa(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`); const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`; @@ -36,12 +41,12 @@ const getNowPlaying = async () => { }; const artistString = (artists: Artist[]): string => { - const combined = artists.map(a => a.name).join(', '); + const combined = artists.map((a) => a.name).join(', '); - // we only want the first artist's name if both combined are over 20 chars - if (combined.length > 20) return artists[0].name; - return combined; -} + // we only want the first artist's name if both combined are over 20 chars + if (combined.length > 20) return artists[0].name; + return combined; +}; export async function GET() { const response = await getNowPlaying(); @@ -67,7 +72,7 @@ export async function GET() { const isPlaying = song.is_playing; let title = song.item.name; - let artist = artistString(song.item.artists); + const artist = artistString(song.item.artists); const songUrl = song.item.external_urls.spotify; if (title.length > 25) { diff --git a/svelte.config.js b/svelte.config.js index 1cf26a0..b5f81f0 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,4 +1,4 @@ -import adapter from '@sveltejs/adapter-auto'; +import adapter from '@sveltejs/adapter-cloudflare'; import { vitePreprocess } from '@sveltejs/kit/vite'; /** @type {import('@sveltejs/kit').Config} */ diff --git a/vite.config.ts b/vite.config.ts index 6ac5191..d7365eb 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,7 +3,15 @@ import UnoCSS from 'unocss/vite'; import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; import { imagetools } from 'vite-imagetools'; +import Icons from 'unplugin-icons/vite'; export default defineConfig({ - plugins: [imagetools(), sveltekit(), UnoCSS()] + plugins: [ + Icons({ + compiler: 'svelte' + }), + imagetools(), + sveltekit(), + UnoCSS() + ] }); -- 2.51.2