add authors to tutorials

Co-authored-by: Kristján Oddsson <[email protected]>

Author: keithamus

blog/index.md

@@ -13,7 +13,7 @@ title: Blog
     <p class="excerpt">{{ post.data.excerpt }}</p>
     <div class="author-block">
       {%- for author in post.data.authors %}
-      <a href="/blog/by-author/{{ author | slugify }}" class="avatar">
+      <a href="/tutorials/by-author/{{ author | slugify }}" class="avatar">
           <img src="/images/{{ author | slugify }}-avatar.jpg"
               alt="{{ author }} Avatar"
               loading="lazy"

css/tutorials.css

@@ -54,4 +54,26 @@ main {
   & picture {
     margin-block-end: var(--size-4);
   }
+
+  .author-block {
+    clear: both;
+    margin-block: var(--size-3) var(--size-4);
+
+    & .avatar {
+      float: inline-start;
+      margin-inline-end: var(--size-3);
+
+      & + .avatar {
+        margin-inline-start: calc(var(--size-7) * -1);
+      }
+
+      & img {
+        border-radius: var(--radius-round);
+        border: var(--border-size-1) solid var(--surface-2);
+        background: var(--surface-1);
+        box-shadow: var(--shadow-3);
+      }
+    }
+  }
+
 }

tutorials/index.md

@@ -18,6 +18,23 @@ maintainable components, and best practices for working with Web Components.
     </a>
     <h3><a href="{{ page.url }}">{{ g }}</a></h3>
     <p>{{ page.data.excerpt }}</p>
+    <div class="author-block">
+      {%- for author in page.data.authors %}
+      <a href="/blog/by-author/{{ author | slugify }}" class="avatar">
+          <img src="/images/{{ author | slugify }}-avatar.jpg"
+              alt="{{ author }} Avatar"
+              loading="lazy"
+              decoding="async"
+              width="50"
+              height="50">
+      </a>
+      {%- endfor %}
+      {%- for author in page.data.authors %}
+      <a href="/tutorials/by-author/{{ author | slugify }}">
+        {{ author }}{% unless forloop.last %}, {% endunless %}
+      </a>
+      {%- endfor %}<br>
+    </div>
   </li>
 {%- else %}
   <li>Collection empty</li>

tutorials/mastodon-toot-embed/mastodon-toot-embed.json

@@ -1,4 +1,5 @@
 {
   "group": "Mastodon Toot Embed",
-  "imageslug": "tutorials-mastodon-toot-embed"
+  "imageslug": "tutorials-mastodon-toot-embed",
+  "authors": ["Kristj\u00e1n Oddsson"]
 }