Skip to content

Commit 60b6f66

Browse files
IvanM9IvanM9
authored
Merge pull request #69 from Ecuador-In-Tech/update-events
feat: add event link component
2 parents 36b00a9 + fcb9d03 commit 60b6f66

File tree

6 files changed

+242
-180
lines changed

6 files changed

+242
-180
lines changed

‎src/assets/events.json‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@
44
"title": "Cómo construí mi marca personal como programadora",
55
"description": "Reflexiones, estrategias y consejos prácticos sobre Marca personal, por Sofía Grijalva (creadora de CondorCoders)",
66
"longDescription": "¡Hola! Si estás dando tu primer paso en el mundo IT o buscando un cambio en tu carrera, te invitamos a nuestra próxima charla sobre Marca personal en IT con Sofía Grijalva (Front-end developer en ABC News y Fundadora de CondorCoders) ✨. En esta edición especial, aprenderás estrategias y consejos valiosos sobre creación de marca personal, basados en el propio proceso de Sofía al crear CondorCoders. Esta charla exploraremos cómo definir una identidad propia, crear contenido y generar oportunidades. Además, cómo elegir un enfoque en tecnología y aprovechar plataformas como GitHub, Instagram y Twitch para construir una comunidad. Por último, abordaremos también la importancia del networking y cómo gestionar críticas y crecimiento.",
7-
"link": "https://forms.gle/niE65ZGNEikLBVjw7",
7+
"link": {
8+
"url": "https://youtu.be/cs2ax_WvXM4?si=hG7KMz4FL_YJajyQ",
9+
"title": "Mira la charla aquí",
10+
"description": "No te pierdas la charla, ya está disponible en YouTube",
11+
"footer": "",
12+
"buttonText": "Ver charla"
13+
},
814
"date": "2025-02-22T19:00",
915
"place": "Online",
1016
"modality": "Virtual",
@@ -17,7 +23,13 @@
1723
"title": "Path to Impact: Pablo Cisneros",
1824
"description": "Desafía los límites: Cómo trabajar en una de las mejores compañías del mundo",
1925
"longDescription": "¿Alguna vez te has preguntado cómo las naves espaciales modernas vencen la gravedad terrestre y se aventuran a proezas cada vez más grandes en el vacío del espacio? Esta y otras hazañas de ingeniería no serían posibles sin el trabajo y el conocimiento de grandes equipos interdisciplinarios —¡y el ámbito IT sin duda tiene en ello su lugar! Te invitamos a descubrir con nosotros el viaje de Pablo Cisneros hacia el Jet Propulsion Lab de la NASA, y cómo sus conocimientos en DevOps y reliability son ahora una pieza importante de proyectos que nos llevarán un poco más lejos en la odisea humana por explorar el espacio.",
20-
"link": "https://forms.gle/Hgs2cGvcEugzqQCu8",
26+
"link": {
27+
"url": "https://youtu.be/vPDC9rvRtaw?si=eEWsiu23d0rL1Qqe",
28+
"title": "Mira la charla aquí",
29+
"description": "No te pierdas la charla, ya está disponible en YouTube",
30+
"footer": "",
31+
"buttonText": "Ver charla"
32+
},
2133
"date": "2025-02-07T19:00",
2234
"place": "Online",
2335
"modality": "Virtual",
@@ -30,7 +42,13 @@
3042
"title": "Path to Impact: Danaé Townsend",
3143
"description": "Beyond: Equilibrio entre datos y humanidad",
3244
"longDescription": "¿Cómo automatizar el proceso de selección de candidatos sin perder su valor humano? Ante un panorama cada vez más desafiante —y a su vez lleno de oportunidades— te invitamos a ser parte de Beyond: Equilibrio entre datos y humanidad. Conocerás los hallazgos, retos y progresos de Danaé y su equipo durante su trabajo en Beyond para combinar clasificación y análisis de datos con IA, fuentes cualitativas de información y juicio humano. Además, podrás informarte sobre las tendencias actuales en procesos de contratación, y cómo puedes usar estos aprendizajes a tu favor. ¡Anímate a descubrir cómo una visión más amplia del mundo IT puede ayudarte a destacar tus habilidades y experiencias de forma única!",
33-
"link": "https://forms.gle/Hgs2cGvcEugzqQCu8",
45+
"link": {
46+
"url": "https://youtu.be/6KF05V6JJOA?si=cDRfx5YLrVphIYyY",
47+
"title": "Mira la charla aquí",
48+
"description": "No te pierdas la charla, ya está disponible en YouTube",
49+
"footer": "",
50+
"buttonText": "Ver charla"
51+
},
3452
"date": "2025-01-28T19:00",
3553
"place": "Online",
3654
"modality": "Virtual",
@@ -43,7 +61,13 @@
4361
"title": "DEVCON VII Watch Party - Guayaquil",
4462
"description": "Conecta con la tecnología del futuro y sé parte de la transformación digital en ECU",
4563
"longDescription": "DEVCON, la conferencia global más influyente de Ethereum, es un crisol de desarrolladores, innovadores y visionarios. Celebrado en Bangkok, DEVCON SEA fue un punto de encuentro clave para la comunidad global, donde una delegación de ocho representantes de Ecuador se sumergió en las últimas innovaciones y principios de Ethereum. DEVCON VII Watch Party es una iniciativa multi-ciudad para compartir los aprendizajes de DEVCON SEA con la comunidad local. Este evento de visionado presentará grabaciones de charlas principales, paneles y sesiones técnicas de DEVCON VII, diseñadas para educar y fomentar el debate y la creación de redes entre los asistentes en Quito, Guayaquil y Cuenca.",
46-
"link": "https://lu.ma/ik89v6yr",
64+
"link": {
65+
"url": "https://lu.ma/ik89v6yr",
66+
"title": "Más información del evento",
67+
"description": "Este evento es gratuito y abierto a la comunidad. ¡Te esperamos!",
68+
"footer": "",
69+
"buttonText": "Ir a la web de registro"
70+
},
4771
"date": "2025-01-30T10:00",
4872
"place": "Universidad Bolivariana del Ecuador (UBE)",
4973
"modality": "Presencial",
@@ -56,7 +80,13 @@
5680
"title": "Path to Impact: Brayen Gavilanes",
5781
"description": "Automatización web para postulaciones a empleo con Selenium",
5882
"longDescription": "La búsqueda de empleo es un paso natural en el camino de cualquier profesional —y también una oportunidad para innovar. En la próxima charla de nuestra serie Path to impact, Brayen Gavilanes (DevOps Engineer y Project Manager con amplia experiencia en UNIX, Cloud y automatización), compartirá una herramienta única que desarrolló durante su propia búsqueda de empleo. Inspirado por los retos de este proceso, Brayen explorará cómo convertir desafíos comunes en catalizadores para soluciones innovadoras",
59-
"link": "https://forms.gle/Hgs2cGvcEugzqQCu8",
83+
"link": {
84+
"url": "https://www.youtube.com/live/55ZlgHZ8tME?si=tbgmwAmK6B9-K9QX",
85+
"title": "Mira la charla aquí",
86+
"description": "No te pierdas la charla, ya está disponible en YouTube",
87+
"footer": "",
88+
"buttonText": "Ver charla"
89+
},
6090
"date": "2025-01-25T19:00",
6191
"place": "Online",
6292
"modality": "Virtual",
@@ -69,7 +99,13 @@
6999
"title": "Path to Impact: Agustina Scandogliero",
70100
"description": "Estrategias para impulsar tu carrera en IT",
71101
"longDescription": "Construir una carrera en el mundo tech es un camino tan desafiante como lleno de oportunidades. Path to impact es una serie de charlas pensadas para acompañarte en el proceso, ofreciendo estrategias y consejos prácticos para que puedas sobresalir y dejar tu marca en un sector competitivo, sin importar tu nivel de experiencia o área de especialización. Descubrirás las habilidades y perfiles en demanda en empresas tech, y aprenderás métodos y consejos prácticos para comunicar tu experiencia de forma auténtica y proactiva. Si estás dando tu primer paso en el mundo IT o buscando un cambio en tu carrera, esta serie es para ti. ¡Únete y transforma tu camino profesional!",
72-
"link": "https://forms.gle/BHCDTkGfGBH8Rio49",
102+
"link": {
103+
"url": "https://youtu.be/tJWORsfX2oE?si=rwkw4YL7cRjK8GKM",
104+
"title": "Mira la charla aquí",
105+
"description": "No te pierdas la charla, ya está disponible en YouTube",
106+
"footer": "",
107+
"buttonText": "Ver charla"
108+
},
73109
"date": "2025-01-17T18:00",
74110
"place": "Online",
75111
"modality": "Virtual",
@@ -82,7 +118,13 @@
82118
"title": "Git & GitHub",
83119
"description": "Hands-on Workshop para iniciantes.",
84120
"longDescription": "¿Interesado en el mundo tech pero no sabes por dónde empezar? ¡Este taller es para ti! Únete a nosotros para aprender los fundamentos de Git y GitHub, las herramientas esenciales para la colaboración en cualquier proyecto digital.",
85-
"link": "https://forms.gle/BHCDTkGfGBH8Rio49",
121+
"link": {
122+
"url": "https://youtu.be/V5g-CxWVEJE?si=n1WbcIYWkdPPmUlX",
123+
"title": "Mira la charla aquí",
124+
"description": "No te pierdas la charla, ya está disponible en YouTube",
125+
"footer": "",
126+
"buttonText": "Ver charla"
127+
},
86128
"date": "2024-12-04T19:00",
87129
"place": "Online",
88130
"modality": "Virtual",

