From ca2bb07ae152c0194e56fa72e2c082e62be21750 Mon Sep 17 00:00:00 2001
From: Jasper Hoving <jasper.hoving@gmail.com>
Date: Tue, 25 Apr 2023 08:51:01 +0200
Subject: [PATCH] Add category page and make categories in block clickable

---
 _sass/_base.scss       |  4 ++++
 _sass/_blog.scss       | 12 +++++++---
 _sass/_categories.scss |  9 ++++++++
 blog.html              | 52 +++++++++++++++++++++++-------------------
 categories.html        | 22 ++++++++++++++++++
 5 files changed, 72 insertions(+), 27 deletions(-)
 create mode 100644 _sass/_categories.scss
 create mode 100644 categories.html

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 2211fc3af..b8c694bc5 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -11,6 +11,10 @@
   box-sizing: border-box;
 }
 
+:root {
+  scroll-padding-top: 100px;
+}
+
 html,
 body {
   height: 100%;
diff --git a/_sass/_blog.scss b/_sass/_blog.scss
index 91300c391..418f33bf7 100644
--- a/_sass/_blog.scss
+++ b/_sass/_blog.scss
@@ -7,7 +7,7 @@
     margin: 1rem;
     border: 1px solid #ddd;
 
-    a {
+    .post-link {
       display: flex;
       flex-direction: column;
 
@@ -15,7 +15,8 @@
         flex-direction: row;
       }
 
-      div:first-child {
+
+      .post-image {
         flex: none;
 
         @media screen and (min-width: 560px) {
@@ -37,7 +38,7 @@
         }
       }
 
-      div:last-child {
+      .post-content {
         flex: 1 1 0%;
         padding: .5rem 1rem;
 
@@ -54,6 +55,11 @@
             color: #88ba30;
           }
         }
+
+        .category-link {
+          text-decoration: none;
+          color: white;
+        }
       }
     }
   }
diff --git a/_sass/_categories.scss b/_sass/_categories.scss
new file mode 100644
index 000000000..0d0a426f5
--- /dev/null
+++ b/_sass/_categories.scss
@@ -0,0 +1,9 @@
+
+
+.categories-head {
+  margin: 20px;
+}
+
+.categories-container {
+  margin-bottom: 30px;
+}
\ No newline at end of file
diff --git a/blog.html b/blog.html
index 88d8ef61a..a84b05c3d 100644
--- a/blog.html
+++ b/blog.html
@@ -9,29 +9,33 @@
 <h2>Le blog</h2>
 
 <ul class="blogroll">
-    {% for post in paginator.posts %}
-      <li>
-        <a href="{{ post.url | relative_url }}">
-          <div>
-            {% if post.image %}
-            <img src="{{ post.image }}" alt="{{ post.title }}">
-            {% endif %}
-          </div>
-          <div>
-            <h2>{{ post.title }}</h2>
-            <ul class="post-categories">
-              {% for category in post.categories %}
-                  <li>{{ category }}</li>
-              {% endfor %}
-            </ul>
-            <p class="post-meta">
-              <span class="published">Publié le <time datetime="{{ post.date }}">{{ post.date | date: "%d/%m/%Y" }}</time></span>
-              par <span class="author">{{ post.author }}</span>
-            </p>
-          </div>
-        </a>
-      </li>
-    {% endfor %}
+  {% for post in paginator.posts %}
+  <li>
+    <a href="{{ post.url | relative_url }}">
+      <div class="post-link">
+
+        <div class="post-image">
+          {% if post.image %}
+          <img src="{{ post.image }}" alt="{{ post.title }}">
+          {% endif %}
+        </div>
+        <div class="post-content">
+          <h2>{{ post.title }}</h2>
+          <ul class="post-categories">
+            {% for category in post.categories %}
+            <li><a class="category-link" href="/categories/#{{category|slugify}}">{{ category }}</a></li>
+            {% endfor %}
+          </ul>
+          <p class="post-meta">
+            <span class="published">Publié le <time datetime="{{ post.date }}">{{ post.date | date: "%d/%m/%Y"
+                }}</time></span>
+            par <span class="author">{{ post.author }}</span>
+          </p>
+        </div>
+      </div>
+    </a>
+  </li>
+  {% endfor %}
 </ul>
 
 {% if paginator.total_pages > 1 %}
@@ -73,4 +77,4 @@ <h2>{{ post.title }}</h2>
   {% endif %}
 
 </ul>
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/categories.html b/categories.html
new file mode 100644
index 000000000..2bb235831
--- /dev/null
+++ b/categories.html
@@ -0,0 +1,22 @@
+---
+layout: default
+permalink: /categories/
+title: Categories
+---
+
+
+<div>
+  <h1>Catégories</h1>
+{% for category in site.categories %}
+  <div class="categories-container"  >
+    {% capture category_name %}{{ category | first }}{% endcapture %}
+    <h3 class="categories-head" id="{{ category_name | slugify }}" >{{ category_name }}</h3>
+    <a name="{{ category_name }}"></a>
+    {% for post in site.categories[category_name] %}
+    <article class="archive-item">
+      <h4><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></h4>
+    </article>
+    {% endfor %}
+  </div>
+{% endfor %}
+</div>
\ No newline at end of file