RW25 - Third phase - Agenda page

_includes/world/2025/components/agenda_header.html

@@ -0,0 +1,13 @@
+<div class="agenda-header">
+  <div class="content">
+    <h1>Rails World 2025</h1>
+    <h2>Official Agenda</h2>
+    <p class="larger">
+      When we say there’s something for everyone... <span class="bold">we mean it</span>. Here’s the full breakdown so you can plan your Rails World 2025 experience.
+    </p>
+  </div>
+
+  <div class="illustration-container">
+    <img src="/assets/world/2025/images/shape.png" alt="attendees at rails world" class="illustration" width="500" />
+  </div>
+</div>

_includes/world/2025/components/agenda_tabs.html

@@ -0,0 +1,67 @@
+<div class="agenda-tabs" id="agenda-tabs">
+  <div class="tab zero {% if page.day == 'day-0' %}active{% endif %}"
+       role="button"
+       tabindex="0"
+       title="Wednesday"
+       aria-label="View pre-registration agenda">
+    <p>Wednesday</p>
+  </div>
+
+  <div class="tab one {% if page.day == 'day-1' %}active{% endif %}"
+       role="button"
+       tabindex="1"
+       title="Thursday"
+       aria-label="View day one agenda">
+    <p>Thursday</p>
+  </div>
+
+  <div class="tab two {% if page.day == 'day-2' %}active{% endif %}"
+       role="button"
+       tabindex="2"
+       title="Friday"
+       aria-label="View day two agenda">
+    <p>Friday</p>
+  </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const tabs = document.querySelectorAll(".agenda-tabs .tab");
+    const agendaContent = document.getElementById("agenda-content");
+
+    tabs.forEach((tab, index) => {
+      tab.addEventListener("click", () => {
+        const day = index;
+        loadAgendaDay(day);
+        setActiveTab(tab);
+      });
+
+      tab.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+          e.preventDefault();
+          tab.click();
+        }
+      });
+    });
+
+    const loadAgendaDay = ((day) => {
+      fetch(`/world/2025/agenda/day-${day}`)
+        .then(response => response.text())
+        .then(html => {
+          // Create a DOM parser to extract only the agenda content
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, 'text/html');
+          const newAgendaContent = doc.querySelector('#agenda-content');
+          agendaContent.innerHTML = newAgendaContent.innerHTML;
+        })
+        .catch(() => {
+          agendaContent.innerHTML = "<p>Error loading agenda.</p>";
+        });
+    })
+
+    const setActiveTab = ((activeTab) => {
+      tabs.forEach(tab => tab.classList.remove("active"));
+      activeTab.classList.add("active");
+    })
+  });
+</script>

_includes/world/2025/components/navbar_links.html

@@ -1,3 +1,4 @@
 <a href="/world/2025/speakers" class="nav-link">Speakers</a>
+<a href="/world/2025/agenda/day-1" class="nav-link">Agenda</a>
 <a href="/world/2025/faq/general" class="nav-link">FAQs</a>
 <a href="/world/2025/rails_at_scale" class="nav-link">Rails at Scale Summit</a>

_includes/world/2025/components/session_card.html

@@ -1,26 +1,57 @@
 {% assign speaker_url = include.speaker.path | split: '/' | last | remove_first: '.md' %}
 {% assign session = include.session %}
-
 {% assign clean_path = session.path | replace: '_world_sessions/2025', '' | replace: '.md', '' %}
 
-<div  class="session-card"
+{% if session.location == "Effectenbeurs" %}
+  {% assign track = "Track 1" %}
+{% else %}
+  {% assign track = "Track 2" %}
+{% endif %}
+
+{% if session.path contains 'day-1/' %}
+  {% assign day = 'Thursday Sept 4' %}
+{% elsif session.path contains 'day-2/' %}
+  {% assign day = 'Friday Sept 5' %}
+{% endif %}
+
+<div class="session-card {% unless session.show_page == false %}pointer{% endunless %}"
       title="{{ session.title }}"
-      aria-label="Go to {{ session.title }} session page"
-      onclick="openWindow( '/world/2025{{ clean_path }}')"
-      onkeydown="handleEnterOrSpaceWindowOpen(event, '/world/2025{{ clean_path }}')">
-  <h3>{{ session.title }}</h3>
-  <p>{{ include.speaker.first_name }} {{ include.speaker.last_name }} - {{ include.speaker.tagline }}{% if include.speaker.company %}, {{ include.speaker.company }} {% endif %}</p>
+      aria-label="{% unless session.show_page == false %}Go to {{ session.title }} session page{% else %}{{ session.title }}{% endunless %}"
+      {% unless session.show_page == false %}
+        onclick="openWindow('/world/2025{{ clean_path }}')"
+        onkeydown="handleEnterOrSpaceWindowOpen(event, '/world/2025{{ clean_path }}')"
+        role="button"
+        tabindex="0"
+      {% endunless %} >
+
+  {% if page.path contains 'speakers/' %}
+  <div class="details">
+    <p class="italic">{{ day }}</p>
+    <p class="bold">{{ session.time }}</p>
+    <p>{{ track }}</p>
+  </div>
+  {% else %}
+    <p class="details">{{ session.time }}</p>
+  {% endif %}
+
+  <div class="content">
+    <h3>{{ session.title }}</h3>
+    {% if session.multiple_speakers %}
+      <p>{{session.multiple_speakers}}</p>
+    {% elsif include.speaker %}
+      <p>{{ include.speaker.first_name }} {{ include.speaker.last_name }} {% if include.speaker.tagline %} - {{ include.speaker.tagline }} {% endif %} {% if include.speaker.company %}, {{ include.speaker.company }} {% endif %}</p>
+    {% endif %}
+    </div>
 </div>
 
 <script>
