mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
feat: add global and per-post timezone support (#491)
* refactor: replace embedded svg with svg icon * feat: add global and per-post timezone support - add `SITE.timezone` in config to define a global default timezone. - allow per-post timezone overrides via `timezone` in frontmatter. - update date formatting logic to use the correct timezone when rendering timestamps. - ensure that posts without a timezone fallback to `SITE.timezone`. - improve consistency between local and deployed timezones. * refactor: replace `LOCALE` constant with `SITE.lang` * docs: update guides * fix: update code word-break inside markdown table Closes #466
This commit is contained in:
Sat Naing
@@ -1,7 +1,7 @@
|
||||
---
|
||||
author: Sat Naing
|
||||
pubDatetime: 2022-09-23T15:22:00Z
|
||||
modDatetime: 2025-03-20T03:22:19.075Z
|
||||
modDatetime: 2025-03-22T06:25:46.734Z
|
||||
title: Adding new posts in AstroPaper theme
|
||||
slug: adding-new-posts-in-astropaper-theme
|
||||
featured: true
|
||||
@@ -58,20 +58,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> |
|
||||
| **_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 |
|
||||
| **_slug_** | Slug for the post. This field is optional. | 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 |
|
||||
| **_ogImage_** | OG image of the post. Useful for social media sharing and SEO. This can be a remote URL or an image path relative to current folder. | 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` |
|
||||
| **_hideEditPost_** | Hide editPost button under blog title. This applies only to the current blog post. | default = false |
|
||||
| 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 |
|
||||
| **_slug_** | Slug for the post. This field is optional. | 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 |
|
||||
| **_ogImage_** | OG image of the post. Useful for social media sharing and SEO. This can be a remote URL or an image path relative to current folder. | 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` |
|
||||
| **_hideEditPost_** | Hide editPost button under blog title. This applies only to the current blog post. | default = false |
|
||||
| **_timezone_** | Specify a timezone in IANA format for the current blog post. This will override the `SITE.timezone` config for the current blog post. | default = `SITE.timezone` |
|
||||
|
||||
> Tip! You can get ISO 8601 datetime by running `new Date().toISOString()` in the console. Make sure you remove quotes though.
|
||||
|
||||
|
||||
@@ -13,6 +13,7 @@ tags:
|
||||
description:
|
||||
"EXAMPLE POST: My experience about developing my first portfolio website and a blog
|
||||
using NextJS and a headless CMS."
|
||||
timezone: "Asia/Yangon"
|
||||
---
|
||||
|
||||
> This article is originally from my [blog post](https://satnaing.dev/blog/posts/how-do-i-develop-my-portfolio-and-blog). I put this article to demonstrate how you can write blog posts/articles using AstroPaper theme.
|
||||
|
||||
@@ -14,6 +14,7 @@ tags:
|
||||
description:
|
||||
"EXAMPLE POST: Developing a terminal-like website using ReactJS, TypeScript and Styled-Components.
|
||||
Includes features like autocomplete, multiple themes, command hints etc."
|
||||
timezone: "Asia/Yangon"
|
||||
---
|
||||
|
||||
> This article is originally from my [blog post](https://satnaing.dev/blog/posts/how-do-i-develop-my-terminal-portfolio-website-with-react). I put this article to demonstrate how you can write blog posts/articles using AstroPaper theme.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
author: Alberto Perdomo
|
||||
pubDatetime: 2024-09-08T20:58:52.737Z
|
||||
modDatetime: 2025-03-09T09:24:07.841Z
|
||||
modDatetime: 2025-03-22T09:25:46.734Z
|
||||
title: How to add LaTeX Equations in Astro blog posts
|
||||
tags:
|
||||
- docs
|
||||
@@ -62,7 +62,7 @@ In this section, you will find instructions on how to add support for LaTeX in y
|
||||
|
||||
```astro
|
||||
---
|
||||
import { LOCALE, SITE } from "@config";
|
||||
import { SITE } from "@config";
|
||||
|
||||
// astro code
|
||||
---
|
||||
|
||||
@@ -43,6 +43,8 @@ export const SITE = {
|
||||
url: "https://github.com/satnaing/astro-paper/edit/main/",
|
||||
},
|
||||
dynamicOgImage: true, // enable automatic dynamic og-image generation
|
||||
lang: "en", // html lang code. Set this empty and default will be "en"
|
||||
timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
|
||||
} as const;
|
||||
```
|
||||
|
||||
@@ -64,21 +66,8 @@ Here are SITE configuration options
|
||||
| `showBackButton` | Determines whether to display the `Go back` button in each blog post. |
|
||||
| `editPost` | This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by setting `SITE.editPost.enabled` to `false`. |
|
||||
| `dynamicOgImage` | This option controls whether to [generate dynamic og-image](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/) if no `ogImage` is specified in the blog post frontmatter. If you have many blog posts, you might want to disable this feature. See the [trade-off](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/#trade-off) for more details. |
|
||||
|
||||
## Configuring locale
|
||||
|
||||
You can configure the default locale used for the build (e.g., date format in the post page), and for the rendering in browsers (e.g., date format in the search page). You can update locale in `src/constants.ts` file.
|
||||
|
||||
```js
|
||||
// file: src/constants.ts
|
||||
export const LOCALE = {
|
||||
lang: "en", // html lang code. Set this empty and default will be "en"
|
||||
langTag: ["en-EN"], // BCP 47 Language Tags. Set this empty [] to use the environment default
|
||||
} as const;
|
||||
```
|
||||
|
||||
`LOCALE.lang` will be used as HTML ISO Language code in `<html lang="en">`. If you don't specify this, default fallback will be set to `en`.
|
||||
`LOCALE.langTag` is used as [datetime locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#locales). For this, you can specify an array of locales for fallback languages. Leave `LOCALE.langTag` empty `[]` to use the environment default at _build-_ and _run-time_.
|
||||
| `lang` | Used as HTML ISO Language code in `<html lang"en">`. Default is `en`. |
|
||||
| `timezone` | This option allows you to specify your timezone using the [IANA format](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). Setting this ensures consistent timestamps across your localhost and deployed site, eliminating time differences. |
|
||||
|
||||
## Configuring logo or title
|
||||
|
||||
|
||||
Reference in New Issue
Block a user