Skip to content

AstroPaper 2.0

Posted on:January 30, 2023 at 03:57 PM

Astro 2.0 has been released with some cool features, breaking changes, DX improvements, better error overlay and so on. AstroPaper takes advantage of those cool features, especially Content Collections API.

Introducing AstroPaper 2.0

Table of contents

Open Table of contents

Features & Changes

Type-safe Frontmatters and Redefined Blog Schema

Frontmatter of AstroPaper 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 AstroPaper, 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 AstroPaper v2, only title and description will be searched as the user types.

Renamed Frontmatter Properties

The following frontmatter properties are renamed.

Old NamesNew Names
datetimepubDatetime
slugpostSlug

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

AstroPaper 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.

New Predefined Dark Color Scheme

Automatic Class Sorting

AstroPaper 2.0 includes automatic class sorting with TailwindCSS Prettier plugin

Updated Docs & README

All the #docs blog posts and README are updated for this AstroPaper v2.

Bug Fixes