feat: closed entry and better

2024/src/components/EventSpeakers.tsx

@@ -29,7 +29,7 @@ const ByLineText = styled.span`
   }
 
   @media print {
-    margin: 0 .5em 0 0;
+    margin: 0 0.5em 0 0;
   }
 `
 
@@ -84,12 +84,12 @@ export const EventSpeakers = ({ session: s }: Props) => {
 
   return (
     <>
-      {speakers.map((s, i) =>
+      {speakers.map((s, i) => (
         <SpeakerEntry key={i}>
-          <ByLineText>{i == 0 ? 'by' : 'and' }</ByLineText>
+          <ByLineText>{i == 0 ? "by" : "and"}</ByLineText>
           <SpeakerName speaker={s} />
         </SpeakerEntry>
-      )}
+      ))}
     </>
   )
 }

2024/src/components/EventTime.tsx

@@ -26,7 +26,7 @@ const TalkTime = styled.span`
 
 const TalkStart = styled.span`
   @media print {
-    padding-right: .75em;
+    padding-right: 0.75em;
   }
 `
 const TalkEnd = styled.span`

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"

2024/src/data/types.ts

@@ -10,6 +10,7 @@ export type TalkType = {
     | "BREAK"
     | "CLOSING_TALK"
     | "AFTER_PARTY"
+    | "CLOSED"
   title: string
   titleJa: string
   description: string

2024/src/i18n/en.ts

@@ -69,6 +69,7 @@ export const en = {
     "talk.open": "Doors Open",
     "talk.opening talk": "Opening Talk",
     "talk.stream": " (Stream)",
+    "talk.closed": "(Closed)",
     "talk.Break": "Break",
     "talk.closing talk": "Closing Talk",
     "talk.party": "Party",

2024/src/i18n/ja.ts

@@ -56,6 +56,7 @@ export const ja: {
     "talk.opening talk": "オープニング/開場説明",
     "talk.opening talk stream": "オープニング/開場説明",
     "talk.stream": " ストリーム",
+    "talk.closed": "閉館",
     "talk.Break": "休憩",
     "talk.closing talk": "クロージング",
     "talk.party": "懇親会",

2024/src/templates/schedule.tsx

@@ -69,7 +69,7 @@ const Grid = styled.div<{
   }
 
   @media print {
-    margin: 0.5em 0 0 .55em;
+    margin: 0.5em 0 0 0.55em;
     grid-template-rows: ${({ "starts-at": startsAt, "ends-at": endsAt }) =>
       rangeTimeBoxes(
         5,
@@ -92,8 +92,12 @@ const Area = styled(OptionalLink)<{
   padding: 1em;
   text-decoration: none;
   position: relative;
-  grid-column: ${({ track, "$is-break": isBreak, "selected-track": selectedTrack }) =>
-    !selectedTrack && isBreak ? `A / ${dummyTrack}` : track};
+  grid-column: ${({
+    track,
+    "$is-break": isBreak,
+    "selected-track": selectedTrack,
+  }) =>
+    !selectedTrack && isBreak && track == "A" ? `A / ${dummyTrack}` : track};
   grid-row: ${({ "starts-at": startsAt, "ends-at": endsAt }) =>
     `t-${escapeTime(startsAt)} / t-${escapeTime(endsAt)}`};
   border-left: 5px solid;
@@ -109,20 +113,23 @@ const Area = styled(OptionalLink)<{
     margin-bottom: 1em;
     flex-direction: column;
     background-color: ${({ track, "$is-break": isBreak, theme, to }) =>
-    rgba(
-      isBreak ? theme.colors.disabled : theme.colors[`room${track}`],
-      to ? 1.0 : 0.4,
-    )};
-    $::before{
-      content: "${({ track }) => track}";
-      font-family: ${({ theme }) => theme.fonts.text};
+      rgba(
+        isBreak ? theme.colors.disabled : theme.colors[`room${track}`],
+        to ? 1.0 : 0.4,
+      )};
+    ${({ track, theme, "$is-break": isBreak }) =>
+      isBreak
+        ? ""
+        : `&::before {
+      content: "${track}";
+      font-family: ${theme.fonts.text};
       font-weight: bold;
-      color: ${({ theme }) => theme.colors.base};
+      color: ${theme.colors.base};
       font-size: 0.7em;
       position: absolute;
-      font-family: ${({ theme }) => theme.fonts.text};
+      font-family: ${theme.fonts.text};
       font-weight: bold;
-      color: ${({ theme }) => theme.colors.base};
+      color: ${theme.colors.base};
       font-size: 0.7em;
       top: -8px;
       left: -10px;
@@ -132,14 +139,15 @@ const Area = styled(OptionalLink)<{
       width: 16px;
       height: 16px;
       border-radius: 100%;
-      background-color: ${({ track, "$is-break": isBreak, theme }) =>
-        isBreak ? theme.colors.disabledText : theme.colors[`room${track}Border`]};
-    }
+      background-color: ${
+        isBreak ? theme.colors.disabledText : theme.colors[`room${track}Border`]
+      };
+    }`}
   }
   @media print {
-    margin-bottom: .3em;
+    margin-bottom: 0.3em;
     flex-direction: row;
-    padding: 0 .75em;
+    padding: 0 0.75em;
     align-items: start;
     border-color: ${({ track, "$is-break": isBreak, theme }) =>
       isBreak ? theme.colors.disabledText : theme.colors[`room${track}Border`]};
@@ -217,9 +225,12 @@ const AreaTitle = styled.div<{ isSidetrack: boolean }>`
 
   @media print {
     margin: 0;
-    ${({ isSidetrack }) => isSidetrack ? `
+    ${({ isSidetrack }) =>
+      isSidetrack
+        ? `
       display: none;
-    ` : ''}
+    `
+        : ""}
   }
 `
 const AreaFooter = styled.div`
@@ -375,6 +386,9 @@ export default function SchedulePage({
       case "OPENING_TALK": {
         return i18n.t("talk.opening talk")
       }
+      case "CLOSED": {
+        return i18n.t("talk.closed")
+      }
       case "STREAM": {
         return `${getStreamSession(talk, sessions) ?? "???"}${i18n.t("talk.stream")}`
       }
@@ -469,7 +483,7 @@ export default function SchedulePage({
                       $is-break={s.break || false}
                       selected-track={selectedTrack}
                     >
-                      <AreaTitle isSidetrack={!selectedTrack && s.track != 'A'}>
+                      <AreaTitle isSidetrack={!selectedTrack && s.track != "A"}>
                         <EventTime session={s} />
                       </AreaTitle>
                       <EventEntry>

2024/src/util/generateTimetable.ts

@@ -31,7 +31,8 @@ export function generateTimetable({
   const talksByTimeboxes = mapValues(talksByDay, (talks): Timebox[] => {
     const sessions = sortBy(talks, talk => talk.track).map(talk => ({
       ...talk,
-      break: talk.kind === "BREAK",
+      break:
+        talk.kind === "BREAK" || talk.kind === "OPEN" || talk.kind === "CLOSED",
       speakers:
         talk.speakerIDs?.map(speakerID => {
           const speaker = lookup[speakerID]