<link rel="stylesheet" href="/static/styles/themes/default/default-single-post-preview.css" />

{{#each posts}}
<div id="post-card-{{@index}}">
	<div class="meta">
		<!--Display the featured image if any, otherwise fallback to a default one-->

		<div class="photo" style="background-image: url({{frontmatter.featuredImage}})"></div>

		<ul class="details">
			<li class="date"><span>{{frontmatter.publish_date}}</span></li>

			<li class="tags">
				<ul>
					{{#each1 frontmatter.tags}}
					<li>
						<a href="/tags/{{this}}"><span>{{this}}</span></a>
					</li>
					{{/each1}}
				</ul>
			</li>
		</ul>
	</div>

	<div class="description">
		<h1>
			<a href="/posts/{{fileBaseName}}" rel="bookmark">{{frontmatter.title}}</a>
		</h1>
		<h2>{{frontmatter.description}}</h2>
		{{postExcerpt}}
		<p class="read-more">
			<a
				href="/posts/{{fileBaseName}}"
				aria-label="Read more about {{frontmatter.title}}"
				tabindex="0"
				role="button"
				class="btn info"
			>
				Read the post
				<span class="arrow arrow-right"></span>
			</a>
		</p>
	</div>
</div>

<hr />
{{/each}}

<!--Start Pagination-->
{{#if paginated}}
<!--Start include Pagination-->
{{include("themes/default/components/pagination.html")}}
<!--End include Pagination-->
<p class="archive-link">
	All the posts can be found in the
	<a href="/posts">archive</a>
	📦
</p>
{{/if}}
