refactor: use macro to generate sections

src/lib/section.html

@@ -0,0 +1,11 @@
+{% macro section(title, title_image, title_image_hover) -%}
+  <div class="section"
+    style="
+      --image:url('{{ title_image }}');
+      --hover-image:url('{{ title_image_over or title_image }}');
+    "
+  >
+    <h2 class="section--title">{{ title }}</h2>
+    {{ caller() }}
+  </div>
+{%- endmacro -%}

src/lib/section.html.j2

@@ -1,10 +0,0 @@
-<div class="section"
-	style="
-		--image:url('{{ title_image }}');
-		--hover-image:url('{{ title_image_over or title_image }}');
-	"
->
-	<h2 class="section--title">{{ title }}</h2>
-	{% block content %}{% endblock %}
-</div>
-

src/pages/index/games.html

@@ -1,9 +1,6 @@
-{% set title = gettext("Games") %}
+{% from "lib/section.html" import section %}
-{% set title_image = "/img/section-games.png" %}
 
-{% extends "lib/section.html.j2" %}
+{% call section(gettext("Games"), "/img/section-games.png") %}
-
-{% block content %}
   {% for game in glob("games/*.md") | map('markdown') %}
     <div class="game">
       <div class="game--picture-wrapper">
@@ -20,5 +17,5 @@
       </div>
     </div>
   {% endfor %}
-{% endblock %}
+{% endcall %}
 

src/pages/index/news.html

@@ -1,9 +1,6 @@
-{% set title = "News" %}
+{% from "lib/section.html" import section %}
-{% set title_image = "/img/section-news.png" %}
 
-{% extends "lib/section.html.j2" %}
+{% call section(gettext("News"), "/img/section-news.png") %}
-
-{% block content %}
   {% for news in glob("news/*.md") | map('markdown') %}
     <div class="news">
       <div class="news--title">
@@ -18,4 +15,4 @@
       </div>
     </div>
   {% endfor %}
-{% endblock %}
+{% endcall %}

src/pages/index/presentation.html

@@ -1,10 +1,6 @@
-{% set title = "Frog Collective" %}
+{% from "lib/section.html" import section %}
-{% set title_image = "/img/section-collective.png" %}
-{% set title_image_hover = "/img/section-collective-hover.png" %}
 
-{% extends "lib/section.html.j2" %}
+{% call section(gettext("Collective"), "/img/section-collective.png", "/img/section-collective-hover.png") %}
-
-{% block content %}
   <p>
     {% trans %}
       Welcome to the cozy world of the Frog Collective, where big dreams come
@@ -53,4 +49,4 @@
       </div>
     {% endfor %}
   </div>
-{% endblock %}
+{% endcall %}