blog post default thumbnail

This commit is contained in:
2024-09-13 13:10:33 +02:00
parent 380b7c1b2f
commit e2e0464c78
5 changed files with 118 additions and 5 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

After

Width:  |  Height:  |  Size: 1012 B

View File

@ -1,6 +1,6 @@
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
<ul class="mx-5 md:grid md:grid-cols-2 md:justify-stretch md:items-stretch xl:grid-cols-3">
<ul class="mx-5 md:grid md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
{% for project in featured_projects %}
<li class="my-2">
{% include "components/project_preview_card.html" %}