don't randomize on first load

themes/one-pager/assets/js/scripts.js

@@ -158,10 +158,11 @@ function handleLightboxClick(e) {
 // 3. MUSIC RENDERER
 // ============================================
 
-function renderMusicTracks(tracks, containerId) {
+function renderMusicTracks(tracks, containerId, randomize = false) {
   const container = document.getElementById(containerId);
   if (!container) return;
 
+  // Filter tracks by artist
   const filteredTracks = tracks.filter(track => {
     let artist = '';
     if (track.tags) {
@@ -177,8 +178,17 @@ function renderMusicTracks(tracks, containerId) {
     return;
   }
 
-  const shuffled = shuffleArray(filteredTracks);
+  let selected;
-  const selected = shuffled.slice(0, 6);
+  if (randomize) {
+    // Randomize: shuffle and get first 6
+    const shuffled = shuffleArray(filteredTracks);
+    selected = shuffled.slice(0, 6);
+  } else {
+    // Chronological: sort by created_at (newest first) and get first 6
+    const sorted = [...filteredTracks].sort((a, b) => b.created_at - a.created_at);
+    selected = sorted.slice(0, 6);
+  }
+
   container.innerHTML = '';
 
   selected.forEach(track => {
@@ -261,12 +271,21 @@ function handleLyricsToggle() {
 // ============================================
 
 // Render random pictures (6 max)
-function renderRandomPictures(picturesData, containerId) {
+function renderRandomPictures(picturesData, containerId, randomize = false) {
   const container = document.getElementById(containerId);
   if (!container) return;
 
-  const shuffled = shuffleArray(picturesData);
+  let selected;
-  const selected = shuffled.slice(0, 6);
+  if (randomize) {
+    // Randomize: shuffle and get first 6
+    const shuffled = shuffleArray(picturesData);
+    selected = shuffled.slice(0, 6);
+  } else {
+    // Chronological: sort by created_at (newest first) and get first 6
+    const sorted = [...picturesData].sort((a, b) => b.created_at - a.created_at);
+    selected = sorted.slice(0, 6);
+  }
+
   container.innerHTML = '';
 
   selected.forEach(picture => {
@@ -290,7 +309,6 @@ function renderRandomPictures(picturesData, containerId) {
     item.dataset.image = imageUrl;
     item.dataset.alt = alt;
 
-    // FIX: Set the date in the dataset
     const date = new Date(picture.created_at * 1000);
     const dateStr = date.toLocaleDateString('en-US', {
       year: 'numeric', month: 'short', day: 'numeric'
@@ -313,14 +331,22 @@ function renderRandomPictures(picturesData, containerId) {
 // 5. VIDEOS RENDERER
 // ============================================
 
-function renderRandomVideos(videosData, containerId) {
+function renderRandomVideos(videosData, containerId, randomize = false) {
   const container = document.getElementById(containerId);
   if (!container) return;
 
-  const shuffled = shuffleArray(videosData);
+  let selected;
-  const selected = shuffled.slice(0, 2);
+  if (randomize) {
-  container.innerHTML = '';
+    // Randomize: shuffle and get first 2
+    const shuffled = shuffleArray(videosData);
+    selected = shuffled.slice(0, 2);
+  } else {
+    // Chronological: sort by created_at (newest first) and get first 2
+    const sorted = [...videosData].sort((a, b) => b.created_at - a.created_at);
+    selected = sorted.slice(0, 2);
+  }
 
+  container.innerHTML = '';
   const posterImage = '/images/videoposter.png';
 
   selected.forEach(video => {
@@ -387,15 +413,15 @@ function renderRandomVideos(videosData, containerId) {
 // ============================================
 
 function refreshMusic() {
-  if (window.allMusicData) renderMusicTracks(window.allMusicData, 'musicGrid');
+  if (window.allMusicData) renderMusicTracks(window.allMusicData, 'musicGrid', true);
 }
 
 function refreshPictures() {
-  if (window.allPicturesData) renderRandomPictures(window.allPicturesData, 'photoGrid');
+  if (window.allPicturesData) renderRandomPictures(window.allPicturesData, 'photoGrid', true);
 }
 
 function refreshVideos() {
-  if (window.allVideosData) renderRandomVideos(window.allVideosData, 'videoGrid');
+  if (window.allVideosData) renderRandomVideos(window.allVideosData, 'videoGrid', true);
 }
 
 // ============================================
@@ -403,78 +429,23 @@ function refreshVideos() {
 // ============================================
 
 document.addEventListener('DOMContentLoaded', function() {
-  // Sticky Navigation
+  // ... sticky nav, read more, smooth scrolling code ...
-  const stickyNav = document.getElementById('stickyNav');
-  const mainHeader = document.querySelector('.main-header');
-  let lastScrollY = window.scrollY;
-  let ticking = false;
 
-  function updateStickyNav() {
+  // Initialize Music (chronological, not randomized)
-    const scrollY = window.scrollY;
-    const headerHeight = mainHeader ? mainHeader.offsetHeight : 400;
-    if (scrollY > headerHeight - 100) {
-      stickyNav.classList.add('visible');
-    } else {
-      stickyNav.classList.remove('visible');
-    }
-    lastScrollY = scrollY;
-  }
-
-  window.addEventListener('scroll', function() {
-    if (!ticking) {
-      window.requestAnimationFrame(function() {
-        updateStickyNav();
-        ticking = false;
-      });
-      ticking = true;
-    }
-  });
-
-  setTimeout(updateStickyNav, 100);
-
-  // Read More toggle for blog posts
-  document.querySelectorAll('.read-more-toggle').forEach(button => {
-    button.addEventListener('click', function() {
-      const content = this.nextElementSibling;
-      if (content.style.display === 'none') {
-        content.style.display = 'block';
-        this.innerHTML = '<span>Read Less</span>';
-      } else {
-        content.style.display = 'none';
-        this.innerHTML = '<span>Read More</span>';
-      }
-    });
-  });
-
-  // Smooth scrolling for navigation links
-  document.querySelectorAll('nav a').forEach(link => {
-    link.addEventListener('click', function(e) {
-      e.preventDefault();
-      const targetId = this.getAttribute('href');
-      const targetElement = document.querySelector(targetId);
-      if (targetElement) {
-        const navHeight = stickyNav.offsetHeight;
-        const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
-        window.scrollTo({ top: targetPosition, behavior: 'smooth' });
-      }
-    });
-  });
-
-  // Initialize Music
   if (window.allMusicData && window.allMusicData.length > 0) {
-    renderMusicTracks(window.allMusicData, 'musicGrid');
+    renderMusicTracks(window.allMusicData, 'musicGrid', false);
   }
 
-  // Initialize Pictures
+  // Initialize Pictures (chronological, not randomized)
   if (window.allPicturesData && window.allPicturesData.length > 0) {
-    renderRandomPictures(window.allPicturesData, 'photoGrid');
+    renderRandomPictures(window.allPicturesData, 'photoGrid', false);
   } else {
     initLightbox();
   }
 
-  // Initialize Videos
+  // Initialize Videos (chronological, not randomized)
   if (window.allVideosData && window.allVideosData.length > 0) {
-    renderRandomVideos(window.allVideosData, 'videoGrid');
+    renderRandomVideos(window.allVideosData, 'videoGrid', false);
   }
 });