1+ <!-- Talk Card Component -->
2+ < article class ="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 ">
3+ < div class ="flex flex-col md:flex-row gap-6 md:items-start ">
4+ <!-- Image Section -->
5+ < div class ="md:w-1/3 flex-shrink-0 ">
6+ {% if include.image %}
7+ < img src ="{{ include.image | relative_url }} "
8+ alt ="{{ include.title | escape }} "
9+ class ="w-full max-h-64 object-contain rounded-lg bg-gray-100 "
10+ loading ="lazy "
11+ onerror ="this.style.display='none' ">
12+ {% else %}
13+ < div class ="w-full h-64 bg-gray-200 rounded-lg flex items-center justify-center ">
14+ < span class ="text-gray-500 text-sm "> No image available</ span >
15+ </ div >
16+ {% endif %}
17+ </ div >
18+
19+ <!-- Content Section -->
20+ < div class ="md:w-2/3 flex-grow ">
21+ <!-- Event and Logos -->
22+ < div class ="flex flex-wrap items-center gap-3 mb-3 ">
23+ {% if include.event_url %}
24+ < a href ="{{ include.event_url }} "
25+ target ="_blank "
26+ rel ="noopener noreferrer "
27+ class ="text-sm font-medium text-blue-600 hover:text-blue-800 uppercase tracking-wide transition-colors "
28+ aria-label ="View {{ include.event }} event details ">
29+ {{ include.event }}
30+ </ a >
31+ {% else %}
32+ < span class ="text-sm font-medium text-gray-600 uppercase tracking-wide ">
33+ {{ include.event }}
34+ </ span >
35+ {% endif %}
36+
37+ {% if include.logos %}
38+ < div class ="flex items-center space-x-2 ml-auto ">
39+ {% assign logo_list = include.logos | split: "," %}
40+ {% for logo in logo_list %}
41+ {% assign clean_logo = logo | strip %}
42+ < img src ="{{ clean_logo | relative_url }} "
43+ alt ="{{ include.event | escape }} logo "
44+ class ="w-8 h-8 object-contain bg-gray-50 rounded p-1 "
45+ loading ="lazy "
46+ onerror ="this.style.display='none' ">
47+ {% endfor %}
48+ </ div >
49+ {% endif %}
50+ </ div >
51+
52+ <!-- Title -->
53+ < h2 class ="text-2xl font-bold text-gray-900 mb-2 underline decoration-blue-500 decoration-2 underline-offset-2 ">
54+ {{ include.title }}
55+ </ h2 >
56+
57+ <!-- Speaker and Date -->
58+ < div class ="text-gray-600 mb-3 flex flex-wrap items-center gap-2 ">
59+ < span class ="font-medium "> {{ include.speaker }}</ span >
60+ < span class ="text-gray-400 "> •</ span >
61+ {% if include.date %}
62+ < time datetime ="{{ include.date | date: '%Y-%m-%d' }} " class ="text-gray-600 ">
63+ {{ include.date | date: '%b %d, %Y' | replace: 'Sep', 'Sept' }}
64+ </ time >
65+ {% else %}
66+ < span class ="text-gray-600 "> {{ include.date }}</ span >
67+ {% endif %}
68+ </ div >
69+
70+ <!-- Abstract -->
71+ < div class ="text-gray-700 mb-4 leading-relaxed prose prose-sm max-w-none ">
72+ {{ include.abstract }}
73+ </ div >
74+
75+ <!-- Links -->
76+ {% if include.links %}
77+ < div class ="flex flex-wrap gap-2 " role ="group " aria-label ="Talk resources ">
78+ {% assign link_pairs = include.links | split: "|" %}
79+ {% for pair in link_pairs %}
80+ {% assign link_data = pair | split: ";" %}
81+ {% if link_data.size == 2 %}
82+ {% assign url = link_data[0] | strip %}
83+ {% assign label = link_data[1] | strip %}
84+ < a href ="{{ url }} "
85+ target ="_blank "
86+ rel ="noopener noreferrer "
87+ class ="inline-flex items-center gap-1 bg-blue-100 text-blue-700 px-3 py-1.5 rounded-md text-sm font-medium hover:bg-blue-200 transition-colors duration-200 "
88+ aria-label ="{{ label }} (opens in new tab) ">
89+ {{ label }}
90+ < svg class ="w-3 h-3 " fill ="none " stroke ="currentColor " viewBox ="0 0 24 24 ">
91+ < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14 "/>
92+ </ svg >
93+ </ a >
94+ {% endif %}
95+ {% endfor %}
96+ </ div >
97+ {% endif %}
98+ </ div >
99+ </ div >
100+ </ article >
0 commit comments