Skip to content

Commit f26c4fe

Browse files
santibsantib
authored
Merge pull request #139 from paulacianelli/add-speakers-page
Redesign meetup detail page with card layout and carousel
2 parents 6b084f3 + d29a6ac commit f26c4fe

7 files changed

Lines changed: 1165 additions & 87 deletions

File tree

‎Gemfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,4 @@ gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
3333
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
3434

3535
gem "webrick", "~> 1.8"
36+

‎Gemfile.lock‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ GEM
99
eventmachine (>= 0.12.9)
1010
http_parser.rb (~> 0)
1111
eventmachine (1.2.7)
12-
ffi (1.16.3)
12+
ffi (1.17.4-arm64-darwin)
13+
ffi (1.17.4-x86_64-darwin)
14+
ffi (1.17.4-x86_64-linux-gnu)
1315
forwardable-extended (2.6.0)
1416
google-protobuf (4.26.1-arm64-darwin)
1517
rake (>= 13)
@@ -85,6 +87,7 @@ GEM
8587
PLATFORMS
8688
arm64-darwin-22
8789
arm64-darwin-23
90+
arm64-darwin-24
8891
x86_64-darwin-21
8992
x86_64-linux
9093

‎_includes/meetups.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ <h1>EDICIONES PASADAS</h1>
88
</a>
99
</header>
1010

11+
{% assign months_es = "ENE,FEB,MAR,ABR,MAY,JUN,JUL,AGO,SEP,OCT,NOV,DIC" | split: ',' %}
1112
{% assign meetups_sorted = site.meetups | sort: "date" | reverse %}
1213

1314
{% assign meetups_by_year = meetups_sorted
@@ -16,7 +17,7 @@ <h1>EDICIONES PASADAS</h1>
1617
| reverse %}
1718

1819
{% for year in meetups_by_year | reverse %}
19-
<h2 class="meetup-event__date_year">{{ year.name }}</h2>
20+
<h2 class="meetup-event__date_year" id="meetups-{{ year.name }}">{{ year.name }}</h2>
2021

2122
<ul>
2223
{% for meetup in year.items %}
@@ -25,7 +26,7 @@ <h2 class="meetup-event__date_year">{{ year.name }}</h2>
2526
<li class="meetup-event">
2627
<a href="{{ meetup.url }}" class="meetup-event__link">
2728
<span class="meetup-event__date">
28-
{{ meetup.date | date_to_string }}
29+
{% assign m_idx = meetup.date | date: '%m' | minus: 1 %}{{ meetup.date | date: "%d" }} {{ months_es[m_idx] }}
2930
</span>
3031
<span class="meetup-event__company">
3132
{{ meetup_sponsor_name }}

‎_layouts/meetup.html‎

Lines changed: 226 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,76 +2,249 @@
22
<html lang="es">
33
{% include head.html %}
44

5-
<body>
5+
<body class="page-meetup">
6+
{% assign host = site.data.companies[page.host] %}
7+
{% assign host_name = host.name | default: page.host %}
8+
{% assign host_domain = host.url | remove: 'https://' | remove: 'http://' | remove: 'www.' | split: '/' | first %}
9+
{% assign year = page.date | date: '%Y' %}
10+
{% assign months_es = "ENE,FEB,MAR,ABR,MAY,JUN,JUL,AGO,SEP,OCT,NOV,DIC" | split: ',' %}
11+
{% assign month_idx = page.date | date: '%m' | minus: 1 %}
12+
{% assign month_name = months_es[month_idx] %}
13+
614
{% include nav.html %}
715

816
<main>
9-
<article id="view-meetup" class="view">
10-
<section>
11-
<h2>Host</h2>
12-
<a href="{{ site.data.companies[page.host].url }}">{{ site.data.companies[page.host].name }}</a>
13-
</section>
17+
<article id="view-meetup">
18+
<nav class="view-meetup__breadcrumb" aria-label="breadcrumb">
19+
<div class="breadcrumb__inner">
20+
<ol class="breadcrumb__trail">
21+
<li><a href="/">RUBY.UY</a></li>
22+
<li><span aria-hidden="true">/</span></li>
23+
<li><a href="/#meetups">MEETUPS</a></li>
24+
<li><span aria-hidden="true">/</span></li>
25+
<li><a href="/#meetups-{{ year }}">{{ year }}</a></li>
26+
<li><span aria-hidden="true">/</span></li>
27+
<li class="breadcrumb__current">{{ host_name | upcase }}</li>
28+
</ol>
29+
</div>
30+
</nav>
1431

