chore: Adds DevSprint to schedule page

Author: Astraxx04

src/program/schedule.njk

@@ -13,7 +13,7 @@ layout: base.njk
         </div>
 
         <!-- Fetch Active days -->
-        {% set active_days = schedule.schedule.conference.days.slice(0,3) %}
+        {% set active_days = schedule.schedule.conference.days.slice(0,4) %}
 
         <!-- Dynamically display Schedule Grid -->
         <div class="pt-20 grid gap-0 md:gap-6" style="grid-template-columns: repeat({{ active_days | length }}, minmax(0, 1fr));">
@@ -33,7 +33,20 @@ layout: base.njk
                             <span class="block sm:inline-block">{{ dayInfo.label.split(' ')[0] }}</span>
                             <span class="inline-block">{{ dayInfo.label.split(' ').slice(1).join(' ') }}</span>
                         </p>
-                        <p class="text-center mb-0.5 font-semibold">{{ dayInfo.monthDay }}</p>
+                        {% set parts = dayInfo.monthDay.split(' ') %}
+                        {% set month_full = parts[0] %}
+                        {% set day_number = parts[1] %}
+
+                        {% if month_full.length > 4 %}
+                            {% set month_short = month_full | truncate(4, true, '') %}
+                        {% else %}
+                            {% set month_short = month_full %}
+                        {% endif %}
+
+                        <p class="text-center mb-0.5 font-semibold">
+                            <span class="hidden md:inline">{{ month_full }} {{ day_number }}</span>
+                            <span class="inline md:hidden">{{ month_short }} {{ day_number }}</span>
+                        </p>
                         <p class="text-center font-medium text-[#4662FF] pb-4">{{ dayInfo.dayName|upper }}</p>
                     </div>
                 {%- endcall %}
@@ -399,4 +412,6 @@ layout: base.njk
     </div>
 </div>
 
-<script src="{{ env.baseUrl ~ 'js/schedule.js'}}" defer></script>
+<script>const baseUrl = "{{ env.baseUrl }}";</script>
+<script src="{{ env.baseUrl ~ 'js/schedule.js' }}" defer></script>
+

src/static/js/schedule.js

@@ -17,38 +17,61 @@ document.addEventListener('DOMContentLoaded', () => {
         contents.forEach(content => content.classList.add('hidden'));
     };
 
-    // Initial state: Highlight the first card and show the first schedule
-    if (cards.length > 0 && contents.length > 0) {
-        selectedCard = cards[0];
-        const firstContentId = selectedCard.getAttribute('data-schedule');
+    const highlight = (card) => {
+        const div = card.querySelector('.card-grid');
+        div.classList.add('pycon-bg-lime');
+        div.style.backgroundColor = '#CDFF89';
+    };
+
+    const setInitialState = () => {
+        if (!cards.length || !contents.length) return;
+        resetCardBackgrounds();
+        hideAllSchedules();
+
+        // Always show FIRST card + its content
+        const firstCard = cards[0];
+        const firstContentId = firstCard.getAttribute('data-schedule');
+
+        highlight(firstCard);
+        document.getElementById(firstContentId)?.classList.remove('hidden');
+        selectedCard = firstCard;
+    };
+
+    // Initial load
+    setInitialState();
 
-        // Highlight the first card
-        const firstHighlightDiv = selectedCard.querySelector('.card-grid');
-        firstHighlightDiv.classList.add('bg:pycon-bg-lime');
-        firstHighlightDiv.style.backgroundColor = '#CDFF89';
+    // If coming back via back/forward cache, reload once to reset UI to first card
+    window.addEventListener('pageshow', (evt) => {
+        const nav = performance.getEntriesByType('navigation')[0];
+        const isBFCache = evt.persisted || (nav && nav.type === 'back_forward');
 
-        // Show the first schedule
-        document.getElementById(firstContentId).classList.remove('hidden');
-    }
+        if (isBFCache && !sessionStorage.getItem('reloadedOnce')) {
+            sessionStorage.setItem('reloadedOnce', '1');
+            window.location.reload();
+        } else if (!isBFCache) {
+            // Normal load after hard reload; clear the flag
+            sessionStorage.removeItem('reloadedOnce');
+        }
+    });
 
-    // Add event listeners to all cards
+    // Click handlers
     cards.forEach(card => {
         const highlightDiv = card.querySelector('.card-grid');
 
         card.addEventListener('click', () => {
-            // Reset previous selection
-            resetCardBackgrounds();
-            hideAllSchedules();
+            const scheduleId = card.getAttribute('data-schedule');
 
-            // Highlight the clicked card
-            highlightDiv.classList.add('pycon-bg-lime');
-            highlightDiv.style.backgroundColor = '#CDFF89'; // Lime background
+            // Redirect-only card
+            if (scheduleId === '4') {
+                window.location.href = `${baseUrl}program/dev-sprint`;
+                return;
+            }
 
-            // Show the corresponding schedule
-            const scheduleId = card.getAttribute('data-schedule');
-            document.getElementById(scheduleId).classList.remove('hidden');
+            resetCardBackgrounds();
+            hideAllSchedules();
 
-            // Update the selected card
+            highlight(card);
+            document.getElementById(scheduleId)?.classList.remove('hidden');
             selectedCard = card;
         });
 
@@ -66,4 +89,3 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 });
-