diff --git a/package.json b/package.json index e96e013..309935f 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@emotion/styled": "^11.11.0", "@mdx-js/react": "^3.0.1", "@raae/gatsby-remark-oembed": "^0.3.3", + "@sudaraka94/gatsby-remark-link-unfurl": "^1.0.0", "@theme-ui/mdx": "^0.16.2", "adm-zip": "^0.5.12", "babel-plugin-emotion": "^11.0.0", @@ -61,7 +62,6 @@ "gatsby-remark-embed-video": "^3.2.1", "gatsby-remark-external-links": "0.0.4", "gatsby-remark-images": "^7.13.1", - "@sudaraka94/gatsby-remark-link-unfurl": "^1.0.0", "gatsby-remark-numbered-footnotes": "^1.0.1", "gatsby-remark-prismjs": "^7.13.1", "gatsby-remark-smartypants": "^6.13.1", @@ -76,6 +76,7 @@ "react-live": "^4.1.6", "react-medium-image-zoom": "^5.1.11", "react-outside-click-handler": "^1.3.0", + "reading-time": "^1.5.0", "rehype-slug": "^6.0.0", "request": "^2.88.2", "slugify": "^1.6.6", diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx index 446455c..d73f9a8 100644 --- a/src/components/SEO/SEO.tsx +++ b/src/components/SEO/SEO.tsx @@ -382,7 +382,7 @@ const SEO: React.FC = ({ if (timeToRead) { metaTags.push({ name: 'twitter:label1', value: 'Reading time' }); - metaTags.push({ name: 'twitter:data1', value: `${timeToRead} min read` }); + metaTags.push({ name: 'twitter:data1', value: `${timeToRead}` }); } if (isSecret) { diff --git a/src/gatsby/node/createResolvers.js b/src/gatsby/node/createResolvers.js index 3bcaf74..44dde2c 100644 --- a/src/gatsby/node/createResolvers.js +++ b/src/gatsby/node/createResolvers.js @@ -26,9 +26,6 @@ module.exports = ({ createResolvers }) => { body: { resolve: mdxResolverPassthrough(`body`), }, - timeToRead: { - resolve: mdxResolverPassthrough(`timeToRead`), - }, }, }); }; diff --git a/src/gatsby/node/createSchemaCustomization.js b/src/gatsby/node/createSchemaCustomization.js index 9f9e8da..e44a4ce 100644 --- a/src/gatsby/node/createSchemaCustomization.js +++ b/src/gatsby/node/createSchemaCustomization.js @@ -18,7 +18,7 @@ module.exports = ({ actions }) => { excerpt(pruneLength: Int = 140): String! body: String! hero: File @fileByRelativePath - timeToRead: Int + timeToRead: String canonical_url: String secret: Boolean subscription: Boolean diff --git a/src/gatsby/node/onCreateNode.js b/src/gatsby/node/onCreateNode.js index 2580498..58ae0b8 100644 --- a/src/gatsby/node/onCreateNode.js +++ b/src/gatsby/node/onCreateNode.js @@ -2,6 +2,7 @@ const crypto = require(`crypto`); const slugify = require('slugify'); +const readingTime = require('reading-time'); // Create fields for post slugs and source // This will change with schema customization with work @@ -83,10 +84,13 @@ module.exports = ({ node, actions, getNode, createNodeId }, themeOptions) => { } if (node.internal.type === `Mdx` && source === contentPath) { + const readTime = readingTime(node.body) + const fieldData = { author: node.frontmatter.author, date: node.frontmatter.date, hero: node.frontmatter.hero, + timeToRead: readTime.text, secret: node.frontmatter.secret || false, slug: generateSlug( basePath, diff --git a/src/sections/article/Article.Hero.tsx b/src/sections/article/Article.Hero.tsx index 192d0ce..f58e7d3 100644 --- a/src/sections/article/Article.Hero.tsx +++ b/src/sections/article/Article.Hero.tsx @@ -28,7 +28,7 @@ const ArticleHero: React.FC = ({ article, authors }) => { - {article.date} · {article.timeToRead} min read + {article.date} · {article.timeToRead} diff --git a/src/sections/article/Article.Next.tsx b/src/sections/article/Article.Next.tsx index cb7c92f..db05a1f 100644 --- a/src/sections/article/Article.Next.tsx +++ b/src/sections/article/Article.Next.tsx @@ -65,7 +65,7 @@ const GridItem: React.FC = ({ article, narrow }) => { {article.excerpt} - {article.date} · {article.timeToRead} min read + {article.date} · {article.timeToRead} {" "} diff --git a/src/sections/articles/Articles.List.tsx b/src/sections/articles/Articles.List.tsx index 4f959e2..374d231 100644 --- a/src/sections/articles/Articles.List.tsx +++ b/src/sections/articles/Articles.List.tsx @@ -116,7 +116,7 @@ const ListItem: React.FC = ({ article, narrow }) => { {article.excerpt} - {article.date} · {article.timeToRead} min read + {article.date} · {article.timeToRead}