feat: use content to generate games section (#6)

content/games/the-guild.md

@@ -0,0 +1,13 @@
+---
+picture: the-guild.png
+picture_alt: in-game screenshot of a cow-boy riding in wilderness
+website: https://the-guild.frog-collective.org
+---
+
+### The Guild
+
+Saddle up, partner! Welcome to "Frontier Fortune: Prospector's Quest" where the
+dusty trails of the Old West lead to riches beyond your wildest dreams. In this
+thrilling adventure, you step into the boots of a rugged prospector, venturing
+into uncharted territories to uncover precious resources for a greedy guild
+hungry for wealth and power.

src/pages/index/games.html

@@ -0,0 +1,26 @@
+{% set title = "Games" %}
+{% set title_image = "/img/section-games.png" %}
+
+{% extends "lib/section.html.j2" %}
+
+{% block content %}
+  {% with content = site.content.load("games") %}
+    {% for game in content.glob("*.md") %}
+      <div class="game">
+        <div class="game--picture-wrapper">
+          <img
+              class="game--picture"
+              src="{{ game.meta.picture.as_path() | output }}"
+              alt="{{ game.meta.picture_alt }}"
+          >
+          </img>
+        </div>
+        <div class="game--description">
+          {{ game.html }}
+          <a class="game--more-button" href="{{ game.meta.website }}">Learn More</a>
+        </div>
+      </div>
+    {% endfor %}
+  {% endwith %}
+{% endblock %}
+

src/pages/index/page.html

@@ -52,37 +52,8 @@
         <div class="content">
             {% include "pages/index/presentation.html" %}
 
-            <div class="section"
+            {% include "pages/index/games.html" %}
-                style="
+
-                    --image:url('/img/section-games.png');
-                    --hover-image:url('/img/section-games.png');
-                "
-            >
-                <h2 class="section--title">Games</h2>
-                <div class="game">
-                    <div class="game--picture-wrapper">
-                        <img
-                            class="game--picture"
-                            src="img/the-guild.png"
-                            alt="in-game screenshot of a cow-boy riding in wilderness"
-                        >
-                        </img>
-                    </div>
-                    <div class="game--description">
-                        <h3 class="game--title">The Guild</h3>
-                        <p>
-                            Saddle up, partner! Welcome to "Frontier Fortune:
-                            Prospector's Quest" where the dusty trails of the Old
-                            West lead to riches beyond your wildest dreams. In this
-                            thrilling adventure, you step into the boots of a
-                            rugged prospector, venturing into uncharted territories
-                            to uncover precious resources for a greedy guild hungry
-                            for wealth and power.
-                        </p>
-                        <a class="game--more-button" href="the-guild.frog-collective.org">Learn More</a>
-                    </div>
-                </div>
-            </div>
 
             <div class="section"
                 style="