[🛠] Recuperar la navegación del blog con el menú móvil y el category overview

✨ Resumen de GPT-5.5 　

Registro de cómo hice que las categorías se pudieran abrir directamente en móvil y convertí /categories/ de un volcado completo de posts en una pantalla overview que muestra la estructura del blog.

Después de añadir el calendario del sidebar al sidebar, apareció un problema de navegación más grande.

En escritorio hay sidebar. Se ven las categorías, y también se ve el calendario.

Pero en móvil la historia es distinta. Aunque abriera el menú superior, la estructura real de categorías del blog no aparecía de inmediato. Los posts habían empezado a acumularse otra vez, pero en una pantalla pequeña era difícil encontrar dónde estaba cada cosa.

Con /categories/ pasaba lo mismo.

El archivo de categorías por defecto era correcto funcionalmente. Pero en un blog con muchos posts, se veía simplemente como una lista larga. En un blog donde se mezclan Daily Review, diarios de desarrollo, diarios personales, conversaciones con GPT-5.5, meditaciones bíblicas y tips, una lista simple no explica la estructura.

Así que el trabajo de esta tarde estaba claro.

Convertir el menú móvil y la página de categorías en pantallas de navegación que muestran la estructura del blog.

Añadí un panel de categorías al menú móvil

El primer commit fue a1efaa1.

a1efaa1  [Fix] | Mobile nav: Show category panel

Los archivos modificados fueron dos.

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

El menú móvil existente estaba sobre la estructura greedy nav de Minimal Mistakes. Los enlaces superiores se veían, pero la estructura de categorías del sidebar, que es el núcleo de este blog, no se abría directamente.

Así que añadí dentro de masthead.html un panel de categorías solo para móvil.

<nav class="masthead-mobile-menu" aria-label="Categorías móviles">
  <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>

La clave fue reutilizar sidebar-categories de _data/navigation.yml.

Si el sidebar y el menú móvil miran datos distintos, algún día se desalinean seguro. Añades una categoría y aparece en escritorio, pero no en móvil.

Por eso el menú móvil también mira la misma fuente.

También incluí sidebar-nav-stats.html. Gracias a eso, dentro del menú móvil también se puede ver la cantidad de posts y la fecha del post más reciente de cada categoría.

Es una diferencia pequeña, pero en la navegación real pesa mucho.

Si solo aparece el nombre de la categoría, hay que pulsar para saber si ahí hay posts. Si se ven la cantidad y la fecha reciente, el usuario distingue de inmediato las categorías vivas de las que llevan tiempo quietas.

Desactivé los hidden-links existentes en móvil

En SCSS oculté los .hidden-links existentes en móvil e hice que el nuevo menú se mostrara cuando el toggle estuviera abierto.

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

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

El nuevo menú quedó como un panel que aparece justo debajo de la barra superior.

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

En móvil, lo importante no es mostrarlo todo de golpe.

Hay que poder ver toda la lista de categorías en una pantalla pequeña, pero no debe empujar el cuerpo del texto de forma permanente. Por eso el panel solo aparece cuando se abre y, si se hace largo, desplaza internamente.

Cambié /categories/ de lista de posts a overview

El segundo commit fue ee7c436.

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

El _layouts/categories.html existente usaba tal cual el include de taxonomy.

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

Lo cambié por un nuevo include.

{% include category-overview.html %}

Y creé _includes/category-overview.html.

Este include calcula la estructura de categorías del blog a partir de site.posts y _data/navigation.yml.

Los valores que calcula son estos.

Cantidad total de posts
Cantidad de leaf categories en operación
Cantidad de posts escritos este año
Fecha de publicación más reciente
Categoría más grande
Cantidad de posts de cada categoría
Fecha del post más reciente y título más reciente de cada categoría

En ese momento, el category overview también incluyó una barra de cuota por categoría.

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

No puedo decir que esa pantalla ya fuera perfecta. Pero la dirección era correcta.

/categories/ dejó de ser una “lista larga de posts por categoría” y se convirtió en una primera pantalla que muestra con qué estructura se mueve este blog.

Por qué hacía falta un overview

Este blog no es de un solo tema.

Hay Daily Review, diarios de desarrollo, diarios personales, archivos de conversaciones con IA y meditaciones bíblicas. Si voy a volver a operar este blog de GitHub Pages, tengo que evitar que esa estructura mezclada se convierta en una debilidad.

Si simplemente apilo todos los posts en orden cronológico, cuanto más lee alguien, más borrosa se vuelve la estructura.

En cambio, con un category overview el lector ve primero un mapa.

Qué categorías existen
Qué categorías están realmente activas
Dónde se acumulan los posts recientes
Cuál es el eje más grande del blog

Esto también es importante desde la perspectiva de portafolio.

Muestra que arreglar el blog no es simplemente escribir posts, sino reconstruir la arquitectura de información. Si solo uso las funciones por defecto de Jekyll, aparecen listas de posts. Pero si quiero que los lectores reales no se pierdan, tengo que mirar el blog entero como un producto navegable.

Qué cambió hoy

Los commits centrales de esta tarde fueron dos.

a1efaa1  Mostrar el panel de categorías en el menú móvil
ee7c436  Sustituir /categories/ de lista completa de posts por overview

Por archivos, el alcance fue este.

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

El menú móvil reutiliza sidebar-categories de _data/navigation.yml. El category overview también calcula las leaf categories tomando como base esos mismos datos de navegación.

Esa es la parte que más me gusta del trabajo de hoy.

No creé una fuente de datos nueva. Reutilicé la definición de categorías que el blog ya tenía. Por eso el sidebar de escritorio, el menú móvil y el category overview comparten la misma estructura.

Resultado

Ahora las categorías también se pueden abrir en móvil.

Al pulsar el menú superior, aparecen juntos la navegación básica y los grupos de categorías. Cada categoría también muestra la cantidad de posts y la fecha del post más reciente.

/categories/ ya no es un volcado largo de posts, sino un overview que muestra la estructura del blog. Se pueden ver la cantidad total de posts, la cantidad de categorías activas, los posts de este año, la fecha de publicación más reciente y el último post de cada categoría.

Todavía hay partes que pulir.

Tengo que seguir mirando si la barra del category overview ayuda realmente a navegar. También tengo que seguir comprobando la densidad del menú móvil en pantallas reales. Pero el núcleo de hoy ya quedó agarrado.

Si el blog va a crecer de nuevo, escribir posts no basta.

Los posts acumulados tienen que poder encontrarse otra vez. El trabajo de hoy empezó a resolver ese problema desde el menú móvil y el category overview.