First commit

Delete exampleSite
Add initial content, images & docker-compose.yml
Use extend-head.html for analytics
Set remote url to gitea.novicelab.io

assets/js/shortcodes/gallery.js

@@ -0,0 +1,39 @@
+function _getDefaultPackeryOptions() {
+  return {
+    percentPosition: true,
+    gutter: 5,
+    resize: true,
+  };
+}
+
+function _getPackeryOptions(nodeGallery) {
+  const defaults = _getDefaultPackeryOptions();
+  const {
+    packeryGutter,
+    packeryPercentPosition,
+    packeryResize,
+  } = nodeGallery.dataset;
+
+  return {
+    percentPosition:
+      packeryPercentPosition !== undefined
+        ? packeryPercentPosition === "true"
+        : defaults.percentPosition,
+    gutter:
+      packeryGutter !== undefined ? parseInt(packeryGutter, 10) : defaults.gutter,
+    resize:
+      packeryResize !== undefined ? packeryResize === "true" : defaults.resize,
+  };
+}
+
+(function init() {
+  window.addEventListener("load", function () {
+    let packeries = [];
+    let nodeGalleries = document.querySelectorAll(".gallery");
+
+    nodeGalleries.forEach((nodeGallery) => {
+      let packery = new Packery(nodeGallery, _getPackeryOptions(nodeGallery));
+      packeries.push(packery);
+    });
+  });
+})();

assets/js/shortcodes/tabs.js

@@ -0,0 +1,59 @@
+function initTabs() {
+  tabClickHandler = (event) => {
+    const button = event.target.closest(".tab__button");
+    if (!button) return;
+
+    const container = button.closest(".tab__container");
+    const tabIndex = parseInt(button.dataset.tabIndex);
+    const tabLabel = button.dataset.tabLabel;
+    const group = container.dataset.tabGroup;
+
+    if (group) {
+      const allGroupContainers = document.querySelectorAll(`.tab__container[data-tab-group="${group}"]`);
+
+      allGroupContainers.forEach((groupContainer) => {
+        const targetButton = Array.from(groupContainer.querySelectorAll(".tab__button")).find(
+          (btn) => btn.dataset.tabLabel === tabLabel,
+        );
+
+        if (targetButton) {
+          const targetIndex = parseInt(targetButton.dataset.tabIndex);
+          activateTab(groupContainer, targetIndex);
+        }
+      });
+    } else {
+      activateTab(container, tabIndex);
+    }
+  };
+
+  document.addEventListener("click", tabClickHandler);
+}
+
+function activateTab(container, activeIndex) {
+  const buttons = container.querySelectorAll(".tab__button");
+  const panels = container.querySelectorAll(".tab__panel");
+
+  buttons.forEach((btn, index) => {
+    if (index === activeIndex) {
+      btn.classList.add("tab--active");
+      btn.setAttribute("aria-selected", "true");
+    } else {
+      btn.classList.remove("tab--active");
+      btn.setAttribute("aria-selected", "false");
+    }
+  });
+
+  panels.forEach((panel, index) => {
+    if (index === activeIndex) {
+      panel.classList.add("tab--active");
+    } else {
+      panel.classList.remove("tab--active");
+    }
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initTabs);
+} else {
+  initTabs();
+}