joshua.seigler.net/site/_includes/-header.njk
2025-04-30 15:39:20 -04:00

39 lines
1.5 KiB
Text

<header>
<nav>
<div class="nav-categories">
<a href="{{ "/" | url }}">{{ site.title }}</a>
<a href="{{ "/posts" | url }}">/posts</a>
<a href="{{ "/timeline" | url }}">/timeline</a>
<a href="{{ "/recipes" | url }}">/recipes</a>
<a href="{{ "/music" | url }}">/music</a>
<a href="{{ "/books" | url }}">/books</a>
</div>
<div class="nav-languages">
<label class="nav-language-button" data-font="english">English<input type="radio" name="language" value="english"/></label>
<label class="nav-language-button" data-font="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
<script type="text/javascript">
const initialLanguage = localStorage.getItem("language") ?? 'english'
document.body.setAttribute('data-font', initialLanguage);
document.querySelectorAll("input[name=language]").forEach(input => {
if (input.value === initialLanguage) {
input.checked = true;
}
input.addEventListener('change', function () {
const newValue = this.value;
localStorage.setItem("language", newValue);
document.body.setAttribute('data-font', newValue);
})
})
</script>
</div>
</nav>
<h1>{{ tag | capitalize if tag else title }}</h1>
<div class="header-meta">
{%-if author -%}
<author>{{ author }}</author>
{%- endif -%}
{%- if date -%}
<date>{{ date | formatDate("MMMM D, YYYY") }}</date>
{%- endif -%}
</div>
</header>