Settings refactor / add birb

_includes/birb.njk

@@ -0,0 +1,17 @@
+<!-- Birb -->
+<script>
+const showBirb = () => {
+	script = document.createElement('script');
+	script.setAttribute("src", "https://cdn.jsdelivr.net/gh/IdreesInc/Pocket-Bird@main/dist/web/birb.embed.js");
+	document.body.appendChild(script);
+};
+
+const hideBirb = () => {
+	window.location.reload();
+};
+
+const noBirb = () => {
+	console.info("Settings: Not showing birb :[");
+}
+</script>
+<!-- /Birb -->

_includes/footer.njk

@@ -17,6 +17,6 @@
 		<a href="https://notbyai.fyi/">
 			<img src="/img/written-by-human-not-by-ai-white.svg" alt="Written by humans, not by AI.">
 		</a>
-		{% include "siteSettings.njk" %}
+		{% include "settings/siteSettings.njk" %}
 	</div>
 </footer>

_includes/layouts/base.njk

@@ -52,6 +52,7 @@
 		<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
 		<link rel="stylesheet" type="text/css" href="/css/search.css" />
 		{% endif %}
+		<script src="/js/main.js"></script>
 		<!-- Mochi webmentions -->
 		<link rel="webmention" href="https://mochi-webmentions.meadow.cafe/webmention/mochi@upchur.ch/1/receive" />
 		<!-- Indieweb profile links -->
@@ -85,8 +86,10 @@
 			</section>
 			{% endif %}
 		</main>
+		{% include "birb.njk" %}
 		{% include "footer.njk" %}
 		{% include "weather.njk" %}
 		{% include "wooMode.njk" %}
+		{% include "settings/settingsConfig.njk" %}
 	</body>
 </html>

_includes/layouts/links.njk

@@ -4,7 +4,7 @@ layout: layouts/linksPage.njk
 <div class="links-container h-card" data-pagefind-body>
 	<img class="profilePic u-photo" src="{{ metadata.author.profilePic }}">
 	<h1 class="socialTitle p-name">Nathan Upchurch</h1>
-	<p class="page-block nodropcap">Beside what I do to earn a crust, among other things, I’m an incense maker and enthusiast, a classical trombonist, vegan cook, writer, mediocre photographer, and a fan of, advocate for, and occasional contributor to free and open source software. Here’s where you can find me on the internet:</p>
+	<p class="page-block nodropcap">Here’s where you can find me on the internet:</p>
 	<div class="socialLinks">
 		{% for link in metadata.socialLinks %}
 		<a class="link-button u-url" {% if link.customAttribute %} {{ link.customAttribute | safe }} {% endif %} href="{{ link.linkURL }}">

_includes/settings/controllers/birbController.njk

@@ -0,0 +1,4 @@
+<form class="siteSettingsToggle" id="birbController">
+	<input type="checkbox" id="birbToggle" {% if metadata.weatherOnByDefault %}checked{% endif %} />
+	<label for="birbToggle">Pet bird (Will refresh page when turned off)</label>
+</form>

_includes/settings/controllers/weatherController.njk

@@ -1,4 +1,4 @@
 <form class="siteSettingsToggle" id="weatherController">
 	<input type="checkbox" id="weatherToggle" {% if metadata.weatherOnByDefault %}checked{% endif %} />
-	<label for="weatherToggle">Show weather?</label>
+	<label for="weatherToggle">Weather</label>
 </form>

_includes/settings/controllers/wooModeController.njk

@@ -1,4 +1,4 @@
 <form class="siteSettingsToggle" id="wooModeController">
 	<input type="checkbox" id="wooToggle" {% if metadata.wooModeOnByDefault %}checked{% endif %} />
-	<label for="wooToggle">Woo mode?</label>
+	<label for="wooToggle">Woo mode</label>
 </form>

_includes/settings/settingsConfig.njk

@@ -0,0 +1,37 @@
+<!-- Site Settings -->
+<script>
+	const weatherSettings = {
+		handleOnToggle: turnOnWeather,
+		handleOnDefault: turnOnWeather,
+		handleOffToggle: turnOffWeather,
+		handleOffDefault: turnOffWeather,
+		settingToggle: "weatherToggle",
+		preferenceName: "weather",
+		defaultSetting: {{ metadata.weatherOnByDefault }},
+		forcedOn: false,
+	};
+	const wooModeSettings = {
+		handleOnToggle: deployWoo,
+		handleOnDefault: wooSensibleDefault,
+		handleOffToggle: withdrawWoo,
+		handleOffDefault: withdrawWoo,
+		settingToggle: "wooToggle",
+		preferenceName: "wooMode",
+		defaultSetting: {% if forcedWoo %}true{% else %}false{% endif %},
+		forcedOn: {% if forcedWoo %}true{% else %}false{% endif %},
+	};
+	const petBirbSettings = {
+		handleOnToggle: showBirb,
+		handleOnDefault: showBirb,
+		handleOffToggle: hideBirb,
+		handleOffDefault: noBirb,
+		settingToggle: "birbToggle",
+		preferenceName: "petBirb",
+		defaultSetting: false,
+		forcedOn: false,
+	};
+	settingHandler(weatherSettings);
+	settingHandler(wooModeSettings);
+	settingHandler(petBirbSettings);
+</script>
+<!-- /Site Settings -->

