From dc181531c04c7b27c609de8afc81d0196cf22b5d Mon Sep 17 00:00:00 2001
From: cadolphe <christopher.adolphe@gmail.com>
Date: Tue, 3 Dec 2024 07:42:34 +0400
Subject: [PATCH 1/7] feat: remove unnecessary computed properties

---
 packages/frontendmu-nuxt/components/speaker/Single.vue | 10 +++++-----
 packages/frontendmu-nuxt/pages/speaker/[id].vue        |  8 +++-----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/frontendmu-nuxt/components/speaker/Single.vue b/packages/frontendmu-nuxt/components/speaker/Single.vue
index cff5fc7d..2dbe9466 100644
--- a/packages/frontendmu-nuxt/components/speaker/Single.vue
+++ b/packages/frontendmu-nuxt/components/speaker/Single.vue
@@ -19,11 +19,11 @@ const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
     <!-- <pre>
         <code>{{ JSON.stringify(props.speaker, null, 2) }}</code>
     </pre> -->
+
     <div :data-title="props.speaker.person?.name">
       <ContentBlock>
         <div class="flex md:flex-row justify-between flex-col-reverse">
           <div>
-            <!-- Content area -->
             <div>
               <div>
                 <BaseHeading :level="1" weight="bold">
@@ -34,7 +34,6 @@ const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
               <EventsList :sessions="props.speaker.sessions" />
             </div>
 
-            <!-- Stats section -->
             <div class="mt-10">
               <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 md:gap-y-8">
                 <template v-if="props.speaker.Date">
@@ -63,9 +62,10 @@ const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
 
           <div class="flex-grow relative">
             <div class="w-full flex justify-end">
-              <img class="h-auto w-[80%] mx-auto md:mx-0 my-10 object-cover rounded-full lg:h-96 lg:w-96"
-                   :src="speaker_photo" :style="vTransitionName(props.speaker.person?.name, 'photo')"
-                   :alt="props.speaker.person?.name" :title="props.speaker.person?.name" width="300" height="300"
+              <img
+                class="h-auto w-[80%] mx-auto md:mx-0 my-10 object-cover rounded-full lg:h-96 lg:w-96"
+                :src="speaker_photo" :style="vTransitionName(props.speaker.person?.name, 'photo')"
+                :alt="props.speaker.person?.name" :title="props.speaker.person?.name" width="300" height="300"
               >
               <div class="w-full h-full absolute top-0">
                 <LogoSpiral class="w-full opacity-5 saturate-0" />
diff --git a/packages/frontendmu-nuxt/pages/speaker/[id].vue b/packages/frontendmu-nuxt/pages/speaker/[id].vue
index 16f21940..f038889d 100644
--- a/packages/frontendmu-nuxt/pages/speaker/[id].vue
+++ b/packages/frontendmu-nuxt/pages/speaker/[id].vue
@@ -3,9 +3,9 @@ import eventsResponse from '../../../frontendmu-data/data/meetups-raw.json'
 import speakersResponse from '../../../frontendmu-data/data/speakers-raw.json'
 
 const route = useRoute()
-const id = computed(() => route.params.id as string)
+const { id } = route.params
 
