fix: complete mobile carousel and social updates

static/js/modules/RecentPostsCarousel.js

@@ -0,0 +1,48 @@
+const mobileViewport = window.matchMedia("(max-width: 640px)");
+
+const initializeCarousel = (carousel) => {
+    const cards = Array.from(carousel.querySelectorAll(".recent-posts__card"));
+    const dots = Array.from(carousel.querySelectorAll(".recent-posts__dot"));
+    const previous = carousel.querySelector(".recent-posts__control--previous");
+    const next = carousel.querySelector(".recent-posts__control--next");
+
+    if (cards.length < 2 || !previous || !next) {
+        return;
+    }
+
+    let activeIndex = 0;
+
+    const render = () => {
+        cards.forEach((card, index) => {
+            const isActive = index === activeIndex;
+            card.classList.toggle("is-active", isActive);
+            card.hidden = mobileViewport.matches && !isActive;
+        });
+
+        dots.forEach((dot, index) => {
+            const isActive = index === activeIndex;
+            dot.classList.toggle("is-active", isActive);
+            dot.toggleAttribute("aria-current", isActive);
+        });
+    };
+
+    const showArticle = (index) => {
+        activeIndex = (index + cards.length) % cards.length;
+        render();
+    };
+
+    previous.addEventListener("click", () => showArticle(activeIndex - 1));
+    next.addEventListener("click", () => showArticle(activeIndex + 1));
+    dots.forEach((dot, index) =>
+        dot.addEventListener("click", () => showArticle(index)),
+    );
+    mobileViewport.addEventListener("change", render);
+
+    render();
+};
+
+const initRecentPostsCarousels = () => {
+    document.querySelectorAll(".recent-posts").forEach(initializeCarousel);
+};
+
+export default initRecentPostsCarousels;

static/js/theme.js

@@ -7,6 +7,7 @@ import { registerBackToTopButton } from './components/backToTop.js';
 import GetHeaderHeight from './modules/GetHeaderHeight.js';
 import tagExternalLinks from './modules/TagExternalLinks.js';
 import Navigation from './modules/Navigation.js';
+import initRecentPostsCarousels from './modules/RecentPostsCarousel.js';
 
 // Add passive event listeners
 ! function (e) {
@@ -68,6 +69,9 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize Header Height
     GetHeaderHeight();
 
+    // Initialize mobile Recent Insights carousels.
+    initRecentPostsCarousels();
+
     // Add Back to Top button to body
     // const backToTop = document.createElement('x-back-to-top');
     // document.body.appendChild(backToTop);