fix: front-matter prop change

README.md

@@ -28,9 +28,7 @@ Fuwari (not the final name maybe) is a static blog template built with [Astro](h
 title: My First Blog Post
 published: 2023-09-09
 description: This is the first post of my new Astro blog.
-cover:
-  url: /images/cover.jpg
-  alt: The cover image
+image: /images/cover.jpg
 tags: ['Foo', 'Bar']
 ---
 ```

scripts/new-post.js

@@ -39,9 +39,7 @@ const content =
 title: ${args[0]}
 published: ${getDate()}
 description: 
-cover:
-  url: 
-  alt: 
+image:
 tags: []
 categories: []
 ---

src/components/TitleCard.astro

@@ -5,11 +5,11 @@ interface Props {
     url: string;
     published: Date;
     tags: string[];
-    cover: string;
+    image: string;
     description: string;
     words: number;
 }
-const { title, url, published, tags, cover, description, words } = Astro.props;
+const { title, url, published, tags, image, description, words } = Astro.props;
 // console.log(Astro.props);
 import ImageBox from "./misc/ImageBox.astro";
 import ButtonTag from "./control/ButtonTag.astro";
@@ -19,7 +19,7 @@ import { Icon } from 'astro-icon/components';
 
 // const cover = 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg';
 // cover = null;
-const hasCover = cover !== undefined && cover !== null && cover !== '';
+const hasCover = image !== undefined && image !== null && image !== '';
 
 
 ---

src/components/TitleCardNew.astro

@@ -8,11 +8,11 @@ interface Props {
     published: Date;
     tags: string[];
     categories: string[];
-    cover: string;
+    image: string;
     description: string;
     words: number;
 }
-const { entry, title, url, published, tags, categories, cover, description, words } = Astro.props;
+const { entry, title, url, published, tags, categories, image, description, words } = Astro.props;
 const className = Astro.props.class;
 // console.log(Astro.props);
 import ImageBox from "./misc/ImageBox.astro";
@@ -22,7 +22,7 @@ import Button from "./control/Button.astro";
 import {i18n} from "../i18n/translation";
 import I18nKey from "../i18n/i18nKey";
 
-const hasCover = cover !== undefined && cover !== null && cover !== '';
+const hasCover = image !== undefined && image !== null && image !== '';
 
 const coverWidth = "28%";
 
@@ -67,7 +67,7 @@ const { remarkPluginFrontmatter } = await entry.render();
                   class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
             </Icon>
         </div>
-        <ImageBox src={cover} alt={entry.data.cover.alt || "Cover Image of the Post"}
+        <ImageBox src={image} alt="Cover Image of the Post"
                   class="w-full h-full">
         </ImageBox>
     </a>}

src/content/config.ts

@@ -5,10 +5,7 @@ const blogCollection = defineCollection({
         title: z.string(),
         published: z.date(),
         description: z.string().optional(),
-        cover: z.object({
-            url: z.string(),
-            alt: z.string(),
-        }),
+        image: z.string().optional(),
         tags: z.array(z.string()).optional(),
     })
 })

src/content/posts/cover.md

@@ -2,9 +2,7 @@
 title: 'Cover Image Example'
 published: 2023-09-01
 description: 'How to set a cover image using the cover attribute.'
-cover:
-  url: 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg'
-  alt:
+image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/208fc754-890d-4adb-9753-2c963332675d/width=2048/01651-1456859105-(colour_1.5),girl,_Blue,yellow,green,cyan,purple,red,pink,_best,8k,UHD,masterpiece,male%20focus,%201boy,gloves,%20ponytail,%20long%20hair,.jpeg'
 tags: ["Fuwari", "Blogging", "Customization"]
 ---
 

src/content/posts/markdown.md

@@ -2,9 +2,7 @@
 title: Markdown Example
 published: 2023-10-01
 description: A simple example of a Markdown blog post.
-cover:
-  url:
-  alt:
+image:
 tags: [Markdown, Blogging, Demo]
 categories: [Example]
 ---

src/content/posts/video.md

@@ -2,9 +2,7 @@
 title: Include Video in the Posts
 published: 2022-08-01
 description: This post demonstrates how to include embedded video in a blog post.
-cover:
-  url: 
-  alt: 
+image:
 tags: [Example, Video]
 categories: []
 ---

src/pages/page/[page].astro

@@ -25,7 +25,7 @@ const {page} = Astro.props;
                 categories={entry.data.categories}
                 published={entry.data.published}
                 url={getPostUrlBySlug(entry.slug)}
-                cover={entry.data.cover.url}
+                image={entry.data.image}
                 description={entry.data.description}
             ></TitleCard>
         )}

src/pages/posts/[slug].astro

@@ -24,7 +24,7 @@ const { Content } = await entry.render();
 const { remarkPluginFrontmatter } = await entry.render();
 
 ---
-<MainGridLayout banner={entry.data.cover.url} title={entry.data.title}>
+<MainGridLayout banner={entry.data.image} title={entry.data.title}>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
         <div class:list={["card-base z-10 px-4 md:px-9 pt-6 pb-10 relative w-full ",
             {}
@@ -68,11 +68,11 @@ const { remarkPluginFrontmatter } = await entry.render();
 
             <!-- always show cover as long as it has one -->
 
-            {entry.data.cover.url &&
-                <ImageBox src={entry.data.cover.url} class="mb-8 rounded-xl"/>
+            {entry.data.image &&
+                <ImageBox src={entry.data.image} class="mb-8 rounded-xl"/>
             }
 
-            {!entry.data.cover.url && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
+            {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
 
             <div class="prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md
             ">