added changing announcements

_announcements/week-16.md

@@ -1,7 +1,7 @@
 ---
 title: Week 16 Announcements
 week: 16
-date: 202-12-09
+date: 2024-12-09
 ---
 
 1. 

_includes/announcements-navigation.html

@@ -19,4 +19,4 @@
       </div>
     {% endif %}
   {% endfor %}
-</div>
+</div>

_layouts/announcement.html

@@ -1,14 +1,11 @@
 <div class="announcement">
-  <h2>{{ page.title }}</h2>
+  <h2>{{ include.announcement.title }}</h2>
   <span class="announcement-meta">
-    {% if page.date %}
-    {{ page.date | date: '%b %e' }}
-    &middot;
-    {% endif %}
-    {% assign minutes = content | strip_html | number_of_words | divided_by: 180.0 | round %}
-    {{ minutes }} min read
+    {{ include.announcement.date | date: '%b %e' }}
+    <!-- &middot; -->
+    <!-- {{ include.announcement.content | strip_html | number_of_words | divided_by: 180.0 | round }} min read -->
   </span>
   <div>
-    {{ content }}
+    {{ include.announcement.content }}
   </div>
-</div>
+</div>

_sass/custom/announcement.scss

@@ -8,4 +8,24 @@
   .announcement-meta {
     @extend .text-epsilon;
   }
+
+  .announcement-content {
+    @extend .text-delta;
+  }
+
+  // add padding to top
+  padding: 0.05rem 1rem;
+}
+
+#announcement-navigation {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px; /* Optional: Add padding to give some space on the sides */
+}
+
+#prev-week,
+#next-week {
+  visibility: visible; /* Ensure they are visible or set visibility dynamically in JavaScript */
+  font-weight: bold;
+  text-decoration: none;
 }

announcements.md

@@ -12,4 +12,4 @@ Announcements are stored in the `_announcements` directory and rendered accordin
 {% assign announcements = site.announcements | reverse %}
 {% for announcement in announcements %}
 {{ announcement }}
-{% endfor %}
+{% endfor %}

assets/scripts/announcement-navigation.js

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const prevButton = document.getElementById('prev-week');
+    const nextButton = document.getElementById('next-week');
+    const announcements = document.querySelectorAll('.announcement[data-week]');
+
+    function getValidWeeks() {
+      const validAnnouncements = Array.from(announcements).filter(a => {
+        const announcementDate = new Date(a.dataset.date);
+        return announcementDate <= new Date();  // Only past or present announcements
+      });
+
+      return validAnnouncements.map(a => parseInt(a.dataset.week)).sort((a, b) => a - b);
+    }
+
+    function showAnnouncement(week) {
+      announcements.forEach(announcement => {
+        const announcementWeek = parseInt(announcement.dataset.week);
+        if (announcementWeek === week) {
+          announcement.style.display = 'block';
+        } else {
+          announcement.style.display = 'none';
+        }
+      });
+
+      const validWeeks = getValidWeeks();
+      const maxWeek = Math.max(...validWeeks);
+      const minWeek = Math.min(...validWeeks);
+
+      prevButton.dataset.week = week - 1;
+      nextButton.dataset.week = week + 1;
+
+      prevButton.style.visibility = week > minWeek ? 'visible' : 'hidden';
+      nextButton.style.visibility = week < maxWeek ? 'visible' : 'hidden';
+    }
+
+    // Initial load
+    const validWeeks = getValidWeeks();
+    const initialWeek = validWeeks[validWeeks.length - 1];  // Most recent valid week
+    showAnnouncement(initialWeek);
+
+    prevButton.addEventListener('click', function (e) {
+      e.preventDefault();
+      const week = parseInt(prevButton.dataset.week);
+      if (week >= Math.min(...getValidWeeks())) {
+        showAnnouncement(week);
+      }
+    });
+
+    nextButton.addEventListener('click', function (e) {
+      e.preventDefault();
+      const week = parseInt(nextButton.dataset.week);
+      if (week <= Math.max(...getValidWeeks())) {
+        showAnnouncement(week);
+      }
+    });
+  });

calendar.md

@@ -17,10 +17,7 @@ UC Berkeley, Fall 2024
 [Lecture Recordings](https://bcourses.berkeley.edu/courses/1538208/external_tools/90481){: .btn .btn-bcourses}
 [Jump to Current Week](#week-{{ site.current_week }}){: .btn .btn-currweek}
 
-{% assign announcements = site.announcements | where: "week", site.current_week | reverse %}
-{% for announcement in announcements %}
-{{ announcement }}
-{% endfor %}
+{% include announcements-navigation.html %}
 
 {% assign mods = site.modules | where: 'class', 'Berkeley' %}
 {% assign active-mods = '' | split: '' %}
@@ -34,3 +31,5 @@ UC Berkeley, Fall 2024
 {% for module in active-mods %}
   {{ module }}
 {% endfor %}
+
+<script src="{{ '/assets/scripts/announcement-navigation.js' | relative_url }}"></script>