Display contributors at the bottom of every page (#67)

* Create contributors component

* Fix import

* Create PageFooter component

* Use correct pluralization of "contributors"

* Format the date

* Update page footer component

* Add comment about contributors array

* Get avatar url by login

* Fix page footer variable references

* Accept additional contributors through frontmatter

* Add error handling

* Check for latestCommit before rendering

* Add tests for the contributors component

* Run tests during CI

* Add test for page footer

* Add documentation

* Don't render duplicate contributors

* Reduce padding

Author: colebemis

.github/workflows/ci.yml

@@ -8,7 +8,10 @@ jobs:
       - uses: actions/setup-node@master
         with:
           version: 10
-      - run: yarn install
+      - name: install
+        run: yarn install
+      - name: test
+        run: yarn workspace @primer/gatsby-theme-doctocat test
       - uses: primer/publish@master
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

docs/content/getting-started/index.mdx

@@ -1,5 +1,9 @@
 ---
 title: Getting started
+additionalContributors:
+  - ashygee
+  - emplums
+  - shawnbot
 ---
 
 This guide will walk you through creating, customizing, and deploying a new site with Doctocat using our [template repository](https://github.com/primer/doctocat-template). If you have an existing repository where you would like to create a new site, we recommend using the Gatsby CLI instead. Check out the [Gatsby CLI guide](/getting-started/gatsby-cli) for more information.

docs/content/usage/customization.mdx

@@ -2,6 +2,9 @@
 title: Customization
 ---
 
+import {BorderBox} from '@primer/components'
+import {Contributors} from '@primer/gatsby-theme-doctocat'
+
 Here are a few ways you can customize your Doctocat site:
 
 ## Site metadata
@@ -66,6 +69,33 @@ module.exports = {
 }
 ```
 
+## Contributors
+
+If you have the `repository` in `package.json` and `repoRootPath` in `gatsby-config.js` set up correctly (as described [above](#edit-on-github-link)), Doctocat will automatically display contributors on the bottom of every page, like so:
+
+<BorderBox p={4} mb={3}>
+  <Contributors
+    contributors={[
+      {
+        login: 'colebemis',
+        latestCommit: {
+          url: '#',
+          date: '2019-08-15T23:40:19Z',
+        },
+      },
+      {
+        login: 'emplums',
+        latestCommit: {
+          url: '#',
+          date: '2019-08-14T00:19:54Z',
+        },
+      },
+    ]}
+  />
+</BorderBox>
+
+These contributors are determined by commits. However, we know that commits aren't the only way to contribute. You can use [front matter](/usage/front-matter#additional-contributors) to give credit to people who aren't listed in the commit history but still contributed.
+
 ## Hero
 
 To add a hero section to a page, you'll need to override the default layout component with Doctocat's `HeroLayout` component by exporting it from your MDX file:

docs/content/usage/front-matter.mdx

@@ -48,3 +48,15 @@ Doctocat comes with a few predefined statuses that have colors associated with t
 Custom statuses will render a gray dot:
 
 <StatusLabel status="My custom status" />
+
+## Additional contributors
+
+If you have the `repository` in `package.json` and `repoRootPath` in `gatsby-config.js` setup correctly (as desribed in the [customization](/usage/customization#contributors) guide), Doctocat will automatically display contributors on the bottom of every page. These contributors are determined by commits. However, we know that commits aren't the only way to contribute. To give credit to people who aren't listed in the commit history but still contributed, use the `additionalContributors` front matter variable to list their GitHub usernames, for example:
+
+```markdown
+---
+additionalContributors:
+  - ashygee
+  - emplums
+---
+```

theme/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+}

theme/gatsby-node.js

@@ -1,26 +1,12 @@
 const path = require('path')
 const readPkgUp = require('read-pkg-up')
 const getPkgRepo = require('get-pkg-repo')
-const memoize = require('lodash.memoize')
-
-const getRepo = memoize(() => {
-  return getPkgRepo(readPkgUp.sync().package)
-})
-
-function generateEditUrl(rootAbsolutePath, fileAbsolutePath) {
-  try {
-    const {domain, user, project} = getRepo()
-    const fileRelativePath = path.relative(rootAbsolutePath, fileAbsolutePath)
-    return `https://${domain}/${user}/${project}/edit/master/${fileRelativePath}`
-  } catch (error) {
-    console.warn(
-      `[warning] An edit url could not be generated for ${fileAbsolutePath}`,
-    )
-    return null
-  }
-}
+const axios = require('axios')
+const uniqBy = require('lodash.uniqby')
 
 exports.createPages = async ({graphql, actions}, themeOptions) => {
+  const repo = getPkgRepo(readPkgUp.sync().package)
+
   const {data} = await graphql(`
     {
       allMdx {
@@ -38,29 +24,69 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
     }
   `)
 
-  data.allMdx.nodes.forEach(node => {
-    const pagePath = path.join(
-      node.parent.relativeDirectory,
-      node.parent.name === 'index' ? '/' : node.parent.name,
-    )
+  // Turn every MDX file into a page.
+  return Promise.all(
+    data.allMdx.nodes.map(async node => {
+      const pagePath = path.join(
+        node.parent.relativeDirectory,
+        node.parent.name === 'index' ? '/' : node.parent.name,
+      )
+
+      const rootAbsolutePath = path.resolve(
+        process.cwd(),
+        themeOptions.repoRootPath || '.',
+      )
+
+      const fileRelativePath = path.relative(
+        rootAbsolutePath,
+        node.fileAbsolutePath,
+      )
 
-    const rootAbsolutePath = path.resolve(
-      process.cwd(),
-      themeOptions.repoRootPath || '.',
+      const editUrl = getEditUrl(repo, fileRelativePath)
+
+      const contributors = await fetchContributors(repo, fileRelativePath)
+
+      actions.createPage({
+        path: pagePath,
+        component: node.fileAbsolutePath,
+        context: {
+          editUrl,
+          contributors,
+          tableOfContents: node.tableOfContents,
+          // We don't need to add `frontmatter` to the page context here
+          // because gatsby-plugin-mdx automatically does that.
+          // Source: https://git.io/fjQDa
+        },
+      })
+    }),
+  )
+}
+
+function getEditUrl(repo, filePath) {
+  return `https://github.com/${repo.user}/${repo.project}/edit/master/${filePath}`
+}
+
+async function fetchContributors(repo, filePath) {
+  try {
+    const {data} = await axios.get(
+      `https://api.github.com/repos/${repo.user}/${repo.project}/commits?path=${filePath}`,
     )
 
-    const editUrl = generateEditUrl(rootAbsolutePath, node.fileAbsolutePath)
+    const commits = data
+      .map(commit => ({
+        login: commit.author && commit.author.login,
+        latestCommit: {
+          date: commit.commit.author.date,
+          url: commit.html_url,
+        },
+      }))
+      .filter(contributor => Boolean(contributor.login))
 
-    actions.createPage({
-      path: pagePath,
-      component: node.fileAbsolutePath,
-      context: {
-        editUrl,
-        tableOfContents: node.tableOfContents,
-        // We don't need to add `frontmatter` to the page context here
-        // because gatsby-plugin-mdx automatically does that.
-        // Source: https://git.io/fjQDa
-      },
-    })
-  })
+    return uniqBy(commits, 'login')
+  } catch (error) {
+    console.error(
+      `[ERROR] Unable to fetch contributors for ${filePath}. ${error.message}`,
+    )
+    return []
+  }
 }

theme/index.js

@@ -7,3 +7,4 @@ export {default as Hero} from './src/components/hero'
 export {default as HeroLayout} from './src/components/hero-layout'
 export {default as Sidebar} from './src/components/sidebar'
 export {default as StatusLabel} from './src/components/status-label'
+export {default as Contributors} from './src/components/contributors'

theme/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.js'],
+  setupFilesAfterEnv: ['<rootDir>/setup-tests.js'],
+}

theme/package.json

@@ -3,6 +3,9 @@
   "version": "0.13.0",
   "main": "index.js",
   "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
   "devDependencies": {
     "gatsby": "^2.13.52",
     "react": "^16.8.6",
@@ -14,12 +17,19 @@
     "react-dom": "16.8.x"
   },
   "dependencies": {
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
     "@primer/components": "^13.3.1",
     "@primer/octicons-react": "^9.1.1",
     "@styled-system/theme-get": "^5.0.12",
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^9.1.3",
+    "axios": "^0.19.0",
+    "babel-jest": "^24.9.0",
     "copy-to-clipboard": "^3.2.0",
+    "date-fns": "^2.0.1",
     "details-element-polyfill": "^2.4.0",
     "downshift": "^3.2.10",
     "find-up": "^4.1.0",
@@ -37,7 +47,10 @@
     "get-pkg-repo": "^4.1.0",
     "github-slugger": "^1.2.1",
     "html-react-parser": "^0.9.1",
+    "jest": "^24.9.0",
+    "lodash.uniqby": "^4.7.0",
     "pkg-up": "^3.1.0",
+    "pluralize": "^8.0.0",
     "prism-react-renderer": "^0.1.7",
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.0.3",

theme/setup-tests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'