diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-25 15:33:27 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-25 15:38:50 +0100 |
| commit | 97dc68e22e754d8e478beee590dbe9868171af50 (patch) | |
| tree | 01876f9b236b0a4ba696d5b084bd766b69046494 /src/components/PostMeta | |
| parent | 71942c86311a9d1ddf4ae486d811f8393786e855 (diff) | |
chore: add reading time in posts meta
Diffstat (limited to 'src/components/PostMeta')
| -rw-r--r-- | src/components/PostMeta/PostMeta.tsx | 34 |
1 files changed, 32 insertions, 2 deletions
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> |
