From d239b0814d0febbd2042ccb03c4a424b49b48cf5 Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Fri, 28 Oct 2022 17:28:37 +0200
Subject: [PATCH] refactor: review categories position

---
 src/_layouts/base.njk       | 12 +++----
 src/_layouts/post.njk       | 62 ++++++++++++++++++++-----------------
 src/_pages/404.md           | 19 ------------
 src/_pages/404.njk          | 18 +++++++++++
 src/_pages/all_articles.njk | 15 ++++++---
 src/_pages/index.njk        | 28 ++++++++---------
 src/_pages/tags.njk         | 12 +++++--
 src/assets/css/index.scss   | 21 ++++++++++---
 8 files changed, 109 insertions(+), 78 deletions(-)
 delete mode 100644 src/_pages/404.md
 create mode 100644 src/_pages/404.njk

diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index b3f3dfa..69f9c84 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@@ -22,13 +22,13 @@
   </header>
 
   <main>
-    <div class="main-content">
+{#    <div class="main-content">#}
       {{ content | safe }}
-    </div>
-    <aside class="right-side">
-      {% include "tagslist.njk" %}
-      {% include "other_links.njk" %}
-    </aside>
+{#    </div>#}
+{#    <aside class="right-side">#}
+{#      {% include "tagslist.njk" %}#}
+{#      {% include "other_links.njk" %}#}
+{#    </aside>#}
   </main>
 
   <footer class="main-footer">
diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk
index decf6eb..bc378bb 100644
--- a/src/_layouts/post.njk
+++ b/src/_layouts/post.njk
@@ -2,34 +2,40 @@
 layout: base.njk
 templateClass: tmpl-post
 ---
-<h1>{{ title }}</h1>
+<div class="main-content">
+  <h1>{{ title }}</h1>
 
-<div class="post-metadata">
-  <div class="post-metadata__header">
-    Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
-  </div>
-  <ul>
-    {%- for tag in tags | filterTagList %}
-    {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-    <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
-    {%- endfor %}
-  </ul>
-</div>
-
-{{ content | safe }}
-
-<hr>
-
-{%- if collections.posts %}
-{# these filters are locale-aware in 2.0.0-canary.14 #}
-{%- set previousPost = collections.posts | getPreviousCollectionItem %}
-{%- set nextPost = collections.posts | getNextCollectionItem %}
-{%- if nextPost or previousPost %}
-  <nav class="post-nav">
+  <div class="post-metadata">
+    <div class="post-metadata__header">
+      Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
+    </div>
     <ul>
-      {%- if previousPost %}<li class="previous">Précédent : <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
-      {%- if nextPost %}<li class="next">Suivant : <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+      {%- for tag in tags | filterTagList %}
+      {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+      <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
+      {%- endfor %}
     </ul>
-  </nav>
-{%- endif %}
-{%- endif %}
+  </div>
+
+  {{ content | safe }}
+
+  <hr>
+
+  {%- if collections.posts %}
+  {# these filters are locale-aware in 2.0.0-canary.14 #}
+  {%- set previousPost = collections.posts | getPreviousCollectionItem %}
+  {%- set nextPost = collections.posts | getNextCollectionItem %}
+  {%- if nextPost or previousPost %}
+    <nav class="post-nav">
+      <ul>
+        {%- if previousPost %}<li class="previous">Précédent : <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+        {%- if nextPost %}<li class="next">Suivant : <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+      </ul>
+    </nav>
+  {%- endif %}
+  {%- endif %}
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>
diff --git a/src/_pages/404.md b/src/_pages/404.md
deleted file mode 100644
index 472a0f8..0000000
--- a/src/_pages/404.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: home.njk
-permalink: 404.html
-eleventyExcludeFromCollections: true
----
-# Cette page n'existe pas !
-
-Vous avez fait fausse route ¯\_(ツ)_/¯
-
-[Aller à la page d’accueil](/)
-
-{#
-Read more: https://www.11ty.dev/docs/quicktips/not-found/
-
-This will work for both GitHub pages and Netlify:
-
-* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
-* https://www.netlify.com/docs/redirects/#custom-404
-#}
diff --git a/src/_pages/404.njk b/src/_pages/404.njk
new file mode 100644
index 0000000..85148d9
--- /dev/null
+++ b/src/_pages/404.njk
@@ -0,0 +1,18 @@
+---
+layout: home.njk
+permalink: 404.html
+eleventyExcludeFromCollections: true
+---
+<div class="main-content">
+  <p>Cette page n'existe pas !</p>
+
+
+  <p>ous avez fait fausse route ¯\_(ツ)_/¯</p>
+
+  <p><a href="/">Aller à la page d’accueil</a></p>
+
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>
diff --git a/src/_pages/all_articles.njk b/src/_pages/all_articles.njk
index 07b188a..ac7359f 100644
--- a/src/_pages/all_articles.njk
+++ b/src/_pages/all_articles.njk
@@ -4,7 +4,14 @@ eleventyNavigation:
   key: Tous les articles
   order: 3
 ---
-<h1>Tous les articles</h1>
-
-{% set postslist = collections.posts %}
-{% include "postslist.njk" %}
+<div class="main-content">
+  <h1>Tous les articles</h1>
+  <nav>
+    {% include "tagslist.njk" %}
+  </nav>
+  {% set postslist = collections.posts %}
+  {% include "postslist.njk" %}
+</div>
+<aside class="right-side">
+  {% include "other_links.njk" %}
+</aside>
diff --git a/src/_pages/index.njk b/src/_pages/index.njk
index e87c0df..cd00bd2 100644
--- a/src/_pages/index.njk
+++ b/src/_pages/index.njk
@@ -4,17 +4,17 @@ eleventyNavigation:
   key: Accueil
   order: 1
 ---
-{% set maxPosts = collections.posts.length | min(5) %}
-{#<h1>{% if maxPosts == 1 %}Article{% else %}Derniers articles{% endif %}</h1>#}
-<h1 class="main-title">Blog numérique responsable</h1>
-<p class="sub-title">par le collectif IT's on us</p>
-{% set postslist = collections.posts | head(-5) %}
-{% set postslistCounter = collections.posts | length %}
-{% include "postslist.njk" %}
-
-{#List all of the pages in the project#}
-{#<ul>#}
-{#  {%- for entry in collections.all %}#}
-{#  <li><a href="{{ entry.url }}"><code>{{ entry.url }}</code></a></li>#}
-{#  {%- endfor %}#}
-{#</ul>#}
+<div class="main-content">
+  {% set maxPosts = collections.posts.length | min(5) %}
+  <h1 class="main-title">Blog numérique responsable</h1>
+  <p class="sub-title">par le collectif IT's on us</p>
+  <nav>
+    {% include "tagslist.njk" %}
+  </nav>
+  {% set postslist = collections.posts | head(-5) %}
+  {% set postslistCounter = collections.posts | length %}
+  {% include "postslist.njk" %}
+</div>
+<aside class="right-side">
+  {% include "other_links.njk" %}
+</aside>
diff --git a/src/_pages/tags.njk b/src/_pages/tags.njk
index ce6791f..4a2888b 100644
--- a/src/_pages/tags.njk
+++ b/src/_pages/tags.njk
@@ -14,7 +14,13 @@ eleventyComputed:
   title: Tags “{{ tag }}”
 permalink: /tags/{{ tag | slugify }}/
 ---
-<h1>#{{ tag }}</h1>
+<div class="main-content">
+  <h1>#{{ tag }}</h1>
 
-{% set postslist = collections[ tag ] %}
-{% include "postslist.njk" %}
+  {% set postslist = collections[ tag ] %}
+  {% include "postslist.njk" %}
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index b69a74f..eef7306 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -76,24 +76,37 @@ main {
   padding-left: 60px;
 }
 
-.right-side .title {
+.right-side .title,
+nav .title {
   color: var(--text-color-secondary);
   font-weight: 700;
 }
 
-.right-side .tags {
+nav .title{
+  font-size: 1.8rem;
+}
+
+nav {
+  margin-bottom: 5rem;
+}
+
+.right-side .tags,
+nav .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
 }
 
-.right-side .links {
+.right-side .links,
+nav .links{
   padding: 0;
   list-style: none;
 }
 
 .right-side .tags,
-.right-side .links {
+.right-side .links,
+nav .tags,
+nav .links {
   padding: 0;
   margin: 12px 0 23px 0;
   list-style: none;