blog post default thumbnail

axum_server/templates/components/blog_post_default_thumbnail.html

@@ -0,0 +1,3 @@
+<div class="rounded-2xl w-[180px] h-[240px] bg-blue-100 border-4 border-blue-500 flex justify-center items-center">
+  <span class="text-blue-500 text-8xl -translate-y-1.5">{{post.metadata.title|fmt("{:.1}")|lower}}</span>
+</div> 

axum_server/templates/components/blog_post_preview.html

@@ -1,15 +1,17 @@
 <article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8">
-	<aside class="row-span-3">
+	<aside class="row-span-3 self-center">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
-		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("".to_string())|safe }}
+		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
 		{% when None %}
-		<div> TODO default obrazok </div>
+		<div> 
+			{% include "components/blog_post_default_thumbnail.html" %}
+		</div>
 		{% endmatch %}
 	</aside>
 	<header>
 		<h3 class="text-lg font-bold mb-1 md:text-3xl">
-		  <a rel="prefetch" href="/blog/{{post.slug}}">{{post.metadata.title}}</a>
+		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
 		</h3>
 	</header>
 	<section class="text-base leading-5 text-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>

axum_server/templates/components/terminal.svg

@@ -0,0 +1,32 @@
+<svg
+  width="200"
+  height="150"
+  viewBox="0 0 200 150"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  stroke="none"
+  stroke-width="0"
+>
+  <!-- Background of the terminal window -->
+  <rect x="10" y="10" width="180" height="130" rx="8" ry="8" fill="#F5F5F5" />
+
+  <!-- Close, Minimize, Maximize buttons (moved to the right side) -->
+  <circle cx="155" cy="25" r="5" fill="#FF5F56" />
+  <circle cx="175" cy="25" r="5" fill="#FFBD2E" />
+  <circle cx="195" cy="25" r="5" fill="#27C93F" />
+
+  <!-- Terminal Text (Example commands, updated to dark color for light theme) -->
+  <text x="20" y="55" font-family="monospace" font-size="12" fill="#333333">
+    $ ls -l
+  </text>
+  <text x="20" y="75" font-family="monospace" font-size="12" fill="#333333">
+    Desktop Documents Downloads
+  </text>
+  <text x="20" y="95" font-family="monospace" font-size="12" fill="#333333">
+    Music Pictures Videos
+  </text>
+  <text x="20" y="115" font-family="monospace" font-size="12" fill="#333333">
+    $
+  </text>
+</svg>
+