Merge pull request #19 from sudaraka94/fix-time-to-read

Fix time to read after mdx plugin bump
sudaraka94 · Apr 29, 2024 · e306c32 · e306c32
2 parents 4d73044 + 51084e1
commit e306c32
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 9 deletions.
diff --git 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
@@ -382,7 +382,7 @@ const SEO: React.FC<HelmetProps> = ({
 
   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
@@ -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
@@ -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
@@ -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
@@ -28,7 +28,7 @@ const ArticleHero: React.FC<ArticleHeroProps> = ({ article, authors }) => {
         <HeroSubtitle hasCoAUthors={hasCoAUthors}>
           <ArticleAuthors authors={authors} />
           <ArticleMeta hasCoAUthors={hasCoAUthors}>
-            {article.date} · {article.timeToRead} min read
+            {article.date} · {article.timeToRead}
           </ArticleMeta>
         </HeroSubtitle>
       </Header>

diff --git a/src/sections/article/Article.Next.tsx b/src/sections/article/Article.Next.tsx
@@ -65,7 +65,7 @@ const GridItem: React.FC<GridItemProps> = ({ article, narrow }) => {
         </Title>
         <Excerpt hasOverflow={hasOverflow}>{article.excerpt}</Excerpt>
         <MetaData>
-          {article.date} · {article.timeToRead} min read
+          {article.date} · {article.timeToRead}
         </MetaData>{" "}
       </Item>
     </ArticleLink>

diff --git a/src/sections/articles/Articles.List.tsx b/src/sections/articles/Articles.List.tsx
@@ -116,7 +116,7 @@ const ListItem: React.FC<ArticlesListItemProps> = ({ article, narrow }) => {
             {article.excerpt}
           </Excerpt>
           <MetaData>
-            {article.date} · {article.timeToRead} min read
+            {article.date} · {article.timeToRead}
           </MetaData>
         </div>
       </Item>