feat: add front-matter variable `category`

README.md

@@ -11,7 +11,7 @@ Fuwari (not the final name maybe) is a static blog template built with [Astro](h
 
 - [x] **Built with [Astro](https://astro.build) and [Tailwind CSS](https://tailwindcss.com)**
 - [x] **View Transitions between pages**
-  - [Haven't supported by Firefox and Safari yet](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility)
+  - [is not supported by Firefox and Safari yet](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility)
 - [x] Light / dark mode
 - [x] Customizable theme colors & banner
 - [x] Responsive design
@@ -34,7 +34,8 @@ title: My First Blog Post
 published: 2023-09-09
 description: This is the first post of my new Astro blog.
 image: /images/cover.jpg
-tags: ['Foo', 'Bar']
+tags: [Foo, Bar]
+category: Front-end
 ---
 ```
 

scripts/new-post.js

@@ -39,9 +39,9 @@ const content =
 title: ${args[0]}
 published: ${getDate()}
 description: 
-image:
+image: 
 tags: []
-categories: []
+category: 
 ---
 `;
 

src/components/PostMetadata.astro

@@ -9,6 +9,7 @@ interface Props {
     published: Date;
     tags: string[];
     categories: string[];
+    category: string;
 }
 const {published, tags, categories} = Astro.props;
 const className = Astro.props.class;

src/components/TitleCardNew.astro

@@ -8,11 +8,12 @@ interface Props {
     published: Date;
     tags: string[];
     categories: string[];
+    category: string;
     image: string;
     description: string;
     words: number;
 }
-const { entry, title, url, published, tags, categories, image, description, words } = Astro.props;
+const { entry, title, url, published, tags, categories, category, image, description, words } = Astro.props;
 const className = Astro.props.class;
 // console.log(Astro.props);
 import ImageBox from "./misc/ImageBox.astro";
@@ -28,6 +29,11 @@ const coverWidth = "28%";
 
 const { remarkPluginFrontmatter } = await entry.render();
 
+let cate = categories;
+if (category) {
+    cate = [category];
+}
+
 ---
 <div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
     <div class:list={["pl-9 pr-9 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
@@ -43,7 +49,7 @@ const { remarkPluginFrontmatter } = await entry.render();
         </a>
 
         <!-- metadata -->
-        <PostMetadata published={published} tags={tags} categories={categories} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
+        <PostMetadata published={published} tags={tags} categories={cate} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
 
         <div class="transition text-black/75 dark:text-white/75 mb-3.5">
             { description }

src/content/config.ts

@@ -7,6 +7,7 @@ const blogCollection = defineCollection({
         description: z.string().optional(),
         image: z.string().optional(),
         tags: z.array(z.string()).optional(),
+        category: z.string().optional(),
     })
 })
 export const collections = {

src/content/posts/cover.md

@@ -4,6 +4,7 @@ published: 2023-09-01
 description: 'How to set a cover image using the cover attribute.'
 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"]
+category: 
 ---
 
 ## Set the cover image using the `image` attribute

src/content/posts/markdown.md

@@ -4,7 +4,7 @@ published: 2023-10-01
 description: A simple example of a Markdown blog post.
 image:
 tags: [Markdown, Blogging, Demo]
-categories: [Example]
+category: Example
 ---
 
 An h1 header

src/content/posts/video.md

@@ -4,7 +4,7 @@ published: 2022-08-01
 description: This post demonstrates how to include embedded video in a blog post.
 image:
 tags: [Example, Video]
-categories: []
+category: Example
 ---
 Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.
 

src/pages/page/[page].astro

@@ -23,6 +23,7 @@ const {page} = Astro.props;
                 title={entry.data.title}
                 tags={entry.data.tags}
                 categories={entry.data.categories}
+                category={entry.data.category}
                 published={entry.data.published}
                 url={getPostUrlBySlug(entry.slug)}
                 image={entry.data.image}

src/utils/content-utils.ts

@@ -60,6 +60,9 @@ export async function getCategoryMap(): Promise<CategoryMap> {
     let root: CategoryMap = {};
     allBlogPosts.map((post) => {
         let current = root;
+        if (post.data.category) {
+            post.data.categories = [post.data.category];
+        }
         if (!post.data.categories)
             return;
         for (const c of post.data.categories) {