Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add modified datetime in blog posts

Browse Source 
* feat: add modified datetime in blog posts

Add modDatetime in blogSchema. Update Datetime component to accept modDatetime. Update sorting logic. Rename datetime to pubDatetime in Datetime component.

Closes: #134

* feat: add published_time & modified_time meta tags

* docs: update related blog posts to be up-to-date

* fix: remove extra spaces in breadcrumbs
This commit is contained in:
Sat Naing
2023-12-26 10:11:26 +06:30
committed by GitHub
parent 2f602fe815
commit 80e67a1dca
9 changed files with 134 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/content/blog/adding-new-post.md
+16 -12
View File
@@ -1,6 +1,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
featured: true
@@ -22,18 +23,21 @@ Frontmatter is the main place to store some important information about the blog
Here is the list of frontmatter property for each post.
| Property | Description | Remark |
| ------------------ | ------------------------------------------------------------------------------- | --------------------------------------------- |
| **_title_** | Title of the post. (h1) | required<sup>\*</sup> |
| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required<sup>\*</sup> |
| **_pubDatetime_** | Published datetime in ISO 8601 format. | required<sup>\*</sup> |
| **_author_** | Author of the post. | default = SITE.author |
| **_postSlug_** | Slug for the post. Will automatically be slugified. | default = slugified title |
| **_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 |
| **_ogImage_** | OG image of the post. Useful for social media sharing and SEO. | default = SITE.ogImage or generated OG image |
| **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source. | default = `Astro.site` + `Astro.url.pathname` |
| Property | Description | Remark |
| ------------------ | ------------------------------------------------------------------------------------------- | --------------------------------------------- |
| **_title_** | Title of the post. (h1) | required<sup>\*</sup> |
| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required<sup>\*</sup> |
| **_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 |
| **_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 |
| **_ogImage_** | OG image of the post. Useful for social media sharing and SEO. | default = SITE.ogImage or generated OG image |
| **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source. | default = `Astro.site` + `Astro.url.pathname` |
> Tip! You can get ISO 8601 datetime by running `new Date().toISOString()` in the console. Make sure you remove quotes though.
Only `title`, `description` and `pubDatetime` fields in frontmatter must be specified.
src/content/blog/how-to-add-an-estimated-reading-time.md
+26 -9
View File
@@ -2,6 +2,7 @@
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
featured: false
draft: false
@@ -157,8 +158,15 @@ export interface Props {
const { post } = Astro.props;
const { title, author, description, ogImage, pubDatetime, tags, readingTime } =
post.data; // we can now directly access readingTime from frontmatter
const {
title,
author,
description,
ogImage,
readingTime, // we can now directly access readingTime from frontmatter
pubDatetime,
modDatetime,
tags } = post.data;
// other codes
---
@@ -181,8 +189,12 @@ const getSortedPosts = async (posts: CollectionEntry<"blog">[]) => {
.filter(({ data }) => !data.draft)
.sort(
(a, b) =>
Math.floor(new Date(b.data.pubDatetime).getTime() / 1000) -
Math.floor(new Date(a.data.pubDatetime).getTime() / 1000)
Math.floor(
new Date(b.data.modDatetime ?? b.data.pubDatetime).getTime() / 1000
) -
Math.floor(
new Date(a.data.modDatetime ?? a.data.pubDatetime).getTime() / 1000
)
);
};
@@ -215,7 +227,7 @@ But in this section, I'm gonna show you how I would display `readingTime` in my
Step (1) Update `Datetime` component to display `readingTime`
```ts
```tsx
import { LOCALE } from "@config";
export interface Props {
@@ -234,7 +246,7 @@ export default function Datetime({
return (
// other codes
<span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
<FormattedDatetime datetime={datetime} />
<FormattedDatetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
<span> ({readingTime})</span> {/* display reading time */}
</span>
// other codes
@@ -248,10 +260,14 @@ file: Card.tsx
```ts
export default function Card({ href, frontmatter, secHeading = true }: Props) {
const { title, pubDatetime, description, readingTime } = frontmatter;
const { title, pubDatetime, modDatetime description, readingTime } = frontmatter;
return (
...
<Datetime datetime={pubDatetime} readingTime={readingTime} />
<Datetime
pubDatetime={pubDatetime}
modDatetime={modDatetime}
readingTime={readingTime}
/>
...
);
}
@@ -264,7 +280,8 @@ file: PostDetails.tsx
<main id="main-content">
<h1 class="post-title">{title}</h1>
<Datetime
datetime={pubDatetime}
pubDatetime={pubDatetime}
modDatetime={modDatetime}
size="lg"
className="my-2"
readingTime={readingTime}