Skip to content

Commit ce854be

Browse files
elcuervoelcuervo
authored
Merge pull request #142 from AFornio/community-ruby-projects
2 parents 3a8fb02 + 43bc54f commit ce854be

12 files changed

Lines changed: 999 additions & 1 deletion

File tree

‎_data/community.yml‎

Lines changed: 564 additions & 0 deletions
Large diffs are not rendered by default.

‎_includes/default_header.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ <h2>Sé parte_</h2>
1515
{{ service[0] }}<img src='/assets/images/arrow.svg' aria-hidden="true" focuseable="false"/>
1616
</a>
1717
{% endfor %}
18+
<a href="/community">Community<img src='/assets/images/arrow.svg' aria-hidden="true" focuseable="false"/></a>
1819
</div>
1920
</div>
2021
</header>

‎_includes/project_card.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<div class="project {{ medal_class }}"
2+
data-search="{{ search_text | downcase | strip_html | strip_newlines }}"
3+
data-user="{{ project.github_user }}"
4+
data-stars="{{ project.stars }}"
5+
data-name="{{ project.name | downcase }}">
6+
7+
{% if medal_name != "" %}
8+
<div class="project-medal-wrap">
9+
<img src="/assets/images/{{ medal_name }}.svg" alt="Rank {{ project_rank }}" class="project-medal">
10+
</div>
11+
{% endif %}
12+
13+
<div class="project-body">
14+
<div class="project-header">
15+
<h4>
16+
<a href="{{ project.url }}" target="_blank" rel="noopener">{{ project.name }}</a>
17+
</h4>
18+
<span class="project-stars">★ {{ project.stars }}</span>
19+
</div>
20+
21+
{% if project.description != "" %}
22+
<p class="project-description">{{ project.description }}</p>
23+
{% endif %}
24+
25+
<div class="project-meta">
26+
{% if person.github %}
27+
<img src="https://github.com/{{ person.github }}.png?size=30" alt="{{ person.name }}" loading="lazy" style="border-radius: 50%; width: 30px; vertical-align: middle;"/>
28+
{% endif %}
29+
<span class="project-author">{{ person.name | default: project.github_user }}</span>
30+
31+
{% if project.topics.size > 0 %}
32+
<div class="project-topics">
33+
{% for topic in project.topics limit: 4 %}
34+
<span class="project-topic">{{ topic }}</span>
35+
{% endfor %}
36+
</div>
37+
{% endif %}
38+
</div>
39+
</div>
40+
</div>

‎_layouts/community.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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-community" class="view">
10+
<section>
11+
<h2>Community</h2>
12+
<p class="community-subtitle">Ruby & Rails open source projects built by our community</p>
13+
14+
<div class="community-controls">
15+
<input type="search" id="community-search" class="community-search" placeholder="Search project or author..." autocomplete="off">
16+
17+
<div class="community-sort">
18+
<button class="sort-btn active" data-sort="stars">By stars</button>
19+
<button class="sort-btn" data-sort="user">By author</button>
20+
<button class="sort-btn" data-sort="name">A–Z</button>
21+
</div>
22+
</div>
23+
24+
<p class="community-updated">Last updated: {{ site.data.community.last_updated | date: "%B %-d, %Y" }}</p>
25+
</section>
26+
27+
<section id="community-list">
28+
{% assign projects_sorted = site.data.community.projects | sort: "stars" | reverse %}
29+
{% assign medals = "medal-gold,medal-silver,medal-bronze" | split: "," %}
30+
31+
{% for project in projects_sorted %}
32+
{% assign person = nil %}
33+
{% for p in site.data.people %}
34+
{% if p[1].github == project.github_user %}
35+
{% assign person = p[1] %}
36+
{% endif %}
37+
{% endfor %}
38+
39+
{% capture search_text %}{{ project.name }} {{ project.description }} {{ project.github_user }} {{ person.name }} {{ project.topics | join: ' ' }}{% endcapture %}
40+
41+
{% assign medal_name = "" %}
42+
{% assign medal_class = "" %}
43+
{% if forloop.index <= 3 %}
44+
{% assign medal_name = medals[forloop.index0] %}
45+
{% assign medal_class = "project--medal project--" | append: medal_name %}
46+
{% endif %}
47+
48+
{% assign project_rank = forloop.index %}
49+
{% include project_card.html %}
50+
{% endfor %}
51+
</section>
52+
</article>
53+
</main>
54+
55+
{% include footer.html %}
56+
<script src="/assets/js/community.js"></script>
57+
</body>
58+
</html>

