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

src/components/Search.tsx

@@ -1,13 +1,13 @@
 import Fuse from "fuse.js";
 import { useEffect, useRef, useState, useMemo } from "react";
 import Card from "@components/Card";
-import slugify from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";
 
 export type SearchItem = {
   title: string;
   description: string;
   data: CollectionEntry<"blog">["data"];
+  slug: string;
 };
 
 interface Props {
@@ -111,9 +111,9 @@ export default function SearchBar({ searchList }: Props) {
         {searchResults &&
           searchResults.map(({ item, refIndex }) => (
             <Card
-              href={`/posts/${slugify(item.data)}`}
+              href={`/posts/${item.slug}`}
               frontmatter={item.data}
-              key={`${refIndex}-${slugify(item.data)}`}
+              key={`${refIndex}-${item.slug}`}
             />
           ))}
       </ul>

src/content/blog/adding-new-post.md

@@ -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:

src/content/blog/astro-paper-2.md

@@ -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:

src/content/blog/astro-paper-3.md

@@ -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:

src/content/blog/customizing-astropaper-theme-color-schemes.md

@@ -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:

src/content/blog/dynamic-og-images.md

@@ -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:

src/content/blog/example-draft-post.md

@@ -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:

src/content/blog/how-to-add-an-estimated-reading-time.md

@@ -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
+modDatetime: 2023-12-26T08:39:25.181Z
-postSlug: how-to-add-estimated-reading-time
+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;
   });
 };
@@ -139,7 +142,7 @@ 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) },
+    params: { slug: post.slug },
     props: { post },
   }));
 

src/content/blog/how-to-configure-astropaper-theme.md

@@ -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:

src/content/blog/how-to-connect-astro-paper-blog-with-forestry-cms.md

@@ -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:

src/content/blog/how-to-update-dependencies.md

@@ -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

src/content/blog/portfolio-website-development.md

@@ -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:

src/content/blog/predefined-color-schemes.md

@@ -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:

src/content/blog/terminal-development.md

@@ -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:

src/content/config.ts

@@ -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"]),

src/layouts/Posts.astro

@@ -6,7 +6,6 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Card from "@components/Card";
 import LinkButton from "@components/LinkButton.astro";
-import slugify from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";
 
 export interface Props {
@@ -26,8 +25,8 @@ const next = pageNum < totalPages ? "" : "disabled";
   <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
     <ul>
       {
-        posts.map(({ data }) => (
+        posts.map(({ data, slug }) => (
-          <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
+          <Card href={`/posts/${slug}`} frontmatter={data} />
         ))
       }
     </ul>

src/pages/index.astro

@@ -8,7 +8,6 @@ import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import Socials from "@components/Socials.astro";
 import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
 import { SOCIALS } from "@config";
 
 const posts = await getCollection("blog");
@@ -49,7 +48,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
       <p>
         Read the blog posts or check
         <LinkButton
-          className="hover:text-skin-accent underline underline-offset-4 decoration-dashed"
+          className="underline decoration-dashed underline-offset-4 hover:text-skin-accent"
           href="https://github.com/satnaing/astro-paper#readme"
         >
           README
@@ -74,9 +73,9 @@ const socialCount = SOCIALS.filter(social => social.active).length;
           <section id="featured">
             <h2>Featured</h2>
             <ul>
-              {featuredPosts.map(({ data }) => (
+              {featuredPosts.map(({ data, slug }) => (
                 <Card
-                  href={`/posts/${slugify(data)}`}
+                  href={`/posts/${slug}`}
                   frontmatter={data}
                   secHeading={false}
                 />
@@ -95,10 +94,10 @@ const socialCount = SOCIALS.filter(social => social.active).length;
           sortedPosts
             .filter(({ data }) => !data.featured)
             .map(
-              ({ data }, index) =>
+              ({ data, slug }, index) =>
                 index < 4 && (
                   <Card
-                    href={`/posts/${slugify(data)}`}
+                    href={`/posts/${slug}`}
                     frontmatter={data}
                     secHeading={false}
                   />

src/pages/posts/[slug]/index.astro

@@ -4,7 +4,6 @@ import Posts from "@layouts/Posts.astro";
 import PostDetails from "@layouts/PostDetails.astro";
 import getSortedPosts from "@utils/getSortedPosts";
 import getPageNumbers from "@utils/getPageNumbers";
-import slugify from "@utils/slugify";
 import { SITE } from "@config";
 
 export interface Props {
@@ -15,7 +14,7 @@ export async function getStaticPaths() {
   const posts = await getCollection("blog", ({ data }) => !data.draft);
 
   const postResult = posts.map(post => ({
-    params: { slug: slugify(post.data) },
+    params: { slug: post.slug },
     props: { post },
   }));
 

src/pages/rss.xml.ts

@@ -1,7 +1,6 @@
 import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
 import { SITE } from "@config";
 
 export async function GET() {
@@ -11,8 +10,8 @@ export async function GET() {
     title: SITE.title,
     description: SITE.desc,
     site: SITE.website,
-    items: sortedPosts.map(({ data }) => ({
+    items: sortedPosts.map(({ data, slug }) => ({
-      link: `posts/${slugify(data)}`,
+      link: `posts/${slug}`,
       title: data.title,
       description: data.description,
       pubDate: new Date(data.pubDatetime),

src/pages/search.astro

@@ -11,10 +11,11 @@ import SearchBar from "@components/Search";
 const posts = await getCollection("blog", ({ data }) => !data.draft);
 
 // List of items to search in
-const searchList = posts.map(({ data }) => ({
+const searchList = posts.map(({ data, slug }) => ({
   title: data.title,
   description: data.description,
   data,
+  slug,
 }));
 ---
 

src/pages/tags/[tag].astro

@@ -7,7 +7,6 @@ import Footer from "@components/Footer.astro";
 import Card from "@components/Card";
 import getUniqueTags from "@utils/getUniqueTags";
 import getPostsByTag from "@utils/getPostsByTag";
-import slugify from "@utils/slugify";
 import { SITE } from "@config";
 import getSortedPosts from "@utils/getSortedPosts";
 
@@ -48,8 +47,8 @@ const sortTagsPost = getSortedPosts(tagPosts);
     <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
     <ul>
       {
-        sortTagsPost.map(({ data }) => (
+        sortTagsPost.map(({ data, slug }) => (
-          <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
+          <Card href={`/posts/${slug}`} frontmatter={data} />
         ))
       }
     </ul>

src/utils/slugify.ts

@@ -1,11 +1,5 @@
 import { slug as slugger } from "github-slugger";
-import type { CollectionEntry } from "astro:content";
 
 export const slugifyStr = (str: string) => slugger(str);
 
-const slugify = (post: CollectionEntry<"blog">["data"]) =>
-  post.postSlug ? slugger(post.postSlug) : slugger(post.title);
-
 export const slugifyAll = (arr: string[]) => arr.map(str => slugifyStr(str));
-
-export default slugify;