Skip to content

Commit 3a8fb02

Browse files
elcuervoelcuervo
authored
Merge pull request #141 from AFornio/add-talks-search-link
2 parents 9c886f0 + 6968ebf commit 3a8fb02

11 files changed

Lines changed: 146 additions & 5 deletions

File tree

‎_includes/footer.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<h1>
44
<a href="mailto:org@ruby.uy" target="_blank">org@ruby.uy</a>
55
</h1>
6+
<p><a href="/charlas">Buscar charlas</a></p>
67
<ul>
78
<li>
89
<a href="https://twitter.com/rubymontevideo" target="_blank"><img src="/assets/images/twitter.svg" alt="Twitter Icon"></a>

‎_includes/head.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@
1616
<script src="{{ "nav" | js_asset | buster }}"></script>
1717
<script src="{{ "next_meetup_callout" | js_asset | buster }}"></script>
1818
<script src="{{ "sponsors" | js_asset | buster }}"></script>
19+
<script src="{{ "talks" | js_asset | buster }}"></script>
1920
</head>

‎_includes/meetups.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<header>
33
<h1>EDICIONES PASADAS</h1>
44
<p>Conocé el contenido de las ediciones pasadas.</p>
5+
<a href="/charlas" class="meetup-event__search-link">
6+
Buscar entre todas las charlas
7+
<img src="/assets/images/arrow.svg" aria-hidden="true">
8+
</a>
59
</header>
610

711
{% assign meetups_sorted = site.meetups | sort: "date" | reverse %}

‎_layouts/meetup.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{% include nav.html %}
77

88
<main>
9-
<article id="view-meetup">
9+
<article id="view-meetup" class="view">
1010
<section>
1111
<h2>Host</h2>
1212
<a href="{{ site.data.companies[page.host].url }}">{{ site.data.companies[page.host].name }}</a>

‎_layouts/talks.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
{% include head.html %}
4+
5+
<body>
6+
{% include nav.html %}
7+
8+
<main>
9+
<article id="view-talks" class="view">
10+
<section>
11+
<h2>Charlas</h2>
12+
13+
<input type="search" id="talks-search" class="talks-search" placeholder="Buscar charla o speaker..." autocomplete="off">
14+
</section>
15+
16+
<section>
17+
{% assign meetups_sorted = site.meetups | sort: "date" | reverse %}
18+
{% assign meetups_grouped = meetups_sorted | group_by_exp: "m", "m.date | date: '%Y'" %}
19+
20+
{% for year in meetups_grouped %}
21+
{% assign year_count = 0 %}
22+
{% for meetup in year.items %}
23+
{% assign year_count = year_count | plus: meetup.talks.size %}
24+
{% endfor %}
25+
26+
<h3 class="talks-year">{{ year.name }} ({{ year_count }})</h3>
27+
28+
{% for meetup in year.items %}
29+
{% for talk in meetup.talks %}
30+
{% assign speakers = "" | split: ',' %}
31+
{% for speaker in talk.speakers %}
32+
{% assign speakers = speakers | push: site.data.people[speaker].name %}
33+
{% endfor %}
34+
35+
{% capture search_text %}{{ talk.title }} {{ meetup.title }} {{ speakers | join: ' ' }} {{ talk.description }}{% endcapture %}
36+
37+
<div class="talk" data-search="{{ search_text | downcase | strip_html | strip_newlines }}">
38+
<h4 id="{{ talk.title | slugify }}">
39+
<a href="{{ meetup.url }}#{{ talk.title | slugify }}">
40+
<span class="talk-title">{{ talk.title }}</span>
41+
</a>
42+
</h4>
43+
<p>
44+
{% for speaker in talk.speakers %}
45+
{% assign person = site.data.people[speaker] %}
46+
{% if person.github %}
47+
<img src="https://github.com/{{ person.github }}.png?size=30" alt="{{ person.name }}" loading="lazy" style="border-radius: 50%; width: 30px; vertical-align: middle;"/>
48+
{% endif %}
49+
{{ person.name }}{% unless forloop.last %}, {% endunless %}
50+
{% endfor %}
51+
</p>
52+
53+
<p>{{ talk.description }}</p>
54+
</div>
55+
{% endfor %}
56+
{% endfor %}
57+
{% endfor %}
58+
</section>
59+
</article>
60+
</main>
61+
62+
{% include footer.html %}
63+
</body>
64+
</html>

‎_sass/meetups.scss‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
@media (max-width: 425px) {
1212
padding: 2rem 1.5rem;
1313
display: flex;
14-
justify-content: center;
15-
align-items: center;
14+
flex-direction: column;
15+
align-items: flex-start;
1616
}
1717

1818
h1 {
@@ -32,6 +32,23 @@
3232
display: none;
3333
}
3434
}
35+
36+
.meetup-event__search-link {
37+
align-items: center;
38+
display: inline-flex;
39+
font-weight: bold;
40+
margin-top: 1rem;
41+
42+
&, &:active, &:visited, &:focus, &:hover {
43+
color: #FFC24D;
44+
text-decoration: none;
45+
}
46+
47+
img {
48+
margin-left: 0.5rem;
49+
filter: brightness(0) saturate(100%) invert(85%) sepia(35%) saturate(831%) hue-rotate(338deg) brightness(102%) contrast(101%);
50+
}
51+
}
3552
}
3653

3754
.meetup-event__date_year {

‎_sass/talks.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
#view-talks {
2+
.talks-year {
3+
border-bottom: 2px solid #3967D1;
4+
color: #3967D1;
5+
font-size: 2rem;
6+
font-weight: bold;
7+
margin: 2rem 0 1.5rem;
8+
padding-bottom: 0.5rem;
9+
}
10+
11+
.talks-search {
12+
background-color: #F6EEEC;
13+
border: 3px solid #2E2E2E;
14+
box-shadow: 6px 6px 0 #3967D1;
15+
color: #3967D1;
16+
font: 700 1rem 'Syncopate', sans-serif;
17+
letter-spacing: 0.05em;
18+
padding: 1rem 1.25rem;
19+
text-transform: uppercase;
20+
transition: box-shadow 0.15s ease, transform 0.15s ease;
21+
width: 100%;
22+
23+
&::placeholder {
24+
color: #3967D1;
25+
opacity: 0.5;
26+
}
27+
28+
&:focus {
29+
box-shadow: 6px 6px 0 #FFC24D;
30+
outline: none;
31+
transform: translate(-2px, -2px);
32+
}
33+
}
34+
35+
}

_sass/view_meetup.scss renamed to _sass/view.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#view-meetup {
1+
.view {
22
margin: 0 auto;
33
width: 85%;
44

‎assets/css/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
---
22
---
3-
@import 'reset', 'application', 'header', 'nav', 'next_meetup', 'view_meetup', 'meetups', 'sponsors', 'footer';
3+
@import 'reset', 'application', 'header', 'nav', 'next_meetup', 'view', 'meetups', 'sponsors', 'footer', 'talks';

‎assets/js/talks.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const input = document.querySelector("#talks-search");
3+
if (!input) return;
4+
5+
const talks = document.querySelectorAll(".talk");
6+
7+
input.addEventListener("input", () => {
8+
const query = input.value.trim().toLowerCase();
9+
10+
talks.forEach((talk) => {
11+
const haystack = talk.dataset.search || "";
12+
talk.hidden = query && !haystack.includes(query);
13+
});
14+
});
15+
});

0 commit comments

Comments
 (0)