refactor: replace postSlug with Astro content slug

* refactor: replace postSlug with Astro content slug

Remove postSlug from blog schema. Refactor articles that use postSlug. Remove slugify function from slugify util file. Replace slugify logic with Astro's content collections slug logic.

Closes: #186

* docs: update docs for removed slugify contents

* refactor: remove unused import
This commit is contained in:
Sat Naing
2023-12-27 10:20:55 +06:30
committed by GitHub
parent 80e67a1dca
commit 2827d4e7d8
22 changed files with 43 additions and 50 deletions
+6 -4
View File
@@ -3,7 +3,7 @@ author: Sat Naing
pubDatetime: 2022-09-23T15:22:00Z
modDatetime: 2023-12-21T09:12:47.400Z
title: Adding new posts in AstroPaper theme
postSlug: adding-new-posts-in-astropaper-theme
slug: adding-new-posts-in-astropaper-theme
featured: true
draft: false
tags:
@@ -30,7 +30,7 @@ Here is the list of frontmatter property for each post.
| **_pubDatetime_** | Published datetime in ISO 8601 format. | required<sup>\*</sup> |
| **_modDatetime_** | Modified datetime in ISO 8601 format. (only add this property when a blog post is modified) | optional |
| **_author_** | Author of the post. | default = SITE.author |
| **_postSlug_** | Slug for the post. Will automatically be slugified. | default = slugified title |
| **_slug_** | Slug for the post. This field is optional but cannot be an empty string. (slug: ""❌) | default = slugified file name |
| **_featured_** | Whether or not display this post in featured section of home page | default = false |
| **_draft_** | Mark this post 'unpublished'. | default = false |
| **_tags_** | Related keywords for this post. Written in array yaml format. | default = others |
@@ -43,7 +43,9 @@ Only `title`, `description` and `pubDatetime` fields in frontmatter must be spec
Title and description (excerpt) are important for search engine optimization (SEO) and thus AstroPaper encourages to include these in blog posts.
`slug` is the unique identifier of the url. Thus, `slug` must be unique and different from other posts. The whitespace of `slug` needs to be separated with `-` or `_` but `-` is recommended. However, even if you don't write the correct slug, AstroPaper will automatically slugify your incorrect slug. If slug is not specified, the slugified title of the post will be used as slug.
`slug` is the unique identifier of the url. Thus, `slug` must be unique and different from other posts. The whitespace of `slug` should to be separated with `-` or `_` but `-` is recommended. Slug is automatically generated using the blog post file name. However, you can define your `slug` as a frontmatter in your blog post.
For example, if the blog file name is `adding-new-post.md` and you don't specify the slug in your frontmatter, Astro will automatically create a slug for the blog post using the file name. Thus, the slug will be `adding-new-post`. But if you specify the `slug` in the frontmatter, this will override the default slug. You can read more about this in [Astro Docs](https://docs.astro.build/en/guides/content-collections/#defining-custom-slugs).
If you omit `tags` in a blog post (in other words, if no tag is specified), the default tag `others` will be used as a tag for that post. You can set the default tag in the `/src/content/config.ts` file.
@@ -67,7 +69,7 @@ Here is the sample frontmatter for a post.
title: The title of the post
author: your name
pubDatetime: 2022-09-21T05:17:19Z
postSlug: the-title-of-the-post
slug: the-title-of-the-post
featured: true
draft: false
tags:
+1 -1
View File
@@ -2,7 +2,7 @@
author: Sat Naing
pubDatetime: 2023-01-30T15:57:52.737Z
title: AstroPaper 2.0
postSlug: astro-paper-2
slug: astro-paper-2
featured: false
ogImage: https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png
tags:
+1 -1
View File
@@ -2,7 +2,7 @@
author: Sat Naing
pubDatetime: 2023-09-25T10:25:54.547Z
title: AstroPaper 3.0
postSlug: astro-paper-v3
slug: astro-paper-v3
featured: true
ogImage: https://github.com/satnaing/astro-paper/assets/53733092/1ef0cf03-8137-4d67-ac81-84a032119e3a
tags:
@@ -2,7 +2,6 @@
author: Sat Naing
pubDatetime: 2022-09-25T15:20:35Z
title: Customizing AstroPaper theme color schemes
postSlug: ""
featured: false
draft: false
tags:
+1 -1
View File
@@ -2,7 +2,7 @@
author: Sat Naing
pubDatetime: 2022-12-28T04:59:04.866Z
title: Dynamic OG image generation in AstroPaper blog posts
postSlug: dynamic-og-image-generation-in-astropaper-blog-posts
slug: dynamic-og-image-generation-in-astropaper-blog-posts
featured: false
draft: false
tags:
+1 -1
View File
@@ -2,7 +2,7 @@
title: Example Draft Post
author: Sat Naing
pubDatetime: 2022-06-06T04:06:31Z
postSlug: example-draft-post
slug: example-draft-post
featured: false
draft: true
tags:
@@ -2,8 +2,8 @@
title: How to add an estimated reading time in AstroPaper
author: Sat Naing
pubDatetime: 2023-07-21T10:11:06.130Z
modDatetime: 2023-12-21T05:03:41.955Z
postSlug: how-to-add-estimated-reading-time
modDatetime: 2023-12-26T08:39:25.181Z
slug: how-to-add-estimated-reading-time
featured: false
draft: false
tags:
@@ -89,8 +89,8 @@ Step (5) Create a new file called `getPostsWithRT.ts` under `src/utils` director
```ts
import type { MarkdownInstance } from "astro";
import slugify from "./slugify";
import type { CollectionEntry } from "astro:content";
import { slugifyStr } from "./slugify";
export const getReadingTime = async () => {
// Get all posts using glob. This is to get the updated frontmatter
@@ -104,7 +104,10 @@ export const getReadingTime = async () => {
await Promise.all(
globPostsValues.map(async globPost => {
const { frontmatter } = await globPost();
mapFrontmatter.set(slugify(frontmatter), frontmatter.readingTime);
mapFrontmatter.set(
slugifyStr(frontmatter.title),
frontmatter.readingTime
);
})
);
@@ -114,7 +117,7 @@ export const getReadingTime = async () => {
const getPostsWithRT = async (posts: CollectionEntry<"blog">[]) => {
const mapFrontmatter = await getReadingTime();
return posts.map(post => {
post.data.readingTime = mapFrontmatter.get(slugify(post.data));
post.data.readingTime = mapFrontmatter.get(slugifyStr(post.data.title));
return post;
});
};
@@ -138,8 +141,8 @@ export async function getStaticPaths() {
const postsWithRT = await getPostsWithRT(posts); // replace reading time logic with this func
const postResult = postsWithRT.map(post => ({ // make sure to replace posts with postsWithRT
params: { slug: slugify(post.data) },
const postResult = postsWithRT.map(post => ({ // make sure to replace posts with postsWithRT
params: { slug: post.slug },
props: { post },
}));
@@ -2,7 +2,7 @@
author: Sat Naing
pubDatetime: 2022-09-23T04:58:53Z
title: How to configure AstroPaper theme
postSlug: how-to-configure-astropaper-theme
slug: how-to-configure-astropaper-theme
featured: true
draft: false
tags:
@@ -2,7 +2,7 @@
title: How to connect AstroPaper blog with Forestry CMS
author: Sat Naing
pubDatetime: 2022-09-21T05:17:19Z
postSlug: how-to-connect-astro-paper-blog-with-forestry-cms
slug: how-to-connect-astro-paper-blog-with-forestry-cms
featured: false
draft: false
tags:
@@ -2,7 +2,7 @@
title: How to update dependencies of AstroPaper
author: Sat Naing
pubDatetime: 2023-07-20T15:33:05.569Z
postSlug: how-to-update-dependencies
slug: how-to-update-dependencies
featured: false
draft: false
ogImage: /assets/forrest-gump-quote.webp
@@ -2,7 +2,7 @@
title: How Do I Develop My Portfolio Website & Blog
author: Sat Naing
pubDatetime: 2022-03-25T16:55:12.000+00:00
postSlug: how-do-i-develop-my-portfolio-and-blog
slug: how-do-i-develop-my-portfolio-and-blog
featured: false
draft: false
tags:
+1 -1
View File
@@ -2,7 +2,7 @@
author: Sat Naing
pubDatetime: 2022-09-26T12:13:24Z
title: Predefined color schemes
postSlug: predefined-color-schemes
slug: predefined-color-schemes
featured: false
draft: false
tags:
+1 -1
View File
@@ -2,7 +2,7 @@
title: How Do I Develop My Terminal Portfolio Website with React
author: Sat Naing
pubDatetime: 2022-06-09T03:42:51Z
postSlug: how-do-i-develop-my-terminal-portfolio-website-with-react
slug: how-do-i-develop-my-terminal-portfolio-website-with-react
featured: false
draft: false
tags:
-1
View File
@@ -9,7 +9,6 @@ const blog = defineCollection({
pubDatetime: z.date(),
modDatetime: z.date().optional(),
title: z.string(),
postSlug: z.string().optional(),
featured: z.boolean().optional(),
draft: z.boolean().optional(),
tags: z.array(z.string()).default(["others"]),