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

feat: add global and per-post timezone support (#491)

Browse Source 
* 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
2025-03-22 17:21:21 +07:00
committed by GitHub
parent a397677d84
commit 5cff7c50b9
16 changed files with 70 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -18,6 +18,7 @@
"@resvg/resvg-js": "^2.6.2", "@resvg/resvg-js": "^2.6.2",
"@tailwindcss/vite": "^4.0.14", "@tailwindcss/vite": "^4.0.14",
"astro": "^5.5.2", "astro": "^5.5.2",
"dayjs": "^1.11.13",
"lodash.kebabcase": "^4.1.1", "lodash.kebabcase": "^4.1.1",
"remark-collapse": "^0.1.2", "remark-collapse": "^0.1.2",
"remark-toc": "^9.0.0", "remark-toc": "^9.0.0",
pnpm-lock.yaml
Generated
+8
View File
@@ -23,6 +23,9 @@ importers:
astro: astro:
specifier: ^5.5.2 specifier: ^5.5.2
version: 5.5.2(jiti@2.4.2)(lightningcss@1.29.2)(rollup@4.34.7)(typescript@5.8.2)(yaml@2.7.0) version: 5.5.2(jiti@2.4.2)(lightningcss@1.29.2)(rollup@4.34.7)(typescript@5.8.2)(yaml@2.7.0)
dayjs:
specifier: ^1.11.13
version: 1.11.13
lodash.kebabcase: lodash.kebabcase:
specifier: ^4.1.1 specifier: ^4.1.1
version: 4.1.1 version: 4.1.1
@@ -1170,6 +1173,9 @@ packages:
engines: {node: '>=4'} engines: {node: '>=4'}
hasBin: true hasBin: true
dayjs@1.11.13:
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
debug@4.4.0: debug@4.4.0:
resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==} resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
engines: {node: '>=6.0'} engines: {node: '>=6.0'}
@@ -3761,6 +3767,8 @@ snapshots:
cssesc@3.0.0: {} cssesc@3.0.0: {}
dayjs@1.11.13: {}
debug@4.4.0: debug@4.4.0:
dependencies: dependencies:
ms: 2.1.3 ms: 2.1.3
src/assets/icons/IconCalendar.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-week"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M7 14h.013" /><path d="M10.01 14h.005" /><path d="M13.01 14h.005" /><path d="M16.015 14h.005" /><path d="M13.015 17h.005" /><path d="M7.01 17h.005" /><path d="M10.01 17h.005" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 658 B

