[🛠] Restaurer la navigation du blog avec le menu mobile et l’overview des catégories

✨ Résumé de GPT-5.5 　

Un récit sur l’ajout d’un accès direct aux catégories sur mobile, et sur la transformation de /categories/ d’un dump complet d’articles en écran d’overview montrant la structure du blog.

Après avoir ajouté le calendrier de sidebar à la sidebar, un problème de navigation plus large est apparu.

Sur desktop, il y a une sidebar. Les catégories sont visibles, et le calendrier aussi.

Mais sur mobile, l’histoire est différente. Même en ouvrant le menu du haut, la vraie structure des catégories du blog n’apparaissait pas immédiatement. Les articles recommençaient à s’accumuler, mais sur un petit écran, il devenait difficile de trouver ce qui se trouvait où.

/categories/ avait le même problème.

L’archive de catégories par défaut était fonctionnellement correcte. Mais sur un blog avec beaucoup d’articles, elle ressemblait juste à une longue liste. Dans un blog où Daily Review, journaux de développement, journaux personnels, conversations GPT-5.5, méditations bibliques et astuces sont mélangés, une simple liste ne peut pas expliquer la structure.

La tâche de cet après-midi était donc claire.

Transformer le menu mobile et la page des catégories en écrans de navigation qui montrent la structure du blog.

J’ai ajouté un panneau de catégories au menu mobile

Le premier commit était a1efaa1.

a1efaa1  [Fix] | Mobile nav: Show category panel

Deux fichiers ont été modifiés.

_includes/masthead.html
_sass/custom/customOverride.scss

Le menu mobile existant reposait sur la structure greedy nav de Minimal Mistakes. Les liens du haut étaient visibles, mais la structure des catégories de la sidebar, qui est le coeur de ce blog, ne s’ouvrait pas directement.

J’ai donc ajouté dans masthead.html un panneau de catégories réservé au mobile.

<nav class="masthead-mobile-menu" aria-label="Catégories mobiles">
  <div class="masthead-mobile-menu__quick">
    {%- for link in site.data.navigation.main -%}
      <a href="{{ link.url | relative_url }}">{{ link.title }}</a>
    {%- endfor -%}
  </div>
  <div class="masthead-mobile-menu__categories">
    {%- for nav in site.data.navigation.sidebar-categories -%}
      ...
    {%- endfor -%}
  </div>
</nav>

Le point clé était de réutiliser tel quel sidebar-categories dans _data/navigation.yml.

Si la sidebar et le menu mobile regardent des données différentes, ils finiront forcément par diverger. On ajoute une catégorie, elle apparaît sur desktop, mais pas sur mobile : ce genre de problème arrive vite.

Le menu mobile lit donc la même source.

J’ai aussi inclus sidebar-nav-stats.html. Grâce à cela, même dans le menu mobile, on peut voir le nombre d’articles et la date du dernier article de chaque catégorie.

C’est une petite différence, mais dans la navigation réelle, elle compte beaucoup.

Si seul le nom de la catégorie est visible, il faut cliquer pour savoir s’il y a quelque chose dedans. Avec le nombre d’articles et la date récente, l’utilisateur distingue tout de suite les catégories actives de celles qui se sont arrêtées depuis longtemps.

J’ai désactivé les hidden-links existants sur mobile

Côté SCSS, j’ai masqué les .hidden-links existants sur mobile et affiché le nouveau menu quand le toggle est ouvert.

.greedy-nav .hidden-links {
  display: none !important;
}

.greedy-nav__toggle.close ~ .masthead-mobile-menu {
  display: block;
}

Le nouveau menu est devenu un panneau qui apparaît juste sous la barre du haut.

.masthead-mobile-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: min(72vh, 32rem);
  overflow-y: auto;
}

Sur mobile, l’important n’est pas de tout montrer d’un coup.

Il faut pouvoir voir toute la liste des catégories sur un petit écran, mais elle ne doit pas pousser le contenu du corps de page de façon permanente. Le panneau n’apparaît donc que lorsqu’il est ouvert, et s’il devient long, il défile à l’intérieur.

J’ai changé /categories/ d’une liste d’articles en overview

