From 6c42f871cae88aad5a690618ae71771e93b27d98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Tue, 21 May 2024 00:55:17 +0200
Subject: [PATCH] feat: use content to generate games section (#6)

---
 content/games/the-guild.md                  |  13 ++++++++
 {assets/img => content/games}/the-guild.png | Bin
 src/pages/index/games.html                  |  26 +++++++++++++++
 src/pages/index/page.html                   |  33 ++------------------
 4 files changed, 41 insertions(+), 31 deletions(-)
 create mode 100644 content/games/the-guild.md
 rename {assets/img => content/games}/the-guild.png (100%)
 create mode 100644 src/pages/index/games.html

diff --git a/content/games/the-guild.md b/content/games/the-guild.md
new file mode 100644
index 0000000..4444356
--- /dev/null
+++ b/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.
diff --git a/assets/img/the-guild.png b/content/games/the-guild.png
similarity index 100%
rename from assets/img/the-guild.png
rename to content/games/the-guild.png
diff --git a/src/pages/index/games.html b/src/pages/index/games.html
new file mode 100644
index 0000000..04d464c
--- /dev/null
+++ b/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 %}
+
diff --git a/src/pages/index/page.html b/src/pages/index/page.html
index cb5c9d2..726c70d 100644
--- a/src/pages/index/page.html
+++ b/src/pages/index/page.html
@@ -52,37 +52,8 @@
         <div class="content">
             {% include "pages/index/presentation.html" %}
 
-            <div class="section"
-                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>
+            {% include "pages/index/games.html" %}
+
 
             <div class="section"
                 style="