From f6e0e444820f67f212e362c54816df5d0e4d4cf0 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 25 Jan 2022 15:53:43 +0100
Subject: chore: wrap dates with time tag

---
 src/components/Comment/Comment.tsx                 | 21 ++++----
 src/components/PostMeta/PostMeta.tsx               | 61 ++++++++++++----------
 src/components/ProjectSummary/ProjectSummary.tsx   | 45 ++++++++--------
 src/components/Widgets/RecentPosts/RecentPosts.tsx | 17 +++---
 src/utils/helpers/format.ts                        | 16 ++++++
 5 files changed, 90 insertions(+), 70 deletions(-)

(limited to 'src')

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 11300fc..6eb0184 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -3,6 +3,7 @@ import CommentForm from '@components/CommentForm/CommentForm';
 import { config } from '@config/website';
 import { t } from '@lingui/macro';
 import { Comment as CommentData } from '@ts/types/comments';
+import { getFormattedDate } from '@utils/helpers/format';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -21,6 +22,7 @@ const Comment = ({
   isNested?: boolean;
 }) => {
   const router = useRouter();
+  const locale = router.locale ? router.locale : config.locales.defaultLocale;
   const [isReply, setIsReply] = useState<boolean>(false);
   const firstFieldRef = useRef<HTMLInputElement>(null);
 
@@ -39,14 +41,9 @@ const Comment = ({
   };
 
   const getLocaleDate = () => {
-    const commentDate = new Date(comment.date);
-    const date = commentDate.toLocaleDateString(router.locale, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-    const time = commentDate
-      .toLocaleTimeString(router.locale, {
+    const date = getFormattedDate(comment.date, locale);
+    const time = new Date(comment.date)
+      .toLocaleTimeString(locale, {
         hour: 'numeric',
         minute: 'numeric',
       })
@@ -73,9 +70,11 @@ const Comment = ({
           <dl className={styles.date}>
             <dt>{t`Published on:`}</dt>
             <dd>
-              <Link href={`#comment-${comment.commentId}`}>
-                <a>{getLocaleDate()}</a>
-              </Link>
+              <time dateTime={comment.date}>
+                <Link href={`#comment-${comment.commentId}`}>
+                  <a>{getLocaleDate()}</a>
+                </Link>
+              </time>
             </dd>
           </dl>
           <div
diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
index 45f919a..f95707a 100644
--- a/src/components/PostMeta/PostMeta.tsx
+++ b/src/components/PostMeta/PostMeta.tsx
@@ -1,5 +1,7 @@
+import { config } from '@config/website';
 import { plural, t } from '@lingui/macro';
 import { ArticleMeta } from '@ts/types/articles';
+import { getFormattedDate } from '@utils/helpers/format';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import styles from './PostMeta.module.scss';
@@ -24,15 +26,10 @@ const PostMeta = ({
     website,
     wordsCount,
   } = meta;
-  const { asPath, locale } = useRouter();
-  const isThematic = () => asPath.includes('/thematique/');
-  const isArticle = () => asPath.includes('/article/');
-
-  const dateOptions: Intl.DateTimeFormatOptions = {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  };
+  const router = useRouter();
+  const locale = router.locale ? router.locale : config.locales.defaultLocale;
+  const isThematic = () => router.asPath.includes('/thematique/');
+  const isArticle = () => router.asPath.includes('/article/');
 
   const getTopics = () => {
     return (
@@ -85,6 +82,32 @@ const PostMeta = ({
     });
   };
 
+  const getDates = () => {
+    if (!dates) return <></>;
+
+    const publicationDate = getFormattedDate(dates.publication, locale);
+    const updateDate = getFormattedDate(dates.update, locale);
+
+    return (
+      <>
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Published on:`}</dt>
+          <dd className={styles.description}>
+            <time dateTime={dates.publication}>{publicationDate}</time>
+          </dd>
+        </div>
+        {publicationDate !== updateDate && (
+          <div className={styles.item}>
+            <dt className={styles.term}>{t`Updated on:`}</dt>
+            <dd className={styles.description}>
+              <time dateTime={dates.update}>{updateDate}</time>
+            </dd>
+          </div>
+        )}
+      </>
+    );
+  };
+
   const wrapperClass = styles[`wrapper--${mode}`];
 
   return (
@@ -95,25 +118,7 @@ const PostMeta = ({
           <dd className={styles.description}>{author.name}</dd>
         </div>
       )}
-      {dates && (
-        <div className={styles.item}>
-          <dt className={styles.term}>{t`Published on:`}</dt>
-          <dd className={styles.description}>
-            {new Date(dates.publication).toLocaleDateString(
-              locale,
-              dateOptions
-            )}
-          </dd>
-        </div>
-      )}
-      {dates && dates.publication !== dates.update && (
-        <div className={styles.item}>
-          <dt className={styles.term}>{t`Updated on:`}</dt>
-          <dd className={styles.description}>
-            {new Date(dates.update).toLocaleDateString(locale, dateOptions)}
-          </dd>
-        </div>
-      )}
+      {getDates()}
       {readingTime !== undefined && wordsCount !== undefined && (
         <div className={styles.item}>
           <dt className={styles.term}>{t`Reading time:`}</dt>
diff --git a/src/components/ProjectSummary/ProjectSummary.tsx b/src/components/ProjectSummary/ProjectSummary.tsx
index 5a4f9c8..1b07eb1 100644
--- a/src/components/ProjectSummary/ProjectSummary.tsx
+++ b/src/components/ProjectSummary/ProjectSummary.tsx
@@ -1,7 +1,9 @@
 import GithubIcon from '@assets/images/social-media/github.svg';
 import GitlabIcon from '@assets/images/social-media/gitlab.svg';
+import { config } from '@config/website';
 import { t } from '@lingui/macro';
 import { ProjectMeta } from '@ts/types/app';
+import { getFormattedDate } from '@utils/helpers/format';
 import { slugify } from '@utils/helpers/slugify';
 import useGithubApi from '@utils/hooks/useGithubApi';
 import Image from 'next/image';
@@ -18,40 +20,41 @@ const ProjectSummary = ({
   meta: ProjectMeta;
 }) => {
   const { license, repos, technologies } = meta;
-  const { locale } = useRouter();
+  const router = useRouter();
+  const locale = router.locale ? router.locale : config.locales.defaultLocale;
   const { data } = useGithubApi(repos?.github ? repos.github : '');
 
-  const getFormattedDate = (date: string) => {
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric',
-    };
-
-    return new Date(date).toLocaleDateString(locale, dateOptions);
-  };
-
   return (
     <div className={styles.wrapper}>
-      <div className={styles.cover}>
-        <Image
-          src={cover}
-          alt={t`${title} preview`}
-          layout="fill"
-          objectFit="contain"
-        />
-      </div>
+      {cover && (
+        <div className={styles.cover}>
+          <Image
+            src={cover}
+            alt={t`${title} preview`}
+            layout="fill"
+            objectFit="contain"
+          />
+        </div>
+      )}
       <dl className={styles.info}>
         {data && (
           <div className={styles.info__item}>
             <dt>{t`Created on`}</dt>
-            <dd>{t`${getFormattedDate(data.created_at)}`}</dd>
+            <dd>
+              <time dateTime={data.created_at}>
+                {getFormattedDate(data.created_at, locale)}
+              </time>
+            </dd>
           </div>
         )}
         {data && (
           <div className={styles.info__item}>
             <dt>{t`Last updated on`}</dt>
-            <dd>{t`${getFormattedDate(data.updated_at)}`}</dd>
+            <dd>
+              <time dateTime={data.updated_at}>
+                {getFormattedDate(data.updated_at, locale)}
+              </time>
+            </dd>
           </div>
         )}
         <div className={styles.info__item}>
diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
index 9c13aa2..8022bff 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx
@@ -1,7 +1,9 @@
 import Spinner from '@components/Spinner/Spinner';
+import { config } from '@config/website';
 import { t } from '@lingui/macro';
 import { getPublishedPosts } from '@services/graphql/queries';
 import { ArticlePreview } from '@ts/types/articles';
+import { getFormattedDate } from '@utils/helpers/format';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -12,12 +14,8 @@ const RecentPosts = () => {
   const { data, error } = useSWR('/recent-posts', () =>
     getPublishedPosts({ first: 3 })
   );
-  const { locale } = useRouter();
-  const dateOptions: Intl.DateTimeFormatOptions = {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  };
+  const router = useRouter();
+  const locale = router.locale ? router.locale : config.locales.defaultLocale;
 
   const getPost = (post: ArticlePreview) => {
     return (
@@ -40,10 +38,9 @@ const RecentPosts = () => {
               <dl className={styles.meta}>
                 <dt>{t`Published on:`}</dt>
                 <dd>
-                  {new Date(post.dates.publication).toLocaleDateString(
-                    locale,
-                    dateOptions
-                  )}
+                  <time dateTime={post.dates.publication}>
+                    {getFormattedDate(post.dates.publication, locale)}
+                  </time>
                 </dd>
               </dl>
             </article>
diff --git a/src/utils/helpers/format.ts b/src/utils/helpers/format.ts
index 2be1844..e45a6a0 100644
--- a/src/utils/helpers/format.ts
+++ b/src/utils/helpers/format.ts
@@ -267,3 +267,19 @@ export const getFormattedPost = (rawPost: RawArticle): Article => {
 
   return formattedPost;
 };
+
+/**
+ * Converts a date to a string by using the specified locale.
+ * @param {string} date The date.
+ * @param {string} locale A locale.
+ * @returns {string} The formatted date to locale date string.
+ */
+export const getFormattedDate = (date: string, locale: string) => {
+  const dateOptions: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  };
+
+  return new Date(date).toLocaleDateString(locale, dateOptions);
+};
-- 
cgit v1.2.3