Printable version of the schedule

2024/gatsby-node.js

@@ -2,13 +2,15 @@
 
 const path = require(`path`)
 const { createFilePath } = require(`gatsby-source-filesystem`)
+const schedulePages = [undefined, "A", "B", "C", "D"]
 
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions
 
   return new Promise((resolve, reject) => {
     const mdTemplate = path.resolve(`./src/templates/markdown.tsx`)
     const speakerTemplate = path.resolve(`./src/templates/speaker.tsx`)
+    const scheduleTemplate = path.resolve(`./src/templates/schedule.tsx`)
     resolve(
       graphql(`
         query {
@@ -195,6 +197,15 @@ exports.createPages = ({ graphql, actions }) => {
             },
           })
         })
+        schedulePages.forEach(track => {
+          createPage({
+            path: track ? `schedule/${track}` : "schedule",
+            component: scheduleTemplate,
+            context: {
+              selectedTrack: track,
+            },
+          })
+        })
       }),
     )
   })

2024/src/components/Breadcrumb.tsx

@@ -17,6 +17,10 @@ const Text = styled.span`
   text-transform: uppercase;
   font-family: ${({ theme }) => theme.fonts.header};
   text-transform: uppercase;
+
+  @media print {
+    display: none;
+  }
 `
 
 export function Breadcrumb(props: Props) {

2024/src/components/EventSpeakers.tsx

@@ -23,7 +23,24 @@ const ByLineText = styled.span`
   color: ${({ theme }) => theme.colors.text};
   font-size: 0.8em;
   font-style: italic;
-  margin: 0.5em 0;
+
+  @media not print {
+    margin: 0.5em 0;
+  }
+
+  @media print {
+    margin: 0 0.5em 0 0;
+  }
+`
+
+const SpeakerEntry = styled.span`
+  display: flex;
+  flex-direction: column;
+
+  @media print {
+    flex-direction: row;
+    align-items: end;
+  }
 `
 
 type Props = {
@@ -67,17 +84,12 @@ export const EventSpeakers = ({ session: s }: Props) => {
 
   return (
     <>
-      <ByLineText>by</ByLineText>
-      {speakers.map((s, i) =>
-        i > 0 ? (
-          <React.Fragment key={i}>
-            <ByLineText>and</ByLineText>
-            <SpeakerName speaker={s} />
-          </React.Fragment>
-        ) : (
-          <SpeakerName key={i} speaker={s} />
-        ),
-      )}
+      {speakers.map((s, i) => (
+        <SpeakerEntry key={i}>
+          <ByLineText>{i == 0 ? "by" : "and"}</ByLineText>
+          <SpeakerName speaker={s} />
+        </SpeakerEntry>
+      ))}
     </>
   )
 }

2024/src/components/EventTime.tsx

@@ -18,6 +18,24 @@ const TalkTime = styled.span`
   font-family: ${({ theme }) => theme.fonts.header};
   font-size: 1.5rem;
   font-weight: bold;
+
+  @media print {
+    font-size: 1em;
+  }
+`
+
+const TalkStart = styled.span`
+  @media print {
+    padding-right: 0.75em;
+  }
+`
+const TalkEnd = styled.span`
+  &::before {
+    content: "-";
+  }
+  @media print {
+    display: none;
+  }
 `
 
 const TalkLength = styled.span`
@@ -26,6 +44,10 @@ const TalkLength = styled.span`
   font-size: 1.2rem;
   list-style: none;
   margin-left: 0.5rem;
+
+  @media print {
+    display: none;
+  }
 `
 
 export const EventTime = ({ session: s }: Props) => {
@@ -36,7 +58,8 @@ export const EventTime = ({ session: s }: Props) => {
   return (
     <>
       <TalkTime>
-        {s.startsAt}-{s.endsAt}
+        <TalkStart>{s.startsAt}</TalkStart>
+        <TalkEnd>{s.endsAt}</TalkEnd>
       </TalkTime>
       {diff > 0 && <TalkLength>{`(${diff} min)`}</TalkLength>}
     </>

2024/src/components/Footer.tsx

@@ -13,6 +13,10 @@ const Box = styled.footer`
   align-items: center;
   font-family: ${({ theme }) => theme.fonts.text};
   background-color: ${({ theme }) => theme.colors.border};
+
+  @media print {
+    display: none;
+  }
 `
 const LinksBox = styled.ul`
   display: flex;

2024/src/components/Header.tsx

@@ -27,6 +27,10 @@ const Box = styled.header`
   top: 0;
   height: 90px;
   box-shadow: 2px 0px 5px ${({ theme }) => theme.colors.shadow};
+
+  @media print {
+    display: none;
+  }
 `
 const InnerBox = styled.div`
   display: flex;

2024/src/components/HeaderMobile.tsx

@@ -25,6 +25,10 @@ const Box = styled.header`
   align-items: center;
   background-color: ${({ theme }) => theme.colors.base};
   box-shadow: 2px 0px 5px ${({ theme }) => theme.colors.shadow};
+
+  @media print {
+    display: none;
+  }
 `
 const InnerBox = styled.div`
   display: flex;

2024/src/components/InlineLink.tsx

@@ -0,0 +1,9 @@
+import { Link } from "gatsby"
+import styled from "styled-components"
+
+export const InlineLink = styled(Link)`
+  text-decoration: none;
+  font-family: ${({ theme }) => theme.fonts.text};
+  color: inherit;
+  text-align: left;
+`

2024/src/components/Layout.tsx

@@ -28,6 +28,9 @@ const GlobalStyle = createGlobalStyle`
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  @page {
+    margin: .5cm 1.2cm;
+  }
 `
 
 type Props = {
@@ -71,6 +74,10 @@ const BackToTopButton = styled.button`
   padding: 10px 24px;
   color: white;
   background-color: ${({ theme }) => theme.colors.primary};
+
+  @media print {
+    display: none;
+  }
 `
 
 function shouldForwardProp(_propName: string, _target: WebTarget) {

2024/src/components/ResponsiveBox.tsx

@@ -7,10 +7,13 @@ export type Props = {
 
 const Box = styled.div`
   width: 100%;
-  max-width: ${({ theme }) => theme.innerWidth};
   padding: 2em 1em 5em;
   margin: 0 auto;
   box-sizing: border-box;
+
+  @media not print {
+    max-width: ${({ theme }) => theme.innerWidth};
+  }
 `
 
 export function ResponsiveBox(props: Props) {

2024/src/components/RoomLegend.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import styled from "styled-components"
 import { useTranslation } from "react-i18next"
 import { Rooms, rooms } from "../util/misc"
+import { InlineLink } from "./InlineLink"
 
 const Box = styled.div`
   display: flex;
@@ -15,24 +16,47 @@ const Box = styled.div`
     gap: 1em;
   }
 `
-const RoomBox = styled.div`
+const RoomBox = styled(InlineLink)<{ disabled: boolean }>`
   flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
+  ${({ disabled }) =>
+    disabled
+      ? `
+  opacity: 0.5;
+
+  @media print {
+    display: none;
+    font-size: 0.5rem;
+  }
+  `
+      : ""}
 `
-const Circle = styled.div<{ area: Rooms }>`
+const Circle = styled.div<{ track: Rooms }>`
   width: 30px;
   height: 30px;
   border-radius: 30px;
-  background-color: ${({ area, theme }) => theme.colors[`room${area}Border`]};
+  background-color: ${({ track, theme }) => theme.colors[`room${track}Border`]};
+
+  @media print {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    width: 2.5em;
+    height: 2.5em;
+    border-radius: 2.5em;
+  }
 `
 const Text = styled.span`
   flex: 1;
   margin-left: 10px;
   font-weight: bold;
   font-size: 1.8rem;
   font-family: ${({ theme }) => theme.fonts.text};
+
+  @media print {
+    font-size: 2.5em;
+  }
 `
 const SubText = styled.span`
   flex: 1;
@@ -50,12 +74,21 @@ const TextBox = styled.div`
 
 type RoomProps = {
   track: Rooms
+  "selected-track"?: Rooms | undefined
 }
-export const Room = ({ track }: RoomProps) => {
+
+export const Room = ({ track, "selected-track": selectedTrack }: RoomProps) => {
   const { t } = useTranslation()
   return (
-    <RoomBox key={track}>
-      <Circle area={track} />
+    <RoomBox
+      to={
+        selectedTrack && selectedTrack === track
+          ? "/schedule"
+          : `/schedule/${track}`
+      }
+      disabled={!!selectedTrack && track != selectedTrack}
+    >
+      <Circle track={track} />
       <TextBox>
         <Text>{t(`room${track}`)}</Text>
         <SubText>{t(`room${track}Sub`)}</SubText>
@@ -64,10 +97,12 @@ export const Room = ({ track }: RoomProps) => {
   )
 }
 
-export const RoomLegend = () => (
+export type RoomLegendProps = Pick<RoomProps, "selected-track">
+
+export const RoomLegend = (props: RoomLegendProps) => (
   <Box>
     {rooms.map((track, i) => (
-      <Room key={i} track={track} />
+      <Room key={i} track={track} {...props} />
     ))}
   </Box>
 )

2024/src/components/Tags.tsx

@@ -22,6 +22,10 @@ const TagList = styled.ul`
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.5em;
   }
+
+  @media print {
+    display: none;
+  }
 `
 
 type TagsProps = {

2024/src/components/Title.tsx

@@ -11,6 +11,10 @@ const Box = styled.h1`
   font-size: ${({ theme }) => theme.fontSizes.title};
   text-transform: none;
   font-family: ${({ theme }) => theme.fonts.header};
+
+  @media print {
+    display: none;
+  }
 `
 
 export function Title(props: Props) {

2024/src/data/talks.yaml

@@ -1,5 +1,5 @@
 # Properties common to all types:
-# - kind: One of OPEN, OPENING_TALK, TALK, BREAK, CLOSING_TALK, AFTER_PARTY
+# - kind: One of OPEN, OPENING_TALK, TALK, BREAK, CLOSING_TALK, AFTER_PARTY, CLOSED
 #
 # Properties that need to be defined by the user:
 # - uuid: You can set any value you like, but it's better to set the UUID of the speaker.
@@ -53,6 +53,11 @@
   kind: STREAM
   stream: A
   youtube: ""
+- date: day1
+  startsAt: "10:00"
+  endsAt: "10:30"
+  track: D
+  kind: CLOSED
 - uuid: sahil-khokhar
   date: day1
   startsAt: "10:10"
@@ -160,6 +165,11 @@
   speakerIDs:
     - anushka-trivedi
   youtube: ""
+- date: day1
+  startsAt: "10:40"
+  endsAt: "11:00"
+  track: D
+  kind: CLOSED
 - date: day1
   startsAt: "11:00"
   endsAt: "11:10"
@@ -440,6 +450,11 @@
   track: C
   kind: STREAM
   stream: A
+- date: day1
+  startsAt: "16:40"
+  endsAt: "17:40"
+  track: D
+  kind: CLOSED
 - date: day1
   startsAt: "17:40"
   endsAt: "17:50"
@@ -482,6 +497,11 @@
   track: A
   kind: CLOSING_TALK
   youtube: ""
+- date: day1
+  startsAt: "17:50"
+  endsAt: "18:40"
+  track: D
+  kind: CLOSED
 - date: day1
   startsAt: "18:30"
   endsAt: "18:40"