From 54216502179408ef22f4a68bd270b8a9ca2ab0bd Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Sun, 9 Jul 2023 09:18:11 +0000 Subject: [PATCH 1/5] chore: updated english to use en-GB locale --- i18n/config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/config.json b/i18n/config.json index 29dca9ed604b8..1b682d7654944 100644 --- a/i18n/config.json +++ b/i18n/config.json @@ -32,7 +32,7 @@ "name": "English", "langDir": "ltr", "dateFormat": "MM.DD.YYYY", - "hrefLang": "en-US", + "hrefLang": "en-GB", "enabled": true, "default": true }, From ad3fb343e964ed92683e8ad41b4c2dbb09a1f5fd Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Sun, 9 Jul 2023 09:18:37 +0000 Subject: [PATCH 2/5] feat: created time component --- components/Common/Time/index.tsx | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 components/Common/Time/index.tsx diff --git a/components/Common/Time/index.tsx b/components/Common/Time/index.tsx new file mode 100644 index 0000000000000..582ef64336cb4 --- /dev/null +++ b/components/Common/Time/index.tsx @@ -0,0 +1,27 @@ +import { useMemo } from 'react'; +import { useLocale } from '@/hooks/useLocale'; +import type { FC } from 'react'; + +type TimeProps = { date: string | Date; format: Intl.DateTimeFormatOptions }; + +export const Time: FC = ({ date, format }) => { + const { currentLocale } = useLocale(); + + const { isoDate, formatedDate } = useMemo(() => { + const dateObject = new Date(date); + + return { + isoDate: dateObject.toISOString(), + formatedDate: dateObject.toLocaleString(currentLocale.hrefLang, { + ...format, + timeZone: 'UTC', + }), + }; + // We assume that the `format` options will not change and be static + // and we calculate the date difference by comparing its string value + // since its ISO format is what matters for us the most. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [date.toString(), currentLocale.hrefLang]); + + return ; +}; From c209b26e6d11ec068a4d763db94dd8408bfc840b Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Sun, 9 Jul 2023 09:18:53 +0000 Subject: [PATCH 3/5] chore: replaced time element usage --- layouts/BlogIndexLayout.tsx | 12 +++++------- layouts/BlogPostLayout.tsx | 13 +++++-------- layouts/CategoryIndexLayout.tsx | 12 +++++------- 3 files changed, 15 insertions(+), 22 deletions(-) diff --git a/layouts/BlogIndexLayout.tsx b/layouts/BlogIndexLayout.tsx index 300248b722aae..697c1cd328fce 100644 --- a/layouts/BlogIndexLayout.tsx +++ b/layouts/BlogIndexLayout.tsx @@ -1,6 +1,7 @@ import { useMemo } from 'react'; import { FormattedMessage } from 'react-intl'; import BaseLayout from './BaseLayout'; +import { Time } from '../components/Common/Time'; import Pagination from '../components/Pagination'; import LocalizedLink from '../components/LocalizedLink'; import { useBlogData } from '../hooks/useBlogData'; @@ -39,13 +40,10 @@ const BlogIndexLayout: FC = ({ children }) => {
    {posts.map((post: BlogPost) => (
  • - +
    • diff --git a/layouts/BlogPostLayout.tsx b/layouts/BlogPostLayout.tsx index 5ebec7f213415..1b8188d2d07a7 100644 --- a/layouts/BlogPostLayout.tsx +++ b/layouts/BlogPostLayout.tsx @@ -1,5 +1,6 @@ import { FormattedMessage } from 'react-intl'; import BaseLayout from './BaseLayout'; +import { Time } from '../components/Common/Time'; import { useLayoutContext } from '../hooks/useLayoutContext'; import type { FC, PropsWithChildren } from 'react'; import type { LegacyBlogFrontMatter } from '../types'; @@ -21,14 +22,10 @@ const BlogPostLayout: FC = ({ children }) => { values={{ author: author || null }} /> - +