feat(speaking): added speaking page

mrsimonemms · May 6, 2023 · 98c39dc · 98c39dc
1 parent 7e1fcda
commit 98c39dc
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 2 deletions.
diff --git a/src/lib/stores/speaking.ts b/src/lib/stores/speaking.ts
@@ -0,0 +1,41 @@
+export interface ITalks {
+  title: string;
+  event: string;
+  youtube: string;
+  date: Date;
+  note?: string;
+}
+
+export const speaking: ITalks[] = [
+  {
+    title: 'Why We Chose To Ditch Helm To Gain Open Source Sanity',
+    event: 'DevOpsDays Birmingham',
+    youtube: 'jygxhAwbbeM',
+    date: new Date(2022, 4, 7),
+  },
+  {
+    title: 'Why We Chose To Ditch Helm To Gain Open Source Sanity',
+    event: 'Cloud Native Rejekts Valencia',
+    youtube: 'W1-cZUXh4zM',
+    date: new Date(2022, 4, 14),
+    note: 'There was a sound issue at the event which caused my microphone to intermittently cut out',
+  },
+  {
+    title: 'Kubernet-Bees: How Bees Solve Problems Of Distributed Systems',
+    event: 'KubeCon North America',
+    youtube: 'JymVi3aJp1c',
+    date: new Date(2022, 9, 22),
+    note: 'Chris and I wrote this and planned to deliver it together, but I caught COVID-19 shortly before I was due to fly out so was unable to attend the conference',
+  },
+].sort((a, b) => {
+  const aDate = a.date.getTime();
+  const bDate = b.date.getTime();
+
+  if (aDate < bDate) {
+    return 1;
+  }
+  if (aDate > bDate) {
+    return -1;
+  }
+  return 0;
+});
diff --git a/src/routes/(app)/speaking/+page.svelte b/src/routes/(app)/speaking/+page.svelte
@@ -1,7 +1,80 @@
-<script>
+<script lang="ts">
+  import DateFormat from '$lib/components/date-format.svelte';
+  import markdown from '$lib/components/markdown';
   import PageHeader from '$lib/components/page-header.svelte';
+  import PageTitle from '$lib/components/page-title.svelte';
+  import { speaking } from '$lib/stores/speaking';
+
+  const format: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+  };
 </script>
 
 <PageHeader title="Speaking" />
 
-sss
+<div class="container my-5">
+  <div class="content">
+    <PageTitle>Speaking</PageTitle>
+
+    <div class="columns is-multiline">
+      {#each speaking as item}
+        <div class="column is-full">
+          <div class="card">
+            <div class="card-image">
+              <div class="video-container">
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube.com/embed/{item.youtube}"
+                  title="YouTube video player"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+
+            <div class="card-content has-background-info-dark">
+              <div class="media">
+                <div class="media-content">
+                  <p class="title is-4 has-text-white-bis">{item.title}</p>
+                  <p class="subtitle is-6 has-text-white-bis">
+                    {item.event}, <DateFormat date={item.date} {format} />
+                  </p>
+                </div>
+              </div>
+            </div>
+            {#if item.note}
+              <div class="card-content">
+                <article class="message is-medium">
+                  <div class="message-body">
+                    {@html markdown(item.note)}
+                  </div>
+                </article>
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>