mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
feat: add modified datetime in blog posts
* 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
@@ -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.
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -7,6 +7,7 @@ const blog = defineCollection({
|
||||
z.object({
|
||||
author: z.string().default(SITE.author),
|
||||
pubDatetime: z.date(),
|
||||
modDatetime: z.date().optional(),
|
||||
title: z.string(),
|
||||
postSlug: z.string().optional(),
|
||||
featured: z.boolean().optional(),
|
||||
|
||||
Reference in New Issue
Block a user