From 2827d4e7d8b2d6e03f095bc2cb90a5a3759a1012 Mon Sep 17 00:00:00 2001 From: Sat Naing Date: Wed, 27 Dec 2023 10:20:55 +0630 Subject: [PATCH] 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 | 6 +++--- src/content/blog/adding-new-post.md | 10 ++++++---- src/content/blog/astro-paper-2.md | 2 +- src/content/blog/astro-paper-3.md | 2 +- ...ustomizing-astropaper-theme-color-schemes.md | 1 - src/content/blog/dynamic-og-images.md | 2 +- src/content/blog/example-draft-post.md | 2 +- .../how-to-add-an-estimated-reading-time.md | 17 ++++++++++------- .../blog/how-to-configure-astropaper-theme.md | 2 +- ...onnect-astro-paper-blog-with-forestry-cms.md | 2 +- src/content/blog/how-to-update-dependencies.md | 2 +- .../blog/portfolio-website-development.md | 2 +- src/content/blog/predefined-color-schemes.md | 2 +- src/content/blog/terminal-development.md | 2 +- src/content/config.ts | 1 - src/layouts/Posts.astro | 5 ++--- src/pages/index.astro | 11 +++++------ src/pages/posts/[slug]/index.astro | 3 +-- src/pages/rss.xml.ts | 5 ++--- src/pages/search.astro | 3 ++- src/pages/tags/[tag].astro | 5 ++--- src/utils/slugify.ts | 6 ------ 22 files changed, 43 insertions(+), 50 deletions(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 1dce51c27..ae0c061e0 100644 --- a/src/components/Search.tsx +++ b/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 }) => ( ))} diff --git a/src/content/blog/adding-new-post.md b/src/content/blog/adding-new-post.md index 0c175d163..449896d46 100644 --- a/src/content/blog/adding-new-post.md +++ b/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\* | | **_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: diff --git a/src/content/blog/astro-paper-2.md b/src/content/blog/astro-paper-2.md index 07002a148..092606be0 100644 --- a/src/content/blog/astro-paper-2.md +++ b/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: diff --git a/src/content/blog/astro-paper-3.md b/src/content/blog/astro-paper-3.md index 686c28dab..1311d2420 100644 --- a/src/content/blog/astro-paper-3.md +++ b/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: diff --git a/src/content/blog/customizing-astropaper-theme-color-schemes.md b/src/content/blog/customizing-astropaper-theme-color-schemes.md index 9059f4840..eb99c98a1 100644 --- a/src/content/blog/customizing-astropaper-theme-color-schemes.md +++ b/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: diff --git a/src/content/blog/dynamic-og-images.md b/src/content/blog/dynamic-og-images.md index f8984a9f3..8a60bb9a2 100644 --- a/src/content/blog/dynamic-og-images.md +++ b/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: diff --git a/src/content/blog/example-draft-post.md b/src/content/blog/example-draft-post.md index 446ba9589..625a2bc0e 100644 --- a/src/content/blog/example-draft-post.md +++ b/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: diff --git a/src/content/blog/how-to-add-an-estimated-reading-time.md b/src/content/blog/how-to-add-an-estimated-reading-time.md index 23be6fac6..dc85d1cc3 100644 --- a/src/content/blog/how-to-add-an-estimated-reading-time.md +++ b/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 -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 }, })); diff --git a/src/content/blog/how-to-configure-astropaper-theme.md b/src/content/blog/how-to-configure-astropaper-theme.md index 42ae24bc5..5d5c2061d 100644 --- a/src/content/blog/how-to-configure-astropaper-theme.md +++ b/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: diff --git a/src/content/blog/how-to-connect-astro-paper-blog-with-forestry-cms.md b/src/content/blog/how-to-connect-astro-paper-blog-with-forestry-cms.md index 5228cfb72..e205c9143 100644 --- a/src/content/blog/how-to-connect-astro-paper-blog-with-forestry-cms.md +++ b/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: diff --git a/src/content/blog/how-to-update-dependencies.md b/src/content/blog/how-to-update-dependencies.md index 0a628b150..5f3ceebc2 100644 --- a/src/content/blog/how-to-update-dependencies.md +++ b/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 diff --git a/src/content/blog/portfolio-website-development.md b/src/content/blog/portfolio-website-development.md index 915955269..810e04487 100644 --- a/src/content/blog/portfolio-website-development.md +++ b/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: diff --git a/src/content/blog/predefined-color-schemes.md b/src/content/blog/predefined-color-schemes.md index 598eb77e0..d57c83cf1 100644 --- a/src/content/blog/predefined-color-schemes.md +++ b/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: diff --git a/src/content/blog/terminal-development.md b/src/content/blog/terminal-development.md index 90115eb5c..a6428bd0c 100644 --- a/src/content/blog/terminal-development.md +++ b/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: diff --git a/src/content/config.ts b/src/content/config.ts index 44b3f3478..10b6bca94 100644 --- a/src/content/config.ts +++ b/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"]), diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro index c9cc585c7..c856a019d 100644 --- a/src/layouts/Posts.astro +++ b/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";
    { - posts.map(({ data }) => ( - + posts.map(({ data, slug }) => ( + )) }
diff --git a/src/pages/index.astro b/src/pages/index.astro index faab2f627..c88141345 100644 --- a/src/pages/index.astro +++ b/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;

Read the blog posts or check README @@ -74,9 +73,9 @@ const socialCount = SOCIALS.filter(social => social.active).length;