‎_sass/community.scss‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
#view-community {
2+
h2 {
3+
overflow-wrap: break-word;
4+
5+
@media (max-width: 480px) {
6+
font-size: 1.75rem;
7+
}
8+
}
9+
10+
.community-subtitle {
11+
color: #2E2E2E;
12+
margin-bottom: 1.5rem;
13+
opacity: 0.7;
14+
}
15+
16+
.community-controls {
17+
display: flex;
18+
flex-direction: column;
19+
gap: 1rem;
20+
}
21+
22+
.community-search {
23+
background-color: #F6EEEC;
24+
border: 3px solid #2E2E2E;
25+
box-shadow: 6px 6px 0 #3967D1;
26+
color: #3967D1;
27+
font: 700 1rem 'Syncopate', sans-serif;
28+
letter-spacing: 0.05em;
29+
padding: 1rem 1.25rem;
30+
text-transform: uppercase;
31+
transition: box-shadow 0.15s ease, transform 0.15s ease;
32+
width: 100%;
33+
34+
&::placeholder {
35+
color: #3967D1;
36+
opacity: 0.5;
37+
}
38+
39+
&:focus {
40+
box-shadow: 6px 6px 0 #FFC24D;
41+
outline: none;
42+
transform: translate(-2px, -2px);
43+
}
44+
}
45+
46+
.community-sort {
47+
display: flex;
48+
flex-wrap: wrap;
49+
gap: 0.5rem;
50+
51+
.sort-btn {
52+
background-color: transparent;
53+
border: 3px solid #2E2E2E;
54+
box-shadow: 4px 4px 0 #2E2E2E;
55+
cursor: pointer;
56+
font: 700 0.75rem 'Syncopate', sans-serif;
57+
letter-spacing: 0.05em;
58+
padding: 0.5rem 1rem;
59+
text-transform: uppercase;
60+
transition: box-shadow 0.15s ease, transform 0.15s ease;
61+
white-space: nowrap;
62+
63+
@media (max-width: 480px) {
64+
font-size: 0.65rem;
65+
letter-spacing: 0.02em;
66+
padding: 0.5rem 0.75rem;
67+
}
68+
69+
&:hover {
70+
transform: translate(-2px, -2px);
71+
box-shadow: 6px 6px 0 #2E2E2E;
72+
}
73+
74+
&.active {
75+
background-color: #3967D1;
76+
border-color: #3967D1;
77+
box-shadow: 4px 4px 0 #2E2E2E;
78+
color: #fff;
79+
}
80+
}
81+
}
82+
83+
.community-updated {
84+
color: #2E2E2E;
85+
font-size: 0.8rem;
86+
font-weight: bold;
87+
letter-spacing: 0.05em;
88+
margin-top: 1rem;
89+
opacity: 0.6;
90+
text-transform: uppercase;
91+
}
92+
93+
.community-user-group {
94+
border-bottom: 2px solid #3967D1;
95+
color: #3967D1;
96+
font-size: 1.5rem;
97+
font-weight: bold;
98+
margin: 2rem 0 1rem;
99+
padding-bottom: 0.5rem;
100+
}
101+
102+
&.sort-by-user {
103+
.project-medal-wrap { display: none; }
104+
105+
[class*="project--medal-"] { box-shadow: 4px 4px 0 #2E2E2E; }
106+
}
107+
}

