diff --git a/src/components/Article/Article.Block.tsx b/src/components/Article/Article.Block.tsx index a99b546..3aae7e0 100644 --- a/src/components/Article/Article.Block.tsx +++ b/src/components/Article/Article.Block.tsx @@ -48,7 +48,7 @@ export const RenderArticleBlock = ({ component={block.tagName as any} genericFontFamily="sans-serif" className={extractClassFromFirstTag(block.html) || ''} - id={extractIdFromFirstTag(block.html) || ''} + id={extractIdFromFirstTag(block.html) || `p-${block.order}`} dangerouslySetInnerHTML={{ __html: extractInnerHtml(block.html) }} /> ) diff --git a/src/components/Article/Header/Article.Header.tsx b/src/components/Article/Header/Article.Header.tsx index c40f3bb..6bd8f3c 100644 --- a/src/components/Article/Header/Article.Header.tsx +++ b/src/components/Article/Header/Article.Header.tsx @@ -7,6 +7,8 @@ import ArticleStats from '../Article.Stats' import { Typography } from '@acid-info/lsd-react' import styled from '@emotion/styled' import ArticleSummary from './Article.Summary' +import { UnbodyGraphQl } from '../../../lib/unbody/unbody-content.types' +import { calcReadingTime } from '@/utils/string.utils' import { Authors } from '@/components/Authors' import { Tags } from '@/components/Tags' @@ -31,9 +33,24 @@ const ArticleHeader = ({ ) }, [blocks]) + const readingTime = useMemo(() => { + return calcReadingTime( + blocks + .map((block) => { + if ( + block.__typename === UnbodyGraphQl.UnbodyDocumentTypeNames.TextBlock + ) { + return block.text + } + return '' + }) + .join(' '), + ) + }, [blocks]) + return (
- + - - - + {!isArticlePage && ( + + + + )} {resultsNumber !== null && ( {resultsNumber} matches diff --git a/src/utils/string.utils.ts b/src/utils/string.utils.ts index 7163975..44e963b 100644 --- a/src/utils/string.utils.ts +++ b/src/utils/string.utils.ts @@ -35,3 +35,9 @@ function editDistance(s1: string, s2: string) { } return costs[s2.length] } + +export const calcReadingTime = (text: string): number => { + const wordsPerMinute = 200 + const numberOfWords = text.split(/\s/g).length + return Math.ceil(numberOfWords / wordsPerMinute) +}