fix: projects images

app/(pages)/projects/[id]/page.tsx

@@ -31,9 +31,7 @@ export async function generateMetadata({
 
   const content = project?.content
   const imageUrl =
-    (project?.image ?? "")?.length > 0
-      ? `/project-banners/${project?.image}`
-      : "/share-image.png"
+    (project?.image ?? "")?.length > 0 ? project.image : "/share-image.png"
 
   return {
     title: project?.name,

components/cards/wiki-card.tsx

@@ -73,9 +73,7 @@ export const WikiCard = ({ project, className = "" }: WikiCardProps) => {
         <Card className="bg-background" padding="none">
           <div className="relative flex h-[140px] items-center justify-center overflow-hidden rounded-t-lg">
             <Image
-              src={`/project-banners/${
-                project.image ? project.image : "fallback.webp"
-              }`}
+              src={project.image || "/project-banners/fallback.webp"}
               alt={`${project.name} banner`}
               fill
               className="object-cover"
@@ -132,7 +130,7 @@ export const WikiCard = ({ project, className = "" }: WikiCardProps) => {
           <Card padding="none">
             <div className="relative flex max-h-[140px] items-center justify-center overflow-hidden rounded-t-lg ">
               <Image
-                src={`/project-banners/${previousBrandImage}`}
+                src={previousBrandImage}
                 alt={`${project.name} banner`}
                 fill
                 className="object-cover"

components/project/project-card.tsx

@@ -79,7 +79,7 @@ export default function ProjectCard({
           }}
         >
           <Image
-            src={`/project-banners/${image ? image : "fallback.webp"}`}
+            src={image || "/project-banners/fallback.webp"}
             alt="Project banner image"
             width={1200}
             height={630}

components/research/research-card.tsx

@@ -90,7 +90,7 @@ export default function ProjectCard({
       {showBanner && (
         <div className="relative flex flex-col border-b border-black/10 cursor-pointer">
           <Image
-            src={`/project-banners/${image ? image : "fallback.webp"}`}
+            src={image || "/project-banners/fallback.webp"}
             alt={`${name} banner`}
             width={1200}
             height={630}

lib/content.ts

@@ -5,6 +5,8 @@ import path from "path"
 
 const VALID_IMAGE_BASES = ["articles", "projects", "project", "project-banners"]
 
+const FLAT_STORAGE_BASES = ["project-banners"]
+
 function normalizeImagePath(
   imagePath: string | undefined,
   defaultBasePath: string = "articles",
@@ -32,7 +34,9 @@ function normalizeImagePath(
 
   if (!hasValidBase) {
     const isJustFilename = !normalized.includes("/")
-    if (isJustFilename && slug) {
+    const isFlatStorage = FLAT_STORAGE_BASES.includes(defaultBasePath)
+
+    if (isJustFilename && slug && !isFlatStorage) {
       normalized = `${defaultBasePath}/${slug}/${normalized}`
     } else {
       normalized = `${defaultBasePath}/${normalized}`
@@ -243,7 +247,12 @@ export function getProjects(options?: {
     processContent: (data, content, id) => ({
       id,
       ...data,
-      image: normalizeImagePath(data.image, "projects", id),
+      image: normalizeImagePath(data.image, "project-banners", id),
+      previousBrandImage: normalizeImagePath(
+        data.previousBrandImage,
+        "project-banners",
+        id
+      ),
       content: normalizeContentImagePaths(content, "projects", id),
     }),
   })