godot-website/_layouts/article.html

---
layout: default
---

{% include header.html %}

<link rel="stylesheet" href="/assets/css/blog.css">

<div class="add-nav-gap"></div>

<link rel="stylesheet" href="/assets/css/highlight.obsidian.min.css">
<div class="container">
	<article class="padded">
		<div class="content article-container">
			<figure class="article-cover">
				<img src="{{ page.image }}" title="{{ page.image_caption_title }}"
				alt="{{ page.image_caption_title }} {{ page.image_caption_description }}" class="rounded-lg"
				style="width: 100%; height: auto; background-color: transparent;" />

				{% if page.image_caption_title or page.image_caption_description %}
				<figcaption>
					<strong>{{ page.image_caption_title }}</strong>
					<span style="margin-left: 0.75rem; font-size: 90%">{{ page.image_caption_description }}</span>
				</figcaption>
				{% endif %}
			</figure>

			<div class="article-info">
				<h1>
					{{ page.title }}
				</h1>
				<div class="article-metadata">
					<div class="article-author">
						<span>By: </span>
						{% assign post_author = site.data.authors | find: "name", page.author %}
						{% if post_author %}
							<img class="avatar" width="25" height="25" src="{{ post_author.image }}" alt="{{ page.author }}" loading="lazy">
						{% else %}
							<img class="avatar" width="25" height="25" src="/assets/images/authors/default_avatar.svg" alt="{{ page.author }}" loading="lazy">
						{% endif %}
						<span class="by">{{ page.author }}</span>
					</div>
					<span class="date" data-post-date="{{ page.date }}"> {{ page.date | date: "%e %B %Y" }}</span>
				</div>

				<div class="tags">
					{% for category in page.categories %}
					<a href="/blog/{{ category }}">
						<div class="tag active">{{ site.data.categories[category][0].name }}</div>
					</a>
					{% endfor %}
				</div>
			</div>

			{% include articles/outdated_notice.html %}

			<div class="article-body">
				{{ content }}
			</div>
		</div>
	</article>
	<div class="blog-navigation">
		{% if page.previous.url %}
		<div class="previous">
			<span>Previous</span>
			<a rel="prev" href="{{page.previous.url}}">{{page.previous.title}}</a>
		</div>
		{% endif %}
		{% if page.next.url %}
		<div class="next">
			<span>Next</span>
			<a rel="next" href="{{page.next.url}}">{{page.next.title}}</a>
		</div>
		{% endif %}
	</div>
</div>

<link rel="stylesheet" href="/assets/css/anchor-link.css?1">
<link rel="stylesheet" href="/assets/css/article-cards.css?3">
<script src="/assets/js/anchor-link.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', () => {
		// Add icons to easily copy section links.
		window.applyAnchorLinks('.article-body');

		// Add lightbox elements in blog articles for Tobii.
		document.querySelectorAll('.article-body img').forEach((articleImg) => {
			if (articleImg.classList.contains('lightbox-ignore')) {
				return;
			}

			const lightbox = document.createElement('a');
			lightbox.href = articleImg.src;
			lightbox.classList.add('lightbox');
			lightbox.dataset.group = 'article';
			articleImg.parentNode.appendChild(lightbox);
			lightbox.appendChild(articleImg);
		});
	});
</script>

{% include footer.html %}