From b171ad463e6e689dfed7e5d0c10050375b2017c2 Mon Sep 17 00:00:00 2001 From: saicaca Date: Tue, 7 Nov 2023 12:35:52 +0800 Subject: [PATCH] feat: add front-matter variable `category` --- README.md | 5 +++-- scripts/new-post.js | 4 ++-- src/components/PostMetadata.astro | 1 + src/components/TitleCardNew.astro | 10 ++++++++-- src/content/config.ts | 1 + src/content/posts/cover.md | 1 + src/content/posts/markdown.md | 2 +- src/content/posts/video.md | 2 +- src/pages/page/[page].astro | 1 + src/utils/content-utils.ts | 3 +++ 10 files changed, 22 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 71e27a7..2665862 100644 --- a/README.md +++ b/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 --- ``` diff --git a/scripts/new-post.js b/scripts/new-post.js index 1915b38..4e185e6 100644 --- a/scripts/new-post.js +++ b/scripts/new-post.js @@ -39,9 +39,9 @@ const content = title: ${args[0]} published: ${getDate()} description: -image: +image: tags: [] -categories: [] +category: --- `; diff --git a/src/components/PostMetadata.astro b/src/components/PostMetadata.astro index 7068dad..edb0690 100644 --- a/src/components/PostMetadata.astro +++ b/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; diff --git a/src/components/TitleCardNew.astro b/src/components/TitleCardNew.astro index e9d400e..2d317d6 100644 --- a/src/components/TitleCardNew.astro +++ b/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]; +} + ---
@@ -43,7 +49,7 @@ const { remarkPluginFrontmatter } = await entry.render(); - +
{ description } diff --git a/src/content/config.ts b/src/content/config.ts index 8877768..d185a18 100644 --- a/src/content/config.ts +++ b/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 = { diff --git a/src/content/posts/cover.md b/src/content/posts/cover.md index 4640839..2760994 100644 --- a/src/content/posts/cover.md +++ b/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 diff --git a/src/content/posts/markdown.md b/src/content/posts/markdown.md index 30f2d90..59df094 100644 --- a/src/content/posts/markdown.md +++ b/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 diff --git a/src/content/posts/video.md b/src/content/posts/video.md index 2804cbf..dfec952 100644 --- a/src/content/posts/video.md +++ b/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. diff --git a/src/pages/page/[page].astro b/src/pages/page/[page].astro index d950043..a925020 100644 --- a/src/pages/page/[page].astro +++ b/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} diff --git a/src/utils/content-utils.ts b/src/utils/content-utils.ts index f48e1c4..3485c67 100644 --- a/src/utils/content-utils.ts +++ b/src/utils/content-utils.ts @@ -60,6 +60,9 @@ export async function getCategoryMap(): Promise { 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) {