From 4070922c8ade84931b883d8134b42ca6b154d55d Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 20 Apr 2023 14:58:00 -0700
Subject: [PATCH] Using svelte-img for external image rendering on bandcamp
 images.

---
 src/lib/components/bandcamp/index.svelte | 21 +++++++++++++++------
 src/lib/types/album.ts                   |  8 ++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/bandcamp/index.svelte b/src/lib/components/bandcamp/index.svelte
index dfdf2d9..22d3dc3 100644
--- a/src/lib/components/bandcamp/index.svelte
+++ b/src/lib/components/bandcamp/index.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
+	import Img from '@zerodevx/svelte-img';
 	import type { Album } from "$root/lib/types/album";
 
 
 	export let albums: Album[];
 	const displayAlbums =
 		albums?.length > 6 ? albums.slice(0, 6) : albums;
+
+	for (let album of displayAlbums) {
+		album.src = [
+			{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
+			{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230},
+			{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230}
+		]
+	}
 </script>
 
 <div>
@@ -19,12 +28,7 @@
 						href={album.url}
 						rel="noreferrer"
 					>
-						<img
-							src={`https://images.weserv.nl/?url=${encodeURIComponent(
-								album.artwork
-							)}&w=230&h=230`}
-							alt={`Album art for ${album.title}`}
-						/>
+						<Img src={album.src} alt={`Album art for ${album.title}`} />
 					</a>
 				</figure>
 				<a
@@ -81,6 +85,11 @@
 		justify-content: center;
 		text-align: center;
 
+		figure {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
 		@media (max-width: 550px) {
 			grid-template-columns: 0.75fr 0.75fr;
 			font-size: 1rem;
diff --git a/src/lib/types/album.ts b/src/lib/types/album.ts
index b0e2c03..7113439 100644
--- a/src/lib/types/album.ts
+++ b/src/lib/types/album.ts
@@ -3,4 +3,12 @@ export type Album = {
 	artwork: string;
 	title: string;
 	artist: string;
+	src?: ExternalImageSource[];
+};
+
+export type ExternalImageSource = {
+	format: string;
+	src: string;
+	width: number;
+	height: number;
 };