‎src/components/CardEvent.astro‎

Lines changed: 86 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -2,111 +2,101 @@
22
import type { Event } from "../interfaces/events";
33
import CardBase from "./CardBase.astro";
44
5-
const {
6-
id,
7-
title,
8-
description,
9-
link,
10-
date,
11-
place,
12-
modality,
13-
hostedBy,
14-
image,
15-
attendees,
16-
} = Astro.props as Event;
5+
const { id, title, description, date, place, modality, image, attendees } =
6+
Astro.props as Event;
177
188
const eventHeaderProps = { id, title, image, modality, description };
199
const justDate = date.split("T");
2010
---
2111

2212
<CardBase {...eventHeaderProps}>
23-
<!-- Event Date, Location and Atendees -->
24-
<div class="space-y-2 text-sm text-gray-500">
25-
<div class="flex items-center gap-2">
26-
<svg
27-
class="w-4 h-4"
28-
fill="none"
29-
stroke="currentColor"
30-
viewBox="0 0 24 24"
31-
>
32-
<path
33-
stroke-linecap="round"
34-
stroke-linejoin="round"
35-
stroke-width="2"
36-
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
37-
>
38-
</path>
39-
</svg>
40-
<span>
41-
{
42-
new Date(justDate[0]).toLocaleDateString("es-EC", {
43-
weekday: "long",
44-
year: "numeric",
45-
month: "long",
46-
day: "numeric",
47-
timeZone: "ECT",
48-
})
49-
}
50-
</span>
13+
<!-- Event Date, Location and Atendees -->
14+
<div class="space-y-2 text-sm text-gray-500">
15+
<div class="flex items-center gap-2">
16+
<svg
17+
class="w-4 h-4"
18+
fill="none"
19+
stroke="currentColor"
20+
viewBox="0 0 24 24"
21+
>
22+
<path
23+
stroke-linecap="round"
24+
stroke-linejoin="round"
25+
stroke-width="2"
26+
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
27+
>
28+
</path>
29+
</svg>
30+
<span>
31+
{
32+
new Date(justDate[0]).toLocaleDateString("es-EC", {
33+
weekday: "long",
34+
year: "numeric",
35+
month: "long",
36+
day: "numeric",
37+
timeZone: "ECT",
38+
})
39+
}
40+
</span>
41+
</div>
42+
<div class="flex items-center gap-2">
43+
<svg
44+
class="w-4 h-4"
45+
fill="none"
46+
stroke="currentColor"
47+
viewBox="0 0 24 24"
48+
>
49+
<path
50+
stroke-linecap="round"
51+
stroke-linejoin="round"
52+
stroke-width="2"
53+
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
54+
>
55+
</path>
56+
<path
57+
stroke-linecap="round"
58+
stroke-linejoin="round"
59+
stroke-width="2"
60+
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
61+
>
62+
</path>
63+
</svg>
64+
<span>{place}</span>
65+
</div>
66+
<div class="flex items-center gap-2">
67+
<svg
68+
class="w-4 h-4"
69+
fill="none"
70+
stroke="currentColor"
71+
viewBox="0 0 24 24"
72+
>
73+
<path
74+
stroke-linecap="round"
75+
stroke-linejoin="round"
76+
stroke-width="2"
77+
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
78+
>
79+
</path>
80+
</svg>
81+
<span>{attendees} asistentes</span>
82+
</div>
83+
<a href={`/event/${id}`} class="details-button">Ver detalles</a>
5184
</div>
52-
<div class="flex items-center gap-2">
53-
<svg
54-
class="w-4 h-4"
55-
fill="none"
56-
stroke="currentColor"
57-
viewBox="0 0 24 24"
58-
>
59-
<path
60-
stroke-linecap="round"
61-
stroke-linejoin="round"
62-
stroke-width="2"
63-
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
64-
>
65-
</path>
66-
<path
67-
stroke-linecap="round"
68-
stroke-linejoin="round"
69-
stroke-width="2"
70-
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
71-
>
72-
</path>
73-
</svg>
74-
<span>{place}</span>
75-
</div>
76-
<div class="flex items-center gap-2">
77-
<svg
78-
class="w-4 h-4"
79-
fill="none"
80-
stroke="currentColor"
81-
viewBox="0 0 24 24"
82-
>
83-
<path
84-
stroke-linecap="round"
85-
stroke-linejoin="round"
86-
stroke-width="2"
87-
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
88-
>
89-
</path>
90-
</svg>
91-
<span>{attendees} asistentes</span>
92-
</div>
93-
<a href={`/event/${id}`} class="details-button">Ver detalles</a>
94-
</div>
9585
</CardBase>
9686

