diff --git a/package.json b/package.json index 486b6de..d87e1ad 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13e30aa..5a9aace 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/src/assets/icons/IconCalendar.svg b/src/assets/icons/IconCalendar.svg new file mode 100644 index 0000000..5f0be65 --- /dev/null +++ b/src/assets/icons/IconCalendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Card.astro b/src/components/Card.astro index 59bc65a..63a38f5 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -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 = { ) } - +

{description}

diff --git a/src/components/Datetime.astro b/src/components/Datetime.astro index 63be614..ce44952 100644 --- a/src/components/Datetime.astro +++ b/src/components/Datetime.astro @@ -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' --- -
- +
+ { modDatetime && modDatetime > pubDatetime ? ( - + Updated: ) : ( Published: ) } - - + +  at  {time} diff --git a/src/config.ts b/src/config.ts index 001d7de..d86b8a0 100644 --- a/src/config.ts +++ b/src/config.ts @@ -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; diff --git a/src/constants.ts b/src/constants.ts index beabe9a..dd42e77 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -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", diff --git a/src/content.config.ts b/src/content.config.ts index 54f563e..6119aa6 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -19,6 +19,7 @@ const blog = defineCollection({ description: z.string(), canonicalURL: z.string().optional(), hideEditPost: z.boolean().optional(), + timezone: z.string().optional(), }), }); diff --git a/src/data/blog/adding-new-post.md b/src/data/blog/adding-new-post.md index ae414ec..022c8cb 100644 --- a/src/data/blog/adding-new-post.md +++ b/src/data/blog/adding-new-post.md @@ -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\* | -| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required\* | -| **_pubDatetime_** | Published datetime in ISO 8601 format. | required\* | -| **_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\* | +| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required\* | +| **_pubDatetime_** | Published datetime in ISO 8601 format. | required\* | +| **_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. diff --git a/src/data/blog/examples/portfolio-website-development.md b/src/data/blog/examples/portfolio-website-development.md index 810e044..cca7aec 100644 --- a/src/data/blog/examples/portfolio-website-development.md +++ b/src/data/blog/examples/portfolio-website-development.md @@ -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. diff --git a/src/data/blog/examples/terminal-development.md b/src/data/blog/examples/terminal-development.md index a6428bd..aa3ab85 100644 --- a/src/data/blog/examples/terminal-development.md +++ b/src/data/blog/examples/terminal-development.md @@ -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. diff --git a/src/data/blog/how-to-add-latex-equations-in-blog-posts.md b/src/data/blog/how-to-add-latex-equations-in-blog-posts.md index 6ae78cc..04f7b9d 100644 --- a/src/data/blog/how-to-add-latex-equations-in-blog-posts.md +++ b/src/data/blog/how-to-add-latex-equations-in-blog-posts.md @@ -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 --- diff --git a/src/data/blog/how-to-configure-astropaper-theme.md b/src/data/blog/how-to-configure-astropaper-theme.md index e32af53..becfc31 100644 --- a/src/data/blog/how-to-configure-astropaper-theme.md +++ b/src/data/blog/how-to-configure-astropaper-theme.md @@ -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 ``. 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 ``. 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 diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 0242072..33b06df 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -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 = { --- - + diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro index 0b281b8..bc3f521 100644 --- a/src/layouts/PostDetails.astro +++ b/src/layouts/PostDetails.astro @@ -29,6 +29,7 @@ const { canonicalURL, pubDatetime, modDatetime, + timezone, tags, hideEditPost, } = post.data; @@ -97,12 +98,7 @@ const nextPost = {title}
- +
diff --git a/src/styles/typography.css b/src/styles/typography.css index 0585c62..1b7b371 100644 --- a/src/styles/typography.css +++ b/src/styles/typography.css @@ -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 {