Astro 2.0 has been released with some cool features, breaking changes, DX improvements, better error overlay and so on. Point Rouge takes advantage of those cool features, especially Content Collections API.
Table of contents
Open Table of contents
Features & Changes
Type-safe Frontmatters and Redefined Blog Schema
Frontmatter of Point Rouge 2.0 markdown contents are now type-safe thanks to Astro’s Content Collections. Blog schema is defined inside the src/content/_schemas.ts file.
New Home for Blog contents
All the blog posts were moved from src/contents to src/content/blog directory.
New Fetch API
Contents are now fetched with getCollection function. No relative path to the content needs to be specified anymore.
// old content fetching method
- const postImportResult = import.meta.glob<MarkdownInstance<Frontmatter>>(
"../contents/**/**/*.md",);
// new content fetching method
+ const postImportResult = await getCollection("blog");Modified Search Logic for better Search Result
In the older version of Point Rouge, when someone search some article, the search criteria keys that will be searched are title, description and headings (heading means all the headings h1 ~ h6 of the blog post). In Point Rouge v2, only title and description will be searched as the user types.
Renamed Frontmatter Properties
The following frontmatter properties are renamed.
| Old Names | New Names |
|---|---|
| datetime | pubDatetime |
| slug | postSlug |
Default Tag for blog post
If a blog post doesn’t have any tag (in other words, frontmatter property tags is not specified), the default tag others will be used for that blog post. But you can set the default tag in the /src/content/_schemas.ts file.
// src/contents/_schemas.ts
export const blogSchema = z.object({
// ---
// replace "others" with whatever you want
tags: z.array(z.string()).default(["others"]),
ogImage: z.string().optional(),
description: z.string(),
});New Predefined Dark Color Scheme
Point Rouge v2 has a new dark color scheme (high contrast & low contrast) which is based on Astro’s dark logo. Check out this link for more info.
Automatic Class Sorting
Point Rouge 2.0 includes automatic class sorting with TailwindCSS Prettier plugin
Updated Docs & README
All the #docs blog posts and README are updated for this Point Rouge v2.
Bug Fixes
- fix broken tags in the Blog Post page
- in a tag page, the last part of the breadcrumb is now updated to lower-case for consistency
- exclude draft posts in a tag page
- fix ‘onChange value not updating issue’ after a page reload