-  openWindow = (url, openTab = false) =>{
-    const openType = openTab ? '_blank' : '_self';
-    window.open(url, openType);
+  openWindow = (url) =>{
+    window.open(url);
   }
 
   handleEnterOrSpaceWindowOpen = (e, url) => {
     if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
-        openWindow(url);
+      openWindow(url);
     }
   }
 </script>

_layouts/world/2025/session.html

@@ -5,10 +5,27 @@
 {% assign filteredSpeakers = site.world_speakers | where_exp:"speaker", "speaker.path contains page.speaker" | where_exp: 'item', 'item.path contains "2025"' %}
 {% assign speaker = filteredSpeakers | first %}
 
+{% if page.location == "Effectenbeurs" %}
+  {% assign track = "Track 1" %}
+{% else %}
+  {% assign track = "Track 2" %}
+{% endif %}
+
+{% if page.path contains 'day-1/' %}
+  {% assign day = 'Thursday September 4' %}
+{% elsif page.path contains 'day-2/' %}
+  {% assign day = 'Friday September 5' %}
+{% endif %}
+
 <div class="session-page">
   <div class="session-content">
     <h1>{{ page.title }}</h1>
     <p>{{ content }}</p>
+
+    <div class="session-details">
+      <img class="" width="40" src="/assets/world/2025/icons/clock.svg" alt="clock icon">
+      <p> {{ day }} / {{ page.time }} / {{ track }}</p>
+    </div>
   </div>
 
   <div>

_sass/world/2025/base/_colors.scss

@@ -15,3 +15,5 @@ $speaker-card-gradient-hover: linear-gradient(180deg, rgba(59, 29, 98, 0%) 0%, r
 
 $session-card-gradient: linear-gradient(-90deg, rgba(59, 29, 98, 0%) 20%, $red 100%);
 $session-card-gradient-hover: linear-gradient(-90deg, rgba(59, 29, 98, 0%) 0%, $red 61%);
+
+$agenda-tag-gradient: linear-gradient(0deg, rgba(59, 29, 98, 0%) 0%, $red 140%);

_sass/world/2025/base/_layout.scss

@@ -54,3 +54,14 @@ body {
     padding: 0 5%;
   }
 }
+
+.sessions-container {
+  margin-top: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+
+  @include media(MobileAndTabletScreens) {
+    margin-top: 50px;
+  }
+}

_sass/world/2025/modules/_agenda_page.scss

@@ -0,0 +1,96 @@
+.agenda-page {
+  padding-left: 80px;
+
+  @include media(MobileScreens) {
+    padding: 0 20px;
+    margin-bottom: 50px;
+  }
+
+  @include media(TabletScreens) {
+    padding: 0 40px;
+  }
+}
+
+.agenda-page {
+  .session-card {
+    @include media(MobileAndTabletScreens) {
+      width: 90%;
+    }
+  }
+}
+
+.agenda-header {
+  margin-top: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @include media(MobileAndTabletScreens) {
+    flex-direction: column-reverse;
+    text-align: center;
+  }
+
+  @include media(MobileScreens) {
+    margin-top: 25px;
+  }
+
+  @include media(TabletScreens) {
+    margin-top: 50px;
+  }
+
+  h1 {
+    margin-bottom: 10px;
+
+    @include media(MobileScreens) {
+      font-size: $xx-large;
+    }
+
+    @include media(TabletScreens) {
+      font-size: 50px;
+    }
+  }
+
+  h2 {
+    font-size: 60px;
+
+    @include media(MobileScreens) {
+      font-size: 25px;
+    }
+
+    @include media(TabletScreens) {
+      font-size: 40px;
+    }
+  }
+
+  p {
+    @include media(MobileScreens) {
+      font-size: 18px;
+    }
+
+    @include media(TabletScreens) {
+      font-size: 28px;
+    }
+  }
+}
+
+.agenda-header .content {
+  width: 50%;
+  align-self: flex-start;
+  margin-top: 100px;
+
+  @include media(MobileAndTabletScreens) {
+    width: 100%;
+    margin-top: 25px;
+  }
+}
+
+.agenda-header .illustration-container {
+  @include media(MobileAndTabletScreens) {
+    display: none;
+  }
+
+  img {
+    width: 500px;
+    rotate: 180deg;
+  }
+}

_sass/world/2025/modules/_agenda_tabs.scss

@@ -0,0 +1,28 @@
+.agenda-tabs {
+  display: flex;
+  gap: 25px;
+
+  @include media(MobileAndTabletScreens) {
+    margin-top: 50px;
+  }
+
+  @include media(MobileScreens) {
+    gap: 10px;
+  }
+
+  .tab {
+    cursor: pointer;
+    padding: 10px 50px;
+    border-top: 1px solid white;
+    border-right: 1px solid white;
+    border-left: 1px solid white;
+
+    &:hover, &.active {
+      background-image: $agenda-tag-gradient;
+    }
+
+    @include media(MobileScreens) {
+      padding: 10px;
+    }
+  }
+}