fix: add next game to the homepage

sportstimes · Jun 17, 2024 · 26a004c · 26a004c
1 parent 486b259
commit 26a004c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 12 deletions.
diff --git a/src/_assets/css/layout.css b/src/_assets/css/layout.css
@@ -608,6 +608,18 @@ ul.competitions li {
   text-align: center;
 }
 
+.event-post {
+  margin-bottom: 2rem;
+}
+.event-post > h1,
+.event-post > h2 {
+  border-top: 8px solid #FFF;
+  padding-top: 20px;
+  text-align: center;
+}
+.event-post > h2 {
+  font-size: 36px;
+}
 .event-post .competition,
 .event-post .datetime {
   border-top: 8px solid #FFF;

diff --git a/src/_filters/collections.js b/src/_filters/collections.js
@@ -9,5 +9,5 @@ const upcoming = arr => {
 module.exports = {
   limit,
   upcoming,
-  next: arr => limit(upcoming(arr), 1)
+  next: arr => limit(upcoming(arr), 1).pop()
 }
diff --git a/src/_layouts/game.njk b/src/_layouts/game.njk
@@ -1,23 +1,25 @@
 ---
 layout: base.njk
 ---
-
 <div class="event-post">
     <h1>{{ title }}</h1>
+
     <div class="datetime">
         <p class="date">{{ date | date('ccc d LLLL') }}</p>
         <p class="time">
             <span class="starttime">{{ date | date('h:mma') }}</span>
             <span class="endtime">–{{ endDate | date('h:mma') }}</span>
         </p>
     </div>
+
     <p class="subscribe">
         <a href="{{ path | url | absoluteUrl(config.baseUrl) | webcal }}" onclick="fathom.trackEvent('calendar game');">
             <span role="img">🗓</span>
             <span>Add this game to your calendar</span>
             <small>in iOS, MacOS and Office</small>
         </a>
     </p>
+
     <table id="EventDetails">
         <tr>
             <th>Venue</th>
@@ -32,18 +34,20 @@ layout: base.njk
             </td>
         </tr>
     </table>
+
     <div class="blog-post-content">
         {{ content | safe }}
     </div>
-    <h2>Want more?</h2>
-    <ul class="inline">
-        {% for tag in tags | validTags %}
-            <li>
-                <a href="{{ ('/' + (tag | slugify) + '/') | url | absoluteUrl(config.baseUrl) }}" rel="tag">{{ tag }} games</a>
-            </li>
-        {% endfor %}
+</div>
+
+<h2>Want more?</h2>
+<ul class="inline">
+    {% for tag in tags | validTags %}
         <li>
-            <a href="{{ '/' | url | absoluteUrl(config.baseUrl) }}" class="all">All games</a>
+            <a href="{{ ('/' + (tag | slugify) + '/') | url | absoluteUrl(config.baseUrl) }}" rel="tag">{{ tag }} games</a>
         </li>
-    </ul>
-</div>
+    {% endfor %}
+    <li>
+        <a href="{{ '/' | url | absoluteUrl(config.baseUrl) }}" class="all">All games</a>
+    </li>
+</ul>
diff --git a/src/index.njk b/src/index.njk
@@ -16,6 +16,23 @@ title: Football times in your calendar
     </a>
 </p>
 
+{% set game = collections.all | next %}
+
+{% if game %}
+<h2>Next Game</h2>
+
+<div class="event-post">
+    <h2>{{ game.data.title }}</h2>
+    <div class="datetime">
+        <p class="date">{{ game.data.date | date('ccc d LLLL') }}</p>
+        <p class="time">
+            <span class="starttime">{{ game.data.date | date('h:mma') }}</span>
+            <span class="endtime">–{{ game.data.endDate | date('h:mma') }}</span>
+        </p>
+    </div>
+</div>
+{% endif %}
+
 <h2>Available Competitions</h2>
 
 <ul class="inline competitions">