adjust avatar images rendering in schedule & save timezone preference in localstorage (#129)

* adjust avatar images rendering in schedule

* add language chip to the event in the schedule

* saved timezone preference in localstorage to avoid losing on refresh

* adapt naming for consistency

* translate comment

Co-authored-by: Cristián Maureira-Fredes <[email protected]>

---------

Co-authored-by: Cristián Maureira-Fredes <[email protected]>

Author: marcorichetta

src/pages/[lang]/schedule.astro

@@ -6,6 +6,7 @@ import { getLangFromUrl, useTranslations } from '../../i18n/utils';
 import { getLocaleStaticPaths } from "../../i18n/locales";
 import { Icon } from "astro-icon/components";
 import scheduleData from "../../data/schedule.json";
+import sessionsData from "../../data/sessions.json";
 
 export function getStaticPaths() {
   return getLocaleStaticPaths();
@@ -129,7 +130,7 @@ const t = useTranslations(lang);
   </div>
 </Layout>
 
-<script define:vars={{ scheduleData }}>
+<script define:vars={{ scheduleData, sessionsData }}>
   // Global timezone state
   let useLocalTime = false;
   let localTimezoneName = '';
@@ -140,10 +141,14 @@ const t = useTranslations(lang);
   // Global array of event times for scrollbar
   let eventTimes = [];
 
-  // Collect all events from all days
+  // Collect all events from all days and enrich with session data
   const daysData = Object.entries(scheduleData.days);
   daysData.forEach(([date, day]) => {
     day.events.forEach((event) => {
+      // Enrich event with language from sessions data
+      if (event.code && sessionsData[event.code]) {
+        event.language = sessionsData[event.code].language;
+      }
       allEvents.push(event);
     });
   });
@@ -185,6 +190,25 @@ const t = useTranslations(lang);
     return date.toLocaleDateString('en-US', options);
   }
 
+  // Get language name from code
+  function getLanguageName(langCode) {
+    const languages = {
+      'en': 'English',
+      'es': 'Español',
+      'pt': 'Português',
+      'fr': 'Français',
+      'ja': '日本語',
+      'ko': '한국어',
+      'zh': '中文',
+      'de': 'Deutsch',
+      'it': 'Italiano',
+      'ru': 'Русский',
+      'ar': 'العربية',
+      'hi': 'हिन्दी'
+    };
+    return languages[langCode] || langCode?.toUpperCase() || '';
+  }
+
   function toRelativeUrl(url) {
     if (!url) return '';
     try {
@@ -378,7 +402,7 @@ const t = useTranslations(lang);
                   <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z"></path></svg>
                   ${event.speakers.map((speaker) => `
                     <a href="${toRelativeUrl(speaker.website_url)}" class="flex items-center gap-2 group/speaker">
-                      ${speaker.avatar ? `<img src="${speaker.avatar}" alt="${speaker.name}" class="w-8 h-8 rounded-full border-2 border-purple-500" />` : ''}
+                      ${speaker.avatar ? `<img src="${speaker.avatar}" alt="${speaker.name}" class="w-8 h-8 rounded-full border-2 border-purple-500 object-cover" />` : ''}
                       <span class="font-medium text-gray-700 dark:text-gray-300 group-hover/speaker:text-purple-600 dark:group-hover/speaker:text-purple-400 transition-colors">${speaker.name}</span>
                     </a>
                   `).join('')}
@@ -412,6 +436,10 @@ const t = useTranslations(lang);
                         ${event.session_type}
                       </span>
                       ${event.level ? `<span class="px-3 py-1 rounded-full text-xs font-semibold text-white ${levelColor}">${event.level}</span>` : ''}
+                      ${event.language ? `<span class="px-3 py-1 rounded-full text-xs font-semibold bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200 flex items-center gap-1">
+                        <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>
+                        ${getLanguageName(event.language)}
+                      </span>` : ''}
                       <span class="md:hidden px-3 py-1 rounded-full text-xs font-semibold bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
                         ${event.duration} min
                       </span>
@@ -489,6 +517,15 @@ const t = useTranslations(lang);
   }
 
   function initializeSchedulePage() {
+    // Load timezone preference from localStorage
+    const savedTimezone = localStorage.getItem('preferredTimezone');
+
+    if (savedTimezone === 'local') {
+      useLocalTime = true;
+    } else if (savedTimezone === 'utc') {
+      useLocalTime = false;
+    }
+
     // Get local timezone name
     try {
       localTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -507,6 +544,7 @@ const t = useTranslations(lang);
     if (utcBtn) {
       utcBtn.addEventListener('click', () => {
         useLocalTime = false;
+        localStorage.setItem('preferredTimezone', 'utc');
         updateTimezoneButtons();
         updateAllTimes();
       });
@@ -515,6 +553,7 @@ const t = useTranslations(lang);
     if (localBtn) {
       localBtn.addEventListener('click', () => {
         useLocalTime = true;
+        localStorage.setItem('preferredTimezone', 'local');
         updateTimezoneButtons();
         updateAllTimes();
       });
@@ -703,7 +742,7 @@ const t = useTranslations(lang);
     // Initial update
     updateScrollIndicator();
     updateTimeTooltip();
-    reorganizeSchedule();
+    updateTimezoneButtons(); // This will apply the saved state
   }
 
   // Call initialization onboth DOMContentLoaded and Astro page load