workshops

Author: samipe

src/components/Talks2023.vue

@@ -1,7 +1,6 @@
 <template>
-  <h3 class="mt-large">Helsinki</h3>
   <div
-    v-for="talk in talks"
+    v-for="talk in items"
     :key="talk.code"
     class="row p-small mt-large col-sm-12"
     :class="talk.submission_type === 'Break' ? 'rounded bg-grey-dark' : 'card'">
@@ -13,17 +12,20 @@
           </div>
           <h3 class="mb-3xsmall title" :id="getSlug(talk.title)">
             <template v-if="talk.submission_type === 'Break'">
-              Break: {{ getShownTime(talk.slot.start) }} - {{ getShownTime(talk.slot.end) }}
+              Break ({{ getBreakLength(talk.slot.start, talk.slot.end) }} min)
+            </template>
+            <template v-else-if="talk.submission_type === 'Misc'">
+              {{ talk.description.en }}
             </template>
             <template v-else>
               {{ talk.title }}
             </template>
           </h3>
-          <p v-if="talk.submission_type !== 'Break'" class="type-small m-none">
-            {{ format(new Date(talk.slot.start), 'MMM dd') }} {{ getShownTime(talk.slot.start) }} - {{ getShownTime(talk.slot.end) }}
+          <p class="type-small m-none">
+            {{ format(new Date(talk.slot.start), 'MMM dd') }} {{ getShownTime(talk.slot.start) }} - {{ getShownTime(talk.slot.end) }} UTC+2
           </p>
         </div>
-        <div class="flex top">
+        <div v-if="talk.submission_type !== 'Misc'" class="flex top">
           <a v-if="!$store.state.isMobile && talk.submission_type !== 'Break'" title="get link to talk" :class="talk.submission_type === 'Keynote' && 'm-xsmall'" :href="`#${getSlug(talk.title)}`">
             <link-icon style="transform: translateY(2px)" />
           </a>
@@ -33,7 +35,7 @@
         </div>
       </div>
     </div>
-    <div v-if="talk.submission_type !== 'Break'" class="col-sm-12">
+    <div v-if="!['Break', 'Misc'].includes(talk.submission_type)" class="col-sm-12">
       <p
         class="relative"
         :class="!talk.expanded && talk.abstract && talk.abstract.length > 100 && 'intro-gradient'"
@@ -43,7 +45,7 @@
       </button>
       <div v-if="talk.expanded" v-html="parseText(talk.description)" />
     </div>
-    <div v-else v-html="parseText(talk.description.en)" />
+    <div v-else-if="talk.submission_type === 'Break'" v-html="parseText(talk.description.en)" />
     <div v-if="talk.submission_type !== 'Break'" class="col-sm-12">
       <div
         v-for="speaker in talk.speakers"
@@ -78,21 +80,25 @@
             <h4>
               {{ speaker.name }}
             </h4>
-            <p class="type-small mb-none" v-html="parseText(speaker.biography)" />
+            <div
+              class="type-small mb-none relative"
+              :class="!speaker.expanded ? 'bio-trunc bio-gradient' : ''">
+              <div v-html="parseText(speaker.biography)" :id="`${talk.code}${speaker.code}`" />
+            </div>
+            <button v-if="!speaker.expanded" @click="speaker.expanded = true" class="pl-2xsmall color-theme type-underline type-small" style="transform: translateY(0.25rem);">
+              Show more
+            </button>
           </div>
         </template>
       </div>
     </div>
   </div>
-  <div class="mt-large">
-    Online talks will be released soon, stay tuned!
-  </div>
 </template>
 
 <script>
 import * as DOMPurify from 'dompurify'
 import { marked } from 'marked'
