feat: use wsrc.nl as a CDN for the images

https://images.weserv.nl/ is used to cache and resize images based on
the needs of different components on the page

Author: stehefan

app/components/Exercise/Exercise.tsx

@@ -35,18 +35,20 @@ export default function Exercise(props: ExerciseProps) {
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         setNote(event.target.value);
     };
+    const width: number = 382;
+    const height: number = Math.floor(width / 16 * 9);
 
     return (
         <div className={'w-full max-w-96 flex flex-col rounded-lg border border-neutral-300 dark:border-neutral-600'}>
-            <div className={'relative aspect-video rounded-t-lg cursor-pointer'}
+            <div className={'relative rounded-t-lg cursor-pointer'}
                  onClick={() => setDisplayVideoPlayer(!displayVideoPlayer)}>
                 {hasPreviewImage ? (
                     <Image
-                        src={props.exercise.previewImageUrl!}
+                        src={`https://wsrv.nl/?url=${props.exercise.previewImageUrl!}&w=${width}&h=${height}&dpr=2`}
                         alt={'Woman holding dumbbell in white crew neck t-shirt'}
-                        width={1080}
-                        height={721}
-                        className={'rounded-t-lg object-cover w-96 h-auto'}/>
+                        width={width}
+                        height={height}
+                        className={'rounded-t-lg object-cover'}/>
                 ) : (
                     <div className='w-full h-auto'>
                         <PreviewImagePlaceholder/>

app/components/WorkoutPreview/WorkoutPreview.tsx

@@ -33,10 +33,11 @@ export default function WorkoutPreview(props: WorkoutPreviewProps) {
     const exercises = topUpPreviewImages(exercisesWithImages)
         .map((exercise, index) => {
             const width = 128;
+            const height = Math.floor(width / 16 * 9);
             return <Image key={`${exercise.id}-${index}`}
-                          src={exercise.previewImageUrl!}
+                          src={`https://wsrv.nl/?url=${exercise.previewImageUrl!}&w=${width}&h=${height}&dpr=2`}
                           width={width}
-                          height={width / 16 * 9}
+                          height={height}
                           alt={exercise.exerciseName}
             />
         })

next.config.mjs

@@ -7,6 +7,11 @@ const nextConfig = {
                 hostname: '*.public.blob.vercel-storage.com',
                 port: '',
             },
+            {
+                protocol: 'https',
+                hostname: 'wsrv.nl',
+                port: '',
+            },
         ],
     },
 };