Desing improvements

Author: Seramis

_config/filters.js

@@ -73,6 +73,8 @@ export default function(eleventyConfig) {
 	);
 
 	eleventyConfig.addFilter("contentImgUrlShortcode", contentImgUrlShortcode);
+
+	eleventyConfig.addFilter("pathRelative", pathRelative);
 };
 
 // Taken from here => https://keepinguptodate.com/pages/2019/06/creating-blog-with-eleventy/
@@ -89,6 +91,10 @@ function extractExcerpt(article) {
 	return striptags(content.slice(0, content.indexOf("\n")));
 }
 
+function pathRelative(to) {
+	return path.relative(path.dirname(this.page.inputPath), to)
+}
+
 async function contentImgUrlShortcode(src, options = {}) {
 	const inputDir = path.dirname(this.page.inputPath);
 	const imagePath = path.resolve(inputDir, src);

_includes/layouts/post.njk

@@ -23,10 +23,6 @@ article {
 	text-align: right;
 }
 
-.post-header {
-	
-}
-
 h1.post-title {
 	margin-top: 1rem;
 	margin-bottom: 1rem;

_includes/partials/aside.njk

@@ -26,7 +26,7 @@
 {% endcss %}
 
 <div class="recents-container aside-content">
-    <span>Recents</span>
+    <span><b>Recents</b></span>
     <div>
         <nav>
             <ol>
@@ -43,7 +43,7 @@
 {% set outline = content | toc %}
 {% if outline %}
     <div class="toc-container aside-content">
-        <span>Table of Contents</span>
+        <span><b>Table of Contents</b></span>
         <div>
             {{ outline | safe }}
         </div>

_includes/partials/post-card.njk

@@ -4,7 +4,10 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    margin-bottom: 2rem;
+    padding: 8px;
+    margin-bottom: 1rem;
+    background-color: var(--bg-color-secondary);
+    box-shadow: 2px 2px 4px var(--shadow-color);
 }
 
 .post-card h2 {
@@ -14,7 +17,17 @@
 {% 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>
+    
+    <h2><a href="{{ post.url }}">
+        {%- if post.data.imagePath %}
+            <img src="{{ post.data.imagePath | pathRelative | safe }}" alt="{{ post.data.title }}" class="post-card-image" />
+        {% endif %}
+
+        {% 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>
+
     {% include "./post-meta.njk" %}
+
 </div>

eleventy.config.js

@@ -8,6 +8,7 @@ import markdownIt from "markdown-it";
 import markdownItAnchor from "markdown-it-anchor";
 import pluginTOC from "@uncenter/eleventy-plugin-toc";
 import faviconsPlugin from "eleventy-plugin-gen-favicons";
+import path from 'node:path';
 
 import pluginFilters from "./_config/filters.js";
 import pluginShortcodes from "./_config/shortcodes.js";
@@ -49,6 +50,13 @@ export default async function(eleventyConfig) {
 				return `/${year}${name}`;
 			}
 			return data.permalink; // Use the explicitly set permalink if available
+		},
+		imagePath: data => {
+			if(!data.image) {
+				return;
+			}
+
+			return path.resolve(path.dirname(data.page.inputPath), data.image);
 		}
 	});
 
@@ -103,7 +111,7 @@ export default async function(eleventyConfig) {
 		extensions: "html",
 
 		// Output formats for each image.
-		formats: ["avif", "webp", "auto"],
+		formats: ["png", "avif", "webp", "auto"],
 
 		// widths: ["auto"],
 

public/css/index.css

@@ -87,17 +87,22 @@ p:last-child {
 	margin-bottom: 0;
 }
 
-a[href] {
+a {
 	color: var(--link-color);
 	text-decoration: none;
 }
-a[href]:hover,
-a[href]:active {
+a:hover,
+a:active {
 	color: var(--link-color-hover);
 	text-decoration: underline;
 	transition: color 0.3s;
 }
 
+a.ha {
+	text-decoration: none;
+	margin-top: -2px;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	color: var(--heading-color);
 	transition: color 0.3s;