feat: added image header support for blog entries

personal/src/components/BlogEntryList.astro

@@ -21,15 +21,6 @@ const { limit } = Astro.props;
       .slice(0, limit)
       .map((post) => (
         <a href={"/blog/" + post.slug} class="entry">
-          {post.data.image ? (
-            <Image
-              widths={[700]}
-              sizes={`700px`}
-              src={post.data.image.url}
-              alt={post.data.image.alt}
-              style="max-height: 350px; width: 100%; object-fit: cover;"
-            />
-          ) : null}
           <h3>
             {post.data.title} <br />
             <span class="entry--date">

personal/src/content/blog/17-custom-github-runner.md

@@ -3,6 +3,9 @@ title: "Raspberry Pi as a Github Runner"
 pubDate: 2024-04-12
 description: "You can use a Raspberry Pi as a plug and play Github runner easily"
 author: "Aaron Czichon"
+image:
+  src: "https://directus.aaronczichon.de/assets/fcff64aa-1ddd-445e-a5fc-531a5dde6b12.jpg?quality=70&width=2000"
+  alt: "Shows a Raspberry Pi Model 3 on top of an Apple TV 4"
 tags: ["Work", "Raspberry Pi", "Development", "Github"]
 ---
 

personal/src/content/config.ts

@@ -9,7 +9,8 @@ const blogCollection = defineCollection({
 			tags: z.array(z.string()),
 			image: z
 				.object({
-					url: image(),
+					url: image().optional(),
+					src: z.string().optional(),
 					alt: z.string(),
 				})
 				.optional(),

personal/src/layouts/Post.astro

@@ -8,7 +8,11 @@ const { frontmatter } = Astro.props;
 <Layout title={"Aaron Czichon - Blog - " + frontmatter.title}>
   {
     frontmatter.image ? (
-      <Hero url={frontmatter.image.url} alt={frontmatter.image.alt} />
+      frontmatter.image.src ? (
+        <Hero url={frontmatter.image.src} alt={frontmatter.image.alt} />
+      ) : (
+        <Hero image={frontmatter.image.url} alt={frontmatter.image.alt} />
+      )
     ) : (
       ""
     )

personal/src/pages/blog/[...slug].astro

@@ -23,7 +23,11 @@ const readingTime = Math.ceil(wordCount / averageWPM);
 <Layout title={"Aaron Czichon - Blog - " + entry.data.title}>
   {
     entry.data.image ? (
-      <Hero image={entry.data.image.url} alt={entry.data.image.alt} />
+      entry.data.image.src ? (
+        <Hero url={entry.data.image.src} alt={entry.data.image.alt} />
+      ) : (
+        <Hero image={entry.data.image.url} alt={entry.data.image.alt} />
+      )
     ) : (
       ""
     )