15-
<section>
16-
<h2>Speakers</h2>
17-
<ul>
18-
{% for talk in page.talks %}
19-
{% for speaker in talk.speakers %}
20-
<li>
21-
{% if site.data.people[speaker].github %}
22-
<a href="https://github.com/{{ site.data.people[speaker].github }}">
23-
<img src="https://github.com/{{ site.data.people[speaker].github }}.png?size=30" alt="{{ site.data.people[speaker].name }}" style="border-radius: 50%; width: 30px"/>{{ site.data.people[speaker].name }}
24-
</a>
25-
{% else %}
26-
{{ site.data.people[speaker].name }}
32+
<section class="view-meetup__hero">
33+
<div class="hero__inner">
34+
<div class="hero__left">
35+
<div class="hero__heading">
36+
<div class="date-badge" aria-label="{{ page.date | date: '%Y-%m-%d' }}">
37+
<span class="date-badge__day">{{ page.date | date: '%d' }}</span>
38+
<span class="date-badge__month">{{ month_name }}</span>
39+
<span class="date-badge__year">{{ year }}</span>
40+
</div>
41+
<div class="hero__title-block">
42+
<span class="hero__pill">MEETUP</span>
43+
<h1 class="hero__title">
44+
<span class="hero__title-line">RUBY MEETUP</span>
45+
<span class="hero__title-line">@ {{ host_name | upcase }}</span>
46+
</h1>
47+
</div>
48+
</div>
49+
50+
{% if page.description %}
51+
<p class="hero__description">{{ page.description }}</p>
2752
{% endif %}
28-
</li>
29-
{% endfor %}
30-
{% endfor %}
31-
</ul>
53+
</div>
54+
55+
</div>
3256
</section>
3357

34-
<section>
35-
<h2>Charlas</h2>
58+
<section class="view-meetup__grid-section">
59+
<div class="grid-section__inner">
60+
<div class="view-meetup__grid">
61+
<div class="view-meetup__col view-meetup__col--left">
62+
<section class="card host-card">
63+
<span class="card__label card__label--host">HOST</span>
64+
<div class="host-card__body">
65+
{% if host.image %}
66+
<div class="host-card__logo-tile">
67+
<img class="host-card__logo" src="{{ host.image }}" alt="{{ host_name }}">
68+
</div>
69+
{% endif %}
70+
<div class="host-card__info">
71+
<h2 class="host-card__name">{{ host_name | upcase }}</h2>
72+
{% if host.description %}
73+
<p class="host-card__description">{{ host.description }}</p>
74+
{% endif %}
75+
{% if host.url %}
76+
<a class="host-card__link" href="{{ host.url }}" target="_blank" rel="noopener">
77+
{{ host_domain }} <span class="host-card__link-icon" aria-hidden="true">↗</span>
78+
</a>
79+
{% endif %}
80+
</div>
81+
</div>
82+
</section>
3683

37-
{% for talk in page.talks %}
38-
<div class="talk">
39-
{% assign speakers = "" | split: ',' %}
84+
{% assign seen_speakers = "" | split: "," %}
85+
{% assign any_speakers = false %}
86+
{% for talk in page.talks %}
87+
{% for speaker_key in talk.speakers %}
88+
{% unless seen_speakers contains speaker_key %}
89+
{% assign seen_speakers = seen_speakers | push: speaker_key %}
90+
{% assign any_speakers = true %}
91+
{% endunless %}
92+
{% endfor %}
93+
{% endfor %}
4094

