anchor links to talks

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

Hide file tree

Showing 7 changed files with 83 additions and 39 deletions.
diff --git a/docs/assets/index-CCRmWWb_.js → docs/assets/index-CrYJf5QC.js b/docs/assets/index-CCRmWWb_.js → docs/assets/index-CrYJf5QC.js
diff --git a/docs/assets/index-Dx3dn50d.css b/docs/assets/index-Dx3dn50d.css
diff --git a/docs/assets/index-DxosgorO.css b/docs/assets/index-DxosgorO.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-CCRmWWb_.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DxosgorO.css">
+    <script type="module" crossorigin src="/assets/index-CrYJf5QC.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Dx3dn50d.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/css/grid.css b/src/assets/css/grid.css
@@ -31,6 +31,10 @@
   height: 100%;
 }
 
+.h-fit {
+  height: fit-content;
+}
+
 .sticky {
   position: sticky;
 }

diff --git a/src/components/PretalxSchedule.vue b/src/components/PretalxSchedule.vue
@@ -47,7 +47,7 @@
 
 <script setup lang="ts">
 import type { PretalxSchedule } from '@/content';
-import { computed, ref, type PropType } from 'vue';
+import { computed, nextTick, ref, type PropType } from 'vue';
 import { useFetch } from '@vueuse/core'
 import TalkItem from './TalkItem.vue'
 import type { PretalxEvent, PretalxSession, ScheduleResponse, SubmissionsResponse } from '@/types/pretalx';
@@ -73,6 +73,14 @@ const talks = computed(() => {
   const schedule = data.value as ScheduleResponse
   const submissions = dataSub.value as SubmissionsResponse
 
+  nextTick(() => {
+    const hash = window.location.hash
+    if (hash) {
+      const talkTitle = document.getElementById(hash.slice(1))
+      if (talkTitle) talkTitle.scrollIntoView()
+    }
+  })
+
   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').map((event) => addSubmissionData(event))),
@@ -81,6 +89,16 @@ const talks = computed(() => {
     online: sortTalks(schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon Online' && ['PreRecorded-Talk', 'Talk'].includes(talk.submission_type.en)).map((event) => addSubmissionData(event)))
   }
 })
+
+const hash = window.location.hash
+if (hash) {
+  if (hash.includes('live-')) {
+    shownTalks.value = 'live'
+  }
+  if (hash.includes('online-')) {
+    shownTalks.value = 'online'
+  }
+}
   // .sort((a, b) => {
   //   if (new Date(a.slot?.start || a.start) < new Date(b.slot?.start || b.start)) return -1
   //   return 1

diff --git a/src/components/TalkItem.vue b/src/components/TalkItem.vue
@@ -1,7 +1,7 @@
 <template>
   <article class="event mb-medium p-medium pt-none">
-    <div class="pt-xsmall pb-2xsmall" style="margin-left: -0.75rem">
-      <div class="badge">
+    <div class="pt-xsmall pb-2xsmall flex between" style="margin-left: -0.75rem">
+      <div class="badge h-fit">
         <template v-if="event.type === 'break'">
           Break
         </template>
@@ -12,8 +12,11 @@
           {{ getEventType(event.submission_type.en) }}
         </template>
       </div>
+      <a v-if="event.type === 'talk'" :href="`#${getSlug(event)}`">
+        <link-icon style="transform: translateY(2px)" color="black" />
+      </a>
     </div>
-    <h1 v-if="event.type === 'talk'" class="mb-2xsmall">
+    <h1 v-if="event.type === 'talk'" class="mb-2xsmall" :id="getSlug(event)">
       {{ event.title }}
     </h1>
     <h1 v-else-if="event.type === 'break'" class="mb-2xsmall">
@@ -51,22 +54,32 @@ import { renderMarkdown } from 'Content/renderContent';
 import { type PropType } from 'vue'
 import type { PretalxEvent, Break } from '@/types/pretalx';
 import SpeakerItem from './SpeakerItem.vue'
+import LinkIcon from './icons/LinkIcon.vue'
 
 
 const getEventType = (type: string) => {
   if (type === 'PreRecorded-Talk') return 'Talk'
   return type
 }
 
-defineProps({
+const props = defineProps({
   event: Object as PropType<PretalxEvent | Break>
 })
 
+const getSlug = (event: PretalxEvent) => {
+  if (!event.title) return ''
+  if (props.event.type === 'break') return
+  const isLive = props.event.slot.room.en === 'RoboCon' || props.event.submission_type.en === 'Workshop - Full Day'
+  if (isLive) return `live-${event.title.replace(/[ ]/g, '-').replace(/[^a-zA-Z0-9-]/g, '').toLowerCase()}`
+  return `online-${event.title.replace(/[ ]/g, '-').replace(/[^a-zA-Z0-9-]/g, '').toLowerCase()}`
+}
+
 </script>
 
 <style scoped>
 h1 {
   line-height: 1.35;
+  scroll-margin-top: 8rem;
 }
 .event {
   border: solid 0px var(--color-theme-secondary);