src/components/Card.astro
+2 -2
View File
@@ -10,7 +10,7 @@ export interface Props extends CollectionEntry<"blog"> {
const { variant = "h2", data, id, filePath } = Astro.props; const { variant = "h2", data, id, filePath } = Astro.props;
const { title, pubDatetime, modDatetime, description } = data; const { title, description, pubDatetime, modDatetime, timezone } = data;
const headerProps = { const headerProps = {
style: { viewTransitionName: slugifyStr(title) }, style: { viewTransitionName: slugifyStr(title) },
@@ -31,6 +31,6 @@ const headerProps = {
) )
} }
</a> </a>
<Datetime {pubDatetime} {modDatetime} /> <Datetime {pubDatetime} {modDatetime} {timezone} />
<p>{description}</p> <p>{description}</p>
</li> </li>
src/components/Datetime.astro
+27 -35
View File
@@ -1,11 +1,19 @@
--- ---
import { LOCALE } from "@/constants"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import IconCalendar from "@/assets/icons/IconCalendar.svg";
import { SITE } from "@/config";
dayjs.extend(utc);
dayjs.extend(timezone);
export interface Props { export interface Props {
class?: string;
size?: "sm" | "lg";
timezone: string | undefined;
pubDatetime: string | Date; pubDatetime: string | Date;
modDatetime: string | Date | undefined | null; modDatetime: string | Date | undefined | null;
size?: "sm" | "lg";
class?: string;
} }
const { const {
@@ -13,52 +21,36 @@ const {
modDatetime, modDatetime,
size = "sm", size = "sm",
class: className = "", class: className = "",
timezone: postTimezone,
} = Astro.props; } = Astro.props;
/* ========== Formatted Datetime ========== */ /* ========== Formatted Datetime ========== */
const myDatetime = new Date( const latestDatetime =
modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime;
); const datetime = dayjs(latestDatetime).tz(postTimezone || SITE.timezone);
const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
year: "numeric",
month: "short",
day: "numeric",
});
const time = myDatetime.toLocaleTimeString(LOCALE.langTag, { const date = datetime.format("D MMM, YYYY"); // e.g., '22 Mar, 2025'
hour: "2-digit", const time = datetime.format("hh:mm A"); // e.g., '08:30 PM'
minute: "2-digit",
});
--- ---
<div class={`flex items-end space-x-2 opacity-80 ${className}`.trim()}> <div class:list={["flex items-end space-x-2 opacity-80", className]}>
<svg <IconCalendar
xmlns="http://www.w3.org/2000/svg" class:list={[
class={`${ "inline-block size-6 min-w-[1.375rem]",
size === "sm" ? "scale-90" : "scale-100" { "scale-90": size === "sm" },
} inline-block h-6 w-6 min-w-[1.375rem] fill-foreground`} ]}
aria-hidden="true" />
>
<path
d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"
></path>
<path
d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"
></path>
</svg>
{ {
modDatetime && modDatetime > pubDatetime ? ( modDatetime && modDatetime > pubDatetime ? (
<span <span class:list={["text-sm italic", { "sm:text-base": size === "lg" }]}>
class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}
>
Updated: Updated:
</span> </span>
) : ( ) : (
<span class="sr-only">Published:</span> <span class="sr-only">Published:</span>
) )
} }
<span class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}> <span class:list={["text-sm italic", { "sm:text-base": size === "lg" }]}>
<time datetime={myDatetime.toISOString()}>{date}</time> <time datetime={datetime.toISOString()}>{date}</time>
<span aria-hidden="true"> | </span> <span aria-hidden="true"> | </span>
<span class="sr-only">&nbsp;at&nbsp;</span> <span class="sr-only">&nbsp;at&nbsp;</span>
<span class="text-nowrap">{time}</span> <span class="text-nowrap">{time}</span>
src/config.ts
+2
View File
@@ -17,4 +17,6 @@ export const SITE = {
url: "https://github.com/satnaing/astro-paper/edit/main/", url: "https://github.com/satnaing/astro-paper/edit/main/",
}, },
dynamicOgImage: true, dynamicOgImage: true,
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; } as const;
src/constants.ts
-5
View File
@@ -8,11 +8,6 @@ import IconTelegram from "@/assets/icons/IconTelegram.svg";
import IconPinterest from "@/assets/icons/IconPinterest.svg"; import IconPinterest from "@/assets/icons/IconPinterest.svg";
import { SITE } from "@/config"; import { SITE } from "@/config";
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;
export const SOCIALS = [ export const SOCIALS = [
{ {
name: "Github", name: "Github",
src/content.config.ts
+1
View File
@@ -19,6 +19,7 @@ const blog = defineCollection({
description: z.string(), description: z.string(),
canonicalURL: z.string().optional(), canonicalURL: z.string().optional(),
hideEditPost: z.boolean().optional(), hideEditPost: z.boolean().optional(),
timezone: z.string().optional(),
}), }),
}); });
src/data/blog/adding-new-post.md
+16 -15
View File
@@ -1,7 +1,7 @@
--- ---
author: Sat Naing author: Sat Naing
pubDatetime: 2022-09-23T15:22:00Z 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 title: Adding new posts in AstroPaper theme
slug: adding-new-posts-in-astropaper-theme slug: adding-new-posts-in-astropaper-theme
featured: true 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. Here is the list of frontmatter property for each post.
| Property | Description | Remark | | Property | Description | Remark |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **_title_** | Title of the post. (h1) | required<sup>\*</sup> | | **_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> | | **_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> | | **_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 | | **_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 | | **_author_** | Author of the post. | default = SITE.author |
| **_slug_** | Slug for the post. This field is optional. | default = slugified file name | | **_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 | | **_featured_** | Whether or not display this post in featured section of home page | default = false |
| **_draft_** | Mark this post 'unpublished'. | default = false | | **_draft_** | Mark this post 'unpublished'. | default = false |
| **_tags_** | Related keywords for this post. Written in array yaml format. | default = others | | **_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 | | **_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` | | **_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 | | **_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. > Tip! You can get ISO 8601 datetime by running `new Date().toISOString()` in the console. Make sure you remove quotes though.
src/data/blog/examples/portfolio-website-development.md
+1
View File
@@ -13,6 +13,7 @@ tags:
description: description:
"EXAMPLE POST: My experience about developing my first portfolio website and a blog "EXAMPLE POST: My experience about developing my first portfolio website and a blog
using NextJS and a headless CMS." 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. > 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.
src/data/blog/examples/terminal-development.md
+1
View File
@@ -14,6 +14,7 @@ tags:
description: description:
"EXAMPLE POST: Developing a terminal-like website using ReactJS, TypeScript and Styled-Components. "EXAMPLE POST: Developing a terminal-like website using ReactJS, TypeScript and Styled-Components.
Includes features like autocomplete, multiple themes, command hints etc." 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. > 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.
src/data/blog/how-to-add-latex-equations-in-blog-posts.md
+2 -2
View File
@@ -1,7 +1,7 @@
--- ---
author: Alberto Perdomo author: Alberto Perdomo
pubDatetime: 2024-09-08T20:58:52.737Z 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 title: How to add LaTeX Equations in Astro blog posts
tags: tags:
- docs - docs
@@ -62,7 +62,7 @@ In this section, you will find instructions on how to add support for LaTeX in y
```astro ```astro
--- ---
import { LOCALE, SITE } from "@config"; import { SITE } from "@config";
// astro code // astro code
--- ---
src/data/blog/how-to-configure-astropaper-theme.md
+4 -15
View File
@@ -43,6 +43,8 @@ export const SITE = {
url: "https://github.com/satnaing/astro-paper/edit/main/", url: "https://github.com/satnaing/astro-paper/edit/main/",
}, },
dynamicOgImage: true, // enable automatic dynamic og-image generation 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; } as const;
``` ```
@@ -64,21 +66,8 @@ Here are SITE configuration options
| `showBackButton` | Determines whether to display the `Go back` button in each blog post. | | `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`. | | `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. | | `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. |
| `lang` | Used as HTML ISO Language code in `<html lang"en">`. Default is `en`. |
## Configuring locale | `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. |
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_.
## Configuring logo or title ## Configuring logo or title
src/layouts/Layout.astro
+1 -5
View File
@@ -1,7 +1,6 @@
--- ---
import { ClientRouter } from "astro:transitions"; import { ClientRouter } from "astro:transitions";
import { SITE } from "@/config"; import { SITE } from "@/config";
import { LOCALE } from "@/constants";
import "@/styles/global.css"; import "@/styles/global.css";
const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION; const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
@@ -50,10 +49,7 @@ const structuredData = {
--- ---
<!doctype html> <!doctype html>
<html <html lang=`${SITE.lang ?? "en"}` class={`${scrollSmooth && "scroll-smooth"}`}>
lang=`${LOCALE.lang ?? "en"}`
class={`${scrollSmooth && "scroll-smooth"}`}
>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
src/layouts/PostDetails.astro
+2 -6
View File
@@ -29,6 +29,7 @@ const {
canonicalURL, canonicalURL,
pubDatetime, pubDatetime,
modDatetime, modDatetime,
timezone,
tags, tags,
hideEditPost, hideEditPost,
} = post.data; } = post.data;
@@ -97,12 +98,7 @@ const nextPost =
{title} {title}
</h1> </h1>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<Datetime <Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" />
pubDatetime={pubDatetime}
modDatetime={modDatetime}
size="lg"
class="my-2"
/>
<EditPost class="max-sm:hidden" {hideEditPost} {post} /> <EditPost class="max-sm:hidden" {hideEditPost} {post} />
</div> </div>
<article id="article" class="mx-auto prose mt-8 max-w-3xl"> <article id="article" class="mx-auto prose mt-8 max-w-3xl">
src/styles/typography.css
+1 -1
View File
@@ -37,7 +37,7 @@
.prose table code { .prose table code {
/* add line breaks whenever necessary for codes under table */ /* add line breaks whenever necessary for codes under table */
@apply break-all; @apply break-all sm:break-normal;
} }
pre > code { pre > code {