completely remove blur step with plaiceholder

src/components/ItemCard.tsx

@@ -12,7 +12,6 @@ import { type LinkIcon, LinkIcons } from "../utils/types";
 type ItemCardProps = {
   banner: string;
   bannerSettings?: { quality: number };
-  bannerBlur: string;
   title: string;
   description: string;
   links?: LinkIcon[];
@@ -21,7 +20,6 @@ type ItemCardProps = {
 
 const ItemCard = ({
   banner,
-  bannerBlur,
   title,
   description,
   links,
@@ -64,11 +62,9 @@ const ItemCard = ({
           fill
           src={banner}
           quality={bannerSettings?.quality ?? 75}
-          blurDataURL={bannerBlur}
           className={(loaded) =>
             classNames("object-cover", loaded ? null : "blur-xl")
           }
-          placeholder="blur"
           alt={`Banner for ${title}`}
         />
         <div className="elements m-2 grid h-full grid-cols-12 px-1 sm:px-4">

src/pages/index.tsx

@@ -2,7 +2,6 @@ import { readSingleton } from "@directus/sdk";
 import { type NextPage } from "next";
 import Head from "next/head";
 import Link from "next/link";
-import { getPlaiceholder } from "plaiceholder";
 import { useEffect } from "react";
 import Balancer from "react-wrap-balancer";
 import AppWrapper from "../components/AppWrapper";
@@ -11,11 +10,9 @@ import directus from "../utils/directus";
 import { useBreakpointValue } from "../utils/helpers";
 import type { Project } from "../utils/types";
 
-type ProjectWithBlur = Project & { bannerBlur: string };
-
 type Props = {
   tagline: string;
-  projects: ProjectWithBlur[];
+  projects: Project[];
 };
 
 export async function getServerSideProps(): Promise<{ props: Props }> {
@@ -95,17 +92,7 @@ export async function getServerSideProps(): Promise<{ props: Props }> {
   return {
     props: {
       tagline: metadata.tagline,
-      projects: await Promise.all(
-        projects.map(async (project) => {
-          const { base64 } = await getPlaiceholder(project.banner, {
-            size: 16,
-          });
-          return {
-            ...project,
-            bannerBlur: base64,
-          };
-        })
-      ),
+      projects,
     },
   };
 }