Changed name of event.html to recent_events_section.html.

Changed name of events_page.html to events_array_generator.html.
Used new includes (function style) to simplify code in footer for sponsors displaying.
Created layouts for repetitive code:
- footer_sponsors_inner_layout.html
- recent_event_inner_layout.html
- sponsors_inner_layout.html
Used new includes (function style) to simplify code in inline_style_index.html for future events accessing.
Created function like includes:
- row_display_outer_loop.html - to generate 2 items per row automatically from an array of objects passed in.
- events_array_generator.html - to generate post object arrays automatically with future / past and post limits as parameters.
Added test code suing the new function like includes in events page to see if object attributes are properly accessed.
Modified sponsors column class in upcoming event in index.html (to center content properly).
Used new includes (function style) to simplify code in index.html for listing sponsors in upcoming section and changed the include name for the recent events section to match file name change mentioned above.

Author: Tomasz-Kluczkowski

_includes/event.html

@@ -0,0 +1,47 @@
+{% comment %}
+    This include is to generate a list of posts for use in views.
+    The array posts is to be used then in the view.
+    Parameters:
+        - future_events:   (bool) Include future events in the array?
+            If future_events is true, no past events will be added.
+            If it is false, only past events are added.
+            Default: false.
+        - limit:    (int) How many events to add to the array.
+            Default: 0 (no limit).
+    Creates variable for use in the outer scope:
+        - posts (array) Array of post objects.
+{% endcomment %}
+
+{% if include.future_events %}
+    {% assign future_events = include.future_events %}
+{% else %}
+    {% assign future_events = false %}
+{% endif %}
+{% if include.limit %}
+    {% assign limit = include.limit %}
+{% endif %}
+
+{% assign post_count = 0 %}
+{% assign curDate = site.time | date: "%s" %}
+{% assign posts = "" | split: ',' %}
+{% for post in site.posts %}
+    {% assign postStartDate = post.date | date: "%s" %}
+    {% if future_events %}
+<!--Add only future post-->
+        {% if postStartDate >= curDate %}
+            {% assign posts = posts | push: post %}
+            {% assign post_count = post_count | plus: 1 %}
+        {% endif %}
+<!--Add only past post-->
+    {% else %}
+        {% if postStartDate < curDate %}
+            {% assign posts = posts | push: post %}
+            {% assign post_count = post_count | plus: 1 %}
+        {% endif %}
+    {% endif %}
+
+    {% if post_count == limit | default: 0 %}
+        {% break %}
+    {% endif %}
+{% endfor %}
+

_includes/events_array_generator.html

@@ -9,47 +9,19 @@ <h2 class="footer__section-title">Find Us Online</h2>
         <div class="col-md-6">
             <h2 class="footer__section-title">Our Sponsors</h2>
             <hr class="footer__divider">
-            {% comment %}
-                Assume number of sponsors is even. We are going to create rows of 2 sponsors in each.
-                If not even the last row must contain 1 sponsor and be terminated with appropriate tags.
-            {% endcomment %}
-
+            <!--Create an array of permanent sponsors-->
             {% assign sponsors = "" | split: ',' %}
             {% for sponsor in site.sponsors %}
                 {% if sponsor.permanent %}
                     {% assign sponsors = sponsors | push: sponsor %}
                 {% endif %}
             {% endfor %}
-            {% assign num_of_sponsors = sponsors | size %}
-            {% assign sponsors_remainder = num_of_sponsors | modulo: 2 %}
-
-            {% if sponsors_remainder == 0 %}
-                {% assign num_of_sponsors_even = true %}
-                {% assign row_num_modifier = 1 %}
-            {% else %}
-                {% assign num_of_sponsors_even = false %}
-                {% assign row_num_modifier = 0 %}
-            {% endif %}
-
-            {% assign num_of_rows = num_of_sponsors | divided_by: 2 | floor | minus: row_num_modifier %}
-            {% assign items_per_row = 1 %}
 
-            {% for row in (0..num_of_rows) %}
-                {% if forloop.last and num_of_sponsors_even == false %}
-                    {% assign items_per_row = 0 %}
-                {% endif %}
-                <div class="row">
-                    {% for col in (0..items_per_row) %}
-                        {% assign sponsor_index = row | times: 2 | plus: col %}
-                        {% assign sponsor = sponsors[sponsor_index] %}
-                        <div class="footer__sponsor-col col-md-12 col-lg-6">
-                            <a class="footer__sponsor-link" href="{{ sponsor.sponsor_link }}">
-                                <img class="footer__img" src="{{ site.baseurl }}/{{ sponsor.sponsor_logo }}">
-                            </a>
-                        </div>
-                    {% endfor %}
-                </div>
-            {% endfor %}
+            {%
+                include row_display_outer_loop.html
+                items_array = sponsors
+                inner_layout = "footer_sponsors_inner_layout.html"
+            %}
         </div>
         <div class="col-md-3">
             <h2 class="footer__section-title">Python Sprints</h2>

_includes/events_page.html

@@ -0,0 +1,5 @@
+<div class="footer__sponsor-col col-md-12 col-lg-6">
+    <a class="footer__sponsor-link" href="{{ include.item.sponsor_link }}">
+        <img class="footer__img" src="{{ site.baseurl }}/{{ include.item.sponsor_logo }}">
+    </a>
+</div>

