Add avatars to blogs! (#33889)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Franck Nijhof <frenck@frenck.nl>

sass/homeassistant/_overrides.scss

@@ -1079,6 +1079,18 @@ article.listing {
 }
 
 
+.author-avatar {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border-radius: 24px !important;
+  vertical-align: middle;
+  margin: 0 8px 0 0;
+  border: 2px solid rgba(0,0,0,.1) !important;
+  box-shadow: none !important;
+}
+
+
 lite-youtube {
   position: relative;
   display: block;

sass/homeassistant/base/_post.scss

@@ -101,7 +101,8 @@ article {
     }
     + hr {
       border: none;
-      border-bottom: 1px solid $primary-color;
+      border-bottom: 2px solid $grayLighter;
+      margin: 2em 0 2.5em;
     }
   }
 

source/_data/people.yml

@@ -0,0 +1,79 @@
+Paulus Schoutsen:
+  name: Paulus Schoutsen
+  github: balloob
+
+Pascal Vizeli:
+  name: Pascal Vizeli
+  github: pvizeli
+
+Franck Nijhof:
+  name: Franck Nijhof
+  github: frenck
+
+Bram Kragten:
+  name: Bram Kragten
+  github: bramkragten
+
+Madelena Mak:
+  name: Madelena Mak
+  github: madelena
+
+Guy Sie:
+  name: Guy Sie
+  github: GuySie
+
+Gordon Cameron:
+  name: Gordon Cameron
+  github: googanhiem
+
+Uwe Bernitt:
+  name: Uwe Bernitt
+  github: b-uwe
+
+Jean-Loïc Pouffier:
+  name: Jean-Loïc Pouffier
+  github: jlpouffier
+
+Stefan Agner:
+  name: Stefan Agner
+  github: agners
+
+Bruno Pantaleão:
+  name: Bruno Pantaleão
+  github: bgoncal
+
+Matthias de Baat:
+  name: Matthias de Baat
+  github: matthiasdebaat
+
+Marcel van der Veldt:
+  name: Marcel van der Veldt
+  github: marcelveldt
+
+Mike Hansen:
+  name: Mike Hansen
+  github: synesthesiam
+
+Paul Bottein:
+  name: Paul Bottein
+  github: piitaya
+
+Zack Barett:
+  name: Zack Barett
+  github: zsarnett
+
+Joris Pelgröm:
+  name: Joris Pelgröm
+  github: jpelgrom
+
+Daniel Shokouhi:
+  name: Daniel Shokouhi
+  github: dshokouhi
+
+Zac West:
+  name: Zac West
+  github: zacwest
+
+Klaas Schoute:
+  name: Klaas Schoute
+  github: klaasnicolaas

source/_includes/blog/post/article.html

@@ -9,8 +9,8 @@
 
   {% unless post.meta == false %}
   <div class="meta clearfix">
-    {% include blog/post/date.html %}{{ time }}
     {% include post/author.html %}
+    {% include blog/post/date.html %}{{ time }}
     {% include blog/post/tags.html %}
     {% if page.comments != false and post.comments != false %}
       <a class='comments'

source/_includes/post/author.html

@@ -5,4 +5,13 @@
 {% else %}
   {% assign author = site.author %}
 {% endif %}
-{% if author %}<span class="byline author vcard">{% icon "mdi:person" %} {{ author }}</span>{% endif %}
+{% if author %}
+  {% assign person = site.data.people[author] %}
+  {% if person %}
+    <span class="byline author vcard"
+      <a href="https://github.com/{{ person.github }}" target="_blank"><img class="author-avatar" src="https://avatars.githubusercontent.com/{{ person.github }}?size=64" alt="{{ person.name }}"/> {{ person.name }}</a>
+    </span>
+  {% else %}
+    <span class="byline author vcard">{% icon "mdi:person" %} {{ author }}</span>
+  {% endif %}
+{% endif %}