Merge pull request #368 from ACIDKing/feat/time-to-read

feat - ⌚ add reading time to the article

src/components/blog/article-card.jsx

@@ -7,6 +7,9 @@ import { Flex, Box } from 'grid-styled'
 
 import { TagList } from '../common/tag'
 import RoundImg from '../round-img'
+import { getNoun } from '../../utils/language-utils'
+
+const getCorrectTimeToReadNoun = getNoun('минута', 'минуты', 'минут')
 
 let Card = styled.div`
   box-shadow: 0 0 8px 1px #bbb;
@@ -68,7 +71,15 @@ let BackgroundImage = styled.div`
 let ArticleCard = ({ post }) => (
   <Box is={Card} p="2.5rem">
     <header>
-      <Date>{moment(post.date).format('ll')}</Date>
+      <Flex justifyContent="space-between">
+        <Date>{moment(post.date).format('ll')}</Date>
+        <Box fontSize="1.4rem">
+          &#8986;&nbsp;
+          <span>{`${post.timeToRead} ${getCorrectTimeToReadNoun(
+            post.timeToRead,
+          )}`}</span>
+        </Box>
+      </Flex>
       <Box is="h2" mt="3.6rem">
         <StyledLink to={post.link}>{post.title}</StyledLink>
       </Box>
@@ -106,6 +117,7 @@ ArticleCard.propTypes = {
   post: PropTypes.shape({
     title: PropTypes.string.isRequired,
     date: PropTypes.string.isRequired,
+    timeToRead: PropTypes.string,
     link: PropTypes.string.isRequired,
     excerpt: PropTypes.string.isRequired,
     tags: PropTypes.arrayOf(PropTypes.string),

src/pages/blog.js

@@ -49,6 +49,7 @@ export let pageQuery = graphql`
       edges {
         node {
           id
+          timeToRead
           excerpt(pruneLength: 250)
           fields {
             slug

src/templates/blog-post.template.js

@@ -15,6 +15,9 @@ import HTMLContent from '../components/blog/HTMLContent'
 import RoundImg from '../components/round-img'
 import { BrowserOnly } from '../utils/css-utils'
 import Layout from '../components/layout'
+import { getNoun } from '../utils/language-utils'
+
+const getCorrectTimeToReadNoun = getNoun('минута', 'минуты', 'минут')
 
 let Header = styled.header`
   background-blend-mode: overlay;
@@ -62,6 +65,12 @@ let BlogPost = ({ post }) => (
             <Box fontSize={['1.4rem', '1.6rem']} itemProp="dateCreated">
               {moment(post.date).format('LLL')}
             </Box>
+            <Box fontSize="1.4rem">
+              &#8986;&nbsp;
+              <span>{`${post.timeToRead} ${getCorrectTimeToReadNoun(
+                post.timeToRead,
+              )}`}</span>
+            </Box>
           </Flex>
         </Flex>
 
@@ -118,12 +127,14 @@ export default mapProps(({ data: { markdownRemark } }) => ({
     excerpt: markdownRemark.excerpt,
     slug: markdownRemark.fields.slug,
     author: markdownRemark.fields.author,
+    timeToRead: markdownRemark.timeToRead,
   },
 }))(BlogPost)
 
 export let pageQuery = graphql`
   query BlogPost($id: String!) {
     markdownRemark(id: { eq: $id }) {
+      timeToRead
       html
       excerpt(pruneLength: 400)
       fields {

src/utils/language-utils.js

@@ -2,3 +2,19 @@ import translit from 'translit'
 import translitMapRU from 'translit-russian'
 
 export const translitRU = translit(translitMapRU) // eslint-disable-line import/prefer-default-export
+
+export const getNoun = (one, two, five) => number => {
+  number = Math.abs(number)
+  number %= 100
+  if (number >= 5 && number <= 20) {
+    return five
+  }
+  number %= 10
+  if (number === 1) {
+    return one
+  }
+  if (number >= 2 && number <= 4) {
+    return two
+  }
+  return five
+}