UI updates

_includes/postslist.njk

@@ -1,23 +1,44 @@
 <section class="postlist">
-{% if showPostListHeader %}<h2>{{ metadata.postlistHeaderText }}</h2>{% endif %}
-<div class="postlist-item-container">
-	{% for post in postslist | reverse %}
-	<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-		<a href="{{ post.url }}" class="postlist-link">
-			<div class="post-image-container">
-				<img class="post-image" {% if post.data.imageURL %} src="{{ post.data.imageURL }}" alt="{{ post.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
-			</div>
-		</a>
-		<div class="post-copy">
+	{% if showPostListHeader %}<h2>{{ metadata.postlistHeaderText }}</h2>{% endif %}
+	<div class="postlist-item-container">
+		{% for post in postslist | reverse %}
+		<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
 			<a href="{{ post.url }}" class="postlist-link">
-				<h3>
-					{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}
-				</h3>
+				<div class="post-image-container">
+					<img class="post-image" {% if post.data.imageURL %} src="{{ post.data.imageURL }}" alt="{{ post.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
+				</div>
 			</a>
-			<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
-			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ post.data.description | truncate(105) | safe }}{% endif %}
-		</div>
-	</article>
-	{% endfor %}
-</div>
+
+			<div class="post-copy">
+				<a href="{{ post.url }}" class="postlist-link">
+					<h3>
+						{% if post.data.title %}{{ post.data.title | safe }}{% else %}<code>{{ post.url }}</code>{% endif %}
+					</h3>
+				</a>
+
+				<div class="post-metadata">
+					<div class="post-metadata-copy">
+						<p>
+						{% if post.data.author %}
+							{% if post.data.author.url %}<a href="{{ post.data.author.url }}">{% endif %}{% if post.data.author.name %}By {{ post.data.author.name }}{% endif %}{% if post.data.author.url %}</a>&nbsp;•&nbsp;{% endif %}{% else %}<a href="{{ metadata.author.url }}">By {{ metadata.author.name }}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ post.date | htmlDateString }}">{{ post.date | niceDate }}</time>
+						</p>
+						<ul>
+							{%- for tag in post.data.tags | filterTagList %}
+							{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+							<li>
+								<a
+								href="{{ tagUrl }}"
+								class="post-tag">
+									{{ tag }}&nbsp;
+								</a>
+							</li>
+							{%- endfor %}
+						</ul>
+					</div>
+				</div>
+			</div>
+		</article>
+		<hr>
+		{% endfor %}
+	</div>
 </section>