fix(Article-ArticleHeader): add last updated time (#592)

sabertazimi · Apr 15, 2022 · 0fcb1f2 · 0fcb1f2
1 parent cb858d5
commit 0fcb1f2
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 12 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -83,7 +83,7 @@ jobs:
         uses: actions/checkout@v3
         with:
           submodules: true
-          fetch-depth: 1
+          fetch-depth: 0 # Keep `0` for git time
       - name: Setup Node environment
         uses: actions/setup-node@v3
         with:

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,3 +1,6 @@
+const path = require('node:path');
+
+/** @type {import('gatsby').GatsbyConfig} */
 module.exports = {
   siteMetadata: {
     title: 'Sabertaz Blog',
@@ -28,7 +31,7 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'posts',
-        path: `${__dirname}/src/pages/`,
+        path: path.join(__dirname, 'src/pages/'),
       },
     },
     {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -4,22 +4,32 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
-const path = require('path');
+const path = require('node:path');
+const { execSync } = require('node:child_process');
 const { createFilePath } = require('gatsby-source-filesystem');
 const { Octokit } = require('@octokit/rest');
 const config = require('./gatsby-config');
 
 const octokit = new Octokit();
 
+/** @param {import('gatsby').CreateNodeArgs} */
 exports.onCreateNode = ({ node, getNode, actions: { createNodeField } }) => {
   switch (node.internal.type) {
     case 'MarkdownRemark': {
       const slug = createFilePath({ node, getNode, basePath: 'pages' });
+      const gitTime = execSync(
+        `git log -1 --pretty=format:%aI ${node.fileAbsolutePath}`
+      ).toString();
       createNodeField({
         node,
         name: 'slug',
         value: slug,
       });
+      createNodeField({
+        node,
+        name: 'gitTime',
+        value: gitTime,
+      });
       break;
     }
     case 'SitePage':
@@ -31,6 +41,7 @@ exports.onCreateNode = ({ node, getNode, actions: { createNodeField } }) => {
   }
 };
 
+/** @param {import('gatsby').CreatePagesArgs} */
 exports.createPages = async ({ graphql, actions: { createPage } }) => {
   let githubProfile = {
     username: 'sabertazimi',
@@ -114,6 +125,7 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
           node {
             fields {
               slug
+              gitTime
             }
             frontmatter {
               title
@@ -162,6 +174,7 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
         author: node.frontmatter.author,
         tags: node.frontmatter.tags,
         date: node.frontmatter.date,
+        gitTime: node.fields.gitTime,
         timeToRead: node.timeToRead,
         excerpt: node.excerpt,
         toc: node.tableOfContents,
@@ -243,6 +256,7 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
   });
 };
 
+/** @param {import('gatsby').CreateWebpackConfigArgs} */
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {

diff --git a/src/components/Article/Article.test.tsx b/src/components/Article/Article.test.tsx
@@ -16,6 +16,7 @@ const post = {
   subtitle: 'Be a Stupid Learner',
   author: 'Sabertaz',
   date: '2018-08-08T00:00:00.000Z',
+  gitTime: '2018-08-08T00:00:00.000Z',
   tags: [
     'Redux',
     'React',

diff --git a/src/components/Article/Article.tsx b/src/components/Article/Article.tsx
@@ -22,6 +22,7 @@ const Article = ({ post, commentUrl, socialUrl }: Props): JSX.Element => {
     subtitle,
     author,
     date,
+    gitTime,
     tags,
     timeToRead,
     prevPost,
@@ -36,6 +37,7 @@ const Article = ({ post, commentUrl, socialUrl }: Props): JSX.Element => {
     subtitle,
     author,
     date,
+    gitTime,
     tags,
     timeToRead,
     prevPost,

diff --git a/src/components/Article/ArticleHeader.tsx b/src/components/Article/ArticleHeader.tsx
@@ -11,7 +11,7 @@ interface Props {
 }
 
 const ArticleHeader = ({ post }: Props): JSX.Element => {
-  const { tags, title, date, timeToRead } = post;
+  const { tags, title, date, gitTime, timeToRead } = post;
   const props = useSpring({
     from: { opacity: 0, transform: 'translateX(-200px)' },
     to: { opacity: 1, transform: 'translateX(0)' },
@@ -49,6 +49,12 @@ const ArticleHeader = ({ post }: Props): JSX.Element => {
             Posted on {date ? new Date(date).toDateString() : 'Nowadays'}
           </div>
         </Tag>
+        <Tag className="tag-black">
+          <div className="text-base font-extrabold">
+            Last updated on{' '}
+            {gitTime ? new Date(gitTime).toDateString() : 'Nowadays'}
+          </div>
+        </Tag>
         <Tag className="tag-black">
           <div className="text-base font-extrabold">({timeToRead} minutes)</div>
         </Tag>

diff --git a/src/components/Article/__snapshots__/Article.test.tsx.snap b/src/components/Article/__snapshots__/Article.test.tsx.snap
@@ -108,6 +108,22 @@ exports[`Article should render correctly (snapshot) 1`] = `
           Wed Aug 08 2018
         </div>
       </span>
+      <span
+        className="ant-tag tag-black"
+        style={
+          Object {
+            "backgroundColor": undefined,
+          }
+        }
+      >
+        <div
+          className="text-base font-extrabold"
+        >
+          Last updated on
+           
+          Wed Aug 08 2018
+        </div>
+      </span>
       <span
         className="ant-tag tag-black"
         style={
@@ -503,6 +519,22 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
           Nowadays
         </div>
       </span>
+      <span
+        className="ant-tag tag-black"
+        style={
+          Object {
+            "backgroundColor": undefined,
+          }
+        }
+      >
+        <div
+          className="text-base font-extrabold"
+        >
+          Last updated on
+           
+          Nowadays
+        </div>
+      </span>
       <span
         className="ant-tag tag-black"
         style={

diff --git a/src/hooks/usePostsMetadata.test.ts b/src/hooks/usePostsMetadata.test.ts
@@ -13,7 +13,7 @@ const BasePosts = testIterator.map(post => ({
 }));
 const Posts = testIterator.map(post => ({
   node: {
-    fields: { slug: `/${post + 1}BasicNotes/` },
+    fields: { slug: `/${post + 1}BasicNotes/`, gitTime: `${post + 1} time` },
     frontmatter: {
       title: `${post + 1} Basic Notes`,
       subtitle: 'Be a Stupid Learner',
@@ -50,6 +50,7 @@ describe('usePostsMetadata', () => {
       );
       expect(posts[index].author).toBe(Posts[index].node.frontmatter.author);
       expect(posts[index].date).toBe(Posts[index].node.frontmatter.date);
+      expect(posts[index].gitTime).toBe(Posts[index].node.fields.gitTime);
 
       // Check correct navigation data of post are returned
       if (index === 0) {
@@ -96,9 +97,9 @@ describe('usePostsMetadata', () => {
       const { posts, tags } = usePostsMetadata();
 
       // Check correct partial metadata of post are returned
-      expect(posts[index].slug).toBe(Posts[index].node.fields.slug);
-      expect(posts[index].timeToRead).toBe(Posts[index].node.timeToRead);
-      expect(posts[index].title).toBe(Posts[index].node.frontmatter.title);
+      expect(posts[index].slug).toBe(BasePosts[index].node.fields.slug);
+      expect(posts[index].timeToRead).toBe(BasePosts[index].node.timeToRead);
+      expect(posts[index].title).toBe(BasePosts[index].node.frontmatter.title);
 
       // Check correct navigation data of post are returned
       if (index === 0) {
@@ -107,16 +108,16 @@ describe('usePostsMetadata', () => {
         expect(posts[index].prevPost).toBeFalsy();
       } else {
         expect(posts[index].prevPost?.slug).toBe(
-          Posts[index + 1].node.fields.slug
+          BasePosts[index + 1].node.fields.slug
         );
         expect(posts[index].prevPost?.title).toBe(
-          Posts[index + 1].node.frontmatter.title
+          BasePosts[index + 1].node.frontmatter.title
         );
         expect(posts[index].nextPost?.slug).toBe(
-          Posts[index - 1].node.fields.slug
+          BasePosts[index - 1].node.fields.slug
         );
         expect(posts[index].nextPost?.title).toBe(
-          Posts[index - 1].node.frontmatter.title
+          BasePosts[index - 1].node.frontmatter.title
         );
       }
 

diff --git a/src/hooks/usePostsMetadata.ts b/src/hooks/usePostsMetadata.ts
@@ -5,6 +5,7 @@ interface PostsMetadataNode {
   node: {
     fields: {
       slug: string;
+      gitTime: string;
     };
     frontmatter: {
       title: string;
@@ -29,6 +30,7 @@ const usePostsMetadata = (): {
             node {
               fields {
                 slug
+                gitTime
               }
               frontmatter {
                 title
@@ -74,6 +76,7 @@ const usePostsMetadata = (): {
         author: node.frontmatter.author,
         tags: node.frontmatter.tags,
         date: node.frontmatter.date,
+        gitTime: node.fields.gitTime,
         timeToRead: node.timeToRead,
         prevPost,
         nextPost,

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -30,6 +30,7 @@ export interface PostMetaType {
   subtitle?: string;
   author?: string;
   date?: string;
+  gitTime?: string;
   tags?: TagType[];
   prevPost?: {
     slug: string;