diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx index a1bed41..2a45b7b 100644 --- a/src/components/ItemCard.tsx +++ b/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}`} />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a7ad0ff..f34582a 100644 --- a/src/pages/index.tsx +++ b/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, }, }; }