-import { format } from 'date-fns'
+import { format, differenceInMinutes } from 'date-fns'
 import LinkIcon from './icons/LinkIcon.vue'
 
 export default {
@@ -101,14 +107,24 @@ export default {
     LinkIcon
   },
   props: {
-    talks: {
+    items: {
       type: Array,
       required: true
     }
   },
   data: () => ({
     publicPath: process.env.BASE_URL
   }),
+  mounted() {
+    this.items.forEach((talk) => {
+      if (!talk.speakers) return
+      talk.speakers.forEach((speaker) => {
+        const bioElement = document.getElementById(`${talk.code}${speaker.code}`)
+        if (bioElement === undefined) return
+        if (bioElement.offsetHeight < 100) speaker.expanded = true
+      })
+    })
+  },
   methods: {
     format,
     getShownTime(time) {
@@ -123,6 +139,9 @@ export default {
     getSlug(title) {
       if (!title) return ''
       return title.replace(/[ ]/g, '-').replace(/[^a-zA-Z0-9-]/g, '').toLowerCase()
+    },
+    getBreakLength(start, end) {
+      return differenceInMinutes(new Date(end), new Date(start))
     }
   }
 }

src/content/english/index.js

@@ -6,7 +6,7 @@ import archive from './archive'
 
 export default {
   langName: 'English',
-  newsBanner: '🎉 Helsinki talks released! 🎉',
+  newsBanner: '🎉 Workshops and talks released! 🎉',
   navbar: {
     links: [
       { text: 'RBCN23', name: 'Home' },

src/views/Home.vue

@@ -46,7 +46,14 @@
           </h3>
           January 17th
           <p class="type-small">
-            Workshops and tickets TBA!
+            Join a workshop for an ultimate hands-on learning experience in Helsinki.
+          </p>
+          <p class="type-small">
+            There are several different workshops so you'll surely find one that
+            caters your needs and experience level!
+          </p>
+          <p class="type-small color-theme">
+            Tickets available soon!
           </p>
         </div>
         <div class="card p-small mb-small">
@@ -68,17 +75,27 @@
           <p class="type-small">
             Held at <a href="https://goo.gl/maps/jEW5zoLuZgmca6D1A">Bio Rex</a> in city center.
           </p>
-          <p class="type-small">
-            <a href="/#talks">List of talks</a>
-          </p>
         </div>
       </div>
     </page-section>
     <page-section title-id="sponsors" title="Sponsors">
       <sponsors :sponsors="$tm('home.sponsors')" />
     </page-section>
+    <page-section title-id="workshops" title="Workshops">
+      <h3 class="mt-large">Helsinki, in-person</h3>
+      <talks-2023 v-if="workshops.length" :items="workshops" />
+      <div v-else>
+        Loading workshops...
+      </div>
+    </page-section>
     <page-section title-id="talks" title="Talks">
-      <talks-2023 v-if="talks.length" :talks="talks" />
+      <template v-if="talks.length">
+        <h3 class="mt-large">Helsinki</h3>
+        <talks-2023 :items="talks" />
+        <div class="mt-large">
+          Online talks will be released soon, stay tuned!
+        </div>
+      </template>
       <div v-else>
         Loading talks...
       </div>
@@ -107,7 +124,8 @@ export default {
     NewsBanner
   },
   data: () => ({
-    talks: []
+    talks: [],
+    workshops: []
   }),
   created() {
     Promise.all([
@@ -117,25 +135,36 @@ export default {
       .then(async([submissions, schedule]) => {
         const talks = await submissions.json()
         const { breaks } = await schedule.json()
-        return [...talks.results, ...breaks]
+        return [talks.results, breaks]
       })
-      .then((list) => {
-        this.talks = list
-          .filter(({ submission_type }) => !submission_type || ['Talk', 'Keynote'].includes(submission_type.en)) // eslint-disable-line
+      .then(([list, breaks]) => {
+        const talks = list
+          .filter(({ submission_type }) => submission_type.en && ['Talk', 'Keynote'].includes(submission_type.en)) // eslint-disable-line
+        const workshops = list
+          .filter(({ submission_type }) => submission_type.en && submission_type.en.includes('Workshop')) // eslint-disable-line
+        const breaksParsed = breaks
           .map((item) => ({
             ...item,
-            submission_type: item.submission_type?.en || 'Break',
-            slot: item.slot || { start: item.start, end: item.end }
+            submission_type: item.description.en.toLowerCase().includes('talk') ? 'Misc' : 'Break'
           }))
+
+        this.talks = [...talks, ...breaksParsed]
+          .map((item) => ({
+            ...item,
+            slot: item.slot || { start: item.start, end: item.end },
+            type: item.submission_type.en || item.submission_type
+          }))
+          .sort((a, b) => new Date(a.slot.start) < new Date(b.slot.start) ? -1 : 1)
+        this.workshops = workshops
           .sort((a, b) => new Date(a.slot.start) < new Date(b.slot.start) ? -1 : 1)
+
         this.$nextTick(() => {
           const hash = window.location.hash
           if (!hash || hash === '') return
           const el = document.getElementById(hash.slice(1))
           if (el) el.scrollIntoView()
         })
       })
-    // fa63d553-692a-4c25-9a0d-865af22271f3
     // fetch('https://cfp.robocon.io/api/events/robocon-2023/submissions/')
     //   .then((res) => res.json())
     //   fetch('https://pretalx.com/api/events/robocon-2023/schedules/latest/')