Add keynoter conditional link to speakers list. (#1168)

Update for keynoters section on the home page.
Add Keynoter link to speakers list if speaker slug exists on the list of
speakers.

![image](https://github.com/user-attachments/assets/4da3c16f-261b-4a2f-b95a-dda5245bee1a)

---------

Co-authored-by: Mia Bajić <[email protected]>

Author: nikoshell

src/components/keynoters/keynoter.astro

@@ -1,5 +1,6 @@
 ---
 import type { ImageMetadata } from "astro";
+import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
 import Person1 from "../placeholders/person-1.astro";
 import Person2 from "../placeholders/person-2.astro";
@@ -19,6 +20,7 @@ export interface Props {
 
 const {
   name,
+  slug,
   tagline,
   image,
   placeholder,
@@ -30,10 +32,12 @@ const placeholders = [Person1, Person2, Person3, Person4, Person5];
 const Placeholder =
   placeholders[Math.floor(Math.random() * placeholders.length)];
 
+const entries = await getCollection("speakers");
+const isSpeaker = entries.some((entry) => entry.id === slug);
 ---
 
 <li class:list={["list-none rounded-2xl overflow-clip flex group", className]}>
-  <a class="block w-full h-full relative " >
+  <div class="block w-full h-full relative">
     <div class="relative aspect-[9/10] overflow-clip">
       {
         image ? (
@@ -51,21 +55,30 @@ const Placeholder =
       }
     </div>
 
-    <div
-      class="px-5 py-2 pb-4 bg-keynoter-info rounded-t-none h-full "
-    >
+    <div class="px-5 py-2 pb-4 bg-keynoter-info rounded-t-none h-full">
       {
         placeholder ? (
-          <p class="text-body-inverted ">More keynoters coming soon</p>
+          <p class="text-body-inverted">More keynoters coming soon</p>
         ) : (
           <>
-            <p class="text-[#17223A] font-bold">{name}</p>
-            {tagline ? (
+            {isSpeaker ? (
+              <p class="text-[#17223A] font-bold">
+                <a
+                  href={`/speaker/${slug}`}
+                  class="text-[#17223A] font-bold hover:underline"
+                >
+                  {name}
+                </a>
+              </p>
+            ) : (
+              <p class="text-[#17223A] font-bold">{name}</p>
+            )}
+            {tagline && (
               <p class="text-secondary-hover text-lg italic">{tagline}</p>
-            ) : null}
+            )}
           </>
         )
       }
     </div>
-  </a>
+  </div>
 </li>