65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block og_meta %}
|
|
<meta property="og:title" content="{{title}}" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://michalvanko.dev/{{segment}}/{{slug}}" />
|
|
{% match thumbnail %}
|
|
{% when Some with (img) %}
|
|
{% let src = crate::picture_generator::image_src_generator::generate_image_with_src(img, 1200, 630, "_og").unwrap_or("thumbnail not found".to_string())|safe %}
|
|
<meta property="og:image" content="https://michalvanko.dev{{src}}" />
|
|
{% when None %}
|
|
<meta property="og:image" content="https://michalvanko.dev/images/m-logo.svg" />
|
|
{% endmatch %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<article class="mb-6">
|
|
<header class="px-4 max-w-read mx-auto">
|
|
<h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold" style="view-transition-name: post_title_{{slug}};">{{title}}</h1>
|
|
<aside class="flex justify-between flex-row">
|
|
{% include "post_tag_list.html" %}
|
|
<section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
|
|
<span>Published on</span>
|
|
<time datetime="{date}" style="view-transition-name: post_date_{{slug}}"> {{date|pretty_date}} </time>
|
|
</section>
|
|
</aside>
|
|
</header>
|
|
|
|
<section class="article-body">
|
|
{{body|parse_markdown|safe}}
|
|
</section>
|
|
</article>
|
|
|
|
<!-- TODO: Next recommendations for reading -->
|
|
<!-- TODO: Back to all posts -->
|
|
|
|
<footer class="max-w-maxindex mx-auto">
|
|
|
|
{% if recommended_posts.len() > 0 %}
|
|
<section id="recommended-articles">
|
|
<hr class="border-slate-300 m-5 md:my-8">
|
|
|
|
<h2 class="m-5 mt-8 text-2xl md:text-2xl lg:text-4xl lg:mt-10 text-blue-900 lg:mb-10 font-bold">Further reading</h2>
|
|
<ul class="mx-5 xl:flex xl:justify-start xl:gap-10">
|
|
{% for post in recommended_posts %}
|
|
<li class="flex-1">
|
|
{% include "components/blog_post_preview.html" %}
|
|
<hr class="border-slate-300 my-5 md:my-8 xl:hidden">
|
|
</li>
|
|
{% if !loop.last %}
|
|
<div class="h-auto w-0 border-l border-slate-300 hidden xl:block"></div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<section class="text-center my-3 md:text-lg">
|
|
<a href="/blog">see all blog posts</a>
|
|
</section>
|
|
</footer>
|
|
{% endblock %}
|
|
<!-- xl:border-l xl:border-slate-300 xl:first:border-l-0 xl: -->
|