chore: add reading time in posts meta

3 files changed, 69 insertions, 24 deletions

diff --git a/src/components/PostHeader/PostHeader.tsx b/src/components/PostHeader/PostHeader.tsx
index 57d20fa..f070583 100644
--- a/src/components/PostHeader/PostHeader.tsx
+++ b/src/components/PostHeader/PostHeader.tsx
@@ -21,9 +21,11 @@ const PostHeader = ({
       meta?.author ||
       meta?.commentCount ||
       meta?.dates ||
+      meta?.readingTime ||
       meta?.results ||
       meta?.thematics ||
-      meta?.website
+      meta?.website ||
+      meta?.wordsCount
     );
   };
 
diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
index 9aa67c7..45f919a 100644
--- a/src/components/PostMeta/PostMeta.tsx
+++ b/src/components/PostMeta/PostMeta.tsx
@@ -13,8 +13,17 @@ const PostMeta = ({
   meta: ArticleMeta;
   mode?: PostMetaMode;
 }) => {
-  const { author, commentCount, dates, results, thematics, topics, website } =
-    meta;
+  const {
+    author,
+    commentCount,
+    dates,
+    readingTime,
+    results,
+    thematics,
+    topics,
+    website,
+    wordsCount,
+  } = meta;
   const { asPath, locale } = useRouter();
   const isThematic = () => asPath.includes('/thematique/');
   const isArticle = () => asPath.includes('/article/');
@@ -66,6 +75,16 @@ const PostMeta = ({
     }
   };
 
+  const getReadingTime = () => {
+    if (!readingTime) return;
+    if (readingTime < 0) return t`less than 1 minute`;
+    return plural(readingTime, {
+      zero: '# minutes',
+      one: '# minute',
+      other: '# minutes',
+    });
+  };
+
   const wrapperClass = styles[`wrapper--${mode}`];
 
   return (
@@ -95,6 +114,17 @@ const PostMeta = ({
           </dd>
         </div>
       )}
+      {readingTime !== undefined && wordsCount !== undefined && (
+        <div className={styles.item}>
+          <dt className={styles.term}>{t`Reading time:`}</dt>
+          <dd
+            className={styles.description}
+            title={`Approximately ${wordsCount.toLocaleString(locale)} words`}
+          >
+            {getReadingTime()}
+          </dd>
+        </div>
+      )}
       {results && (
         <div className={styles.item}>
           <dt className={styles.term}>{t`Total: `}</dt>
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index b52d675..b084ca1 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -19,37 +19,50 @@ const PostPreview = ({
   titleLevel: TitleLevel;
 }) => {
   const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
+  const {
+    commentCount,
+    dates,
+    featuredImage,
+    info,
+    intro,
+    slug,
+    thematics,
+    title,
+    topics,
+  } = post;
 
   const meta: ArticleMeta = {
-    commentCount: post.commentCount ? post.commentCount : 0,
-    dates: post.dates,
-    topics: post.topics,
-    thematics: post.thematics,
+    commentCount: commentCount ? commentCount : 0,
+    dates: dates,
+    readingTime: info.readingTime,
+    thematics: thematics,
+    topics: topics,
+    wordsCount: info.wordsCount,
   };
 
-  const publicationDate = new Date(post.dates.publication);
-  const updateDate = new Date(post.dates.update);
+  const publicationDate = new Date(dates.publication);
+  const updateDate = new Date(dates.update);
 
   const schemaJsonLd: WithContext<BlogPosting> = {
     '@context': 'https://schema.org',
     '@type': 'BlogPosting',
-    name: post.title,
-    description: post.intro,
-    articleBody: post.intro,
+    name: title,
+    description: intro,
+    articleBody: intro,
     author: { '@id': `${config.url}/#branding` },
-    commentCount: post.commentCount ? post.commentCount : 0,
+    commentCount: commentCount ? commentCount : 0,
     copyrightYear: publicationDate.getFullYear(),
     creator: { '@id': `${config.url}/#branding` },
     dateCreated: publicationDate.toISOString(),
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${config.url}/#branding` },
-    image: post.featuredImage?.sourceUrl,
+    image: featuredImage?.sourceUrl,
     inLanguage: config.locales.defaultLocale,
-    isBasedOn: `${config.url}/article/${post.slug}`,
+    isBasedOn: `${config.url}/article/${slug}`,
     isPartOf: { '@id': `${config.url}/blog` },
     license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    thumbnailUrl: post.featuredImage?.sourceUrl,
+    thumbnailUrl: featuredImage?.sourceUrl,
   };
 
   return (
@@ -61,11 +74,11 @@ const PostPreview = ({
         ></script>
       </Head>
       <article className={styles.wrapper}>
-        {post.featuredImage && Object.keys(post.featuredImage).length > 0 && (
+        {featuredImage && Object.keys(featuredImage).length > 0 && (
           <div className={styles.cover}>
             <Image
-              src={post.featuredImage.sourceUrl}
-              alt={post.featuredImage.altText}
+              src={featuredImage.sourceUrl}
+              alt={featuredImage.altText}
               layout="fill"
               objectFit="contain"
             />
@@ -73,21 +86,21 @@ const PostPreview = ({
         )}
         <header className={styles.header}>
           <TitleTag className={styles.title}>
-            <Link href={`/article/${post.slug}`}>
-              <a>{post.title}</a>
+            <Link href={`/article/${slug}`}>
+              <a>{title}</a>
             </Link>
           </TitleTag>
         </header>
         <div
           className={styles.body}
-          dangerouslySetInnerHTML={{ __html: post.intro }}
+          dangerouslySetInnerHTML={{ __html: intro }}
         ></div>
         <footer className={styles.footer}>
-          <ButtonLink target={`/article/${post.slug}`} position="left">
+          <ButtonLink target={`/article/${slug}`} position="left">
             {t`Read more`}
             <span className="screen-reader-text">
               {' '}
-              {t({ message: `about ${post.title}`, comment: 'Post title' })}
+              {t({ message: `about ${title}`, comment: 'Post title' })}
             </span>
             <ArrowIcon />
           </ButtonLink>