Add information about last update to documentation (#3739)

website/gatsby-node.js

@@ -1,5 +1,7 @@
 const { createFilePath } = require("gatsby-source-filesystem");
-const path = require(`path`);
+const path = require("path");
+const git = require("simple-git/promise");
+const moment = require("moment");
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage, createRedirect } = actions;
@@ -112,17 +114,50 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 };
 
-exports.onCreateNode = ({ node, actions, getNode }) => {
+exports.onCreateNode = async ({ node, actions, getNode }) => {
   const { createNodeField } = actions;
 
-  if (node.internal.type === `Mdx`) {
-    const value = createFilePath({ node, getNode });
-    createNodeField({
-      name: `slug`,
-      node,
-      value,
-    });
+  if (node.internal.type !== `Mdx`) {
+    return;
+  }
+
+  const filepath = createFilePath({ node, getNode });
+
+  createNodeField({
+    name: `slug`,
+    node,
+    value: filepath,
+  });
+
+  let authorName;
+  let lastUpdated;
+
+  // we only run "git log" when building the production bundle
+  // for development purposes we fallback to dummy values
+  if (process.env.NODE_ENV === "production") {
+    try {
+      const result = await getGitLog(node.fileAbsolutePath);
+      const data = result?.latest;
+      const date = data?.date;
+
+      authorName = data?.authorName;
+
+      if (date) {
+        lastUpdated = moment(date, "YYYY-MM-DD HH:mm:ss Z");
+      }
+    } catch {}
   }
+
+  createNodeField({
+    node,
+    name: `lastAuthorName`,
+    value: authorName ?? "Unknown",
+  });
+  createNodeField({
+    node,
+    name: `lastUpdated`,
+    value: lastUpdated?.format("YYYY-MM-DD") ?? "0000-00-00",
+  });
 };
 
 function createBlogArticles(createPage, data) {
@@ -192,3 +227,16 @@ function createDocPages(createPage, data) {
     });
   });
 }
+
+function getGitLog(filepath) {
+  const logOptions = {
+    file: filepath,
+    n: 1,
+    format: {
+      date: `%ai`,
+      authorName: `%an`,
+    },
+  };
+
+  return git().log(logOptions);
+}

website/package.json

@@ -63,6 +63,7 @@
     "react-responsive-carousel": "^3.2.11",
     "react-share": "^4.2.1",
     "rxjs": "^7.0.1",
+    "simple-git": "^2.39.0",
     "styled-components": "^5.2.3"
   },
   "devDependencies": {

website/src/components/articles/article-content-footer.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from "react";
+import styled from "styled-components";
+
+interface ArticleContentFooterProperties {
+  readonly lastUpdated: string;
+  readonly lastAuthorName: string;
+}
+
+export const ArticleContentFooter: FunctionComponent<ArticleContentFooterProperties> = ({
+  lastUpdated,
+  lastAuthorName,
+}) => {
+  return (
+    <Footer>
+      <Small>
+        Last updated on <strong>{lastUpdated}</strong> by{" "}
+        <strong>{lastAuthorName}</strong>
+      </Small>
+    </Footer>
+  );
+};
+
+const Small = styled.small`
+  font-style: italic;
+  font-size: 0.7em;
+`;
+
+const Footer = styled.div`
+  text-align: right;
+  margin-top: 30px;
+`;

website/src/components/doc-page/doc-page.tsx

@@ -22,6 +22,7 @@ import { useObservable } from "../../state";
 import { toggleAside, toggleTOC } from "../../state/common";
 import { Article } from "../articles/article";
 import { ArticleComments } from "../articles/article-comments";
+import { ArticleContentFooter } from "../articles/article-content-footer";
 import {
   ArticleContent,
   ArticleHeader,
@@ -116,6 +117,11 @@ export const DocPage: FunctionComponent<DocPageProperties> = ({
               </ArticleHeader>
               <ArticleContent>
                 <MDXRenderer>{body}</MDXRenderer>
+
+                <ArticleContentFooter
+                  lastUpdated={fields!.lastUpdated!}
+                  lastAuthorName={fields!.lastAuthorName!}
+                />
               </ArticleContent>
             </Article>
             {false && <ArticleComments data={data} path={path} title={title} />}
@@ -139,6 +145,8 @@ export const DocPageGraphQLFragment = graphql`
       childMdx {
         fields {
           slug
+          lastUpdated
+          lastAuthorName
         }
         frontmatter {
           title

website/yarn.lock

@@ -2235,6 +2235,18 @@
     "@babel/runtime" "^7.7.2"
     regenerator-runtime "^0.13.3"
 
+"@kwsites/file-exists@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@kwsites/file-exists/-/file-exists-1.1.1.tgz#ad1efcac13e1987d8dbaf235ef3be5b0d96faa99"
+  integrity sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==
+  dependencies:
+    debug "^4.1.1"
+
+"@kwsites/promise-deferred@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz#8ace5259254426ccef57f3175bc64ed7095ed919"
+  integrity sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==
+
 "@mdx-js/loader@^1.6.19":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@@ -17058,6 +17070,15 @@ simple-get@^4.0.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-git@^2.39.0:
+  version "2.39.0"
+  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-2.39.0.tgz#6320e01675c6ee5272aec00727549a5d2617e35e"
+  integrity sha512-VOsrmc3fpp1lGVIpo+1SKNqJzrdVJeSGZCeenPKnJPNo5UouAlSkWFc037pfm9wRYtfxBdwp2deVJGCG8J6C8A==
+  dependencies:
+    "@kwsites/file-exists" "^1.1.1"
+    "@kwsites/promise-deferred" "^1.1.1"
+    debug "^4.3.1"
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"