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,
},
};
}