Blog posts link to authors now. Author info comes from Yaml.

This commit has a bug in it that I'm pushing to share with Kyle.

www/gatsby-config.js

@@ -2,7 +2,11 @@ module.exports = {
   siteMetadata: {
     title: 'React: A JavaScript library for building user interfaces',
   },
+  mapping: {
+    'MarkdownRemark.frontmatter.author': 'AuthorYaml',
+  },
   plugins: [
+    'gatsby-transformer-authors-yaml',
     'gatsby-plugin-sass',
     {
       resolve: `gatsby-source-filesystem`,

www/gatsby-node.js

@@ -119,6 +119,15 @@ exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
           if (match) {
             slug = `/blog/${match[1]}/${match[2]}/${match[3]}/${match[4]}.html`;
           }
+
+          const date = new Date(match[1], match[2], match[3]);
+
+          // Blog posts are sorted by date and display the date in their header.
+          createNodeField({
+            node,
+            name: 'date',
+            value: date.toJSON(),
+          });
         }
       }
 

www/plugins/gatsby-transformer-authors-yaml/gatsby-node.js

@@ -0,0 +1,30 @@
+const Promise = require('bluebird');
+const readFileSync = require('fs').readFileSync;
+const resolve = require('path').resolve;
+const safeLoad = require('js-yaml').safeLoad;
+
+// Reads authors.yml data into GraphQL.
+// This is auto-linked by gatsby-config.js to blog posts.
+exports.createPages = ({graphql, boundActionCreators}) => {
+  const {createNode} = boundActionCreators;
+
+  const path = resolve(__dirname, '../../../docs/_data/authors.yml');
+  const file = readFileSync(path, 'utf8');
+  const authors = safeLoad(file);
+
+  // authors.yml structure is {[username: string]: {name: string, url: string}}
+  Object.keys(authors).forEach(username => {
+    const author = authors[username];
+
+    createNode({
+      id: username,
+      children: [],
+      parent: 'AUTHORS',
+      internal: {
+        type: 'AuthorYaml',
+        contentDigest: JSON.stringify(author),
+      },
+      frontmatter: author,
+    });
+  });
+};

www/plugins/gatsby-transformer-authors-yaml/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "gatsby-transformer-authors-yaml",
+  "version": "0.0.1"
+}

www/src/components/MarkdownPage/MarkdownPage.js

@@ -10,7 +10,18 @@ import styles from './MarkdownPage.module.scss';
 
 // TODO Use 'react-helmet' to set metadata
 
-const MarkdownPage = ({location, markdownRemark, sectionList}) => (
+const dateToString = date =>
+  (typeof date.toLocaleDateString === 'function'
+    ? date.toLocaleDateString()
+    : date.toDateString());
+
+const MarkdownPage = ({
+  author,
+  date,
+  location,
+  markdownRemark,
+  sectionList,
+}) => (
   <div className={styles.MarkdownPage}>
     <div className={styles.Wrapper}>
       <StickyContainer className={styles.Sticky}>
@@ -22,6 +33,18 @@ const MarkdownPage = ({location, markdownRemark, sectionList}) => (
             />
           </div>
 
+          {author &&
+            date &&
+            <div className={cn(styles.Inner, styles.AuthorAndDate)}>
+              {dateToString(date)}
+              {' '}
+              by
+              {' '}
+              <a className={styles.Link} href={author.frontmatter.url}>
+                {author.frontmatter.name}
+              </a>
+            </div>}
+
           <div
             className={cn(styles.Body, styles.Inner)}
             dangerouslySetInnerHTML={{__html: markdownRemark.html}}
@@ -51,6 +74,8 @@ const MarkdownPage = ({location, markdownRemark, sectionList}) => (
 
 // TODO Better types
 MarkdownPage.propTypes = {
+  author: PropTypes.object,
+  date: PropTypes.object,
   location: PropTypes.object.isRequired,
   markdownRemark: PropTypes.object.isRequired,
   sectionList: PropTypes.array.isRequired,

www/src/components/MarkdownPage/MarkdownPage.module.scss

@@ -6,6 +6,17 @@
 @import "../../css/note";
 @import "../../css/wrapper";
 
+@mixin link {
+  background-color: rgba(#bbeffd, 0.5);
+  border-bottom: 1px solid rgba(#000, 0.2);
+  color: #1a1a1a;
+
+  &:hover {
+    background-color: rgba(#bbeffd, 1);
+    border-bottom-color: #1a1a1a;
+  }
+}
+
 .MarkdownPage {
   @extend .below_nav;
 
@@ -32,21 +43,22 @@
   padding-left: 40px;
 }
 
+.AuthorAndDate {
+  margin-top: 15px;
+}
+
 .Inner {
   // TODO -- calc the logic of this this magic number...
   padding-right: calc(8.93% + 40px);
 }
 
-.article__sub {
-  @include f-article_sub;
-  color: $c-subtle;
-  margin-top: 45px;
+.Link {
+  @include link;
 }
 
 .Body {
   margin-top: 65px;
   margin-bottom: 120px;
-  // margin-right: 40px;
 
   > p {
     @include f-panel;
@@ -56,7 +68,10 @@
     }
 
     &:first-child {
-      @extend .article__sub;
+      @include f-article_sub;
+
+      color: $c-subtle;
+      margin-top: 45px;
       max-width: none;
       margin-top: 0;
     }
@@ -100,14 +115,7 @@
 
   :global {
     a:not(.anchor) {
-      background-color: rgba(#bbeffd, 0.5);
-      border-bottom: 1px solid rgba(#000, 0.2);
-      color: #1a1a1a;
-
-      &:hover {
-        background-color: rgba(#bbeffd, 1);
-        border-bottom-color: #1a1a1a;
-      }
+      @include link;
     }
   }
 

www/src/templates/blog.js

@@ -6,6 +6,8 @@ const sectionList = []; // TODO Load 10 most recent blog entries; see nav_blog.h
 
 const Blog = ({data, location}) => (
   <MarkdownPage
+    author={data.markdownRemark.frontmatter.author}
+    date={new Date(data.markdownRemark.fields.date)}
     location={location}
     markdownRemark={data.markdownRemark}
     sectionList={sectionList}
@@ -25,8 +27,15 @@ export const pageQuery = graphql`
         title
         next
         prev
+        author {
+          frontmatter {
+            name
+            url
+          }
+        }
       }
       fields {
+        date
         path
       }
     }

www/yarn.lock

@@ -6809,7 +6809,7 @@ react-router-dom@^4.1.1:
     prop-types "^15.5.4"
     react-router "^4.1.1"
 
-"react-router-scroll@github:ytase/react-router-scroll#build":
+react-router-scroll@ytase/react-router-scroll#build:
   version "0.4.1"
   resolved "https://codeload.github.com/ytase/react-router-scroll/tar.gz/991ecddb08885e1fb80ec1e9dbf3a35844b7d4cd"
   dependencies: