Update image blur placeholder

salimi-my · Apr 22, 2024 · 9f25154 · 9f25154
1 parent 6746948
commit 9f25154
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 54 deletions.
diff --git a/app/api/portfolio/[portfolioId]/route.ts b/app/api/portfolio/[portfolioId]/route.ts
@@ -2,6 +2,7 @@ import { NextResponse } from 'next/server';
 import { revalidatePath } from 'next/cache';
 
 import prismadb from '@/lib/prismadb';
+import getBlurDataUrl from '@/data/image-blur';
 import { currentUser } from '@/lib/authentication';
 
 export async function PATCH(
@@ -91,13 +92,16 @@ export async function PATCH(
       );
     }
 
+    const blurDataUrl = await getBlurDataUrl(image);
+
     const portfolio = await prismadb.portfolio.update({
       where: {
         id: params.portfolioId
       },
       data: {
         image,
         thumbnail,
+        blurDataUrl,
         title,
         description,
         githubUrl,

diff --git a/app/api/portfolio/route.ts b/app/api/portfolio/route.ts
@@ -2,8 +2,8 @@ import { revalidatePath } from 'next/cache';
 import { NextRequest, NextResponse } from 'next/server';
 
 import prismadb from '@/lib/prismadb';
+import getBlurDataUrl from '@/data/image-blur';
 import { currentUser } from '@/lib/authentication';
-import addBlurredDataUrls from '@/data/image-blur';
 
 export async function POST(req: Request) {
   try {
@@ -69,10 +69,13 @@ export async function POST(req: Request) {
       );
     }
 
+    const blurDataUrl = await getBlurDataUrl(image);
+
     const portfolio = await prismadb.portfolio.create({
       data: {
         image,
         thumbnail,
+        blurDataUrl,
         title,
         description,
         githubUrl,
@@ -125,9 +128,7 @@ export async function GET(req: NextRequest) {
       }
     });
 
-    const photosWithBlur = await addBlurredDataUrls(portfolios);
-
-    return NextResponse.json(photosWithBlur);
+    return NextResponse.json(portfolios);
   } catch (error) {
     console.log('[PORTFOLIO_GET]', error);
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -24,7 +24,7 @@ export default async function HomePage() {
     contentcreation,
     education,
     experience,
-    portfolioWithBlur,
+    portfolioWithTags,
     miscellaneous,
     tool
   } = await getInformation();
@@ -81,7 +81,7 @@ export default async function HomePage() {
           contentcreation={contentcreation}
         />
         <Qualification education={education} experience={experience} />
-        <Portfolio portfolioWithBlur={portfolioWithBlur} />
+        <Portfolio portfolioWithTags={portfolioWithTags} />
         <Tool tool={tool} />
         <Contact miscellaneous={miscellaneous} />
       </main>

diff --git a/components/landing/portfolio-card.tsx b/components/landing/portfolio-card.tsx
@@ -14,12 +14,8 @@ type PortfolioWithTags = Prisma.PortfolioGetPayload<{
   include: { tags: true };
 }>;
 
-type PortfolioWithBlur = PortfolioWithTags & {
-  blurredDataUrl?: string;
-};
-
 interface PortfolioCardProps {
-  portfolio: PortfolioWithBlur;
+  portfolio: PortfolioWithTags;
   index: number;
 }
 
@@ -40,17 +36,25 @@ export default function PortfolioCard({
       className='relative w-full h-min rounded-2xl flex flex-col group'
     >
       <div className='relative w-full h-[250px] lg:h-[300px] overflow-hidden'>
-        {portfolio.image && portfolio.blurredDataUrl && (
+        {portfolio.image && portfolio.blurDataUrl ? (
           <Image
             src={portfolio.image}
             alt='portfolio'
             fill
             placeholder='blur'
-            blurDataURL={portfolio.blurredDataUrl}
+            blurDataURL={portfolio.blurDataUrl}
+            sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
+            className='object-cover object-top group-hover:object-bottom transition-all duration-6000 ease-in-out rounded-t-2xl border-t border-x'
+          />
+        ) : portfolio.image ? (
+          <Image
+            src={portfolio.image}
+            alt='portfolio'
+            fill
             sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
             className='object-cover object-top group-hover:object-bottom transition-all duration-6000 ease-in-out rounded-t-2xl border-t border-x'
           />
-        )}
+        ) : null}
       </div>
       <div className='flex flex-col gap-4 rounded-b-2xl py-9 px-6 md:px-6 border border-t-primary dark:border-t-zinc-100 group-hover:border-t-zinc-200 dark:group-hover:border-t-zinc-800 bg-primary group-hover:bg-primary-foreground transition-colors duration-300 ease-in-out'>
         <h3 className='text-base lg:text-[1.2rem] font-medium text-primary-foreground group-hover:text-primary'>

diff --git a/components/landing/portfolio.tsx b/components/landing/portfolio.tsx
@@ -14,18 +14,18 @@ import PortfolioCard from '@/components/landing/portfolio-card';
 
 type PortfolioProps = Pick<
   Awaited<ReturnType<typeof getInformation>>,
-  'portfolioWithBlur'
+  'portfolioWithTags'
 >;
 
-export default function Portfolio({ portfolioWithBlur }: PortfolioProps) {
+export default function Portfolio({ portfolioWithTags }: PortfolioProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
 
   const { toast } = useToast();
 
   const [offset, setOffset] = useState(6);
   const [loading, setLoading] = useState(false);
-  const [portfolios, setPortfolios] = useState(portfolioWithBlur);
+  const [portfolios, setPortfolios] = useState(portfolioWithTags);
 
   const onLoadMore = async () => {
     try {

diff --git a/data/image-blur.ts b/data/image-blur.ts
@@ -1,4 +1,3 @@
-import type { Prisma } from '@prisma/client';
 import { getPlaiceholder } from 'plaiceholder';
 
 async function getBase64(imageUrl: string) {
@@ -19,31 +18,10 @@ async function getBase64(imageUrl: string) {
   }
 }
 
-type PortfolioWithTags = Prisma.PortfolioGetPayload<{
-  include: { tags: true };
-}>;
+export default async function getBlurDataUrl(
+  imageUrl: string
+): Promise<string | undefined> {
+  const blurDataUrl = await getBase64(imageUrl);
 
-type PortfolioWithBlur = PortfolioWithTags & {
-  blurredDataUrl?: string;
-};
-
-export default async function addBlurredDataUrls(
-  portfolios: PortfolioWithBlur[]
-): Promise<PortfolioWithBlur[]> {
-  // Make all requests at once instead of awaiting each one - avoiding a waterfall
-  const base64Promises = portfolios.map((portfolio) =>
-    getBase64(portfolio.image!)
-  );
-
-  // Resolve all requests in order
-  const base64Results = await Promise.all(base64Promises);
-
-  const portfolioWithBlur: PortfolioWithBlur[] = portfolios.map(
-    (portfolio, index) => {
-      portfolio.blurredDataUrl = base64Results[index];
-      return portfolio;
-    }
-  );
-
-  return portfolioWithBlur;
+  return blurDataUrl;
 }
diff --git a/data/information.ts b/data/information.ts
@@ -1,5 +1,4 @@
 import prismadb from '@/lib/prismadb';
-import addBlurredDataUrls from '@/data/image-blur';
 import type {
   About,
   Experience,
@@ -13,10 +12,6 @@ type PortfolioWithTags = Prisma.PortfolioGetPayload<{
   include: { tags: true };
 }>;
 
-type PortfolioWithBlur = PortfolioWithTags & {
-  blurredDataUrl?: string;
-};
-
 type MiscellaneousWithTitles = Prisma.MiscellaneousGetPayload<{
   include: { titles: true };
 }>;
@@ -30,7 +25,7 @@ interface Data {
   contentcreation: Expertise[];
   education: Qualification[];
   experience: Qualification[];
-  portfolioWithBlur: PortfolioWithBlur[];
+  portfolioWithTags: PortfolioWithTags[];
   miscellaneous: MiscellaneousWithTitles | null;
   tool: Tool[];
 }
@@ -41,7 +36,7 @@ export default async function getInformation(): Promise<Data> {
     experiences,
     expertises,
     qualifications,
-    portfolio,
+    portfolioWithTags,
     miscellaneous,
     tool
   ] = await Promise.all([
@@ -112,8 +107,6 @@ export default async function getInformation(): Promise<Data> {
       experience.push(qualification);
   }
 
-  const portfolioWithBlur = await addBlurredDataUrls(portfolio);
-
   return {
     about,
     frontend,
@@ -123,7 +116,7 @@ export default async function getInformation(): Promise<Data> {
     contentcreation,
     education,
     experience,
-    portfolioWithBlur,
+    portfolioWithTags,
     miscellaneous,
     tool
   };

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -145,6 +145,7 @@ model Portfolio {
   id           String    @id @default(cuid())
   image        String?
   thumbnail    String?
+  blurDataUrl  String?   @db.Text
   title        String
   description  String
   githubUrl    String