Le deuxième commit était ee7c436.

ee7c436  [Fix] | Categories: Replace full post archive with overview

L’ancien _layouts/categories.html utilisait directement l’include de taxonomy.

{% include posts-taxonomy.html taxonomies=site.categories %}

Je l’ai remplacé par un nouvel include.

{% include category-overview.html %}

Puis j’ai créé _includes/category-overview.html.

Cet include calcule la structure des catégories du blog à partir de site.posts et de _data/navigation.yml.

Les valeurs calculées ressemblent à ceci.

Nombre total d'articles
Nombre de leaf categories en fonctionnement
Nombre d'articles écrits cette année
Date de publication la plus récente
Catégorie la plus grande
Nombre d'articles par catégorie
Date du dernier article et titre le plus récent par catégorie

À ce moment-là, le category overview contenait aussi une barre de part par catégorie.

{% assign category_share = category_post_count | times: 100 | divided_by: total_post_count %}

Je ne peux pas dire que cet écran était encore parfait. Mais la direction était bonne.

/categories/ n’était plus une “longue liste d’articles par catégorie”. C’était devenu un premier écran qui montre avec quelle structure ce blog fonctionne.

Pourquoi l’overview était nécessaire

Ce blog n’est pas un blog à sujet unique.

Il y a Daily Review, des journaux de développement, des journaux personnels, des archives de conversations avec l’IA, des méditations bibliques et des astuces. Si je veux relancer ce blog GitHub Pages, je dois faire en sorte que cette structure mixte ne devienne pas une faiblesse.

Si tous les articles sont simplement empilés par ordre chronologique, la structure devient de plus en plus floue à mesure qu’on lit.

À l’inverse, avec un category overview, le lecteur voit d’abord une carte.

Quelles catégories existent ?
Quelles catégories sont réellement actives ?
Où les articles récents s'accumulent-ils ?
Quel est l'axe le plus important du blog ?

C’est important aussi du point de vue portfolio.

Cela montre que réparer le blog, ce n’est pas seulement écrire des articles, mais reconstruire la structure de l’information. Si j’utilise seulement les fonctionnalités par défaut de Jekyll, les listes d’articles existent. Mais pour éviter que de vrais lecteurs se perdent, il faut regarder tout le blog comme un produit navigable.

Ce qui a changé aujourd’hui

Les deux commits centraux de cet après-midi sont ceux-ci.

a1efaa1  Affichage du panneau de catégories dans le menu mobile
ee7c436  Remplacement de /categories/ par un overview au lieu d'une liste complète d'articles

Par fichier, le périmètre était celui-ci.

_includes/masthead.html
_includes/category-overview.html
_layouts/categories.html
_sass/custom/customOverride.scss

Le menu mobile réutilise sidebar-categories depuis _data/navigation.yml. Le category overview calcule lui aussi les leaf categories à partir des mêmes données de navigation.

C’est la partie que j’aime le plus dans le travail d’aujourd’hui.

Je n’ai pas créé de nouvelle source de données. J’ai réutilisé les définitions de catégories que le blog possédait déjà. Résultat : la sidebar desktop, le menu mobile et le category overview partagent la même structure.

Résultat

Désormais, on peut aussi ouvrir les catégories sur mobile.

Quand on appuie sur le menu du haut, la navigation de base et les groupes de catégories apparaissent ensemble. Chaque catégorie affiche aussi le nombre d’articles et la date du dernier article.

/categories/ n’est plus un long dump d’articles, mais un overview qui montre la structure du blog. On peut y voir le nombre total d’articles, le nombre de catégories actives, le nombre d’articles de l’année, la dernière date de publication et le dernier article de chaque catégorie.

Il reste encore des choses à polir.

Il faudra continuer à observer si la barre du category overview aide vraiment la navigation. Il faudra aussi vérifier la densité du menu mobile sur de vrais écrans. Mais le coeur d’aujourd’hui est en place.

Si le blog doit recommencer à grandir, écrire des articles ne suffit pas.

Les articles accumulés doivent redevenir trouvables. Le travail d’aujourd’hui a commencé à résoudre ce problème avec le menu mobile et le category overview.