Fresh look based one schedule from 2024.

Author: nikoshell

.env.development

@@ -1,2 +1,3 @@
 EP_SESSIONS_API="https://static.europython.eu/programme/ep2025/releases/current/sessions.json"
 EP_SPEAKERS_API="https://static.europython.eu/programme/ep2025/releases/current/speakers.json"
+EP_SCHEDULE_API="https://gist.githubusercontent.com/nikoshell/55ab27b228a31130134f689429e93bf5/raw/a1542efb298366645ad44ae9087772671646d51b/schedule.json"

src/components/schedule/break.astro

@@ -19,7 +19,11 @@ const { time, title, style }: Props = Astro.props;
     color: var(--color-text);
     display: flex;
     align-items: center;
-    font-weight: bold;
+    text-align: center;
+    justify-items: center;
+    /*font-weight: bold;*/
     padding-left: 8px;
+    font-size:1rem;
+    background-color: #FCFBFA;
   }
 </style>

src/components/schedule/session.astro

@@ -25,6 +25,7 @@ const hasFooter = hasRoom || hasSpeakers;
 ---
 
 <div class:list={["session", session.level, session.sessionType]} style={style}>
+  <!--
   <header>
     {
       session.sessionType === "poster" && (
@@ -42,9 +43,10 @@ const hasFooter = hasRoom || hasSpeakers;
         </>
       )
     }
-  </header>
+    </header>
+    -->
 
-  <div class="time">
+  <!--   <div class="time">
     <span class="sr-only">Session start:</span>
     <time>
       {formatInTimeZone(session.start, "Europe/Prague", "HH:mm")}
@@ -54,6 +56,7 @@ const hasFooter = hasRoom || hasSpeakers;
     <span class="sr-only">Session end:</span>
     <time>{formatInTimeZone(session.end, "Europe/Prague", "HH:mm")}</time>
   </div>
+  -->
 
   <h2>{session.title}</h2>
 
@@ -86,7 +89,13 @@ const hasFooter = hasRoom || hasSpeakers;
     font-weight: bold;
     display: grid;
     flex-direction: column;
-    background-color: var(--color-body-background);
+    /*background-color: var(--color-body-background);*/
+
+    background-color: color-mix(
+      in srgb,
+      var(--color-body-background),
+      white 30%
+    );
     position: relative;
 
     grid-template-areas:
@@ -120,6 +129,7 @@ const hasFooter = hasRoom || hasSpeakers;
     bottom: 0;
     left: 0;
     z-index: 1;
+
   }
 
   footer :global(a) {
@@ -135,7 +145,7 @@ const hasFooter = hasRoom || hasSpeakers;
       display: flex;
       flex-direction: column;
       align-items: center;
-      border-right: 1px solid var(--color-text);
+      /*border-right: 1px solid var(--color-text);*/
       gap: 4px;
 
       & .minus {
@@ -169,7 +179,7 @@ const hasFooter = hasRoom || hasSpeakers;
     background-color: color-mix(
       in srgb,
       var(--color-body-background),
-      white 40%
+      white 50%
     );
   }
 
@@ -190,13 +200,13 @@ const hasFooter = hasRoom || hasSpeakers;
   }
 
   footer.has-speakers {
-    border-top: 1px solid var(--color-text);
+    /*border-top: 1px solid var(--color-text);*/
     margin-top: auto;
   }
 
   header {
     background-color: var(--color-primary);
-    border-bottom: 2px solid var(--color-primary);
+    /*border-bottom: 2px solid var(--color-primary);*/
     color: black;
     text-transform: capitalize;
     font-size: 0.8em;

src/content/config.ts

@@ -1,5 +1,5 @@
 import { defineCollection, reference, z } from "astro:content";
-import { loadData } from "../utils/dataLoader";
+import { loadData } from "@utils/dataLoader";
 
 const mode = import.meta.env.MODE;
 console.log(`\x1b[35m[EP]\x1b[0m Current MODE: \x1b[1m\x1b[34m${mode}\x1b[0m`);
@@ -158,18 +158,59 @@ const sessions = defineCollection({
   }),
 });
 
