updated info to program

robotframework · Nov 12, 2024 · 6ad854c · 6ad854c
1 parent c074cf6
commit 6ad854c
Show file tree

Hide file tree

Showing 10 changed files with 277 additions and 154 deletions.
diff --git a/docs/assets/index-rfMpnHNY.js → docs/assets/index-CCRmWWb_.js b/docs/assets/index-rfMpnHNY.js → docs/assets/index-CCRmWWb_.js
diff --git a/docs/assets/index-DxosgorO.css b/docs/assets/index-DxosgorO.css
diff --git a/docs/assets/index-MuU46rCs.css b/docs/assets/index-MuU46rCs.css
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RoboCon - Robot Framework Conference</title>
     <script defer src="/spa.js"></script>
-    <script type="module" crossorigin src="/assets/index-rfMpnHNY.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-MuU46rCs.css">
+    <script type="module" crossorigin src="/assets/index-CCRmWWb_.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DxosgorO.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/css/elements.css b/src/assets/css/elements.css
@@ -27,11 +27,12 @@
 .badge {
   padding: 0 0.75rem;
   background-color: #fff;
+  border-radius: 1rem;
   display: block;
   width: fit-content;
   font-size: 0.85rem;
   font-weight: 600;
-  box-shadow: 1px 1px 0 var(--color-theme);
+  box-shadow: 2px 2px 0 var(--color-theme);
 }
 
 details {

diff --git a/src/assets/css/text.css b/src/assets/css/text.css
@@ -161,6 +161,12 @@ p {
   font-size: var(--type-body);
   margin: var(--size-xsmall) 0;
 }
+p:first-child {
+  margin-top: 0;
+}
+p:last-child {
+  margin-bottom: 0;
+}
 
 
 div > ul {
@@ -173,6 +179,10 @@ ul {
   margin-block-end: 0;
 }
 
+ol {
+  padding-left: 2rem;
+}
+
 .ul-none {
   list-style-type: none !important;
   padding: unset;

diff --git a/src/components/PretalxSchedule.vue b/src/components/PretalxSchedule.vue
@@ -50,7 +50,7 @@ import type { PretalxSchedule } from '@/content';
 import { computed, ref, type PropType } from 'vue';
 import { useFetch } from '@vueuse/core'
 import TalkItem from './TalkItem.vue'
-import type { ScheduleResponse } from '@/types/pretalx';
+import type { PretalxEvent, PretalxSession, ScheduleResponse, SubmissionsResponse } from '@/types/pretalx';
 import {getDate} from 'date-fns'
 
 
@@ -63,17 +63,22 @@ const props = defineProps({
 const shownTalks = ref<'live' | 'online'>('live')
 
 const { isFetching, error, data } = useFetch(props.content.url).get().json()
+const { isFetching: isFetchingSub, error: errorSub, data: dataSub } = useFetch('https://cfp.robocon.io/api/events/robocon-2025/submissions/?limit=50').get().json()
 
 const sortTalks = (talks: ScheduleResponse['slots']) => talks.sort((a, b) => new Date(a.slot.start) < new Date(b.slot.start) ? -1 : 1)
 
 const talks = computed(() => {
   if (isFetching.value || error.value) return undefined
+  if (isFetchingSub.value || errorSub.value) return undefined
   const schedule = data.value as ScheduleResponse
+  const submissions = dataSub.value as SubmissionsResponse
+
+  const addSubmissionData = (event: PretalxEvent): PretalxEvent & PretalxSession => ({...event, ...submissions.results.find((s) => s.code === event.code)})
   return {
-    live: sortTalks(schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon')),
-    workshop: sortTalks(schedule.slots.filter((talk) => talk?.submission_type.en === 'Workshop - Full Day')),
-    tutorial: sortTalks(schedule.slots.filter((talk) => talk?.submission_type.en === 'Tutorial')),
-    online: sortTalks(schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon Online' && ['PreRecorded-Talk', 'Talk'].includes(talk.submission_type.en)))
+    live: sortTalks(schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon').map((event) => addSubmissionData(event))),
+    workshop: sortTalks(schedule.slots.filter((talk) => talk?.submission_type.en === 'Workshop - Full Day').map((event) => addSubmissionData(event))),
+    tutorial: sortTalks(schedule.slots.filter((talk) => talk?.submission_type.en === 'Tutorial').map((event) => addSubmissionData(event))),
+    online: sortTalks(schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon Online' && ['PreRecorded-Talk', 'Talk'].includes(talk.submission_type.en)).map((event) => addSubmissionData(event)))
   }
 })
   // .sort((a, b) => {

diff --git a/src/components/SpeakerItem.vue b/src/components/SpeakerItem.vue
@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="speaker"
+    :class="isOpen ? 'grow' : hasBio ? 'clickable' : ''"
+    @click="isOpen = hasBio || isOpen">
+    <div class="flex middle p-2xsmall">
+      <div class="speaker-img mr-small" :class="!speaker.avatar && 'placeholder'">
+        <img :src="speaker.avatar ?? '/img/RF.svg'" :style="!speaker.avatar && 'opacity: 0.7; border-radius: 0;'">
+      </div>
+      <div class="speaker-name">
+        {{ speaker.name.split(' ').join('\n')
+          .replace('de\n', 'de ')
+        }}
+      </div>
+    </div>
+    <div
+      v-if="speaker.biography"
+      class="relative type-small p-xsmall pt-none"
+      :class="isOpen ? '' : 'bio-trunc bio-gradient mb-xsmall'">
+      <div v-html="renderMarkdown(speaker.biography)" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType } from 'vue';
+import { renderMarkdown } from 'Content/renderContent';
+import type { Speaker } from '@/types/pretalx';
+
+const props = defineProps({
+  speaker: Object as PropType<Speaker>
+})
+
+const isOpen = ref(false)
+const hasBio = props.speaker.biography && props.speaker.biography !== ''
+</script>
+
+<style scoped>
+.speaker {
+  overflow: hidden;
+  box-shadow: 4px 4px 0px var(--color-theme);
+  background-color: var(--color-background);
+  transition: transform 0.3s;
+  height: fit-content;
+
+  max-width: 60%;
+  flex-basis: calc(33% - 1rem);
+  @media screen and (max-width: 1024px) {
+    flex-basis: calc(50% - 1rem);
+  }
+  @media screen and (max-width: 701px) {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(1.05);
+      transform: scale(1.01);
+    }
+  }
+
+  &.grow {
+    flex-grow: 1;
+  }
+}
+.speaker-img {
+  width: 4rem;
+  position: relative;
+
+  img {
+    width: 100%;
+    border-radius: 50%;
+    display: block;
+    aspect-ratio: 1;
+    object-fit: cover;
+    border-right: none;
+  }
+}
+.speaker-img:not(.placeholder)::after {
+  content: " ";
+  box-shadow: inset 0px 0px 6px #00000099;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.speaker-name {
+  font-family: 'Courier Code';
+  font-weight: 700;
+  white-space: pre;
+  font-size: 1.25rem;
+  font-variation-settings: "wght" 700;
+  color: var(--color-grey-dark);
+  line-height: 1.25;
+}
+.bio-trunc {
+  height: 4rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+}
+.bio-gradient::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3rem;
+  background: linear-gradient(0deg, var(--color-white), transparent);
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/TalkItem.vue b/src/components/TalkItem.vue
@@ -1,6 +1,6 @@
 <template>
   <article class="event mb-medium p-medium pt-none">
-    <div class="pt-xsmall pb-2xsmall" style="margin-left: -0.5rem">
+    <div class="pt-xsmall pb-2xsmall" style="margin-left: -0.75rem">
       <div class="badge">
         <template v-if="event.type === 'break'">
           Break
@@ -13,37 +13,34 @@
         </template>
       </div>
     </div>
-    <h1 class="mb-2xsmall">
-      {{ event.type === 'talk' ? event.title : event.description.en }}
+    <h1 v-if="event.type === 'talk'" class="mb-2xsmall">
+      {{ event.title }}
     </h1>
-    <div class="type-small">
+    <h1 v-else-if="event.type === 'break'" class="mb-2xsmall">
+      {{ event.description }}
+    </h1>
+    <div class="type-small mb-xsmall">
       <template v-if="event.type === 'talk'">
         {{ format(new Date(event.slot.start), 'LLL dd kk:mm') }}
       </template>
       <template v-else-if="event.type === 'break'">
         {{ format(new Date(event.start), 'LLL dd kk:mm') }}
       </template>
     </div>
-    <div v-if="event.type === 'talk'" v-html="renderMarkdown(event.abstract)" />
+    <div v-if="event.type === 'talk'">
+      <div v-html="renderMarkdown(event.abstract)" class="mb-small" />
+      <details v-if="event.description !== ''" class="mb-medium">
+        <summary>
+          More info
+        </summary>
+        <div v-html="renderMarkdown(event.description)" />
+      </details>
+    </div>
     <div v-if="event.type === 'talk'" class="row gap-sm">
-      <div
+      <SpeakerItem
         v-for="speaker in event.speakers"
         :key="`${speaker.code}${event.code}`"
-        class="speaker">
-        <div class="row middle p-2xsmall">
-          <div class="speaker-img mr-small" :class="!speaker.avatar && 'placeholder'">
-            <img :src="speaker.avatar ?? '/img/RF.svg'" :style="!speaker.avatar && 'opacity: 0.7;'">
-          </div>
-          <div class="font-code type-underline speaker-name">
-            {{ speaker.name.split(' ').join('\n')
-              .replace('de\n', 'de ')
-            }}
-          </div>
-        </div>
-        <div>
-          {{ speaker.biography }}
-        </div>
-      </div>
+        :speaker="speaker" />
     </div>
   </article>
 </template>
@@ -53,70 +50,32 @@ import { format, differenceInMinutes } from 'date-fns';
 import { renderMarkdown } from 'Content/renderContent';
 import { type PropType } from 'vue'
 import type { PretalxEvent, Break } from '@/types/pretalx';
+import SpeakerItem from './SpeakerItem.vue'
 
 
 const getEventType = (type: string) => {
   if (type === 'PreRecorded-Talk') return 'Talk'
   return type
 }
 
-const props = defineProps({
+defineProps({
   event: Object as PropType<PretalxEvent | Break>
 })
 
-
 </script>
 
 <style scoped>
+h1 {
+  line-height: 1.35;
+}
 .event {
   border: solid 0px var(--color-theme-secondary);
   border-left-width: 6px;
   background-color: var(--color-background-secondary);
   /* box-shadow: -4px 0px 1px var(--color-theme); */
 }
-.speaker {
-  overflow: hidden;
-  box-shadow: 4px 4px 0px var(--color-theme);
-  background-color: var(--color-background);
-
-  flex-basis: calc(33% - 1rem);
-  @media screen and (max-width: 1024px) {
-    flex-basis: calc(50% - 1rem);
-  }
-  @media screen and (max-width: 701px) {
-    flex-basis: 100%;
-  }
+details {
+  width: fit-content;
 }
-.speaker-img {
-  width: 4rem;
-  position: relative;
 
-  img {
-    width: 100%;
-    border-radius: 1rem;
-    display: block;
-    aspect-ratio: 1;
-    object-fit: cover;
-    border-right: none;
-  }
-}
-.speaker-img:not(.placeholder)::after {
-  content: " ";
-  box-shadow: inset 0px 0px 6px #00000099;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 1rem;
-}
-.speaker-name {
-  font-family: 'Source Code Pro';
-  white-space: pre;
-  font-size: 1rem;
-  font-variation-settings: "wght" 700;
-  color: var(--color-grey-dark);
-  line-height: 1.25;
-  text-decoration: underline;
-}
 </style>