_includes/footer.html

@@ -1,15 +1,7 @@
-<!--Create array of future events-->
-{% assign upcoming_events = "" | split: ',' %}
-{% assign curDate = site.time | date: "%s" %}
-{% for post in site.posts %}
-    {% assign postStartDate = post.date | date: "%s" %}
-    {% if postStartDate >= curDate %}
-        {% assign upcoming_events = upcoming_events | push: post %}
-    {% endif %}
-{% endfor %}
-{% if upcoming_events.size > 0 %}
+{% include events_array_generator.html future_events = true %}
+{% if posts.size > 0 %}
     {% assign upcoming_event = true %}
-    {% assign post = upcoming_events | last %}
+    {% assign post = posts | last %}
 
     {% if post.image %}
         {% assign image = post.image %}

_includes/footer_sponsors_inner_layout.html

@@ -0,0 +1,15 @@
+<div class="no-gutters__col col-sm-6">
+    <div class="events__spacer"></div>
+    <div class="events__img-container">
+        <div class="events__img-overlay">
+            <a class="events__link" href="{{ include.item.url }}">
+                <i class="events__icon fas fa-external-link-square-alt"></i>
+            </a>
+            <div class="events__title-container">
+                <h2 class="events__img-title">Event: {{ include.item.title }}</h2>
+                <p class="events__img-subtitle">{{ include.item.venue }}, {{ include.item.date | date: "%e %B %Y" }}</p>
+            </div>
+        </div>
+        <img class="events__img img-fluid" src="{{ site.baseurl }}/{{ include.item.image }}">
+    </div>
+</div>

_includes/inline_style_index.html

@@ -0,0 +1,15 @@
+<section class="events">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-12">
+                <h2 class="section-title">Recent Events</h2>
+            </div>
+        </div>
+        {% include events_array_generator.html limit = 4 %}
+        {%
+            include row_display_outer_loop.html
+            items_array = posts
+            inner_layout = "recent_event_inner_layout.html"
+        %}
+    </div>
+</section>

_includes/recent_event_inner_layout.html

@@ -0,0 +1,34 @@
+{% comment %}
+    This include is to easily pass an array to iterate over its items and
+    a html layout to the generate 2 items per row look in the view.
+    Parameters:
+        - items_array:  (array) Array of objects we want to show.
+        - inner_layout: (string) Path to the html inner layout.
+{% endcomment %}
+
+{% assign num_of_items = include.items_array | size %}
+{% assign items_array_remainder = num_of_items | modulo: 2 %}
+
+{% if items_array_remainder == 0 %}
+    {% assign num_of_items_even = true %}
+    {% assign row_num_modifier = 1 %}
+{% else %}
+    {% assign num_of_items_even = false %}
+    {% assign row_num_modifier = 0 %}
+{% endif %}
+
+{% assign num_of_rows = num_of_items | divided_by: 2 | floor | minus: row_num_modifier %}
+{% assign items_per_row = 1 %}
+
+{% for row in (0..num_of_rows) %}
+    {% if forloop.last and num_of_items_even == false %}
+        {% assign items_per_row = 0 %}
+    {% endif %}
+    <div class="row">
+        {% for col in (0..items_per_row) %}
+            {% assign item_index = row | times: 2 | plus: col %}
+            {% assign item = include.items_array[item_index] %}
+            {% include {{ include.inner_layout }} item = item %}
+        {% endfor %}
+    </div>
+{% endfor %}

_includes/recent_events_section.html

@@ -0,0 +1,7 @@
+<div class="footer__sponsor-col col-md-12 col-lg-6">
+    <a class="footer__sponsor-link" href="{{ include.item.sponsor_link }}">
+        <img class="footer__img"
+             src="{{ site.baseurl }}/{{ include.item.sponsor_logo }}"
+             alt="Sponsor logo">
+    </a>
+</div>

_includes/row_display_outer_loop.html

@@ -32,6 +32,10 @@ <h2 class="events-page__page-subtitle">See what's coming up and what we did rece
         <div class="row">
             <div class="col-12">
                 <h2 class="events-page__upcoming-title">Upcoming Events</h2>
+                {% include events_array_generator.html future_events = true %}
+                {% for post in posts %}
+                    <p>{{ post.title }}</p>
+                {% endfor %}
             </div>
         </div>
     </div>
@@ -40,6 +44,10 @@ <h2 class="events-page__upcoming-title">Upcoming Events</h2>
         <div class="row">
             <div class="col-12">
                 <h2 class="events-page__recent-title">Recent Events</h2>
+                {% include events_array_generator.html %}
+                {% for post in posts %}
+                    <p>{{ post.title }}</p>
+                {% endfor %}
             </div>
         </div>
     </div>

_includes/sponsors_inner_layout.html

@@ -317,6 +317,12 @@ a {
   margin-bottom: 0.5em;
 }
 
+.upcoming__sponsor-col {
+  background: rgba(7, 41, 72, 0.52);
+  border: $dark-blue 2px groove;
+  border-radius: 0 5px 5px 5px;
+}
+
 .upcoming__img-container {
   background-size: cover;
   background-position: center center;