simplified image passing

src/components/ProjectOverview.astro

@@ -7,29 +7,33 @@ interface Props {
   title: string;
   description: string;
   tags: Array<string>;
-  image: { alt: string; url: string };
   githubLink: string | undefined;
   projectLink: string | undefined;
+  cover: ImageMetadata;
+  coverAlt: string;
 }
-const { slug, title, description, tags, image, githubLink, projectLink } =
+const { slug, title, description, tags, githubLink, projectLink, cover, coverAlt } =
   Astro.props;
-const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/images/*.{jpeg,jpg,png,gif}"
-);
-if (!images[image.url])
-  throw new Error(
-    `"${image.url}" does not exist in glob: "src/images/*.{jpeg,jpg,png,gif}"`
-  );
+// const images = import.meta.glob<{ default: ImageMetadata }>(
+//   "/src/images/*.{jpeg,jpg,png,gif}",
+// );
+// if (!images[image.url])
+//   throw new Error(
+//     `"${image.url}" does not exist in glob: "src/images/*.{jpeg,jpg,png,gif}"`,
+//   );
 ---
 
 <div class="grid grid-cols-3 gap-x-10 pt-6 w-full">
   <a
     href=`/projects/${slug}`
     class="min-w-40 self-center hidden sm:block transition hover:scale-90"
   >
-    <span class="sr-only">{image.alt}</span>
+    <span class="sr-only">{coverAlt}</span>
 
-    <Image class="rounded-lg" src={images[image.url]()} alt={image.alt} />
+    <Image class="rounded-lg" src={cover} alt={coverAlt} />
+    <!-- <span class="sr-only">{image.alt}</span>
+
+    <Image class="rounded-lg" src={images[image.url]()} alt={image.alt} /> -->
   </a>
   <div class="flex gap-x-6 w-full col-span-3 sm:col-span-2">
     <div class="flex flex-col w-full gap-y-2">

src/components/home/ProjectsCard.astro

@@ -20,9 +20,10 @@ const allFeaturedProjects = (await getCollection("projects"))
             title={project.data.title}
             description={project.data.description}
             tags={project.data.tags}
-            image={project.data.image}
             githubLink={project.data.githubLink}
             projectLink={project.data.projectLink}
+            cover={project.data.cover}
+            coverAlt={project.data.coverAlt}
           />
         ))
       }

src/components/projects/ProjectLayoutImage.astro

@@ -2,15 +2,13 @@
 import { Image } from "astro:assets";
 
 interface Props {
-  imageUrl: Promise<{
-    default: ImageMetadata;
-  }>;
+  cover:ImageMetadata
   projectTitle: string;
-  imageAlt: string;
+  coverAlt: string;
   githubLink: string | undefined;
   projectLink: string | undefined;
 }
-const { imageUrl, imageAlt, githubLink, projectLink, projectTitle } =
+const { cover, coverAlt, githubLink, projectLink, projectTitle } =
   Astro.props;
 
 const linkStyleClass =
@@ -66,6 +64,6 @@ const linkStyleClass =
         )
       }
     </div>
-    <Image class="z-10" src={imageUrl} alt={imageAlt} />
+    <Image class="z-10" src={cover} alt={coverAlt} />
   </div>
 </div>

src/content/config.ts

@@ -3,20 +3,22 @@ import { z, defineCollection } from "astro:content";
 // Define a `type` and `schema` for each collection
 const projectsCollection = defineCollection({
   type: "content",
-  schema: z.object({
-    title: z.string(),
-    pubDate: z.date(),
-    description: z.string(),
-    author: z.string(),
-    image: z.object({
-      url: z.string(),
-      alt: z.string(),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      pubDate: z.date(),
+      description: z.string(),
+      author: z.string(),
+      cover: image(),
+      // .refine((img) => img.width >= 1080, {
+      //   message: "Cover image must be at least 1080 pixels wide!",
+      // }),
+      coverAlt: z.string(),
+      tags: z.array(z.string()),
+      featured: z.boolean(),
+      githubLink: z.optional(z.string()),
+      projectLink: z.optional(z.string()),
     }),
-    tags: z.array(z.string()),
-    featured: z.boolean(),
-    githubLink: z.optional(z.string()),
-    projectLink: z.optional(z.string()),
-  }),
 });
 const aboutCollection = defineCollection({
   type: "content",

src/content/projects/barbell-logbook.mdx

@@ -2,15 +2,15 @@
 title: Barbell Logbook
 author: Gregor Obreza
 description: "Landing page made with Next.js and Mantine."
-image:
-    url: '/src/images/sample-project-image.png'
-    alt: "Thumbnail of Astro rays."
+cover: "/src/images/sample-project-image.png"
+coverAlt: "Thumbnail of Astro rays."
 pubDate: 2024-01-01
 tags: ["nextjs", "react", "typescript", "mantine"]
 featured: false
 githubLink: "https://github.com/gregorobreza/strong-app-landing-page"
 projectLink: "https://barbelllogbook.com/"
 ---
+
 import WorkInProgress from "../../components/WorkInProgress.astro";
 
 <WorkInProgress text={"This project description is still work in progress"} />

src/content/projects/field-measurement-manager.mdx

@@ -3,9 +3,8 @@ title: "Field measurement manager"
 pubDate: 2024-01-04
 description: "Currently ongoing project for tracking, managing and planning field measurements."
 author: "Gregor Obreza"
-image:
-  url: "/src/images/sample-project-image.png"
-  alt: "The full Astro logo."
+cover: "/src/images/sample-project-image.png"
+coverAlt: "Thumbnail of Astro rays."
 tags:
   [
     "nextjs",

src/content/projects/flare-portal-frontend.mdx

@@ -3,9 +3,8 @@ title: "Flare Portal Frontend"
 pubDate: 2024-01-01
 description: "The project I am working on, on my day job. I am responsible for frontend development of that webpage."
 author: "Gregor Obreza"
-image:
-  url: "/src/images/sample-project-image.png"
-  alt: "The full Astro logo."
+cover: "/src/images/sample-project-image.png"
+coverAlt: "Thumbnail of Astro rays."
 tags: ["dayjob", "teamwork", "nextjs", "react", "mantine", "web3", "typescript"]
 featured: true
 githubLink: ""

src/content/projects/my-master-thesis.mdx

@@ -2,9 +2,8 @@
 title: Remote monitoring of Structural Dynamics
 author: Gregor Obreza
 description: "This is my master's thesis project that I worked on while finisnishing my studies."
-image:
-  url: "/src/images/sample-project-image.png"
-  alt: "Thumbnail of Astro rays."
+cover: "/src/images/sample-project-image.png"
+coverAlt: "Thumbnail of Astro rays."
 pubDate: 2024-01-01
 tags: ["raspberrypi", "django", "python", "iot", "javascript"]
 featured: false

src/content/projects/my-portfolio-website.mdx

@@ -3,9 +3,8 @@ title: "My Portfolio Website"
 pubDate: 2024-01-04
 description: "This is the website you are currently browsing."
 author: "Gregor Obreza"
-image:
-  url: "/src/images/sample-project-image.png"
-  alt: "The full Astro logo."
+cover: "/src/images/sample-project-image.png"
+coverAlt: "Thumbnail of Astro rays."
 tags: ["astro", "portfolio", "tailwindcss", "typescript"]
 featured: true
 githubLink: "https://github.com/gregorobreza/gobreza-simple-portfolio"

src/content/projects/scanlify.mdx

@@ -2,9 +2,8 @@
 title: Scanlify
 author: Gregor Obreza
 description: "Device for verifiying covid certificates and IDs."
-image:
-  url: "/src/images/sample-project-image.png"
-  alt: "Thumbnail of Astro arcs."
+cover: "/src/images/sample-project-image.png"
+coverAlt: "Thumbnail of Astro rays."
 pubDate: 2024-01-03
 tags: ["raspberrypi", "python", "opencv", "3dmodeling", "3dprint"]
 featured: false

src/content/projects/webso.mdx

@@ -2,9 +2,8 @@
 title: Webso
 author: Gregor Obreza
 description: "Landing page made in HTML, Sass and JS."
-image:
-    url: '/src/images/sample-project-image.png'
-    alt: "Thumbnail of Astro rays."
+cover: "/src/images/sample-project-image.png"
+coverAlt: "Thumbnail of Astro rays."
 pubDate: 2024-01-01
 tags: ["javascript", "sasscss", "gsap"]
 featured: false

src/layouts/ProjectLayout.astro

@@ -12,14 +12,6 @@ interface Props {
 }
 
 const { frontmatter } = Astro.props;
-
-const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/images/*.{jpeg,jpg,png,gif}"
-);
-if (!images[frontmatter.image.url])
-  throw new Error(
-    `"${frontmatter.image.url}" does not exist in glob: "src/images/*.{jpeg,jpg,png,gif}"`
-  );
 ---
 
 <Layout title={`Gregor Obreza | ${frontmatter.title}`}>
@@ -93,8 +85,8 @@ if (!images[frontmatter.image.url])
         </div>
         <!-- {frontmatter.description && <p>{frontmatter.description}</p>} -->
         <ProjectLayoutImage
-          imageUrl={images[frontmatter.image.url]()}
-          imageAlt={frontmatter.image.alt}
+          cover={frontmatter.cover}
+          coverAlt={frontmatter.coverAlt}
           githubLink={frontmatter.githubLink}
           projectLink={frontmatter.projectLink}
           projectTitle={frontmatter.title}

src/pages/projects-tags/[tag].astro

@@ -42,9 +42,10 @@ const listTitle = `Projects by tag #${tag}`;
               title={project.data.title}
               description={project.data.description}
               tags={project.data.tags}
-              image={project.data.image}
               githubLink={project.data.githubLink}
               projectLink={project.data.projectLink}
+              cover={project.data.cover}
+              coverAlt={project.data.coverAlt}
             />
           ))
         }

src/pages/projects/index.astro

@@ -29,9 +29,10 @@ const simpleDescription =
               title={project.data.title}
               description={project.data.description}
               tags={project.data.tags}
-              image={project.data.image}
               githubLink={project.data.githubLink}
               projectLink={project.data.projectLink}
+              cover={project.data.cover}
+              coverAlt={project.data.coverAlt}
             />
           ))
         }