Add author avatar to post hero from Github (if available)

Author: kylegordy

_data/authors.yml

@@ -23,6 +23,7 @@ soorae:
 
 theo:
   name: Théophane Rupin
+  github: trupin
   about: |
     iOS Developer @Scribd. Creator of Weaver
 

_includes/featured-post-hero.html

@@ -1,5 +1,5 @@
  {% assign hero = page.hero %}
-<div class="feat-post">
+<div class="feat-post theme-white">
     <div class="container">
         <div class="feat-post__container">
 
@@ -15,19 +15,31 @@ <h2 class="hero__title">
                 </h2>
 
                 <ul class="hero__meta">
+
                     <!-- Post Author -->
                     {%- if post.author -%}
-                    <li class="hero__meta-item author">
-                        <strong>Author</strong><br>
-                        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-                            <span itemprop="name">
-                                {%- if site.data.authors[post.author] -%}
-                                    {{ site.data.authors[post.author].name}}
-                                {%- else -%}
-                                    {{ post.author }}
-                                {%- endif -%}
+                    <li class="hero__meta-item author media">
+
+                        <!-- Author Avatar -->
+                        {%- if site.data.authors[post.author].github -%}
+                            <img class="hero__meta-avatar"
+                                srcset="https://github.com/{{ site.data.authors[post.author].github}}.png?size=48,
+                                        https://github.com/{{ site.data.authors[post.author].github}}.png?size=96 2x"
+                                src="https://github.com/{{ site.data.authors[post.author].github}}.png?size=48" role="presentation" alt="">
+                        {%- endif -%}
+
+                        <div class="media-body">
+                            <strong>Author</strong><br>
+                            <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+                                <span itemprop="name">
+                                    {%- if site.data.authors[post.author] -%}
+                                        {{ site.data.authors[post.author].name}}
+                                    {%- else -%}
+                                        {{ post.author }}
+                                    {%- endif -%}
+                                </span>
                             </span>
-                        </span>
+                        </div>
                     </li>
                     {%- endif -%}
 

_includes/post-hero.html

@@ -15,17 +15,28 @@ <h1 class="hero__title" itemprop="name headline">{{ page.title | escape }}</h1>
 
                 <!-- Post Author -->
                 {%- if page.author -%}
-                <li class="hero__meta-item author">
-                    <strong>Author</strong><br>
-                    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-                        <span itemprop="name">
-                            {%- if site.data.authors[page.author] -%}
-                                {{ site.data.authors[page.author].name}}
-                            {%- else -%}
-                                {{ page.author }}
-                            {%- endif -%}
+                <li class="hero__meta-item author media">
+
+                    <!-- Author Avatar -->
+                    {%- if site.data.authors[page.author].github -%}
+                        <img class="hero__meta-avatar"
+                            srcset="https://github.com/{{ site.data.authors[page.author].github}}.png?size=48,
+                                    https://github.com/{{ site.data.authors[page.author].github}}.png?size=96 2x"
+                            src="https://github.com/{{ site.data.authors[page.author].github}}.png?size=48" role="presentation" alt="">
+                    {%- endif -%}
+
+                    <div class="media-body">
+                        <strong>Author</strong><br>
+                        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+                            <span itemprop="name">
+                                {%- if site.data.authors[page.author] -%}
+                                    {{ site.data.authors[page.author].name}}
+                                {%- else -%}
+                                    {{ page.author }}
+                                {%- endif -%}
+                            </span>
                         </span>
-                    </span>
+                    </div>
                 </li>
                 {%- endif -%}
 

assets/_sass/component/_hero.scss

@@ -86,6 +86,7 @@
     grid-template-areas:
         "author author author"
         "published category .";
+    align-items: center;
     margin: .5em 0 0 0;
     font-size: rem-calc(14px);
     @extend .list--plain;
@@ -119,3 +120,14 @@
 .hero__meta-item.author { grid-area: author }
 .hero__meta-item.published { grid-area: published }
 .hero__meta-item.category { grid-area: category }
+
+.hero__meta-avatar {
+    border-radius: 100%;
+    max-width: 35px;
+    margin-right: rem-calc(10px);
+
+    @media (min-width: $bp-sm) {
+        max-width: 48px;
+        margin-right: rem-calc(15px);
+    }
+}