-function getSpeaker(id: string | number) {
+function getSpeaker(id: string | string[]) {
   const speaker = speakersResponse.find((ev: { id: string }) => String(ev.id) === String(id))
 
   if (speaker === null) {
@@ -25,9 +25,7 @@ function getSpeaker(id: string | number) {
   }
 }
 
-const speaker = ref(getSpeaker(id.value))
-
-const speakerExists = computed(() => speaker.value !== null)
+const speaker = ref(getSpeaker(id))
 
 useHead({
   title: speaker.value.person ? speaker.value.person.name : '',

From a7672e9035fbd6ef93810c576fee2db08d4b3d58 Mon Sep 17 00:00:00 2001
From: cadolphe <christopher.adolphe@gmail.com>
Date: Tue, 3 Dec 2024 08:52:27 +0400
Subject: [PATCH 2/7] feat: enhance error handling on speaker page

---
 packages/frontendmu-nuxt/error.vue            | 34 +++++++++++++++++++
 .../frontendmu-nuxt/pages/speaker/[id].vue    | 27 +++++++++++----
 2 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 packages/frontendmu-nuxt/error.vue

diff --git a/packages/frontendmu-nuxt/error.vue b/packages/frontendmu-nuxt/error.vue
new file mode 100644
index 00000000..dc538c63
--- /dev/null
+++ b/packages/frontendmu-nuxt/error.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+})
+
+const handleError = () => clearError({ redirect: '/' })
+</script>
+
+<template>
+  <NuxtLayout name="simple">
+    <ContentBlock>
+      <div class="flex flex-col justify-start items-center gap-10 mx-auto max-w-[60ch] text-center">
+        <BaseHeading :level="1" weight="bold">
+          Oops!
+        </BaseHeading>
+
+        <BaseHeading :level="3" weight="bold">
+          {{ error.statusCode }} - The page you were looking for doesn't exist
+        </BaseHeading>
+
+        <p>{{ error.message }}</p>
+
+        <button
+          class="mx-auto bg-verse-500 hover:bg-verse-600 transition-colors duration-200 text-md block rounded-full px-4 py-4 text-center font-medium text-white md:px-6 md:text-lg cursor-pointer"
+          @click="handleError"
+        >
+          Back to Home
+        </button>
+      </div>
+    </ContentBlock>
+  </NuxtLayout>
+</template>
diff --git a/packages/frontendmu-nuxt/pages/speaker/[id].vue b/packages/frontendmu-nuxt/pages/speaker/[id].vue
index f038889d..69df2b02 100644
--- a/packages/frontendmu-nuxt/pages/speaker/[id].vue
+++ b/packages/frontendmu-nuxt/pages/speaker/[id].vue
@@ -2,16 +2,29 @@
 import eventsResponse from '../../../frontendmu-data/data/meetups-raw.json'
 import speakersResponse from '../../../frontendmu-data/data/speakers-raw.json'
 
+definePageMeta({
+  middleware: [
+    function (to, _) {
+      const { id } = to.params
+      const speaker = speakersResponse.find((ev: { id: string }) => String(ev.id) === String(id))
+
+      if (!speaker) {
+        return abortNavigation(
+          createError({
+            status: 404,
+            message: `We could not find the speaker with ID: ${id}`,
+          }),
+        )
+      }
+    },
+  ],
+})
+
 const route = useRoute()
-const { id } = route.params
 
 function getSpeaker(id: string | string[]) {
   const speaker = speakersResponse.find((ev: { id: string }) => String(ev.id) === String(id))
 
-  if (speaker === null) {
-    console.error('cannot find speaker id: ', id)
-  }
-
   // Get sessions of this speaker from the events
   const allSessions = eventsResponse.map((event: any) => event.sessions).flat()
   const speakerSession = allSessions.filter((session: any) => {
@@ -25,7 +38,7 @@ function getSpeaker(id: string | string[]) {
   }
 }
 
-const speaker = ref(getSpeaker(id))
+const speaker = ref(getSpeaker(route.params.id))
 
 useHead({
   title: speaker.value.person ? speaker.value.person.name : '',
@@ -47,7 +60,7 @@ defineOgImageComponent('Speaker', {
 <template>
   <div>
     <template v-if="speaker">
-      <SpeakerSingle :route-id="id" :speaker="speaker" />
+      <SpeakerSingle :speaker="speaker" />
     </template>
   </div>
 </template>

From 6a19faada3b041a099f5409c23f67b2946194457 Mon Sep 17 00:00:00 2001
From: cadolphe <christopher.adolphe@gmail.com>
Date: Wed, 4 Dec 2024 01:22:05 +0400
Subject: [PATCH 3/7] feat: add speakers-profile.json and update getSpeaker
 function to return speaker's profile

---
 .../data/speakers-profile.json                | 38 +++++++++++++++++++
 .../components/speaker/Single.vue             | 13 ++++++-
 .../frontendmu-nuxt/pages/speaker/[id].vue    | 16 +++++++-
 packages/frontendmu-nuxt/utils/types.ts       | 17 ++++++++-
 4 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontendmu-data/data/speakers-profile.json

diff --git a/packages/frontendmu-data/data/speakers-profile.json b/packages/frontendmu-data/data/speakers-profile.json
new file mode 100644
index 00000000..ac4daa16
--- /dev/null
+++ b/packages/frontendmu-data/data/speakers-profile.json
@@ -0,0 +1,38 @@
+[
+  {
+    "id": "6a23b471-4829-44cf-bf85-7ecd955c7c3a",
+    "bio": "Front-end Developer based in Mauritius",
+    "job_title": "",
+    "location": "",
+    "website": "",
+    "github": "MrSunshyne",
+    "twitter": ""
+  },
+  {
+    "id": "78966047-4716-4afc-856e-46f1430974ed",
+    "bio": "",
+    "job_title": "",
+    "location": "",
+    "website": "",
+    "github": "saamiyah",
+    "twitter": ""
+  },
+  {
+    "id": "5c852db3-4844-4f6d-b6fe-c135963441fb",
+    "bio": "",
+    "job_title": "",
+    "location": "",
+    "website": "",
+    "github": "kushul",
+    "twitter": ""
+  },
+  {
+    "id": "549be7b0-1e7d-4deb-9fb3-273cfe0da5b0",
+    "bio": "",
+    "job_title": "",
+    "location": "",
+    "website": "",
+    "github": "cedpoilly",
+    "twitter": ""
+  }
+]
\ No newline at end of file
diff --git a/packages/frontendmu-nuxt/components/speaker/Single.vue b/packages/frontendmu-nuxt/components/speaker/Single.vue
index 2dbe9466..f34cc1e0 100644
--- a/packages/frontendmu-nuxt/components/speaker/Single.vue
+++ b/packages/frontendmu-nuxt/components/speaker/Single.vue
@@ -24,6 +24,7 @@ const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
       <ContentBlock>
         <div class="flex md:flex-row justify-between flex-col-reverse">
           <div>
+            <!-- Content area -->
             <div>
               <div>
                 <BaseHeading :level="1" weight="bold">
@@ -34,6 +35,7 @@ const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
               <EventsList :sessions="props.speaker.sessions" />
             </div>
 
+            <!-- Stats section -->
             <div class="mt-10">
               <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 md:gap-y-8">
                 <template v-if="props.speaker.Date">
@@ -61,12 +63,21 @@ const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
           </div>
 
           <div class="flex-grow relative">
-            <div class="w-full flex justify-end">
+            <div class="w-full flex justify-end-end">
               <img
                 class="h-auto w-[80%] mx-auto md:mx-0 my-10 object-cover rounded-full lg:h-96 lg:w-96"
                 :src="speaker_photo" :style="vTransitionName(props.speaker.person?.name, 'photo')"
                 :alt="props.speaker.person?.name" :title="props.speaker.person?.name" width="300" height="300"
               >
+
+              <!-- <div>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend et risus quis semper.
+                  Etiam aliquet nulla lorem, ultrices dignissim elit semper id.
+                  Sed erat tellus, consectetur sit amet lacinia ac, aliquam id enim.
+                </p>
+              </div> -->
+
               <div class="w-full h-full absolute top-0">
                 <LogoSpiral class="w-full opacity-5 saturate-0" />
               </div>
diff --git a/packages/frontendmu-nuxt/pages/speaker/[id].vue b/packages/frontendmu-nuxt/pages/speaker/[id].vue
index 69df2b02..a16f4ae0 100644
--- a/packages/frontendmu-nuxt/pages/speaker/[id].vue
+++ b/packages/frontendmu-nuxt/pages/speaker/[id].vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import eventsResponse from '../../../frontendmu-data/data/meetups-raw.json'
 import speakersResponse from '../../../frontendmu-data/data/speakers-raw.json'
+import speakersProfileResponse from '../../../frontendmu-data/data/speakers-profile.json'
+
+import type { Speaker, SpeakerProfile, Sponsor } from '~/utils/types'
 
 definePageMeta({
   middleware: [
@@ -22,9 +25,17 @@ definePageMeta({
 
 const route = useRoute()
 
-function getSpeaker(id: string | string[]) {
+function getSpeaker(id: string | string[]): { person: Speaker | undefined, sessions: Sponsor[] | undefined, profile: SpeakerProfile | undefined } {
   const speaker = speakersResponse.find((ev: { id: string }) => String(ev.id) === String(id))
 
+  if (!speaker) {
+    return {
+      person: undefined,
+      sessions: undefined,
+      profile: undefined,
+    }
+  }
+
   // Get sessions of this speaker from the events
   const allSessions = eventsResponse.map((event: any) => event.sessions).flat()
   const speakerSession = allSessions.filter((session: any) => {
@@ -32,9 +43,12 @@ function getSpeaker(id: string | string[]) {
     return id === session_speaker_id
   })
 
+  const profile = speakersProfileResponse.find(profile => profile.id === speaker.id)
+
   return {
     person: speaker,
     sessions: speakerSession,
+    profile,
   }
 }
 
diff --git a/packages/frontendmu-nuxt/utils/types.ts b/packages/frontendmu-nuxt/utils/types.ts
index 1e6f603b..160b1a5f 100644
--- a/packages/frontendmu-nuxt/utils/types.ts
+++ b/packages/frontendmu-nuxt/utils/types.ts
@@ -258,9 +258,14 @@ export interface SessionDetail {
 }
 
 export interface Speaker {
-  name: string
   id: string
+  status: string
+  sort: string | null
+  name: string
   github_account: string
+  featured: boolean
+  date_created: string
+  date_updated: string
 }
 
 export interface BrandingAsset {
@@ -269,3 +274,13 @@ export interface BrandingAsset {
   filename: string
   versions: string[]
 }
+
+export interface SpeakerProfile {
+  id: string
+  bio: string
+  job_title: string
+  location: string
+  website: string
+  github: string
+  twitter: string
+}

From 9c6b6a8326892664bc5e04116265d8c7434bc14e Mon Sep 17 00:00:00 2001
From: cadolphe <christopher.adolphe@gmail.com>
Date: Wed, 4 Dec 2024 03:09:16 +0400
Subject: [PATCH 4/7] feat: update markup in SpeakerSingle component to display
 profile details

---
 .../data/speakers-profile.json                |  16 +--
 .../components/speaker/Single.vue             | 105 +++++++++++++-----
 packages/frontendmu-nuxt/error.vue            |   2 +-
 .../frontendmu-nuxt/pages/speaker/[id].vue    |  18 ++-
 4 files changed, 93 insertions(+), 48 deletions(-)

diff --git a/packages/frontendmu-data/data/speakers-profile.json b/packages/frontendmu-data/data/speakers-profile.json
index ac4daa16..344ad03d 100644
--- a/packages/frontendmu-data/data/speakers-profile.json
+++ b/packages/frontendmu-data/data/speakers-profile.json
@@ -1,18 +1,18 @@
 [
   {
     "id": "6a23b471-4829-44cf-bf85-7ecd955c7c3a",
-    "bio": "Front-end Developer based in Mauritius",
-    "job_title": "",
-    "location": "",
-    "website": "",
+    "bio": "Front-end Developer based in Mauritius.",
+    "job_title": "Front-end",
+    "location": "Mauritius",
+    "website": "https://sandeep.ramgolam.com/",
     "github": "MrSunshyne",
-    "twitter": ""
+    "twitter": "@__sun__"
   },
   {
     "id": "78966047-4716-4afc-856e-46f1430974ed",
     "bio": "",
     "job_title": "",
-    "location": "",
+    "location": "Mauritius",
     "website": "",
     "github": "saamiyah",
     "twitter": ""
@@ -21,7 +21,7 @@
     "id": "5c852db3-4844-4f6d-b6fe-c135963441fb",
     "bio": "",
     "job_title": "",
-    "location": "",
+    "location": "Mauritius",
     "website": "",
     "github": "kushul",
     "twitter": ""
@@ -30,7 +30,7 @@
     "id": "549be7b0-1e7d-4deb-9fb3-273cfe0da5b0",
     "bio": "",
     "job_title": "",
-    "location": "",
+    "location": "Mauritius",
     "website": "",
     "github": "cedpoilly",
     "twitter": ""
diff --git a/packages/frontendmu-nuxt/components/speaker/Single.vue b/packages/frontendmu-nuxt/components/speaker/Single.vue
index f34cc1e0..ad87513f 100644
--- a/packages/frontendmu-nuxt/components/speaker/Single.vue
+++ b/packages/frontendmu-nuxt/components/speaker/Single.vue
@@ -4,35 +4,47 @@ import LogoSpiral from '@/components/misc/LogoSpiral.vue'
 import { getGithubUrl } from '@/utils/helpers'
 import ContentBlock from '@/components/misc/ContentBlock.vue'
 
-const props = defineProps({
+import type { Speaker, SpeakerProfile, Sponsor } from '~/utils/types'
+
+interface SpeakerSingleProps {
   speaker: {
-    type: Object,
-    required: true,
-  },
-})
+    person: Speaker
+    sessions: Sponsor[]
+    profile: SpeakerProfile
+    Date: string
+    Venue: string
+  }
+}
+
+const props = defineProps<SpeakerSingleProps>()
+
+const person = computed(() => props.speaker.person)
+const sessions = computed(() => props.speaker.sessions)
+
+const profile = computed(() => props.speaker.profile)
+const hasProfileLocation = computed(() => profile.value.location !== '')
+const hasProfileWebsite = computed(() => profile.value.website !== '')
+const hasProfileGithub = computed(() => profile.value.github !== '')
+const hasProfileTwitter = computed(() => profile.value.twitter !== '')
 
-const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
+const speaker_photo = getGithubUrl(person.value.github_account)
 </script>
 
 <template>
   <div>
-    <!-- <pre>
-        <code>{{ JSON.stringify(props.speaker, null, 2) }}</code>
-    </pre> -->
-
-    <div :data-title="props.speaker.person?.name">
+    <div :data-title="person.name">
       <ContentBlock>
-        <div class="flex md:flex-row justify-between flex-col-reverse">
-          <div>
+        <div class="flex flex-col-reverse md:flex-row justify-start gap-4">
+          <div class="flex-grow">
             <!-- Content area -->
             <div>
-              <div>
+              <div class="hidden md:block">
                 <BaseHeading :level="1" weight="bold">
-                  {{ props.speaker.person?.name }}
+                  {{ person.name }}
                 </BaseHeading>
               </div>
 
-              <EventsList :sessions="props.speaker.sessions" />
+              <EventsList :sessions="sessions" />
             </div>
 
             <!-- Stats section -->
@@ -62,23 +74,60 @@ const speaker_photo = getGithubUrl(props.speaker.person?.github_account)
             </div>
           </div>
 
-          <div class="flex-grow relative">
-            <div class="w-full flex justify-end-end">
+          <div class="flex-grow relative w-full lg:max-w-[32.375rem]">
+            <div class="flex flex-col justify-start items-end w-full ">
               <img
                 class="h-auto w-[80%] mx-auto md:mx-0 my-10 object-cover rounded-full lg:h-96 lg:w-96"
-                :src="speaker_photo" :style="vTransitionName(props.speaker.person?.name, 'photo')"
-                :alt="props.speaker.person?.name" :title="props.speaker.person?.name" width="300" height="300"
+                :src="speaker_photo" :style="vTransitionName(person.name, 'photo')"
+                :alt="person.name" :title="person.name" width="300" height="300"
               >
 
-              <!-- <div>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend et risus quis semper.
-                  Etiam aliquet nulla lorem, ultrices dignissim elit semper id.
-                  Sed erat tellus, consectetur sit amet lacinia ac, aliquam id enim.
-                </p>
-              </div> -->
+              <div
+                v-if="profile"
+                class="grid gap-4 w-full z-20"
+              >
+                <BaseHeading
+                  class="md:hidden"
+                  :level="1"
+                  weight="bold"
+                >
+                  {{ person.name }}
+                </BaseHeading>
+
+                <p>{{ profile.bio }}</p>
+
+                <nav class="grid gap-2 *:flex *:justify-start *:items-center *:gap-2">
+                  <span v-if="hasProfileLocation">
+                    <Icon name="lucide:map-pin" mode="svg" class="size-6" />{{ profile.location }}
+                  </span>
+
+                  <NuxtLink
+                    v-if="hasProfileWebsite"
+                    :to="profile.website"
+                    target="_blank"
+                  >
+                    <Icon name="lucide:link" mode="svg" class="size-6" />{{ profile.website }}
+                  </NuxtLink>
+
+                  <NuxtLink
+                    v-if="hasProfileGithub"
+                    :to="`https://github.com/${profile.github}`"
+                    target="_blank"
+                  >
+                    <Icon name="lucide:github" mode="svg" class="size-6" />{{ profile.github }}
+                  </NuxtLink>
+
+                  <NuxtLink
+                    v-if="hasProfileTwitter"
+                    :to="`https://twitter.com/${profile.twitter}`"
+                    target="_blank"
+                  >
+                    <Icon name="ri:twitter-x-fill" mode="svg" class="size-6" />{{ profile.twitter }}
+                  </NuxtLink>
+                </nav>
+              </div>
 
-              <div class="w-full h-full absolute top-0">
+              <div class="w-full h-full absolute top-0 z-10">
                 <LogoSpiral class="w-full opacity-5 saturate-0" />
               </div>
             </div>
diff --git a/packages/frontendmu-nuxt/error.vue b/packages/frontendmu-nuxt/error.vue
index dc538c63..98062200 100644
--- a/packages/frontendmu-nuxt/error.vue
+++ b/packages/frontendmu-nuxt/error.vue
@@ -17,7 +17,7 @@ const handleError = () => clearError({ redirect: '/' })
         </BaseHeading>
 
         <BaseHeading :level="3" weight="bold">
-          {{ error.statusCode }} - The page you were looking for doesn't exist
+          {{ error.statusCode }} - The page you are looking for doesn't exist
         </BaseHeading>
 
         <p>{{ error.message }}</p>
diff --git a/packages/frontendmu-nuxt/pages/speaker/[id].vue b/packages/frontendmu-nuxt/pages/speaker/[id].vue
index a16f4ae0..23a7f1e1 100644
--- a/packages/frontendmu-nuxt/pages/speaker/[id].vue
+++ b/packages/frontendmu-nuxt/pages/speaker/[id].vue
@@ -3,8 +3,6 @@ import eventsResponse from '../../../frontendmu-data/data/meetups-raw.json'
 import speakersResponse from '../../../frontendmu-data/data/speakers-raw.json'
 import speakersProfileResponse from '../../../frontendmu-data/data/speakers-profile.json'
 
-import type { Speaker, SpeakerProfile, Sponsor } from '~/utils/types'
-
 definePageMeta({
   middleware: [
     function (to, _) {
@@ -25,15 +23,11 @@ definePageMeta({
 
 const route = useRoute()
 
-function getSpeaker(id: string | string[]): { person: Speaker | undefined, sessions: Sponsor[] | undefined, profile: SpeakerProfile | undefined } {
+function getSpeaker(id: string | string[]) {
   const speaker = speakersResponse.find((ev: { id: string }) => String(ev.id) === String(id))
 
   if (!speaker) {
-    return {
-      person: undefined,
-      sessions: undefined,
-      profile: undefined,
-    }
+    return
   }
 
   // Get sessions of this speaker from the events
@@ -49,13 +43,15 @@ function getSpeaker(id: string | string[]): { person: Speaker | undefined, sessi
     person: speaker,
     sessions: speakerSession,
     profile,
+    Date: '',
+    Venue: '',
   }
 }
 
 const speaker = ref(getSpeaker(route.params.id))
 
 useHead({
-  title: speaker.value.person ? speaker.value.person.name : '',
+  title: speaker.value?.person ? speaker.value.person.name : '',
   meta: [
     {
       hid: 'description',
@@ -66,8 +62,8 @@ useHead({
 })
 
 defineOgImageComponent('Speaker', {
-  title: speaker.value.person ? speaker.value.person.name : '',
-  username: speaker.value.person?.github_account,
+  title: speaker.value?.person ? speaker.value.person.name : '',
+  username: speaker.value?.person.github_account,
 })
 </script>
 

From d3cfe604ca807fa9b58183df29b723845a318db3 Mon Sep 17 00:00:00 2001
From: cadolphe <christopher.adolphe@gmail.com>
Date: Wed, 4 Dec 2024 17:01:18 +0400
Subject: [PATCH 5/7] feat: update getSpeaker to get speaker profile by
 github_account

---
 .../data/speakers-profile.json                |  6 +-----
 .../components/speaker/Single.vue             | 19 ++++++++-----------
 .../frontendmu-nuxt/pages/speaker/[id].vue    | 16 ++++++++++++----
 packages/frontendmu-nuxt/utils/types.ts       |  8 ++++++++
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/frontendmu-data/data/speakers-profile.json b/packages/frontendmu-data/data/speakers-profile.json
index 344ad03d..2c226b6b 100644
--- a/packages/frontendmu-data/data/speakers-profile.json
+++ b/packages/frontendmu-data/data/speakers-profile.json
@@ -1,15 +1,13 @@
 [
   {
-    "id": "6a23b471-4829-44cf-bf85-7ecd955c7c3a",
     "bio": "Front-end Developer based in Mauritius.",
     "job_title": "Front-end",
     "location": "Mauritius",
-    "website": "https://sandeep.ramgolam.com/",
+    "website": "https://sandeep.ramgolam.com",
     "github": "MrSunshyne",
     "twitter": "@__sun__"
   },
   {
-    "id": "78966047-4716-4afc-856e-46f1430974ed",
     "bio": "",
     "job_title": "",
     "location": "Mauritius",
@@ -18,7 +16,6 @@
     "twitter": ""
   },
   {
-    "id": "5c852db3-4844-4f6d-b6fe-c135963441fb",
     "bio": "",
     "job_title": "",
     "location": "Mauritius",
@@ -27,7 +24,6 @@
     "twitter": ""
   },
   {
-    "id": "549be7b0-1e7d-4deb-9fb3-273cfe0da5b0",
     "bio": "",
     "job_title": "",
     "location": "Mauritius",
diff --git a/packages/frontendmu-nuxt/components/speaker/Single.vue b/packages/frontendmu-nuxt/components/speaker/Single.vue
index ad87513f..3d619fbb 100644
--- a/packages/frontendmu-nuxt/components/speaker/Single.vue
+++ b/packages/frontendmu-nuxt/components/speaker/Single.vue
@@ -4,16 +4,10 @@ import LogoSpiral from '@/components/misc/LogoSpiral.vue'
 import { getGithubUrl } from '@/utils/helpers'
 import ContentBlock from '@/components/misc/ContentBlock.vue'
 
-import type { Speaker, SpeakerProfile, Sponsor } from '~/utils/types'
+import type { SpeakerProfileWithSessions } from '~/utils/types'
 
 interface SpeakerSingleProps {
-  speaker: {
-    person: Speaker
-    sessions: Sponsor[]
-    profile: SpeakerProfile
-    Date: string
-    Venue: string
-  }
+  speaker: SpeakerProfileWithSessions
 }
 
 const props = defineProps<SpeakerSingleProps>()
@@ -22,6 +16,7 @@ const person = computed(() => props.speaker.person)
 const sessions = computed(() => props.speaker.sessions)
 
 const profile = computed(() => props.speaker.profile)
+const hasProfileBio = computed(() => profile.value.bio !== '')
 const hasProfileLocation = computed(() => profile.value.location !== '')
 const hasProfileWebsite = computed(() => profile.value.website !== '')
 const hasProfileGithub = computed(() => profile.value.github !== '')
@@ -34,7 +29,7 @@ const speaker_photo = getGithubUrl(person.value.github_account)
   <div>
     <div :data-title="person.name">
       <ContentBlock>
-        <div class="flex flex-col-reverse md:flex-row justify-start gap-4">
+        <div class="flex flex-col-reverse md:flex-row justify-start gap-6">
           <div class="flex-grow">
             <!-- Content area -->
             <div>
@@ -84,7 +79,7 @@ const speaker_photo = getGithubUrl(person.value.github_account)
 
               <div
                 v-if="profile"
-                class="grid gap-4 w-full z-20"
+                class="grid gap-4 w-full p-4 border-2 border-verse-400 rounded-xl z-20 text-verse-600 dark:text-verse-300"
               >
                 <BaseHeading
                   class="md:hidden"
@@ -94,7 +89,9 @@ const speaker_photo = getGithubUrl(person.value.github_account)
                   {{ person.name }}
                 </BaseHeading>
 
-                <p>{{ profile.bio }}</p>
+                <p v-if="hasProfileBio">
+                  {{ profile.bio }}
+                </p>
 
                 <nav class="grid gap-2 *:flex *:justify-start *:items-center *:gap-2">
                   <span v-if="hasProfileLocation">
diff --git a/packages/frontendmu-nuxt/pages/speaker/[id].vue b/packages/frontendmu-nuxt/pages/speaker/[id].vue
index 23a7f1e1..330b8869 100644
--- a/packages/frontendmu-nuxt/pages/speaker/[id].vue
+++ b/packages/frontendmu-nuxt/pages/speaker/[id].vue
@@ -3,6 +3,8 @@ import eventsResponse from '../../../frontendmu-data/data/meetups-raw.json'
 import speakersResponse from '../../../frontendmu-data/data/speakers-raw.json'
 import speakersProfileResponse from '../../../frontendmu-data/data/speakers-profile.json'
 
+import type { SpeakerProfileWithSessions } from '~/utils/types'
+
 definePageMeta({
   middleware: [
     function (to, _) {
@@ -23,11 +25,17 @@ definePageMeta({
 
 const route = useRoute()
 
-function getSpeaker(id: string | string[]) {
+function getSpeaker(id: string): SpeakerProfileWithSessions {
   const speaker = speakersResponse.find((ev: { id: string }) => String(ev.id) === String(id))
 
   if (!speaker) {
-    return
+    return {
+      person: undefined,
+      sessions: undefined,
+      profile: undefined,
+      Date: '',
+      Venue: '',
+    }
   }
 
   // Get sessions of this speaker from the events
@@ -37,7 +45,7 @@ function getSpeaker(id: string | string[]) {
     return id === session_speaker_id
   })
 
-  const profile = speakersProfileResponse.find(profile => profile.id === speaker.id)
+  const profile = speakersProfileResponse.find(profile => profile.github === speaker.github_account)
 
   return {
     person: speaker,
@@ -48,7 +56,7 @@ function getSpeaker(id: string | string[]) {
   }
 }
 
-const speaker = ref(getSpeaker(route.params.id))
+const speaker = ref(getSpeaker(route.params.id as string))
 
 useHead({
   title: speaker.value?.person ? speaker.value.person.name : '',
diff --git a/packages/frontendmu-nuxt/utils/types.ts b/packages/frontendmu-nuxt/utils/types.ts
index 160b1a5f..b41339ee 100644
--- a/packages/frontendmu-nuxt/utils/types.ts
+++ b/packages/frontendmu-nuxt/utils/types.ts
@@ -284,3 +284,11 @@ export interface SpeakerProfile {
   github: string
   twitter: string
 }
+
+export interface SpeakerProfileWithSessions {
+  person: Speaker
+  sessions: Sponsor[]
+  profile: SpeakerProfile
+  Date: string
+  Venue: string
+}

From 77a998d588dd6335d8ba4b09853b7c5074bd72d3 Mon Sep 17 00:00:00 2001
From: cadolphe <christopher.adolphe@gmail.com>
Date: Wed, 4 Dec 2024 17:15:36 +0400
Subject: [PATCH 6/7] feat: update spacing on mobile in SpeakerSingle component

---
 packages/frontendmu-nuxt/components/speaker/Single.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontendmu-nuxt/components/speaker/Single.vue b/packages/frontendmu-nuxt/components/speaker/Single.vue
index 3d619fbb..9782e74b 100644
--- a/packages/frontendmu-nuxt/components/speaker/Single.vue
+++ b/packages/frontendmu-nuxt/components/speaker/Single.vue
@@ -29,7 +29,7 @@ const speaker_photo = getGithubUrl(person.value.github_account)
   <div>
     <div :data-title="person.name">
       <ContentBlock>
-        <div class="flex flex-col-reverse md:flex-row justify-start gap-6">
+        <div class="flex flex-col-reverse md:flex-row justify-start md:gap-6">
           <div class="flex-grow">
             <!-- Content area -->
             <div>

From 38c0dad3d1742046f8dc4393f5a585e1b604eacc Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Fri, 6 Dec 2024 12:52:58 +0400
Subject: [PATCH 7/7] remove dummy data

---
 .../data/speakers-profile.json                | 23 +++----------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/packages/frontendmu-data/data/speakers-profile.json b/packages/frontendmu-data/data/speakers-profile.json
index 2c226b6b..bc56f3ab 100644
--- a/packages/frontendmu-data/data/speakers-profile.json
+++ b/packages/frontendmu-data/data/speakers-profile.json
@@ -1,33 +1,16 @@
 [
   {
     "bio": "Front-end Developer based in Mauritius.",
-    "job_title": "Front-end",
+    "job_title": "Senior Front-end Engineer @  Livestorm",
     "location": "Mauritius",
     "website": "https://sandeep.ramgolam.com",
     "github": "MrSunshyne",
     "twitter": "@__sun__"
   },
   {
-    "bio": "",
-    "job_title": "",
+    "bio": "Front-End Engineer | Streamer (Twitch)",
+    "job_title": "Senior Front-end Engineer @  Livestorm",
     "location": "Mauritius",
-    "website": "",
-    "github": "saamiyah",
-    "twitter": ""
-  },
-  {
-    "bio": "",
-    "job_title": "",
-    "location": "Mauritius",
-    "website": "",
-    "github": "kushul",
-    "twitter": ""
-  },
-  {
-    "bio": "",
-    "job_title": "",
-    "location": "Mauritius",
-    "website": "",
     "github": "cedpoilly",
     "twitter": ""
   }