_includes/settings/siteSettings.njk

@@ -2,8 +2,9 @@
 	<button onclick="siteSettings.showModal();">Site Settings</button>
 	<dialog id="siteSettings">
 		<h2>Site Settings</h2>
-		{% include "weatherController.njk" %}
-		{% include "wooModeController.njk" %}
+		{% include "settings/controllers/birbController.njk" %}
+		{% include "settings/controllers/weatherController.njk" %}
+		{% include "settings/controllers/wooModeController.njk" %}
 		<button id="settingsDone" onclick="siteSettings.close();">Done</button>
 	</dialog>
 </div>

_includes/weather.njk

@@ -1,7 +1,7 @@
 <!-- weather -->
 		<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
 		{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
-		<div class="fallingObjects" id="weather" aria-hidden="true">
+		<div class="fallingObjects hidden" id="weather" aria-hidden="true">
 			<div class="fallingObject">
 				<div>{{ metadata.weatherSymbol }}</div>
 			</div>
@@ -34,29 +34,15 @@
 			</div>
 		</div>
 
-		<script>
-			const weather = document.getElementById("weather");
-			const weatherToggle = document.getElementById("weatherToggle");
-			const weatherPreference = localStorage.getItem("weather");
+<script>
+	const turnOnWeather = (containerId) => {
+		const container = document.getElementById(containerId);
+		weather.classList.remove("hidden");
+	}
 
-			// Initial weather preference check on page load
-			if ({% if metadata.weatherOnByDefault == false %}!weatherPreference || {% endif %}weatherPreference == 0) {
-				weather.classList.add("hidden");
-				weatherToggle.checked = false;
-			} else {
-				weather.classList.remove("hidden");
-				weatherToggle.checked = true;
-			};
-
-			// Handle weather setting toggle
-			weatherToggle.addEventListener('change', function() {
-				if (this.checked) {
-					localStorage.setItem("weather", 1);
-					weather.classList.remove("hidden");
-				} else {
-					localStorage.setItem("weather", 0);
-					weather.classList.add("hidden");
-				};
-			});
-		</script>
+	const turnOffWeather = (containerId) => {
+		const container = document.getElementById(containerId);
+		weather.classList.add("hidden");
+	}
+</script>
 <!-- /weather -->

_includes/wooMode.njk

@@ -2,7 +2,7 @@
 <!-- Based on https://codepen.io/tommyho/pen/JjgoZLK -->
 {# This include replaces the page background with a crazy rainbow animated shader #}
 
-<canvas id="shaderCanvas"></canvas>
+<canvas class="hidden" id="shaderCanvas"></canvas>
 <script src="/js/three.min.js"></script>
 <script>
 	let scene, camera, renderer, uniforms, material, mesh;
@@ -171,52 +171,31 @@
 		uniforms.time.value = timestamp * 0.001;
 		renderer.render(scene, camera);
 	}
-</script>
 
-<script>
 	const wooCanvas = document.getElementById("shaderCanvas");
-	const wooToggle = document.getElementById("wooToggle");
-	const wooPreference = localStorage.getItem("wooMode");
-	let forcedWoo = false;
 
-	// Initial preference check on page load
-	if ({% if metadata.wooModeOnByDefault == false %}!wooPreference || {% endif %}wooPreference == 0) {
-		forcedWoo ? null : wooCanvas.classList.add("hidden");
-		wooToggle.checked = false;
-	} else {
+	// Function for when wooMode is toggled on
+	const deployWoo = () => {
+		let wooAudio = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
+		wooAudio.volume = 0.4;
+		wooAudio.play();
+
 		wooCanvas.classList.remove("hidden");
-		wooToggle.checked = true;
 		initWoo();
 		animate(0);
-	};
+	}
 
-	// Handle setting toggle
-	wooToggle.addEventListener('change', function() {
-		if (this.checked) {
-			localStorage.setItem("wooMode", 1);
-
-			let wooAudio = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
-			wooAudio.volume = 0.4;
-			wooAudio.play();
-
-			wooCanvas.classList.remove("hidden");
-			initWoo();
-			animate(0);
-		} else {
-			localStorage.setItem("wooMode", 0);
-			forcedWoo ? null : wooCanvas.classList.add("hidden");
-		};
-	});
-
-	{% if forcedWoo %}
-	// Handle forced woo
-	forcedWoo = true;
-	console.log("Forcing woo mode: woo!");
-	wooCanvas.classList.remove("hidden");
-	initWoo();
-	animate(0);
-	{% endif %}
+	// Function for when wooMode is enabled by default
+	const wooSensibleDefault = () => {
+		wooCanvas.classList.remove("hidden");
+		initWoo();
+		animate(0);
+	}
 
+	// Function for when wooMode is toggled off
+	const withdrawWoo = () => {
+		wooCanvas.classList.add("hidden");
+	}
 
 </script>
-<!-- /weather -->
+<!-- /Woo Mode -->