refactor: update cover img for static blog

src/components/cards/blog-card.astro

@@ -17,7 +17,9 @@ const post = Astro.props;
     <Image
       loading="eager"
       class="w-full h-full object-cover rounded-xl overflow-hidden"
-      src={post.data.coverImage}
+      width={720}
+      height={360}
+      src={post.data.cover}
       alt="descriptive text"
       transition:name={`img-${post.slug}`}
     />

src/content/blog/first-post.md

@@ -2,7 +2,7 @@
 title: "First Post"
 description: "Embark on a web development adventure with our inaugural post, diving deep into industry insights and emerging trends."
 pubDate: "Jul 08 2022"
-coverImage: "../../assets/blog/placeholder-3.jpg"
+cover: "/blog/placeholder-3.jpg"
 category: "design"
 ---
 

src/content/blog/markdown-style-guide.md

@@ -2,7 +2,7 @@
 title: "Markdown Style Guide"
 description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
 pubDate: "Jul 01 2022"
-coverImage: "../../assets/blog/placeholder-1.jpg"
+cover: "/blog/placeholder-1.jpg"
 category: "code"
 ---
 
@@ -40,7 +40,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 #### Output
 
-![blog placeholder](../../assets/blog/placeholder-about.jpg)
+![blog placeholder](/blog/placeholder-about.jpg)
 
 ## Blockquotes
 

src/content/blog/pale-blue-dot.md

@@ -2,7 +2,7 @@
 title: "Pale Blue Dot"
 description: "Carl Sagan's reflection on our planet Earth"
 pubDate: "Sep 10 2023"
-coverImage: "../../assets/blog/placeholder-4.jpg"
+cover: "/blog/placeholder-4.jpg"
 category: "space"
 ---
 

src/content/blog/preview-markdown.md

@@ -2,7 +2,7 @@
 title: "Preview Markdown"
 description: "Lorem ipsum dolor sit amet"
 pubDate: "Jul 11 2022"
-coverImage: "../../assets/blog/placeholder-about.jpg"
+cover: "/blog/placeholder-about.jpg"
 category: "markdown"
 ---
 
@@ -62,7 +62,7 @@ Something a wise person once told me about typography is:
 It's probably important that images look okay here by default as well:
 
 <Image
-  src="../../assets/blog/placeholder-1.jpg"
+  src="/blog/placeholder-1.jpg"
   width="960"
   height="480"
   alt="Image"

src/content/blog/third-post.md

@@ -2,7 +2,7 @@
 title: "Third post"
 description: "Lorem ipsum dolor sit amet"
 pubDate: "Jul 15 2022"
-coverImage: "../../assets/blog/placeholder-2.jpg"
+cover: "/blog/placeholder-2.jpg"
 category: "design"
 ---
 

src/content/blog/using-mdx.mdx

@@ -2,7 +2,7 @@
 title: "Using MDX"
 description: "Lorem ipsum dolor sit amet"
 pubDate: "Jul 02 2022"
-coverImage: "../../assets/blog/placeholder-5.jpg"
+cover: "/blog/placeholder-5.jpg"
 category: "code"
 ---
 

src/content/config.ts

@@ -2,22 +2,22 @@ import { defineCollection, z } from "astro:content";
 
 const blog = defineCollection({
   // Type-check frontmatter using a schema
-  schema: ({ image }) => z.object({
-    title: z.string(),
-    description: z.string(),
-    coverImage: image(),
-    // coverImage: z.string(),
-    category: z.string(),
-    // Transform string to Date object
-    pubDate: z
-      .string()
-      .or(z.date())
-      .transform((val) => new Date(val)),
-    updatedDate: z
-      .string()
-      .optional()
-      .transform((str) => (str ? new Date(str) : undefined)),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      description: z.string(),
+      cover: z.string(),
+      category: z.string(),
+      // Transform string to Date object
+      pubDate: z
+        .string()
+        .or(z.date())
+        .transform((val) => new Date(val)),
+      updatedDate: z
+        .string()
+        .optional()
+        .transform((str) => (str ? new Date(str) : undefined)),
+    }),
 });
 
 const docs = defineCollection({

src/content/docs/documentation/style-guide.mdx

@@ -67,7 +67,7 @@ It's probably important that images look okay here by default as well:
 
 <Image
   class="rounded-lg overflow-hidden border"
-  src="../../assets/blog/placeholder-about.jpg"
+  src="/blog/placeholder-about.jpg"
   width={1020}
   height={510}
   alt="Image"

src/content/guides/build-blog-using-astro-mdx.mdx

@@ -71,12 +71,7 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-<Image
-  src="../../assets/blog/placeholder-4.jpg"
-  width="718"
-  height="404"
-  alt="Image"
-/>
+<Image src="/blog/placeholder-4.jpg" width="718" height="404" alt="Image" />
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

src/content/guides/using-next-auth-next-13.mdx

@@ -71,12 +71,7 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-<Image
-  src="../../assets/blog/placeholder-2.jpg"
-  width="718"
-  height="404"
-  alt="Image"
-/>
+<Image src="/blog/placeholder-2.jpg" width="718" height="404" alt="Image" />
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

src/layouts/blog-post.astro

@@ -10,7 +10,7 @@ import MainLayout from "./main-layout.astro";
 type Props = CollectionEntry<"blog">;
 
 const slug = Astro.props.slug;
-const { title, description, pubDate, updatedDate, coverImage, category } =
+const { title, description, pubDate, updatedDate, cover, category } =
   Astro.props.data;
 ---
 
@@ -31,24 +31,24 @@ const { title, description, pubDate, updatedDate, coverImage, category } =
     <article class="prose dark:prose-invert max-w-none">
       <a
         href={`/blog/category/${category}`}
-        transition:name={"badge-cat-" + slug}
+        transition:name={`badge-cat-${slug}`}
       >
         <Badge radius="md" className="capitalize">
           {category}
         </Badge>
       </a>
       <Image
         class="rounded-xl overflow-hidden my-6"
-        width={1020}
-        height={510}
-        src={coverImage}
-        alt=""
-        transition:name={"img-" + slug}
+        width={720}
+        height={360}
+        src={cover}
+        alt={title}
+        transition:name={`img-${slug}`}
       />
       <div class="flex items-center justify-between">
         <span
           class="font-medium text-muted-foreground"
-          transition:name={"date-" + slug}
+          transition:name={`date-${slug}`}
         >
           {formatDate(pubDate)}
           {
@@ -58,7 +58,7 @@ const { title, description, pubDate, updatedDate, coverImage, category } =
           }
         </span>
       </div>
-      <h1 class="font-heading text-4xl my-4" transition:name={"title-" + slug}>
+      <h1 class="font-heading text-4xl my-4" transition:name={`title-${slug}`}>
         {title}
       </h1>
       <p>{description}</p>