adding randomness in the navigation plugin on the sidebar + new dracula theme

index.php

@@ -25,6 +25,11 @@
 				if (strpos($out, 'plugin-search') !== false) {
 					$sidebarSearchHtml .= $out;
 				} else {
+					// Mark the navigation / pages plugin so its list can be
+					// shuffled client-side (see the script near the body end).
+					if (strpos($out, 'plugin-navigation') !== false || strpos($out, 'plugin-pages') !== false) {
+						$out = '<div class="js-random-nav">' . $out . '</div>';
+					}
 					$sidebarOtherHtml .= $out;
 				}
 			}
@@ -74,10 +79,17 @@
 		echo Theme::jsBootstrap();
 	?>
 
-	<!-- Light / Dark theme toggle -->
+	<!-- Theme rotation: light -> dark -> nord -> dracula -->
 	<script>
 		(function () {
 			var STORAGE_KEY = 'blowdit-theme';
+			var THEMES = ['light', 'dark', 'nord', 'dracula'];
+			var ICONS = {
+				light:   'bi-brightness-high',
+				dark:    'bi-moon-stars',
+				nord:    'bi-snow',
+				dracula: 'bi-droplet'
+			};
 			var root = document.documentElement;
 			var btn = document.getElementById('theme-toggle');
 
@@ -85,7 +97,7 @@
 				if (!btn) return;
 				var icon = btn.querySelector('i');
 				if (!icon) return;
-				icon.className = (theme === 'dark') ? 'bi bi-sun' : 'bi bi-moon-stars';
+				icon.className = 'bi ' + (ICONS[theme] || 'bi-circle-half');
 			}
 
 			function apply(theme) {
@@ -95,12 +107,15 @@
 			}
 
 			// Reflect the theme set by the inline head script.
-			syncIcon(root.getAttribute('data-theme') || 'light');
+			var current = root.getAttribute('data-theme') || 'light';
+			if (THEMES.indexOf(current) === -1) current = 'light';
+			syncIcon(current);
 
 			if (btn) {
 				btn.addEventListener('click', function () {
-					var current = root.getAttribute('data-theme') || 'light';
-					apply(current === 'dark' ? 'light' : 'dark');
+					var cur = root.getAttribute('data-theme') || 'light';
+					var i = THEMES.indexOf(cur);
+					apply(THEMES[(i + 1) % THEMES.length]);
 				});
 			}
 
@@ -116,6 +131,26 @@
 		})();
 	</script>
 
+	<!-- Randomise the order of the navigation / pages list on each load -->
+	<script>
+		(function () {
+			function shuffle(arr) {
+				for (var i = arr.length - 1; i > 0; i--) {
+					var j = Math.floor(Math.random() * (i + 1));
+					var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp;
+				}
+				return arr;
+			}
+			var lists = document.querySelectorAll('.js-random-nav ul');
+			Array.prototype.forEach.call(lists, function (ul) {
+				var items = Array.prototype.filter.call(ul.children, function (el) {
+					return el.tagName === 'LI';
+				});
+				shuffle(items).forEach(function (li) { ul.appendChild(li); });
+			});
+		})();
+	</script>
+
 	<!-- Load Bludit Plugins: Site Body End -->
 	<?php Theme::plugins('siteBodyEnd'); ?>