9787
<style>
98-
.details-button {
99-
display: inline-block;
100-
margin-top: 1rem;
101-
padding: 0.5rem 1rem;
102-
background-color: #2563eb;
103-
color: white;
104-
text-decoration: none;
105-
border-radius: 6px;
106-
transition: background-color 0.2s;
107-
}
88+
.details-button {
89+
display: inline-block;
90+
margin-top: 1rem;
91+
padding: 0.5rem 1rem;
92+
background-color: #2563eb;
93+
color: white;
94+
text-decoration: none;
95+
border-radius: 6px;
96+
transition: background-color 0.2s;
97+
}
10898

109-
.details-button:hover {
110-
background-color: #1d4ed8;
111-
}
99+
.details-button:hover {
100+
background-color: #1d4ed8;
101+
}
112102
</style>

‎src/components/Hero.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
// Image will be optimized by Astro's built-in image optimization
3-
const overlayStyle = "linear-gradient(to right, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.85))";
3+
const overlayStyle =
4+
"linear-gradient(to right, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.85))";
45
---
56

67
<section class="hero-section">

‎src/components/event/EventLink.astro‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
const { link, title, description, footer, buttonText } = Astro.props;
3+
---
4+
5+
<aside class="event-sidebar">
6+
<div class="registration-card">
7+
<div class="card-content">
8+
<h3>{title}</h3>
9+
10+
<p>{description}</p>
11+
<a
12+
href={link}
13+
class="register-button"
14+
target="_blank"
15+
rel="noopener noreferrer"
16+
>
17+
{buttonText}
18+
</a>
19+
<p class="registration-note">
20+
{footer}
21+
</p>
22+
</div>
23+
</div>
24+
</aside>

‎src/interfaces/events.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,19 @@ export interface Event {
33
title: string;
44
description: string;
55
longDescription: string;
6-
link: string;
6+
link: LinkData;
77
date: string;
88
place: string;
99
modality: string;
1010
hostedBy: string;
1111
image: string;
1212
attendees: number;
1313
}
14+
15+
interface LinkData {
16+
title: string;
17+
description: string;
18+
url: string;
19+
footer: string;
20+
buttonText: string;
21+
}

0 commit comments

Comments
 (0)