41-
{% for speaker in talk.speakers %}
42-
{% assign speakers = speakers | push: site.data.people[speaker].name %}
43-
{% endfor %}
95+
{% if any_speakers %}
96+
<section class="card speakers-card">
97+
<span class="card__label card__label--speakers">SPEAKERS</span>
98+
<ul class="speakers-list">
99+
{% for speaker_key in seen_speakers %}
100+
{% assign speaker = site.data.people[speaker_key] %}
101+
<li class="speaker">
102+
{% if speaker.photo %}
103+
<img class="speaker__avatar" src="{{ speaker.photo }}" alt="{{ speaker.name }}">
104+
{% elsif speaker.github %}
105+
<img class="speaker__avatar" src="https://github.com/{{ speaker.github }}.png?size=200" alt="{{ speaker.name }}">
106+
{% else %}
107+
{% assign speaker_name_parts = speaker.name | split: " " %}
108+
{% assign speaker_initial_first = speaker_name_parts[0] | slice: 0 | upcase %}
109+
{% if speaker_name_parts.size > 1 %}
110+
{% assign speaker_last_part = speaker_name_parts | last %}
111+
{% assign speaker_initial_last = speaker_last_part | slice: 0 | upcase %}
112+
{% assign speaker_initials = speaker_initial_first | append: speaker_initial_last %}
113+
{% else %}
114+
{% assign speaker_initials = speaker_initial_first %}
115+
{% endif %}
116+
<span class="speaker__avatar speaker__avatar--placeholder" aria-hidden="true">{{ speaker_initials }}</span>
117+
{% endif %}
118+
<div class="speaker__info">
119+
<h3 class="speaker__name">{{ speaker.name | upcase }}</h3>
120+
{% if speaker.role %}
121+
<p class="speaker__role">{{ speaker.role }}</p>
122+
{% endif %}
123+
<ul class="speaker__socials">
124+
{% if speaker.github %}
125+
<li>
126+
<a href="https://github.com/{{ speaker.github }}" target="_blank" rel="noopener">
127+
GitHub <span class="speaker__socials-arrow" aria-hidden="true">↗</span>
128+
</a>
129+
</li>
130+
{% endif %}
131+
{% if speaker.twitter %}
132+
<li>
133+
<a href="https://twitter.com/{{ speaker.twitter }}" target="_blank" rel="noopener">
134+
Twitter <span class="speaker__socials-arrow" aria-hidden="true">↗</span>
135+
</a>
136+
</li>
137+
{% endif %}
138+
</ul>
139+
</div>
140+
</li>
141+
{% endfor %}
142+
</ul>
143+
</section>
144+
{% endif %}
145+
</div>
44146

45-
<h3 id="{{ talk.title | slugify }}">
46-
<a href="#{{ talk.title | slugify }}">
47-
<span class="talk-title">{{ talk.title }}</span>
48-
</a>
49-
<p>{{ speakers | join: ", " }}</p>
50-
</h3>
147+
<div class="view-meetup__col view-meetup__col--right">
148+
<section class="card charla-destacada" id="charla-destacada">
149+
{% if page.talks.size > 0 %}
150+
<header class="charla-destacada__header">
151+
<span class="charla-destacada__counter" data-counter aria-live="polite">
152+
01 / {% if page.talks.size < 10 %}0{% endif %}{{ page.talks.size }}
153+
</span>
154+
</header>
155+
{% endif %}
51156

52-
<p>{{ talk.description }}<p>
157+
<div class="carousel" data-carousel>
158+
<ol class="carousel__track" data-track>
159+
{% for talk in page.talks %}
160+
<li class="slide" data-slide>
161+
<h3 class="slide__title" id="{{ talk.title | slugify }}">
162+
<a href="#{{ talk.title | slugify }}">
163+
{{ talk.title | upcase }}
164+
</a>
165+
</h3>
53166

