Editions per year

Author: elcuervo

_includes/meetups.html

@@ -4,19 +4,29 @@ <h1>EDICIONES PASADAS</h1>
     <p>Conocé el contenido de las ediciones pasadas.</p>
   </header>
 
-  <ul>
-    {% for meetup in site.meetups reversed %}
-      <li class="meetup-event">
-        <a href="{{ meetup.url }}" class="meetup-event__link">
-          <span class="meetup-event__date">
-            {{ meetup.date | date_to_string }}
-          </span>
-          <span class="meetup-event__company">
-            {{ meetup.title }}
-            <img src="/assets/images/arrow.svg" aria-hidden="true">
-          </span>
-        </a>
-      </li>
-    {% endfor %}
-  </ul>
+  {%- assign meetups_by_year = site.meetups
+        | group_by_exp: "m", "m.date | date: '%Y'"
+        | sort: "name"
+        | reverse
+  -%}
+
+  {%- for year in meetups_by_year -%}
+    <h2 class="meetup-event__date_year">{{ year.name }}</h2>
+
+    <ul>
+      {%- for meetup in year.items -%}
+        <li class="meetup-event">
+          <a href="{{ meetup.url }}" class="meetup-event__link">
+            <span class="meetup-event__date">
+              {{ meetup.date | date_to_string }}
+            </span>
+            <span class="meetup-event__company">
+              {{ meetup.title }}
+              <img src="/assets/images/arrow.svg" aria-hidden="true">
+            </span>
+          </a>
+        </li>
+      {%- endfor -%}
+    </ul>
+  {%- endfor -%}
 </section>

_sass/meetups.scss

@@ -34,6 +34,14 @@
     }
   }
 
+  .meetup-event__date_year {
+    align-items: center;
+    display: flex;
+    padding: 1.5rem 8rem;
+    font-weight: bold;
+    justify-content: space-between;
+  }
+
   ul {
     li {
       align-items: center;