joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better

Browse source
This commit is contained in:
Joshua Seigler 2025-06-08 02:15:15 -04:00
parent a4306bc57d
commit 4d435a23c4
15 changed files with 248 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

86
site/_includes/-header.njk
View file

@ -1,51 +1,55 @@
<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-settings">
<div class="nav-toggles">
<label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label>
<label class="nav-toggle-button" title="Automatic">🔄<input type="radio" name="theme" value="auto"/></label>
<label class="nav-toggle-button" title="Dark mode">🌒<input type="radio" name="theme" value="dark"/></label>
</div>
<div class="nav-toggles">
<label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
<label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
<script type="text/javascript">
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const defaultPrefs = {
language: 'english',
theme: 'auto'
};
Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
const currentPref = localStorage.getItem(key) ?? defaultPref;
applyPreference(key, currentPref, false)
document.querySelectorAll(`input[name=${key}]`).forEach(input => {
input.addEventListener('change', (e) => {
applyPreference(key, e.currentTarget.value, true);
<div class="nav-row">
<a class="nav-home" href="{{ "/" | url }}">{{ site.title }}</a>
<div class="nav-settings">
<div class="nav-toggles">
<label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label>
<label class="nav-toggle-button" title="Automatic">🔄<input type="radio" name="theme" value="auto"/></label>
<label class="nav-toggle-button" title="Dark mode">🌒<input type="radio" name="theme" value="dark"/></label>
</div>
<div class="nav-toggles">
<label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
<label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
<script type="text/javascript">
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const defaultPrefs = {
language: 'english',
theme: 'auto'
};
Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
const currentPref = localStorage.getItem(key) ?? defaultPref;
applyPreference(key, currentPref, false)
document.querySelectorAll(`input[name=${key}]`).forEach(input => {
input.addEventListener('change', (e) => {
applyPreference(key, e.currentTarget.value, true);
})
})
})
});
function applyPreference(key, value, shouldSave) {
document.body.setAttribute(`data-${key}`, value);
document.querySelectorAll(`input[name=${key}]`).forEach(input => {
if (input.value === value) {
input.checked = true;
});
function applyPreference(key, value, shouldSave) {
document.body.setAttribute(`data-${key}`, value);
document.querySelectorAll(`input[name=${key}]`).forEach(input => {
if (input.value === value) {
input.checked = true;
}
})
if (shouldSave) {
localStorage.setItem(key, value);
}
})
if (shouldSave) {
localStorage.setItem(key, value);
}
}
</script>
</script>
</div>
</div>
</div>
<div class="nav-categories">
<a class="{{ 'nav-active' if '/posts' in page.url }}" href="{{ "/posts/" | url }}">/posts</a>
<a class="{{ 'nav-active' if '/about' in page.url }}" href="{{ "/about/" | url }}">/about</a>
<a class="{{ 'nav-active' if '/now' in page.url }}" href="{{ "/now/" | url }}">/now</a>
<a class="{{ 'nav-active' if '/uses' in page.url }}" href="{{ "/uses/" | url }}">/uses</a>
<a class="{{ 'nav-active' if '/recipes' in page.url }}" href="{{ "/recipes/" | url }}">/recipes</a>
<a class="{{ 'nav-active' if '/music' in page.url }}" href="{{ "/music/" | url }}">/music</a>
<a class="{{ 'nav-active' if '/books' in page.url }}" href="{{ "/books/" | url }}">/books</a>
</div>
</nav>
<h1>{{ tag | capitalize if tag else title }}</h1>
<div class="header-meta">

14
site/_includes/about.njk Normal file
View file

@ -0,0 +1,14 @@
---
layout: base.njk
tags: timeline
permalink: about/index.html
title: About
---
{{ content | safe }}
{% for item in collections.timeline | reverse %}
{% if item.data.title !== "About" and not item.data.draft %}
<h3 id="{{item.data.time}}"><a class="header-anchor" href="#{{item.data.time}}" aria-hidden="true"></a>{{ item.data.title | markdown | safe }} <aside>{{item.data.time}}</aside></h3>
<p>{{ item.data.description | markdown | safe }}</p>
{% endif %}
{% endfor %}

21
site/_includes/home.njk
View file

@ -7,13 +7,20 @@ layout: "base.njk"
<h2>{{name | capitalize }}</h2>
<ul class="collection">
{%- for item in collection | reverse -%}
<li>
<a href="{{item.url}}">{{item.data.title}}</a>
{%- if item.data.date -%}
<aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
{%- endif -%}
<p>{{item.data.description | safe}}</p>
</li>
{%- if (loop.index <= 5) -%}
<li>
<a href="{{item.url}}">{{item.data.title}}</a>
{%- if item.data.date -%}
<aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
{%- endif -%}
<p>{{item.data.description | safe}}</p>
</li>
{%- endif -%}
{%- if (loop.index == 6) -%}
<li>
<a href="/{{name}}/">More {{name}}&hellip;</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}