speakers

_includes/blocks.vto

@@ -1,5 +1,5 @@
 <div class="ly-blocks">
   {{ for block of blocks }}
-    {{ include `./blocks/${block.type}/${block.type}.vto` { block } }}
+    {{ include `./blocks/${block.type}/${block.type}.vto` { block, blocks } }}
   {{ /for }}
 </div>

_includes/blocks/calendar/calendar.css

@@ -67,4 +67,43 @@
   @media (width > 600px) {
     margin: 0 0 0 150px;
   }
+}
+.event-speakers {
+  list-style: none;
+  margin: 0;
+  padding: 1rem;
+  display: flex;
+  column-gap: 4rem;
+  row-gap: 2rem;
+  flex-wrap: wrap;
+
+  @media (width > 600px) {
+    margin: 0 0 0 150px;
+  }
+
+  button {
+    display: grid;
+    grid-template-columns: 100px 1fr;
+    align-items: center;
+    column-gap: 1rem;
+    padding: 1rem;
+    margin: 0;
+    border: none;
+    background: none;
+    border-radius: .5rem;
+    cursor: pointer;
+    max-width: 300px;
+    text-align: left;
+
+    &:hover {
+      background-color: var(--color-light);
+    }
+  }
+  img {
+    width: 100%;
+    aspect-ratio: 1;
+  }
+  p {
+    margin: 0;
+  }
 }

_includes/blocks/calendar/calendar.vto

@@ -26,6 +26,28 @@
         <div class="event-description type-txt">
           {{ event.description |> md }}
         </div>
+
+        {{ if event.speakers }}
+          {{ set speakers = blocks
+              .filter((block) => block.type === "speakers")
+              .shift()?.speakers
+              .filter((speaker) => event.speakers.includes(speaker.id))
+          }}
+
+          <ul class="event-speakers">
+          {{ for speaker of speakers }}
+          <li>
+            <button data-open="dialog-{{ speaker.id }}">
+              <img src="{{ speaker.image }}" alt="Retrato">
+              <div>
+                <strong class="type-txt-bold">{{ speaker.name }}</strong>
+                <p class="type-caption">{{ speaker.company }}<br> <em>{{ speaker.role }}</em></p>
+              </div>
+            </button>
+          </li>
+          {{ /for }}
+          </ul>
+        {{ /if }}
       </details>
       {{ /for }}
     </div>

_includes/blocks/calendar/fields.ts

@@ -17,6 +17,11 @@ export default {
             "title: text",
             "subtitle: text",
             "description: markdown",
+            {
+              type: "list",
+              name: "speakers",
+              description: "Select the speakers ID for this event",
+            }
           ],
         },
       ],

index.yml

@@ -99,6 +99,8 @@ blocks:
             title: Item de agenda
             subtitle: Subtítulo de item de agenda
             description: "Esperamos que no, la Tarugoconf Sofá Edition será única e irrepetible, como las circunstancias en las que se organiza y celebra, pero si este experimento sale bien, es probable que la Tarugo se convierta en un evento híbrido que pueda ser disfrutado presencialmente y desde casa.\r\n"
+            speakers:
+              - david-bonilla
       - title: 'Viernes, 15 de noviembre'
         events:
           - time: '9:00 - 12:00h'