Skip to content

Commit bdb7a9b

Browse files
scanalesespinozascanalesespinoza
authored
Merge pull request #24 from Axel-DaMage/members
Agregar pagina de miembros
2 parents 6602480 + 3c70a1b commit bdb7a9b

File tree

8 files changed

+535
-8
lines changed

8 files changed

+535
-8
lines changed

‎.github/workflows/pages-deploy.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ jobs:
4545
ruby-version: 3.2
4646
bundler-cache: true
4747

48+
- name: Sync Members Data
49+
run: cp community/members.yaml _data/members.yaml || true
50+
4851
- name: Build site
4952
run: bundle exec jekyll b -d "_site${{ steps.pages.outputs.base_path }}"
5053
env:

‎_data/members.yaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
members:
2+
- userId: "sergio.canales.e@gmail.com"
3+
displayName: "Sergio Canales"
4+
github: "scanalesespinoza"
5+
role: "administrador"
6+
profileUrl: "https://github.com/scanalesespinoza"
7+
avatarUrl: "https://avatars.githubusercontent.com/u/11546953?v=4"
8+
joinedAt: "2025-12-15T00:10:12.303720Z"
9+
- userId: "axel.d4mage@gmail.com"
10+
displayName: "Axel (D4MAG3)"
11+
github: "axel-damage"
12+
role: "Administrador"
13+
profileUrl: "https://github.com/axel-damage"
14+
avatarUrl: "https://avatars.githubusercontent.com/u/axel-damage?v=4"
15+
joinedAt: "2025-12-17T21:21:01.742Z"

‎_tabs/members.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
layout: page
3+
title: Miembros
4+
icon: fas fa-users
5+
order: 4
6+
---
7+
8+
<link rel="stylesheet" href="/assets/css/style.css">
9+
<link rel="stylesheet" href="/assets/css/members.css">
10+
11+
<div id="open-quest">
12+
<main class="container">
13+
<h2 class="members-title">Conoce a las personas que hacen posible esta comunidad</h2>
14+
15+
<div class="grid grid-2">
16+
{% for member in site.data.members.members %}
17+
<div class="metric-item">
18+
<div class="metric-header">
19+
<div class="member-header-content">
20+
<img src="{{ member.avatarUrl }}" alt="{{ member.displayName }}" class="member-avatar">
21+
<div>
22+
<strong>{{ member.displayName }}</strong>
23+
<br><small>{{ member.role | capitalize }}</small>
24+
</div>
25+
</div>
26+
{% if member.github %}
27+
<a href="https://github.com/{{ member.github }}" target="_blank" class="member-github-link">
28+
<i class="fab fa-github fa-lg"></i>
29+
</a>
30+
{% endif %}
31+
</div>
32+
</div>
33+
{% endfor %}
34+
</div>
35+
36+
<section class="card join-section">
37+
<header>
38+
<h2>Únete a la comunidad!</h2>
39+
<p>Genera tu propio perfil y envía un Pull Request para aparecer en esta lista.</p>
40+
</header>
41+
42+
<div class="grid grid-2">
43+
<!-- Form Column -->
44+
<div>
45+
<form id="memberForm" class="member-form" data-existing-emails='{{ site.data.members.members | map: "userId" | jsonify | escape }}'>
46+
<div class="form-group">
47+
<label for="displayName" class="form-label">Nombre para mostrar</label>
48+
<input type="text" id="displayName" class="form-input" placeholder="Ej: Juan Pérez">
49+
</div>
50+
51+
<div class="form-group">
52+
<label for="githubUser" class="form-label">Usuario de GitHub</label>
53+
<input type="text" id="githubUser" class="form-input" placeholder="Ej: jperez">
54+
</div>
55+
56+
<div class="form-group">
57+
<label for="email" class="form-label">Email (ID único)</label>
58+
<input type="email" id="email" class="form-input" placeholder="email@ejemplo.com">
59+
</div>
60+
61+
<div class="form-group">
62+
<label for="role" class="form-label">Rol</label>
63+
<select id="role" class="form-select">
64+
<option value="miembro">Miembro</option>
65+
<option value="contributor">Colaborador</option>
66+
<option value="developer">Developer</option>
67+
<option value="platform_engineer">Platform Engineer / SRE</option>
68+
<option value="devops">DevOps / DevSecOps</option>
69+
<option value="ai_specialist">AI Specialist</option>
70+
<option value="speaker">Speaker</option>
71+
<option value="it_professional">Profesional de TI</option>
72+
</select>
73+
</div>
74+
</form>
75+
</div>
76+
77+
<!-- Preview Column -->
78+
<div>
79+
<h3 class="preview-title">Vista Previa</h3>
80+
<div class="metric-item preview-card preview-dimmed" id="previewCard">
81+
<div class="metric-header">
82+
<div class="member-header-content">
83+
<img id="previewAvatar" src="https://github.com/github.png" alt="Avatar" class="member-avatar">
84+
<div>
85+
<strong id="previewName">Tu Nombre</strong>
86+
<br><small id="previewRole">Miembro</small>
87+
</div>
88+
</div>
89+
<a id="previewLink" href="#" target="_blank" class="member-github-link">
90+
<i class="fab fa-github fa-lg"></i>
91+
</a>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
97+
<div class="steps-container">
98+
<h3 class="steps-title">Pasos para unirte</h3>
99+
<ol class="steps-list">
100+
<li>Completa el formulario de arriba.</li>
101+
<li>Haz clic en <strong>Generar y Copiar</strong>.</li>
102+
<li>Se abrirá GitHub en una nueva pestaña.</li>
103+
<li>Pega el código copiado al final del archivo y crea un Pull Request.</li>
104+
</ol>
105+
<button id="generateBtn" class="generate-btn">
106+
Generar y Copiar YAML
107+
</button>
108+
</div>
109+
110+
</section>
111+
112+
113+
<!-- Notification Toast -->
114+
<div id="toast" class="toast-notification">
115+
<span id="toastMessage">Mensaje por defecto</span>
116+
</div>
117+
118+
<!-- Success Modal -->
119+
<div id="successModal" class="success-modal">
120+
<div class="modal-content">
121+
<h3 class="modal-title">¡Código Copiado!</h3>
122+
<p class="modal-text">El código YAML ha sido copiado a tu portapapeles.</p>
123+
124+
<div class="modal-steps-box">
125+
<strong class="modal-steps-title">Siguientes pasos:</strong>
126+
<ol class="modal-steps-list">
127+
<li>Serás redirigido al editor de GitHub.</li>
128+
<li>Pega el código al final del archivo.</li>
129+
<li>Selecciona "Commit changes" y luego "Create Pull Request".</li>
130+
</ol>
131+
</div>
132+
133+
<div class="modal-actions">
134+
<button id="cancelBtn" class="modal-btn-cancel">Cancelar</button>
135+
<button id="confirmBtn" class="modal-btn-confirm">Ir a GitHub</button>
136+
</div>
137+
</div>
138+
</div>
139+
140+
<script src="/assets/js/members.js"></script>
141+
</main>
142+
</div>

