{% macro blog_posts(count) %}
{% set articles = get_section(path="blog/_index.md") %}
{% set latest = articles.pages | slice(end = count) %}
{% for article in latest %}
<div class="block">
	<a class="banner" href="{{ article.permalink | safe }}"><img loading="lazy" src="{{ article.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Article cover image" /></a>
	<h2 class="headline"><a href="{{ article.permalink | safe }}">{{ article.title }}</a></h2>
	<div class="summary">
	<p>{{ article.summary | striptags | safe }}</p>
	</div>
	<a href="{{ article.permalink | safe }}" class="link arrow">Keep reading</a>
</div>
{% endfor %}
{% endmacro blog_posts %}

{% macro text_balancer() %}
<style>
.balance-text {
	visibility: hidden;
}

@media (scripting: none) {
	.balance-text {
		visibility: visible !important;
	}
}

@supports (text-wrap: balance) {
	.balance-text,
	.balanced-text {
		text-align: left;
		text-wrap: balance;
		visibility: visible;
	}
}
</style>
<script>
{{ load_data(path="static/text-balancer.js", format="plain") | safe }}
</script>
{% endmacro text_balancer %}

{% macro hierarchical_message_system_tree() %}
{%- set content = load_data(path = "../generated/hierarchical_message_system_tree.html", format = "plain", required = false) -%}
{%- set fallback = "<pre>THIS CONTENT IS FILLED IN WHEN CI BUILDS THE WEBSITE.

TO TEST IT LOCALLY, FROM THE ROOT OF THE PROJECT, RUN:

cd tools/editor-message-tree
cargo run
cd ../../website
npm run generate-editor-structure</pre>" -%}
{{ content | default(value = fallback) | safe }}
{% endmacro hierarchical_message_system_tree %}