<!doctype html>
<html lang="{{metadata.site.language}}">
	<head>
		<meta charset="UTF-8" >

		<title>{{ title | safe }} | {{ metadata.site.name }}</title>
		<link 
			rel="icon" 
			type="image/png" 
			href="/assets/favicon/light/favicon.ico"  
			media="(prefers-color-scheme: light)" 
		>
		<link 
			rel="icon" 
			type="image/png" 
			href="/assets/favicon/dark/favicon.ico"  
			media="(prefers-color-scheme: dark)" 
		>
		<link rel="stylesheet" type="text/css" href="/assets/css/fontawesome.min.css">
		{% if includePrism %}
		<link rel="stylesheet" type="text/css" href="/assets/css/prism.min.css">
		{% endif %}

		{% if not isCSSNakedDay %}
		<link rel="stylesheet" type="text/css" href="/assets/css/styles.css">
		{% endif %}
		<link rel="alternate" type="application/rss+xml" title="LewisDale.Dev" href="{{ feed.rss if feed.rss else "/rss.xml" }}">
		<link rel="alternate" type="application/atom+xml" title="LewisDale.Dev Atom Feed" href="{{ feed.atom if feed.atom else "/atom.xml" }}">
		<link rel="alternate" type="application/json" title="LewisDale.Dev JSON Feed" href="{{ feed.json if feed.json else "/feed.json" }}">
		
		<link rel="me" href="https://proven.lol/f730ca">
		<link rel="me" href="https://social.lol/@lewis">
		<link rel="me" href="https://github.com/LewisDaleUK">

		<link rel="webmention" href="https://webmention.io/lewisdale.dev/webmention">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="generator" content="eleventy">

		<meta name="author" content="{{ metadata.author.name }}">
		<meta name="description" content="{{ description }}">
		{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
	</head>
	<body>
		<header class="wrapper-lg row space-between">
			<a href="/" class="site-title">LD</a>
			<nav>
				<ul class="row" role='list'>
					<li><a href="/">Home</a></li>
					<li><a href="/blog">Blog</a></li>
					<li><a href="/blogroll">Blogroll</a></li>
					<li><a href="/events/2024">Events</a></li>
					<li><a href="/links">Links</a></li>
				</ul>
			</nav>

			<a href="/feed/" class="rss" aria-label="RSS feed">
				<i class="fa-solid fa-rss"></i>
			</a>
			<fieldset class="color-scheme">
				<legend>Change your colour scheme</legend>
				<label>
					<input type="radio" name="color-scheme" value="dark">
					Dark
				</label>
				<label>
					<input type="radio" name="color-scheme" value="light">
					Light
				</label>
				<label>
					<input type="radio" name="color-scheme" value="system">
					System
				</label>
			</fieldset>
		</header>
		{{ content | safe }}
		<footer>
			<div class="wrapper-lg">Copyright &copy; {{ today.year }} {{ metadata.author.name }}</div>

			<div class="wrapper-xs my-size-xs">
				<p class="text-center">Part of the CSS JOY webring</p>
				<div class="row" data-spacing="between">
					<a href="https://webri.ng/webring/cssjoy/previous?via=https://lewisdale.dev">Previous</a>
					<a href="https://webri.ng/webring/cssjoy/random?via=https://lewisdale.dev">Random</a>
					<a href="https://webri.ng/webring/cssjoy/next?via=https://lewisdale.dev">Next</a>
				</div>
			</div>
		</footer>

		
		<script>
			const defaultColourScheme = () => {
				if (localStorage.getItem('color-scheme')) {
					return localStorage.getItem('color-scheme');
				}

				return "system";
			};

			const data = new Proxy({
				'color-scheme': defaultColourScheme(),
			}, {
				set: (obj, key, value) => {
					obj[key] = value;
					localStorage.setItem(key, value);
					document.body.setAttribute(`data-${key}`, value);

					return true;
				}
			});

			const onRadioChange = e => {
				data[e.target.name] = e.target.value;					
			}

			document.querySelectorAll('[name="color-scheme"]').forEach(radio => {
				radio.addEventListener('change', onRadioChange);
				radio.checked = data[radio.name] == radio.value;
			});
			document.body.setAttribute(`data-color-scheme`, localStorage.getItem('color-scheme'));
		</script>
	</body>
</html>