‎assets/css/members.css‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
/* Members Page Specific Styles */
2+
3+
.members-title {
4+
margin-bottom: 1.5rem;
5+
text-align: center;
6+
}
7+
8+
.join-section {
9+
margin-top: 2rem;
10+
}
11+
12+
.member-form {
13+
display: flex;
14+
flex-direction: column;
15+
gap: 1rem;
16+
}
17+
18+
.form-group {
19+
margin-bottom: 0.5rem;
20+
}
21+
22+
.form-label {
23+
display: block;
24+
margin-bottom: 0.5rem;
25+
color: var(--color-muted);
26+
}
27+
28+
.form-input,
29+
.form-select {
30+
width: 100%;
31+
padding: 0.75rem;
32+
border-radius: 0.5rem;
33+
border: 1px solid var(--color-border);
34+
background: var(--color-background);
35+
color: var(--color-text);
36+
}
37+
38+
.preview-title {
39+
margin-top: 0;
40+
font-size: 0.9rem;
41+
text-transform: uppercase;
42+
color: var(--color-muted);
43+
}
44+
45+
.preview-card.metric-item {
46+
opacity: 0.6;
47+
/* Include metric-item styles from style.css/open-quest.css dependencies if needed,
48+
but since we are using open-quest classes they should be inherited.
49+
This class is used to toggle opacity. */
50+
}
51+
52+
.steps-container {
53+
margin-top: 2rem;
54+
background: rgba(95, 99, 104, 0.1);
55+
padding: 1.5rem;
56+
border-radius: 1rem;
57+
}
58+
59+
.steps-title {
60+
margin-top: 0;
61+
}
62+
63+
.steps-list {
64+
padding-left: 1.5rem;
65+
color: var(--color-muted);
66+
}
67+
68+
.generate-btn {
69+
background: #238636;
70+
color: white;
71+
border: none;
72+
padding: 0.75rem 1.5rem;
73+
border-radius: 0.5rem;
74+
font-weight: 600;
75+
cursor: pointer;
76+
width: 100%;
77+
margin-top: 1rem;
78+
}
79+
80+
.generate-btn:hover {
81+
background: #2ea043;
82+
}
83+
84+
/* Toast Notification */
85+
.toast-notification {
86+
visibility: hidden;
87+
min-width: 250px;
88+
text-align: center;
89+
border-radius: 4px;
90+
padding: 16px;
91+
position: fixed;
92+
z-index: 1001;
93+
/* Higher than normal content */
94+
left: 50%;
95+
bottom: 30px;
96+
transform: translateX(-50%);
97+
opacity: 0;
98+
transition: opacity 0.3s;
99+
border: 1px solid var(--color-border);
100+
background: var(--color-surface);
101+
color: var(--color-text);
102+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
103+
}
104+
105+
/* Success Modal */
106+
.success-modal {
107+
display: none;
108+
position: fixed;
109+
z-index: 1050;
110+
left: 0;
111+
top: 0;
112+
width: 100%;
113+
height: 100%;
114+
overflow: auto;
115+
background-color: rgba(0, 0, 0, 0.5);
116+
backdrop-filter: blur(4px);
117+
}
118+
119+
.modal-content {
120+
background-color: var(--color-surface);
121+
margin: 15% auto;
122+
padding: 2rem;
123+
border: 1px solid var(--color-border);
124+
width: 90%;
125+
max-width: 500px;
126+
border-radius: 1rem;
127+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
128+
text-align: center;
129+
color: var(--color-text);
130+
}
131+
132+
.modal-title {
133+
margin-top: 0;
134+
color: var(--color-text);
135+
}
136+
137+
.modal-text {
138+
color: var(--color-muted);
139+
margin: 1rem 0;
140+
}
141+
142+
.modal-steps-box {
143+
background: rgba(95, 99, 104, 0.1);
144+
padding: 1rem;
145+
border-radius: 0.5rem;
146+
margin-bottom: 1.5rem;
147+
text-align: left;
148+
font-size: 0.9rem;
149+
}
150+
151+
.modal-steps-title {
152+
display: block;
153+
margin-bottom: 0.5rem;
154+
color: var(--color-text);
155+
}
156+
157+
.modal-steps-list {
158+
margin: 0;
159+
padding-left: 1.5rem;
160+
color: var(--color-muted);
161+
}
162+
163+
.modal-actions {
164+
display: flex;
165+
gap: 1rem;
166+
justify-content: center;
167+
}
168+
169+
.modal-btn-cancel {
170+
background: transparent;
171+
border: 1px solid var(--color-border);
172+
color: var(--color-text);
173+
padding: 0.75rem 1.5rem;
174+
border-radius: 0.5rem;
175+
cursor: pointer;
176+
}
177+
178+
.modal-btn-cancel:hover {
179+
background: rgba(95, 99, 104, 0.1);
180+
}
181+
182+
.modal-btn-confirm {
183+
background: #238636;
184+
color: white;
185+
border: none;
186+
padding: 0.75rem 1.5rem;
187+
border-radius: 0.5rem;
188+
font-weight: 600;
189+
cursor: pointer;
190+
}
191+
192+
.modal-btn-confirm:hover {
193+
background: #2ea043;
194+
}
195+
196+
/* Member Card Items */
197+
.member-header-content {
198+
display: flex;
199+
align-items: center;
200+
gap: 1rem;
201+
overflow: hidden;
202+
}
203+
204+
.member-header-content>div {
205+
overflow: hidden;
206+
min-width: 0;
207+
}
208+
209+
.member-header-content strong,
210+
.member-header-content small {
211+
display: block;
212+
white-space: nowrap;
213+
overflow: hidden;
214+
text-overflow: ellipsis;
215+
max-width: 36ch;
216+
}
217+
218+
#open-quest .member-avatar {
219+
width: 75px;
220+
height: 75px;
221+
object-fit: cover;
222+
}
223+
224+
.member-github-link {
225+
color: var(--color-text);
226+
}

0 commit comments

Comments
 (0)
⚡