‎_sass/project-card.scss‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
#view-community {
2+
.project {
3+
align-items: stretch;
4+
border: 3px solid #2E2E2E;
5+
box-shadow: 4px 4px 0 #2E2E2E;
6+
display: flex;
7+
margin: 1rem 0;
8+
position: relative;
9+
transition: box-shadow 0.15s ease, transform 0.15s ease;
10+
11+
&[hidden] { display: none; }
12+
13+
&:hover {
14+
box-shadow: 6px 6px 0 #3967D1;
15+
transform: translate(-2px, -2px);
16+
}
17+
18+
&.project--medal-gold { box-shadow: 6px 6px 0 #FFC24D; }
19+
&.project--medal-silver { box-shadow: 6px 6px 0 #C0C0C0; }
20+
&.project--medal-bronze { box-shadow: 6px 6px 0 #CD7F32; }
21+
22+
.project-header h4 a::after {
23+
content: "";
24+
inset: 0;
25+
position: absolute;
26+
}
27+
}
28+
29+
.project-medal-wrap {
30+
align-items: center;
31+
background-color: #F6EEEC;
32+
border-right: 3px solid #2E2E2E;
33+
display: flex;
34+
justify-content: center;
35+
padding: 0 1rem;
36+
min-width: 4.5rem;
37+
38+
@media (max-width: 480px) {
39+
min-width: 2.75rem;
40+
padding: 0 0.4rem;
41+
}
42+
}
43+
44+
.project-medal {
45+
height: 2.5rem;
46+
width: 2.5rem;
47+
48+
@media (max-width: 480px) {
49+
height: 1.75rem;
50+
width: 1.75rem;
51+
}
52+
}
53+
54+
.project-body {
55+
flex: 1;
56+
min-width: 0;
57+
padding: 1.25rem;
58+
}
59+
60+
.project-header {
61+
align-items: center;
62+
display: flex;
63+
justify-content: space-between;
64+
gap: 1rem;
65+
66+
h4 {
67+
min-width: 0;
68+
overflow-wrap: break-word;
69+
70+
a {
71+
color: #2E2E2E;
72+
text-decoration: none;
73+
74+
&:hover { color: #3967D1; }
75+
}
76+
}
77+
}
78+
79+
.project-stars {
80+
background-color: #FFC24D;
81+
border: 2px solid #2E2E2E;
82+
color: #2E2E2E;
83+
font: 700 0.9rem 'Syncopate', sans-serif;
84+
padding: 0.2rem 0.6rem;
85+
white-space: nowrap;
86+
}
87+
88+
.project-description {
89+
color: #2E2E2E;
90+
margin: 0.5rem 0;
91+
opacity: 0.8;
92+
overflow-wrap: break-word;
93+
}
94+
95+
.project-meta {
96+
align-items: center;
97+
display: flex;
98+
flex-wrap: wrap;
99+
gap: 0.5rem;
100+
margin-top: 0.75rem;
101+
}
102+
103+
.project-author {
104+
color: #2E2E2E;
105+
font-size: 0.85rem;
106+
opacity: 0.7;
107+
}
108+
109+
.project-topics {
110+
display: flex;
111+
flex-wrap: wrap;
112+
gap: 0.35rem;
113+
margin-left: 0.5rem;
114+
}
115+
116+
.project-topic {
117+
background-color: #F6EEEC;
118+
border: 2px solid #2E2E2E;
119+
font-size: 0.7rem;
120+
letter-spacing: 0.03em;
121+
padding: 0.15rem 0.4rem;
122+
text-transform: uppercase;
123+
}
124+
}

‎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', 'meetups', 'sponsors', 'footer', 'talks';
3+
@import 'reset', 'application', 'header', 'nav', 'next_meetup', 'view', 'meetups', 'sponsors', 'footer', 'talks', 'community', 'project-card';

‎assets/images/medal-bronze.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎assets/images/medal-gold.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎assets/images/medal-silver.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)