Skip to content

Commit

Permalink
program fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@samipe
samipe committed Nov 12, 2024
1 parent ed1ad80 commit c074cf6
Show file tree
Hide file tree
Showing 8 changed files with 342 additions and 297 deletions.
134 changes: 0 additions & 134 deletions docs/assets/index-BY8tUSzy.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion docs/assets/index-7KWCqX7L.css → docs/assets/index-MuU46rCs.css
View file

Large diffs are not rendered by default.

134 changes: 134 additions & 0 deletions docs/assets/index-rfMpnHNY.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-BY8tUSzy.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-7KWCqX7L.css">
<script type="module" crossorigin src="/assets/index-rfMpnHNY.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-MuU46rCs.css">
</head>
<body>
<div id="app"></div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@
</div>
</div>
<div class="flex">
<!-- <router-link
<router-link
:to="{ path: '/program' }"
class="router-link mx-xsmall type-no-underline type-small">
Program
</router-link> -->
</router-link>
<router-link
:to="{ path: '/sponsor' }"
class="router-link mx-xsmall type-no-underline type-small">
Expand Down
181 changes: 23 additions & 158 deletions src/components/PretalxSchedule.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
HELSINKI
</div>
<div class="type-xsmall">
FEB 13th - 15th
FEB 12th - 15th
</div>
</button>
<button @click="shownTalks = 'online'" class="event-select" :class="shownTalks === 'online' && 'active'">
<div class="type-xlarge">
ONLINE
</div>
<div class="type-xsmall">
MAR 05th - 06th
MAR 04th - 06th
</div>
</button>
</div>
Expand All @@ -25,138 +25,54 @@
error loading schedule
</div>
<div v-else-if="data && talks">
<article v-for="event in talks[shownTalks]" :key="event.code" class="event mb-medium p-medium pt-none">
<div class="pt-xsmall pb-2xsmall" style="margin-left: -0.5rem">
<div class="badge">
{{ getEventType(event.submission_type.en) }} ({{ differenceInMinutes(new Date(event.slot.end), new Date(event.slot.start)) }}min)
</div>
</div>
<h1 class="mb-2xsmall">
{{ event.title }}
</h1>
<div class="type-small">
{{ format(new Date(event.slot.start), 'LLL dd kk:mm') }}

</div>
<div v-html="renderMarkdown(event.abstract)" />
<div class="row gap-sm">
<div
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>
</div>

</article>
<template v-if="shownTalks === 'live'">
<h2>Workshops</h2>
<TalkItem v-for="event in talks.workshop" :key="event.code" :event="{...event, type: 'talk'}" />
<h2>Talks - Day 1</h2>
<TalkItem v-for="event in talks.live.filter((event) => getDate(new Date(event.slot.start)) === 13)" :key="event.code" :event="{...event, type: 'talk'}" />
<h2>Talks - Day 2</h2>
<TalkItem v-for="event in talks.live.filter((event) => getDate(new Date(event.slot.start)) === 14)" :key="event.code" :event="{...event, type: 'talk'}" />
</template>
<template v-else-if="shownTalks === 'online'">
<h2>Tutorials</h2>
<TalkItem v-for="event in talks.tutorial" :key="event.code" :event="{...event, type: 'talk'}" />
<h2>Talks - Day 1</h2>
<TalkItem v-for="event in talks.online.filter((event) => getDate(new Date(event.slot.start)) === 5)" :key="event.code" :event="{...event, type: 'talk'}" />
<h2>Talks - Day 2</h2>
<TalkItem v-for="event in talks.online.filter((event) => getDate(new Date(event.slot.start)) === 6)" :key="event.code" :event="{...event, type: 'talk'}" />
</template>
</div>
</div>
</template>

<script setup lang="ts">
import type { PretalxSchedule } from '@/content';
import { renderMarkdown } from 'Content/renderContent';
import { computed, ref, type PropType } from 'vue';
import { useFetch } from '@vueuse/core'
import { format, differenceInMinutes } from 'date-fns';
type Speaker = {
code: string;
name: string;
biography: string;
avatar: string | null;
};
import TalkItem from './TalkItem.vue'
import type { ScheduleResponse } from '@/types/pretalx';
import {getDate} from 'date-fns'
type Room = {
en: string;
};
type Slot = {
room_id: number;
room: Room;
start: string; // ISO 8601 date string
end: string; // ISO 8601 date string
};
type SubmissionType = {
en: string;
};
type Event = {
code: string;
speakers: Speaker[];
title: string;
submission_type: { en: string };
submission_type_id: number;
track: string | null;
track_id: number | null;
state: "confirmed" | "pending" | "rejected";
abstract: string;
description: string;
duration: number;
slot_count: number;
do_not_record: boolean;
is_featured: boolean;
content_locale: string;
slot: Slot | null;
image: string | null;
resources: string[];
answers: string[];
};
type ScheduleResponse = {
slots: Event[];
breaks: Break[];
}
type Break = {
room: {
en: string;
};
room_id: number;
start: string; // ISO 8601 date string
end: string; // ISO 8601 date string
description: {
en: string;
};
}
const props = defineProps({
content: Object as PropType<PretalxSchedule['fields']>
})
const shownTalks = ref<'live' | 'online'>('live')
const getEventType = (type: string) => {
if (type === 'PreRecorded-Talk') return 'Pre-Recorded Talk'
return type
}
const { isFetching, error, data } = useFetch(props.content.url).get().json()
const events = computed(() => ((data.value as ScheduleResponse)?.slots ?? []).filter((event) => event))
const breaks = computed(() => ((data.value as ScheduleResponse)?.breaks ?? []).filter((event) => event))
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
const schedule = data.value as ScheduleResponse
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)))
}
})
Expand Down Expand Up @@ -187,55 +103,4 @@ const talks = computed(() => {
color: var(--color-white);
}
}
.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%;
}
}
.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>
122 changes: 122 additions & 0 deletions src/components/TalkItem.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<template>
<article class="event mb-medium p-medium pt-none">
<div class="pt-xsmall pb-2xsmall" style="margin-left: -0.5rem">
<div class="badge">
<template v-if="event.type === 'break'">
Break
</template>
<template v-else-if="event.submission_type.en !== 'Workshop - Full Day'">
{{ getEventType(event.submission_type.en) }} ({{ differenceInMinutes(new Date(event.slot.end), new Date(event.slot.start)) }}min)
</template>
<template v-else>
{{ getEventType(event.submission_type.en) }}
</template>
</div>
</div>
<h1 class="mb-2xsmall">
{{ event.type === 'talk' ? event.title : event.description.en }}
</h1>
<div class="type-small">
<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'" class="row gap-sm">
<div
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>
</div>
</article>
</template>

<script setup lang="ts">
import { format, differenceInMinutes } from 'date-fns';
import { renderMarkdown } from 'Content/renderContent';
import { type PropType } from 'vue'
import type { PretalxEvent, Break } from '@/types/pretalx';
const getEventType = (type: string) => {
if (type === 'PreRecorded-Talk') return 'Talk'
return type
}
const props = defineProps({
event: Object as PropType<PretalxEvent | Break>
})
</script>

<style scoped>
.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%;
}
}
.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>
Loading

0 comments on commit c074cf6

Please sign in to comment.