Post metadata separated into partial. FontAwesome optimized.

Author: Seramis

_includes/layouts/base.njk

@@ -5,7 +5,7 @@
 
 		{%- css %}{% include "public/css/index.css" %}{% endcss %}
 
-		{%- css %}{% include "node_modules/@fortawesome/fontawesome-free/css/all.min.css" %}{% endcss %}
+		{%- css %}{% include "node_modules/@fortawesome/fontawesome-free/css/svg-with-js.min.css" %}{% endcss %}
 		{%- js %}{% include "node_modules/@fortawesome/fontawesome-free/js/all.min.js" %}{% endjs %}
 
 		{%- js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}

_includes/layouts/post.njk

@@ -17,21 +17,6 @@ layout: layouts/base.njk
 .links-nextprev-next {
 	text-align: right;
 }
-.post-metadata {
-	display: inline-flex;
-	flex-wrap: wrap;
-	gap: 2em;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.tag {
-	border: 1px solid var(--border-color);
-	border-radius: 4px;
-	background-color: var(--bg-color-secondary);
-	padding: 0 0.25rem;
-	transition: background-color 0.3s, border-color 0.3s;
-}
 
 .post-header {
 	margin-top: 1.5rem;
@@ -41,23 +26,7 @@ layout: layouts/base.njk
 <article>
 	<h1>{{ title }}</h1>
 
-	<ul class="post-metadata">
-		<div>
-			<i class="fa-regular fa-calendar"></i>
-			<time datetime="{{ page.date | isoDate }}">{{ page.date | readableDate }}</time>
-		</div>
-		<div data-words="{{ content | striptags | wordcount | formatWords }} words">
-			<i class="fa-regular fa-clock"></i>
-			{{ content | striptags | wordcount | readingTime }}
-		</div>
-		<div>
-			<i class="fa-solid fa-tags"></i>
-			{%- for tag in tags | filterTagList %}
-				{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-				<span class="tag"><a href="{{ tagUrl }}">{{ tag }}</a></span>
-			{%- endfor %}
-		</div>
-	</ul>
+	{% include "./../partials/post-meta.njk" %}
 
 	{%- if image %}
 		<img src="{{ image }}" alt="" class="post-header" />

_includes/partials/header.njk

@@ -32,6 +32,7 @@ header:after {
 .header-right a {
     color: var(--text-color) !important;
     margin-left: 0.5rem;
+    transition: background-color 0.3s, color 0.3s;
 }
 .header-right a:hover {
     color: var(--link-color-hover) !important;
@@ -68,8 +69,7 @@ header:after {
 	text-decoration: none;
 }
 .nav a[href][aria-current="page"] {
-	text-decoration: underline;
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .toggle-dark {

_includes/partials/pagination.njk

@@ -31,7 +31,6 @@
     color: var(--link-color-hover);
     text-decoration: none;
     box-shadow: 0 2px 4px 2px var(--shadow-color);
-    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
 }
 
 .pagination li.active a {

_includes/partials/post-card.njk

@@ -1,20 +1,20 @@
 {% css %}
-.post-card-meta
+.post-card
 {
-    margin-top: 0.5rem;
-    gap: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.post-card h2 {
+    margin-top: 0;
+    margin-bottom: 0;
 }
 {% endcss %}
 
 <div class="post-card">
     <h2><a href="{{ post.url }}">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a></h2>
     <div class="excerpt"><em>{{ post | excerpt | truncate(500) }}</em></div>
-    <div class="flex post-card-meta">
-        <div>
-            <i class="fa-regular fa-calendar"></i> <time datetime="{{ post.date | isoDate }}">{{ post.date | readableDate }}</time>
-        </div>
-        <div data-words="{{ post.templateContent | striptags | wordcount | formatWords }} words">
-            <i class="fa-regular fa-clock"></i> {{ post.templateContent | striptags | wordcount | readingTime }}
-        </div>
-    </div>
+    {% include "./post-meta.njk" %}
 </div>

_includes/partials/post-meta.njk

@@ -0,0 +1,44 @@
+{% css %}
+.post-metadata {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 2em;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.post-metadata .tag {
+	border: 1px solid var(--border-color);
+	border-radius: 4px;
+	background-color: var(--bg-color-secondary);
+	padding: 0 0.25rem;
+	transition: background-color 0.3s, border-color 0.3s;
+}
+
+.post-metadata svg {
+    margin-right: 0.25rem;
+}
+{% endcss %}
+
+{% set post = collections.posts | getCollectionItem %}
+
+<div class="post-metadata">
+    <div>
+        <i class="fa-regular fa-calendar"></i>
+        <time datetime="{{ post.date | isoDate }}">{{ post.date | readableDate }}</time>
+    </div>
+    <div data-words="{{ post.templateContent | striptags | wordcount | formatWords }} words">
+        <i class="fa-regular fa-clock"></i>
+        {{ post.templateContent | striptags | wordcount | readingTime }}
+    </div>
+    <div>
+        {% set tags = post.data.tags | filterTagList %}
+        {% if tags.length > 0 %}
+            <i class="fa-solid fa-tags"></i>
+            {%- for tag in tags %}
+                {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+                <span class="tag"><a href="{{ tagUrl }}">{{ tag }}</a></span>
+            {%- endfor %}
+        {% endif %}
+    </div>
+</div>

_includes/partials/socials.njk

@@ -10,6 +10,8 @@
     gap: 0.5rem;
     flex-direction: row-reverse;
     align-items: center;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
 }
 .social a {
     margin: 0.25rem;
@@ -18,6 +20,7 @@
     color: var(--svg-color) !important;
     font-size: 1.5rem;
     cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
 }
 .social a:hover {
     color: var(--link-color-hover) !important;

eleventy.config.js

@@ -27,7 +27,7 @@ export default async function(eleventyConfig) {
 	// For example, `./public/css/` ends up in `_site/css/`
 	eleventyConfig
 		.addPassthroughCopy({
-			"./public": "/"
+			"./public": "/",
 		})
 		.addPassthroughCopy("./content/feed/pretty-atom-feed.xsl");
 
@@ -124,7 +124,7 @@ export default async function(eleventyConfig) {
 	// to emulate the file copy on the dev server. Learn more:
 	// https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve
 
-	eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+	// eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
 };
 
 export const config = {