Re-use meta/author media

templates/blog/card.html

@@ -12,15 +12,14 @@
             </div>
             <div class="card-content">
               <a href="{{ post.permalink }}"><h3 class="title is-4">{{ post.title }}</h3></a>
-              <p class="subtitle is-5">
-                {{ post.date }} ·
-                {% for author in post.authors %}
-                  {{ author }}
-                {% endfor %}
-              </p>
               <div class="content">
                 {{ post.summary | safe }}
               </div>
+              <div class="card-footer">
+                <div class="card-footer-item">
+                  {% include "blog/meta_media.html" -%}
+                </div>
+              </div>
             </div>
           </div>
 

templates/blog/meta_media.html

+{% set authors_data = load_data(path="authors.json") -%}
+<div class="media">
+  <div class="media-left">
+    <figure class="image is-48x48">
+      {% set image = resize_image(path="authors/" ~ post.authors.0 ~ ".jpg", width=48, height=48) -%}
+      <img class="is-rounded" src="{{ image.url }}" alt="Benutzerbild von {{ authors_data[post.authors.0].display_name }}" />
+    </figure>
+  </div>
+  <div class="media-content">
+    <p class="title is-4">{{ authors_data[post.authors.0].display_name }}</p>
+    <p class="subtitle is-7">
+      @{{ post.authors.0 }} ·
+      <span title="Veröffentlicht am"><i class="fa-solid fa-calendar-days"></i> {{ post.date }}</span> ·
+      <span title="Lesezeit"><i class="fa-solid fa-hourglass-start"></i> {{ post.reading_time }} min</span>
+    </p>
+  </div>
+</div>

templates/blog/post.html

 {% extends "page.html" %}
 
 {% block content %}
+  {% set post = page -%}
   <div class="columns">
     <div class="column is-three-quarters">
       <div class="content">
@@ -11,30 +12,17 @@
       <div class="card">
         <div class="card-image">
           <figure class="image is-4by3">
-            {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ page.extra.depiction.image, width=800, height=600) -%}
-            <img src="{{ image.url }}" alt="{{ page.extra.depiction.alt }}" />
-            {% if page.extra.depiction.credits %}
-              <figcaption>{{ page.extra.depiction.credits }}</figcaption>
+            {% set image = resize_image(path="@/" ~ post.colocated_path ~ "/" ~ post.extra.depiction.image, width=800, height=600) -%}
+            <img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" />
+            {% if post.extra.depiction.credits %}
+              <figcaption>{{ post.extra.depiction.credits }}</figcaption>
             {% endif %}
           </figure>
         </div>
         <div class="card-content">
-          <div class="media">
-            <div class="media-left">
-              <figure class="image is-48x48">
-                {% set image = resize_image(path="authors/" ~ page.authors.0 ~ ".jpg", width=48, height=48) -%}
-                <img class="is-rounded" src="{{ image.url }}" alt="Benutzerbild von {{ page.authors.0 }}" />
-              </figure>
-            </div>
-            <div class="media-content">
-              {% set authors_data = load_data(path="authors.json") -%}
-              <p class="title is-4">{{ authors_data[page.authors.0].display_name }}</p>
-              <p class="subtitle is-6">{{ page.authors.0 }}</p>
-            </div>
-          </div>
+          {% include "blog/meta_media.html" %}
         </div>
       </div>
-
     </div>
   </div>
 {% endblock %}