Add keynoter conditional link to speakers list.

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,14 @@ 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 ? (
@@ -56,16 +62,24 @@ const Placeholder =
     >
       {
         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>