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 1dce51c..ae0c061 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 0c175d1..449896d 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 07002a1..092606b 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 686c28d..1311d24 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 9059f48..eb99c98 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 f8984a9..8a60bb9 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 446ba95..625a2bc 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 23be6fa..dc85d1c 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 42ae24b..5d5c206 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 5228cfb..e205c91 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 0a628b1..5f3ceeb 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 9159552..810e044 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 598eb77..d57c83c 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 90115eb..a6428bd 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 44b3f34..10b6bca 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 c9cc585..c856a01 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 faab2f6..c881413 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;