From 113163815830f6ed32b87e4400f6e25b9e81210d Mon Sep 17 00:00:00 2001
From: Alexis Fourmaux <fourmaux.alexis.perso@ungol.fr>
Date: Tue, 3 Jun 2025 00:16:02 +0200
Subject: [PATCH] feat: add articles section

---
 content/articles/example.md         |  2 ++
 sass/parts/_anchor.scss             |  4 ++--
 sass/parts/_articles.scss           | 34 +++++++++++++++++++++++++++++
 sass/styles.scss                    | 14 ++++++++++--
 templates/anchor-link.html          |  1 -
 templates/blog.html                 | 20 +++++++++++------
 templates/navbar.html               |  6 ++---
 templates/partials/anchor-link.html |  1 +
 templates/test.html                 |  9 --------
 9 files changed, 67 insertions(+), 24 deletions(-)
 create mode 100644 sass/parts/_articles.scss
 delete mode 100644 templates/anchor-link.html
 create mode 100644 templates/partials/anchor-link.html
 delete mode 100644 templates/test.html

diff --git a/content/articles/example.md b/content/articles/example.md
index ed93666..925a7d3 100644
--- a/content/articles/example.md
+++ b/content/articles/example.md
@@ -6,6 +6,8 @@ updated = 2025-05-13
 authors = ["Ungol"]
 +++
 
+<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/sample.png" alt="test-image" width="500"/>
+
 Cet article est un exemple utilisant du lorem ipsum en markdown pour développer
 et styler les éléments sur une base qui ressemble à un vrai texte. Il contient les éléments d'un article assez complet.
 
diff --git a/sass/parts/_anchor.scss b/sass/parts/_anchor.scss
index 39c607d..ca87477 100644
--- a/sass/parts/_anchor.scss
+++ b/sass/parts/_anchor.scss
@@ -8,14 +8,14 @@ h3,
 h4,
 h5,
 h6 {
-    &>a {
+    &>a.zola-anchor {
         visibility: hidden;
         opacity: 0;
         transition: visibility 0s, opacity 0.5s linear;
     }
 
     &:hover {
-        &>a {
+        &>a.zola-anchor {
             visibility: visible;
             opacity: 1;
         }
diff --git a/sass/parts/_articles.scss b/sass/parts/_articles.scss
new file mode 100644
index 0000000..8bc8553
--- /dev/null
+++ b/sass/parts/_articles.scss
@@ -0,0 +1,34 @@
+ul.articles {
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+
+    .title {
+        margin: 0;
+
+        &>a {
+            color: var(--text);
+            text-decoration: none;
+
+            &:visited {
+                color: var(--lavender);
+            }
+
+            &:hover {
+                color: var(--sky);
+            }
+        }
+    }
+
+    .date {
+        color: var(--subtext0);
+    }
+
+    a.read-more {
+        color: var(--overlay1);
+    }
+}
\ No newline at end of file
diff --git a/sass/styles.scss b/sass/styles.scss
index 9a81197..f42cd56 100644
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -2,6 +2,7 @@
 @use 'theme';
 @use 'shortcodes/callout';
 @use 'parts/anchor';
+@use 'parts/articles';
 @use 'parts/code';
 @use 'parts/footnote';
 @use 'parts/misc';
@@ -29,14 +30,14 @@ body {
     margin: 0;
 }
 
-article {
+main {
     max-width: calc(var(--main-width) - 12rem);
     margin-left: auto;
     margin-right: auto;
 }
 
 @media only screen and (max-width: $smartphone) {
-    article {
+    main {
         max-width: var(--main-width);
     }
 }
@@ -46,8 +47,13 @@ h1 {
     font-weight: medium;
     margin-top: 2rem;
     margin-bottom: 1rem;
+
+    &.section-title {
+        font-size: 3rem;
+    }
 }
 
+
 h2 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
@@ -90,6 +96,10 @@ h6 {
     h1 {
         font-size: 1.5rem;
         margin-top: 1.3rem;
+
+        &.section-title {
+            font-size: 2.2rem;
+        }
     }
 
     h2 {
diff --git a/templates/anchor-link.html b/templates/anchor-link.html
deleted file mode 100644
index b67c464..0000000
--- a/templates/anchor-link.html
+++ /dev/null
@@ -1 +0,0 @@
-<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}">#</a>
\ No newline at end of file
diff --git a/templates/blog.html b/templates/blog.html
index 8ecabe0..f09a58e 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -1,17 +1,23 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="title">
+<h1 class="section-title">
     {{ section.title }}
 </h1>
-<ul>
-    <!-- If you are using pagination, section.pages will be empty.
-       You need to use the paginator object -->
+<ul class="articles">
     {% for page in section.pages %}
     <li>
-        <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
-        {% if page.description %}{{ page.description }}{% endif %}
-        {{ page.summary }}
+        <h2 class="title">
+                <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+        </h2>
+        <span class="date">
+            <meta itemprop="datePublished" content="{{ page.date | date(format='%+') }}">
+            {{ page.date | date(format='%d %B %Y') }}
+        </span>
+        </p class="description">
+            <span>{{ page.summary | safe }}</span>
+            <span><a class="read-more" href="{{ page.permalink | safe }}">Lire la suite...</a></span>
+        </p>
     </li>
     {% endfor %}
 </ul>
diff --git a/templates/navbar.html b/templates/navbar.html
index a960f71..4482f5a 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -1,15 +1,15 @@
 <header>
     <nav>
         <div class="home-title">
-            <a href="{{ get_url(path='/') }}">{{ config.title }}</a>
+            <a href="/">{{ config.title }}</a>
         </div>
         <div class="nav-bar">
             <ul class="nav-links">
                 <li>
-                    <a href="/articles">Articles</a>
+                    <a href="{{ get_url(path='@/articles/_index.md') }}">Articles</a>
                 </li>
                 <li>
-                    <a href="/a-propos">À propos</a>
+                    <a href="{{ get_url(path='@/a-propos.md') }}">À propos</a>
                 </li>
                 <li class="menu-icons-container">
                     <ul class="menu-icons-group">
diff --git a/templates/partials/anchor-link.html b/templates/partials/anchor-link.html
new file mode 100644
index 0000000..c784a57
--- /dev/null
+++ b/templates/partials/anchor-link.html
@@ -0,0 +1 @@
+<a class="zola-anchor" href="#{{ id }}">#</a>
\ No newline at end of file
diff --git a/templates/test.html b/templates/test.html
deleted file mode 100644
index 4072083..0000000
--- a/templates/test.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<h1 class="title">
-    {{ page.title }}
-</h1>
-<p class="subtitle"><strong>{{ page.date }}</strong></p>
-{{ page.content | safe }}
-{% endblock content %}
\ No newline at end of file