diff --git a/package.json b/package.json index 503f9a9..50b7fb1 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@resvg/resvg-js": "^2.6.2", "@sveltejs/adapter-vercel": "^5.5.0", "@types/nprogress": "^0.2.3", + "@unpic/svelte": "^0.0.56", "@vercel/og": "^0.6.4", "bits-ui": "^0.21.16", "flexsearch": "^0.7.43", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1994e3..0da7a6d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@types/nprogress': specifier: ^0.2.3 version: 0.2.3 + '@unpic/svelte': + specifier: ^0.0.56 + version: 0.0.56(svelte@5.3.1) '@vercel/og': specifier: ^0.6.4 version: 0.6.4 @@ -1395,6 +1398,14 @@ packages: '@types/unist@2.0.6': resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} + '@unpic/core@0.0.52': + resolution: {integrity: sha512-XRX0ePG0nH/K9x/coCQwFzSzg66INBNgPZR2FeSis6BHyxw3sBjL4KDzYse6d/Zx0F3APWsWkK2htaGRznjHMw==} + + '@unpic/svelte@0.0.56': + resolution: {integrity: sha512-YkZaHLYEQycs4MoBH0YXt29hdSaS6RoUOpSf1IaZ4MnfJOrRcjpAxIsN8uMaLu8g7IyxO9dWHmPmmECpKluA5g==} + peerDependencies: + svelte: '*' + '@vercel/nft@0.27.1': resolution: {integrity: sha512-K6upzYHCV1cq2gP83r1o8uNV1vwvAlozvMqp7CEjYWxo0CMI8/4jKcDkVjlypVhrfZ54SXwh9QbH0ZIk/vQCsw==} engines: {node: '>=16'} @@ -2634,6 +2645,9 @@ packages: strip-literal@2.1.0: resolution: {integrity: sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==} + style-object-to-css-string@1.1.3: + resolution: {integrity: sha512-bISQoUsir/qGfo7vY8rw00ia9nnyE1jvYt3zZ2jhdkcXZ6dAEi74inMzQ6On57vFI+I4Fck6wOv5UI9BEwJDgw==} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -2789,6 +2803,9 @@ packages: unist-util-visit@3.1.0: resolution: {integrity: sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==} + unpic@3.20.0: + resolution: {integrity: sha512-reWY4Ez9FCjw8J7fGByyyi1Z1fv20xjkFgDa9xI7vqdg89fcLzUYkROKo7yZ5WHRelq6x+pL4ohPRzEdU020aQ==} + update-browserslist-db@1.1.0: resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==} hasBin: true @@ -3944,6 +3961,17 @@ snapshots: '@types/unist@2.0.6': {} + '@unpic/core@0.0.52': + dependencies: + unpic: 3.20.0 + + '@unpic/svelte@0.0.56(svelte@5.3.1)': + dependencies: + '@unpic/core': 0.0.52 + style-object-to-css-string: 1.1.3 + svelte: 5.3.1 + unpic: 3.20.0 + '@vercel/nft@0.27.1': dependencies: '@mapbox/node-pre-gyp': 1.0.11 @@ -5335,6 +5363,8 @@ snapshots: dependencies: js-tokens: 9.0.0 + style-object-to-css-string@1.1.3: {} + supports-preserve-symlinks-flag@1.0.0: {} svelte-check@4.1.0(picomatch@4.0.2)(svelte@5.3.1)(typescript@5.7.2): @@ -5483,6 +5513,8 @@ snapshots: unist-util-is: 5.2.0 unist-util-visit-parents: 4.1.1 + unpic@3.20.0: {} + update-browserslist-db@1.1.0(browserslist@4.23.3): dependencies: browserslist: 4.23.3 diff --git a/src/lib/components/Portfolio.svelte b/src/lib/components/Portfolio.svelte index 2dc1d6e..0b08b6f 100644 --- a/src/lib/components/Portfolio.svelte +++ b/src/lib/components/Portfolio.svelte @@ -1,21 +1,30 @@

{name}

- - + + {@render links(externalLinks)}
- + {@render details()}
diff --git a/src/lib/types/externalLinkType.ts b/src/lib/types/externalLinkType.ts new file mode 100644 index 0000000..d9c6d1f --- /dev/null +++ b/src/lib/types/externalLinkType.ts @@ -0,0 +1,9 @@ +import type { IconifyIcon } from "iconify-icon"; + +export type ExternalLinkType = { + ariaLabel: string; + href: string; + icon?: IconifyIcon; + showIcon: boolean; + text: string; +}; \ No newline at end of file diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 6950ef3..7e1bd3b 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -43,10 +43,10 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => { url: currentPageUrl }); - const [albums, articles]: [Album[], ArticlePageLoad] = await Promise.all([ - await fetchBandcampAlbums(), - (await fetch('/api/articles?page=1&limit=3')).json() - ]); + // const [albums, articles]: [Album[], ArticlePageLoad] = await Promise.all([ + // await fetchBandcampAlbums(), + // (await fetch('/api/articles?page=1&limit=3')).json() + // ]); setHeaders({ 'cache-control': 'max-age=43200' @@ -54,7 +54,7 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => { return { baseUrl, metaTagsChild: metaTags, - albums, - articlesData: articles + albums: await fetchBandcampAlbums(), + articlesData: await (await fetch('/api/articles?page=1&limit=3')).json() }; }; \ No newline at end of file diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte index 4969af1..fa6513b 100644 --- a/src/routes/portfolio/+page.svelte +++ b/src/routes/portfolio/+page.svelte @@ -1,33 +1,53 @@ +{#snippet links(externalLinks: ExternalLinkType[])} + + {#each externalLinks as link} + + {link.text} + + {/each} + +{/snippet} + +{#snippet details(portfolioDetails: string)} + {portfolioDetails} +{/snippet} +

Portfolio!

@@ -42,42 +62,38 @@ style="max-height: 550px;" src={personalSite} loading="eager" - alt="Picture of Bradley Shellnut's Personal Website"> - - GitHub repository - - + alt="Picture of Bradley Shellnut's Personal Website" + {links} + {details} + portfolioDetails={PersonalWebsiteSvelteKit} + externalLinks={[{ ariaLabel: 'View GitHub repository for my personal website', href: 'https://github.com/BradNut/personal-website-sveltekit', icon: GitHub, showIcon: true, text: 'GitHub repository'}]}> - - View Site - GitHub repository - - - - + - - Link to an archive snapshot - - - + alt="Home Page of the old bradleyshellnut.com website" + {links} + {details} + portfolioDetails={OldWebsite} + externalLinks={[{ ariaLabel: 'Archive of bradleyshellnut.com', href: 'https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about', icon: GitHub, showIcon: true, text: 'Link to an archive snapshot'}]}/>
- - Link to Mark Shellnut's Website - - - + alt="Picture of Mark Shellnut Architect's Website" + {links} + {details} + portfolioDetails={MarkShellnutArchitect} + externalLinks={[{ ariaLabel: 'View Mark Shellnut Architect', href: 'https://markshellnutarchitect.com', showIcon: false, text: 'Link to Mark Shellnut Architect'}]} />