From dc33d9b3abb780bf8d25e9d277011638b014b405 Mon Sep 17 00:00:00 2001
From: Josh GM Walker <56300765+Josh-Walker-GM@users.noreply.github.com>
Date: Wed, 19 Jun 2024 22:08:42 +0100
Subject: [PATCH] add image sizes to network request

---
 web/src/components/BlogCard/BlogCard.tsx                    | 4 +++-
 web/src/components/BlogListItem/BlogListItem.tsx            | 4 +++-
 .../IndividualBlogPostCell/IndividualBlogPostCell.tsx       | 6 +++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/components/BlogCard/BlogCard.tsx b/web/src/components/BlogCard/BlogCard.tsx
index 0580c91..6d89ef2 100644
--- a/web/src/components/BlogCard/BlogCard.tsx
+++ b/web/src/components/BlogCard/BlogCard.tsx
@@ -25,6 +25,8 @@ interface BlogCardProps {
 }
 
 const BlogCard = ({ post }: BlogCardProps) => {
+  const profilePictureUrl = new URL(post.author.profilePicture)
+  profilePictureUrl.searchParams.set('height', '128')
   return (
     <article className="rounded-[4px] border-1 border-maiTai p-7 pb-5">
       <h4 className="mb-2 text-sm font-bold uppercase text-maiTai">
@@ -54,7 +56,7 @@ const BlogCard = ({ post }: BlogCardProps) => {
             className="text-black dark:text-white"
           />
         </Link>
-        <Avatar alt={post.author.name} src={post.author.profilePicture} />
+        <Avatar alt={post.author.name} src={profilePictureUrl} />
       </div>
     </article>
   )
diff --git a/web/src/components/BlogListItem/BlogListItem.tsx b/web/src/components/BlogListItem/BlogListItem.tsx
index 1492bec..f5550d0 100644
--- a/web/src/components/BlogListItem/BlogListItem.tsx
+++ b/web/src/components/BlogListItem/BlogListItem.tsx
@@ -23,6 +23,8 @@ interface Props {
 }
 
 const BlogListItem = ({ post }: Props) => {
+  const profilePictureUrl = new URL(post.author.profilePicture)
+  profilePictureUrl.searchParams.set('height', '128')
   return (
     <article>
       <h3 className="mb-2 text-sm font-bold uppercase text-maiTai">
@@ -55,7 +57,7 @@ const BlogListItem = ({ post }: Props) => {
 
       {/* author */}
       <div className="flex items-center gap-x-6">
-        <Avatar alt={post.author.name} src={post.author.profilePicture} />
+        <Avatar alt={post.author.name} src={profilePictureUrl} />
         <div>
           <div className="text-lg">{post.author.name}</div>
         </div>
diff --git a/web/src/components/IndividualBlogPostCell/IndividualBlogPostCell.tsx b/web/src/components/IndividualBlogPostCell/IndividualBlogPostCell.tsx
index 155a59e..b576c9c 100644
--- a/web/src/components/IndividualBlogPostCell/IndividualBlogPostCell.tsx
+++ b/web/src/components/IndividualBlogPostCell/IndividualBlogPostCell.tsx
@@ -84,6 +84,10 @@ export const Success = ({
   }, [post])
 
   const { origin } = useLocation()
+
+  const profilePictureUrl = new URL(post.author.profilePicture)
+  profilePictureUrl.searchParams.set('height', '128')
+
   return (
     <div className="page-grid">
       <Metadata
@@ -104,7 +108,7 @@ export const Success = ({
         </h2>
 
         <div className="mb-10 flex items-center gap-3">
-          <Avatar alt={post.author.name} src={post.author.profilePicture} />
+          <Avatar alt={post.author.name} src={profilePictureUrl} />
           <div className="text-lg text-black dark:text-white">
             {post.author.name}
           </div>