feat: introduced generic time component

components/Blog/BlogCard/__snapshots__/index.stories.tsx.snap

@@ -19,7 +19,7 @@ exports[`Blog/BlogCard Default smoke-test 1`] = `
   </div>
   <div class="BlogCard_content__jnh1D">
     <h4>
-      April 21, 2023
+      21 April 2023
     </h4>
     <p>
       by

components/Common/Time/index.tsx

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import { FormattedDate } from 'react-intl';
+
+type TimeProps = { date: string | Date; format: Intl.DateTimeFormatOptions };
+
+export const Time: FC<TimeProps> = ({ date, format }) => {
+  const dateObject = new Date(date);
+
+  return (
+    <time dateTime={dateObject.toISOString()}>
+      <FormattedDate value={dateObject} {...format} timeZone="UTC" />
+    </time>
+  );
+};

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
   },

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<PropsWithChildren> = ({ children }) => {
         <ul className="blog-index">
           {posts.map((post: BlogPost) => (
             <li key={post.slug}>
-              <time dateTime={post.date}>
-                {new Date(post.date).toLocaleString('en-GB', {
-                  timeZone: 'UTC',
-                  month: 'short',
-                  day: '2-digit',
-                })}
-              </time>
+              <Time
+                date={post.date}
+                format={{ month: 'short', day: '2-digit' }}
+              />
 
               <LocalizedLink href={post.slug}>{post.title}</LocalizedLink>
             </li>

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<PropsWithChildren> = ({ children }) => {
                 values={{ author: author || null }}
               />
 
-              <time dateTime={date}>
-                {new Date(date).toLocaleString('en-GB', {
-                  timeZone: 'UTC',
-                  month: 'short',
-                  day: '2-digit',
-                  year: 'numeric',
-                })}
-              </time>
+              <Time
+                date={date}
+                format={{ month: 'short', day: '2-digit', year: 'numeric' }}
+              />
             </span>
           </div>
 

layouts/CategoryIndexLayout.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import BaseLayout from './BaseLayout';
+import { Time } from '../components/Common/Time';
 import LocalizedLink from '../components/LocalizedLink';
 import { useLayoutContext } from '../hooks/useLayoutContext';
 import { useBlogData } from '../hooks/useBlogData';
@@ -23,13 +24,10 @@ const CategoryIndexLayout: FC<PropsWithChildren> = ({ children }) => {
         <ul className="blog-index">
           {posts.map((post: BlogPost) => (
             <li key={post.slug}>
-              <time dateTime={post.date}>
-                {new Date(post.date).toLocaleString('en-GB', {
-                  timeZone: 'UTC',
-                  month: 'short',
-                  day: '2-digit',
-                })}
-              </time>
+              <Time
+                date={post.date}
+                format={{ month: 'short', day: '2-digit' }}
+              />
 
               <LocalizedLink href={post.slug}>{post.title}</LocalizedLink>
             </li>

providers/localeProvider.tsx

@@ -31,7 +31,7 @@ export const LocaleProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <LocaleContext.Provider value={localeData}>
       <IntlProvider
-        locale={localeData.currentLocale.code}
+        locale={localeData.currentLocale.hrefLang}
         messages={localeData.localeMessages}
         onError={() => null}
       >