TinyLifeWeb/web/_includes/devlog_category.html

45 lines
2 KiB
HTML
Raw Normal View History

2024-05-21 15:22:31 +02:00
<div class="devlogs">
{% assign slug = include.tag | slugify %}
<h2 class="devlog-category" id="{{ slug }}">{{ include.emoji }} {{ include.tag }}</h2>
2024-05-21 15:22:31 +02:00
<p>{{ include.description }}</p>
{% assign total = 0 %}
{% for post in site.posts %}
{%- if post.tags contains include.tag -%}
{%- assign total = total | plus: 1 -%}
<div class="devlog devlog-{{ slug }}" {% if total > 6 %}hidden{% endif %}>
{%- if post.image -%}
{%- assign start = post.image | slice: 0, 4 -%}
{%- if start == "http" -%}
{%- assign url = post.image -%}
{%- else -%}
{%- assign url = post.url | append: post.image -%}
{%- endif -%}
<img src="{{ url }}" class="devlog-image" width="100%" height="120px" alt="Cover image for post {{ post.title }}">
{%- endif -%}
2024-05-21 15:22:31 +02:00
<h4 class="devlog-title">{{ post.title }}</h4>
2024-05-21 15:56:58 +02:00
<div class="text-muted">{{ post.date | date_to_string }}</div>
2024-05-21 15:22:31 +02:00
<div>
2024-05-21 18:15:21 +02:00
<a href="{{ post.url }}">Read this post</a>
{%- if post.itch -%}
2024-05-21 18:15:21 +02:00
&ndash; <a href="{{ post.itch }}">Read on itch</a>
{%- endif -%}
{%- if post.steam -%}
2024-05-21 18:15:21 +02:00
&ndash; <a href="{{ post.steam }}">Read on Steam</a>
{%- endif -%}
2024-05-21 15:56:58 +02:00
</div>
2024-05-21 15:22:31 +02:00
</div>
{%- endif -%}
{% endfor %}
{% if total > 6 %}
2024-05-21 21:59:47 +02:00
<button type="button" class="btn btn-link devlog-more" id="devlog-more-{{ slug }}"><strong>Show more {{ include.tag }} posts</strong></button>
<script>
$("#devlog-more-{{ slug }}").on("click", function () {
$(".devlog-{{ slug }}").removeAttr("hidden");
$(this).attr("hidden", true);
});
</script>
{% endif %}
2024-05-21 15:22:31 +02:00
</div>