54-
{% if talk.recording %}
55-
<div class="keep-aspect-ratio">
56-
<iframe src="{{ talk.recording }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
57-
</iframe>
58-
</div>
59-
{% endif %}
167+
<p class="slide__speakers">
168+
{% for speaker_key in talk.speakers %}
169+
{% assign speaker = site.data.people[speaker_key] %}
170+
{% if speaker.photo %}
171+
<img class="slide__speaker-avatar" src="{{ speaker.photo }}" alt="{{ speaker.name }}">
172+
{% elsif speaker.github %}
173+
<img class="slide__speaker-avatar" src="https://github.com/{{ speaker.github }}.png?size=60" alt="{{ speaker.name }}">
174+
{% else %}
175+
{% assign slide_name_parts = speaker.name | split: " " %}
176+
{% assign slide_initial_first = slide_name_parts[0] | slice: 0 | upcase %}
177+
{% if slide_name_parts.size > 1 %}
178+
{% assign slide_initial_last = slide_name_parts | last | slice: 0 | upcase %}
179+
{% assign slide_initials = slide_initial_first | append: slide_initial_last %}
180+
{% else %}
181+
{% assign slide_initials = slide_initial_first %}
182+
{% endif %}
183+
<span class="slide__speaker-avatar slide__speaker-avatar--placeholder" aria-hidden="true">{{ slide_initials }}</span>
184+
{% endif %}
185+
<span>{{ speaker.name }}</span>{% unless forloop.last %}<span class="slide__speaker-sep">, </span>{% endunless %}
186+
{% endfor %}
187+
</p>
60188

61-
{% if talk.slides %}
62-
<div class="keep-aspect-ratio">
63-
<iframe src="{{ talk.slides }}" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
64-
</iframe>
65-
</div>
66-
{% endif %}
189+
{% if talk.recording %}
190+
<div class="keep-aspect-ratio">
191+
<iframe src="{{ talk.recording }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen loading="lazy"></iframe>
192+
</div>
193+
{% endif %}
67194

195+
{% if talk.slides %}
196+
<div class="keep-aspect-ratio">
197+
<iframe src="{{ talk.slides }}" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe>
198+
</div>
199+
{% endif %}
200+
201+
{% if talk.topics or talk.duration %}
202+
<footer class="slide__footer">
203+
{% if talk.topics %}
204+
<div class="slide__meta slide__meta--tema">
205+
<span class="slide__meta-label">TEMA</span>
206+
<span class="slide__meta-value">{{ talk.topics | join: ', ' }}</span>
207+
</div>
208+
{% endif %}
209+
{% if talk.duration %}
210+
<div class="slide__meta slide__meta--duracion">
211+
<span class="slide__meta-label">DURACIÓN</span>
212+
<span class="slide__meta-value">{{ talk.duration }}</span>
213+
</div>
214+
{% endif %}
215+
</footer>
216+
{% endif %}
217+
</li>
218+
{% endfor %}
219+
</ol>
220+
221+
{% if page.talks.size > 1 %}
222+
<button class="carousel__btn carousel__btn--prev" type="button" data-prev aria-label="Charla anterior">&lsaquo;</button>
223+
<button class="carousel__btn carousel__btn--next" type="button" data-next aria-label="Siguiente charla">&rsaquo;</button>
224+
{% endif %}
225+
</div>
226+
</section>
227+
</div>
228+
</div>
68229
</div>
69-
{% endfor %}
70230
</section>
71-
<section> {{ content }} </section>
231+
232+
{% if content and content != "" %}
233+
<section class="view-meetup__content">{{ content }}</section>
234+
{% endif %}
235+
236+
<nav class="view-meetup__footer-bar">
237+
<div class="footer-bar__inner">
238+
<a href="/#meetups">&larr; VER MÁS EDICIONES PASADAS</a>
239+
</div>
240+
</nav>
72241
</article>
73242
</main>
74-
</body>
75243

76-
{% include footer.html %}
244+
{% if page.talks.size > 0 %}
245+
<script src="/assets/js/meetup_carousel.js" defer></script>
246+
{% endif %}
247+
248+
{% include footer.html %}
249+
</body>
77250
</html>

‎_sass/meetups.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
#meetups {
22
background-color: #F6EEEC;
3+
display: flex;
4+
flex-direction: column;
5+
min-height: 100vh;
6+
width: 100%;
37

48
header {
59
background-color: #3967D1;
@@ -53,10 +57,12 @@
5357

5458
.meetup-event__date_year {
5559
align-items: center;
60+
border-bottom: 2px solid #2851AE;
5661
display: flex;
57-
padding: 1.5rem 8rem;
5862
font-weight: bold;
5963
justify-content: space-between;
64+
margin: 2.75rem 0 0.875rem;
65+
padding: 1.25rem 8rem 0.625rem;
6066
}
6167

6268
ul {

0 commit comments

Comments
 (0)