refactor(talks): extract talk components

website/src/components/talk/Events.astro

@@ -0,0 +1,42 @@
+---
+interface Event {
+  date: string
+  location: string
+  name: string
+  online?: boolean
+  time: string
+  url?: string
+}
+
+interface Props {
+  events: Event[]
+}
+
+const { events } = Astro.props
+---
+
+{events && (
+  <div>
+    <h2>Events</h2>
+    
+    <div>
+      <ul class="ml-4 list-disc">
+        {events.map((event) => (
+          <li>
+            {event.url ? (<a class="link" href={event.url}>{event.name}</a>) : event.name}
+
+            {event.location && `in ${event.location}`}
+
+            - {new Date(event.date).toLocaleDateString('en-GB', {
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric',
+            })}
+
+            {event.online && '(online)'}
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+)}

website/src/components/talk/Slides.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  id: string
+  ratio?: string
+}
+
+const { id, ratio }: Props = Astro.props
+---
+
+<div>
+  <h2 class="mb-2">Slides</h2>
+
+  <div class="slides">
+    <noscript>**Please enable JavaScript to view slides.**</noscript>
+    <script
+      class="speakerdeck-embed"
+      data-id={id}
+      data-ratio={ratio ?? '1.29456384323641'}
+      src="//speakerdeck.com/assets/embed.js"
+    ></script>
+  </div>
+</div>

website/src/components/talk/Video.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  id: string
+  type: string
+}
+
+const { id, type }: Props = Astro.props
+---
+
+{type == "youtube" && (
+  <div>
+    <h2 class="mb-2">Video</h2>
+
+    <div class="video-full">
+      <iframe
+        width="678"
+        height="408"
+        src={`https://www.youtube.com/embed/${id}?rel=0&iv_load_policy=3`}
+        frameborder="0"
+        allowfullscreen
+      >
+      </iframe>
+    </div>
+  </div>
+)}

website/src/pages/talks/[slug].astro

@@ -1,6 +1,9 @@
 ---
+import Events from '../../components/talk/Events.astro'
 import Layout from '../../layouts/Layout.astro'
 import Markdown from '../../components/Markdown.astro'
+import Slides from '../../components/talk/Slides.astro'
+import Video from '../../components/talk/Video.astro'
 
 export async function getStaticPaths() {
   const talks = await Astro.glob('../../talks/*.md')
@@ -16,17 +19,8 @@ export async function getStaticPaths() {
   })
 }
 
-interface Event {
-  date: string
-  location: string
-  name: string
-  online?: boolean
-  time: string
-  url?: string
-}
-
 const { Content } = Astro.props.talk
-const { events, title, speakerdeck, video }: { events: Event[] } = Astro.props.talk.frontmatter
+const { events, speakerdeck, title, video } = Astro.props.talk.frontmatter
 ---
 
 <Layout title={title}>
@@ -35,58 +29,14 @@ const { events, title, speakerdeck, video }: { events: Event[] } = Astro.props.t
       <Content />
     </Markdown>
 
-    {speakerdeck && speakerdeck.id && (
+    {speakerdeck && (
-      <div>
+      <Slides id={speakerdeck.id} ratio={speakerdeck.ratio} />
-        <h2 class="mb-2">Slides</h2>
-
-        <div class="slides">
-          <noscript>**Please enable JavaScript to view slides.**</noscript>
-          <script
-            class="speakerdeck-embed"
-            data-id={speakerdeck.id}
-            data-ratio={speakerdeck.ratio ?? '1.29456384323641'}
-            src="//speakerdeck.com/assets/embed.js"
-          ></script>
-        </div>
-      </div>
     )}
 
-    {video && video.type == "youtube" && (
+    {video && (
-      <div>
+      <Video id={video.id} type={video.type} />
-        <h2 class="mb-2">Video</h2>
-
-        <div class="video-full">
-          <iframe
-            width="678"
-            height="408"
-            src={`https://www.youtube.com/embed/${video.id}?rel=0&iv_load_policy=3`}
-            frameborder="0"
-            allowfullscreen
-          >
-          </iframe>
-        </div>
-      </div>
     )}
 
-    <div>
+    <Events events={events} />
-      <h2>Events</h2>
-      
-      <div>
-        <ul class="ml-4 list-disc">
-          {events.map((event) => (
-            <li>
-              {event.url ? (<a class="link" href={event.url}>{event.name}</a>) : event.name}
-              {event.location && `in ${event.location}`}
-              - {new Date(event.date).toLocaleDateString('en-GB', {
-                day: 'numeric',
-                month: 'long',
-                year: 'numeric',
-              })}
-              {event.online && '(online)'}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
   </div>
 </Layout>