Improves layout adds fallback image.

Author: Simon Prickett

docusaurus.config.js

@@ -16,7 +16,8 @@ module.exports = {
       simon: {
         name: 'Simon Prickett',
         link: 'https://twitter.com/simon_prickett',
-        title: 'Manager, Developer Advocacy'
+        title: 'Manager, Developer Advocacy',
+        image: 'profile_pic_simon_prickett.jpg'
       },
       suze: {
         name: 'Suze Shardlow',

src/theme/DocItem/index.tsx

@@ -107,7 +107,7 @@ function DocItem(props: Props): JSX.Element {
                 <div className="docAuthors">
                   <hr/>
                     {DocContent.frontMatter.authors.map(author => {
-                      return <div><img className={styles.authorProfileImage} src="/img/default_author_profile_pic.png" alt={'Profile picture for ' + authorLookup[author].name}/> <a href={authorLookup[author].link} target="_blank">{authorLookup[author].name}</a>: {authorLookup[author].title}</div>
+                      return <div className={styles.authorByline}><img className={styles.authorProfileImage} src={'/img/' + (authorLookup[author].image ? authorLookup[author].image : 'default_author_profile_pic.png')} alt={'Profile picture for ' + authorLookup[author].name}/> <div><div className={styles.authorLabel}>Author:</div><div><a href={authorLookup[author].link} target="_blank">{authorLookup[author].name}</a>, {authorLookup[author].title}</div></div></div>
                     })}
                   <hr/>
                 </div>

src/theme/DocItem/styles.module.css

@@ -31,9 +31,22 @@
   font-weight: bold;
 }
 
+.authorByline {
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.authorLabel {
+  padding-top: 5px;
+  line-height: 0.5;
+  font-weight: bold;
+}
+
 .authorProfileImage {
-  border-radius: 5px;
-  border: 2px;
-  border-style: solid;
-  border-color: #ff0000;
+  display: inline-block;
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
 }