mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 07:33:07 +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
@@ -18,6 +18,7 @@
|
||||
"@resvg/resvg-js": "^2.6.2",
|
||||
"@tailwindcss/vite": "^4.0.14",
|
||||
"astro": "^5.5.2",
|
||||
"dayjs": "^1.11.13",
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
"remark-collapse": "^0.1.2",
|
||||
"remark-toc": "^9.0.0",
|
||||
|
||||
Generated
+8
@@ -23,6 +23,9 @@ importers:
|
||||
astro:
|
||||
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)
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
lodash.kebabcase:
|
||||
specifier: ^4.1.1
|
||||
version: 4.1.1
|
||||
@@ -1170,6 +1173,9 @@ packages:
|
||||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
|
||||
dayjs@1.11.13:
|
||||
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
|
||||
|
||||
debug@4.4.0:
|
||||
resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
|
||||
engines: {node: '>=6.0'}
|
||||
@@ -3761,6 +3767,8 @@ snapshots:
|
||||
|
||||
cssesc@3.0.0: {}
|
||||
|
||||
dayjs@1.11.13: {}
|
||||
|
||||
debug@4.4.0:
|
||||
dependencies:
|
||||
ms: 2.1.3
|
||||
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 658 B |
@@ -10,7 +10,7 @@ export interface Props extends CollectionEntry<"blog"> {
|
||||
|
||||
const { variant = "h2", data, id, filePath } = Astro.props;
|
||||
|
||||
const { title, pubDatetime, modDatetime, description } = data;
|
||||
const { title, description, pubDatetime, modDatetime, timezone } = data;
|
||||
|
||||
const headerProps = {
|
||||
style: { viewTransitionName: slugifyStr(title) },
|
||||
@@ -31,6 +31,6 @@ const headerProps = {
|
||||
)
|
||||
}
|
||||
</a>
|
||||
<Datetime {pubDatetime} {modDatetime} />
|
||||
<Datetime {pubDatetime} {modDatetime} {timezone} />
|
||||
<p>{description}</p>
|
||||
</li>
|
||||
|
||||
@@ -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 {
|
||||
class?: string;
|
||||
size?: "sm" | "lg";
|
||||
timezone: string | undefined;
|
||||
pubDatetime: string | Date;
|
||||
modDatetime: string | Date | undefined | null;
|
||||
size?: "sm" | "lg";
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -13,52 +21,36 @@ const {
|
||||
modDatetime,
|
||||
size = "sm",
|
||||
class: className = "",
|
||||
timezone: postTimezone,
|
||||
} = Astro.props;
|
||||
|
||||
/* ========== Formatted Datetime ========== */
|
||||
const myDatetime = new Date(
|
||||
modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime
|
||||
);
|
||||
const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
const latestDatetime =
|
||||
modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime;
|
||||
const datetime = dayjs(latestDatetime).tz(postTimezone || SITE.timezone);
|
||||
|
||||
const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
const date = datetime.format("D MMM, YYYY"); // e.g., '22 Mar, 2025'
|
||||
const time = datetime.format("hh:mm A"); // e.g., '08:30 PM'
|
||||
---
|
||||
|
||||
<div class={`flex items-end space-x-2 opacity-80 ${className}`.trim()}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`${
|
||||
size === "sm" ? "scale-90" : "scale-100"
|
||||
} 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>
|
||||
<div class:list={["flex items-end space-x-2 opacity-80", className]}>
|
||||
<IconCalendar
|
||||
class:list={[
|
||||
"inline-block size-6 min-w-[1.375rem]",
|
||||
{ "scale-90": size === "sm" },
|
||||
]}
|
||||
/>
|
||||
{
|
||||
modDatetime && modDatetime > pubDatetime ? (
|
||||
<span
|
||||
class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}
|
||||
>
|
||||
<span class:list={["text-sm italic", { "sm:text-base": size === "lg" }]}>
|
||||
Updated:
|
||||
</span>
|
||||
) : (
|
||||
<span class="sr-only">Published:</span>
|
||||
)
|
||||
}
|
||||
<span class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}>
|
||||
<time datetime={myDatetime.toISOString()}>{date}</time>
|
||||
<span class:list={["text-sm italic", { "sm:text-base": size === "lg" }]}>
|
||||
<time datetime={datetime.toISOString()}>{date}</time>
|
||||
<span aria-hidden="true"> | </span>
|
||||
<span class="sr-only"> at </span>
|
||||
<span class="text-nowrap">{time}</span>
|
||||
|
||||
@@ -17,4 +17,6 @@ export const SITE = {
|
||||
url: "https://github.com/satnaing/astro-paper/edit/main/",
|
||||
},
|
||||
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;
|
||||
|
||||
@@ -8,11 +8,6 @@ import IconTelegram from "@/assets/icons/IconTelegram.svg";
|
||||
import IconPinterest from "@/assets/icons/IconPinterest.svg";
|
||||
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 = [
|
||||
{
|
||||
name: "Github",
|
||||
|
||||
@@ -19,6 +19,7 @@ const blog = defineCollection({
|
||||
description: z.string(),
|
||||
canonicalURL: z.string().optional(),
|
||||
hideEditPost: z.boolean().optional(),
|
||||
timezone: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -59,7 +59,7 @@ 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> |
|
||||
@@ -72,6 +72,7 @@ Here is the list of frontmatter property for each post.
|
||||
| **_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
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
import { ClientRouter } from "astro:transitions";
|
||||
import { SITE } from "@/config";
|
||||
import { LOCALE } from "@/constants";
|
||||
import "@/styles/global.css";
|
||||
|
||||
const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
|
||||
@@ -50,10 +49,7 @@ const structuredData = {
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html
|
||||
lang=`${LOCALE.lang ?? "en"}`
|
||||
class={`${scrollSmooth && "scroll-smooth"}`}
|
||||
>
|
||||
<html lang=`${SITE.lang ?? "en"}` class={`${scrollSmooth && "scroll-smooth"}`}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
@@ -29,6 +29,7 @@ const {
|
||||
canonicalURL,
|
||||
pubDatetime,
|
||||
modDatetime,
|
||||
timezone,
|
||||
tags,
|
||||
hideEditPost,
|
||||
} = post.data;
|
||||
@@ -97,12 +98,7 @@ const nextPost =
|
||||
{title}
|
||||
</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<Datetime
|
||||
pubDatetime={pubDatetime}
|
||||
modDatetime={modDatetime}
|
||||
size="lg"
|
||||
class="my-2"
|
||||
/>
|
||||
<Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" />
|
||||
<EditPost class="max-sm:hidden" {hideEditPost} {post} />
|
||||
</div>
|
||||
<article id="article" class="mx-auto prose mt-8 max-w-3xl">
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
.prose table code {
|
||||
/* add line breaks whenever necessary for codes under table */
|
||||
@apply break-all;
|
||||
@apply break-all sm:break-normal;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
|
||||
Reference in New Issue
Block a user