+//const days = defineCollection({
+//  type: "data",
+//  schema: z.object({
+//    rooms: z.array(z.string()),
+//    events: z.array(
+//      z.object({
+//        rooms: z.array(z.string()),
+//        event_type: z.string(),
+//        code: z.string().optional(),
+//        title: z.string(),
+//        slug: z.string().optional(),
+//        session_type: z.string().optional(), // why?
+//        speakers: z
+//          .array(
+//            z.object({
+//              code: z.string(),
+//              name: z.string(),
+//              website_url: z.string(),
+//            })
+//          )
+//          .optional(),
+//        tweet: z.string().optional().nullable(),
+//        level: z.string().optional().nullable(),
+//        start: z.string(),
+//        website_url: z.string().optional().nullable(),
+//        duration: z.number(),
+//      })
+//    ),
+//  }),
+//});
+
 const days = defineCollection({
-  type: "data",
+  loader: async (): Promise<any[]> => {
+    const rawSchedule = await loadData(import.meta.env.EP_SCHEDULE_API);
+    const schedule = rawSchedule.default ?? rawSchedule;
+
+    return Object.entries(schedule.days).map(([date, data]: [string, any]) => ({
+      id: date,
+      ...data,
+    }));
+  },
   schema: z.object({
-    rooms: z.array(z.string()),
+    id: z.string(), // the date, like "2024-07-08"
+    rooms: z.array(z.string()).optional(),
     events: z.array(
       z.object({
-        rooms: z.array(z.string()),
-        event_type: z.string(),
         code: z.string().optional(),
-        title: z.string(),
+        duration: z.number(),
+        event_type: z.string(),
+        level: z.string().optional().nullable(),
+        rooms: z.array(z.string()),
+        session_type: z.string().optional(),
         slug: z.string().optional(),
-        session_type: z.string().optional(), // why?
         speakers: z
           .array(
             z.object({
@@ -179,11 +220,11 @@ const days = defineCollection({
             })
           )
           .optional(),
-        tweet: z.string().optional().nullable(),
-        level: z.string().optional().nullable(),
         start: z.string(),
+        title: z.string(),
+        track: z.string().optional().nullable(),
+        tweet: z.string().optional().nullable(),
         website_url: z.string().optional().nullable(),
-        duration: z.number(),
       })
     ),
   }),

src/layouts/Layout.astro

@@ -15,6 +15,13 @@ const { title, description } = Astro.props;
 <html lang="en">
   <head>
     <BaseHead title={title} description={description} />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap" rel="stylesheet">
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap" rel="stylesheet">
+
   </head>
 
   <div class="flex flex-col items-stretch min-h-screen">

src/layouts/ScheduleLayout.astro

@@ -0,0 +1,47 @@
+---
+import Header from "../components/header/header.astro";
+import Footer from "../components/footer.astro";
+import BaseHead from "../components/BaseHead.astro";
+
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead title={title} description={description} />
+  </head>
+
+  <div class="flex flex-col items-stretch min-h-screen">
+    <a href="#main-content" class="sr-only"> Skip to main content</a>
+
+    <Header />
+
+    <main id="main-content" class="layout-wrapper2 overflow-x-clip">
+      <slot />
+    </main>
+
+    <div class="mt-auto">
+      <Footer />
+    </div>
+  </div>
+</html>
+
+<style>
+.layout-wrapper2 {
+  max-width: 800px;
+  margin:auto;
+  display: grid;
+  grid-template-columns: 1fr (770px, 100%) 1fr !important;
+}
+
+.layout-wrapper2 > * {
+  grid-column: 2;
+}
+
+</style>

src/pages/schedule.astro

@@ -0,0 +1,38 @@
+---
+import { getCollection } from "astro:content";
+
+const days = await getCollection("days");
+
+const availableDays = days.map((day) => new Date(day.id));
+---
+
+<script type="module" define:vars={{ availableDays }}>
+  // Return timestamp of date without time
+  function normalizeDate(date) {
+    date = new Date(date);
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  }
+
+  const currentDate = normalizeDate(new Date());
+
+  let closestDate = availableDays[0];
+  let minDiff = Math.abs(normalizeDate(closestDate) - currentDate);
+
+  for (let i = 1; i < availableDays.length; i++) {
+    const normalizedDate = normalizeDate(availableDays[i]);
+    const diff = Math.abs(normalizedDate - currentDate);
+
+    if (diff < minDiff) {
+      closestDate = availableDays[i];
+      minDiff = diff;
+    }
+  }
+
+  const redirectUrl = `/schedule/${new Date(closestDate).toISOString().slice(0, 10)}`;
+  window.location.href = redirectUrl;
+</script>
+
+<noscript>
+  <!-- Fallback for users with JavaScript disabled, what a shame :D -->
+  <meta http-equiv="refresh" content="0;url=/schedule/2024-07-08">
+</noscript>