Merge commit 'a024bc7d76fcc5e49e8210f9b0896db9ef21861a'

docs/assets/js/main.js

@@ -0,0 +1,89 @@
+import Alpine from 'alpinejs';
+import { registerMagics } from './alpinejs/magics/index';
+import { navbar, search, toc } from './alpinejs/data/index';
+import { navStore, initColorScheme } from './alpinejs/stores/index';
+import { bridgeTurboAndAlpine } from './helpers/index';
+import persist from '@alpinejs/persist';
+import focus from '@alpinejs/focus';
+
+var debug = 0 ? console.log.bind(console, '[index]') : function () {};
+
+// Turbolinks init.
+(function () {
+	document.addEventListener('turbo:render', function (e) {
+		// This is also called right after the body start. This is added to prevent flicker on navigation.
+		initColorScheme();
+	});
+})();
+
+// Set up and start Alpine.
+(function () {
+	// Register AlpineJS plugins.
+	{
+		Alpine.plugin(focus);
+		Alpine.plugin(persist);
+	}
+	// Register AlpineJS magics and directives.
+	{
+		// Handles copy to clipboard etc.
+		registerMagics(Alpine);
+	}
+
+	// Register AlpineJS controllers.
+	{
+		// Register AlpineJS data controllers.
+		let searchConfig = {
+			index: 'hugodocs',
+			app_id: 'D1BPLZHGYQ',
+			api_key: '6df94e1e5d55d258c56f60d974d10314',
+		};
+
+		Alpine.data('navbar', () => navbar(Alpine));
+		Alpine.data('search', () => search(Alpine, searchConfig));
+		Alpine.data('toc', () => toc(Alpine));
+	}
+
+	// Register AlpineJS stores.
+	{
+		Alpine.store('nav', navStore(Alpine));
+	}
+
+	// Start AlpineJS.
+	Alpine.start();
+
+	// Start the Turbo-Alpine bridge.
+	bridgeTurboAndAlpine(Alpine);
+
+	{
+		let containerScrollTops = {};
+
+		// To preserve scroll position in scrolling elements on navigation add data-turbo-preserve-scroll-container="somename" to the scrolling container.
+		addEventListener('turbo:click', () => {
+			document.querySelectorAll('[data-turbo-preserve-scroll-container]').forEach((el2) => {
+				containerScrollTops[el2.dataset.turboPreserveScrollContainer] = el2.scrollTop;
+			});
+		});
+
+		addEventListener('turbo:render', () => {
+			document.querySelectorAll('[data-turbo-preserve-scroll-container]').forEach((ele) => {
+				const containerScrollTop = containerScrollTops[ele.dataset.turboPreserveScrollContainer];
+				if (containerScrollTop) {
+					ele.scrollTop = containerScrollTop;
+				} else {
+					let els = ele.querySelectorAll('.scroll-active');
+					if (els.length) {
+						els.forEach((el) => {
+							// Avoid scrolling if el is already in view.
+							if (el.offsetTop >= ele.scrollTop && el.offsetTop <= ele.scrollTop + ele.clientHeight) {
+								return;
+							}
+							ele.scrollTop = el.offsetTop - ele.offsetTop;
+						});
+					}
+				}
+			});
+
+			containerScrollTops = {};
+		});
+	}
+})();