Actualización del blog: menús, mejoras, y más morado

Tuve que cambiar la plantilla (layout) de los posts a single-sidebar en el front matter del blog (content/blog/_index.md), y luego personalizar el sidebar para que tenga etiquetas y la tabla de contenidos (que se agrega con {{ $page.TableOfContents }} en Hugo).

En concreto, el código que agregué al sidebar revisa que el post tenga títulos, de lo contrario no tiene sentido mostrar un índice, y si los tiene, mostrarlo con un estilo y atributos determinados. El código es:

<!-- índice de la página -->
{{ $headers := findRE "<h[2].*>" $page.Content }}
{{- $has_headers := ge (len $headers) 1 -}}
{{- if $has_headers -}}
  <div id="PageTableOfContents", style="margin-top: 24px; position: sticky; top: 108px;">
      <div class="blog-info ph4 pb4 pb0-l">
      <h3 style="margin-bottom: 12px;">Índice:</h3>
        <div class="pl2 pr0 mh0" style = "font-size: 90%; margin-top: -8px; margin-left: -22px; margin-bottom: 32px;">
          {{ $page.TableOfContents }}
        </div>
      </div>
  </div>
{{ end }}

Para hacer la tabla de contenido flote mientras las personas hacen scroll en el sitio simplemente tuve que agregarle position: sticky; en el estilo CSS de la tabla.

También agregué las etiquetas a esta barra lateral, para que las personas que lean puedan ir saltando a otras temáticas. Las etiquetas las tengo guardadas como un partial, así que las puedo agregar en cualquier parte del sitio con tan sólo poner {{ partial "shared/tags-wide.html" . }} o `{{ partial “shared/tags-long.html” . }}, dependiendo de si las quiero hacia el lado o hacia abajo.

Antes de implementar ésto estaba usando un shortcode que agregaba un índice o tabla de contenidos al principio de las publicaciones, así que ahora hice que estos índices estuvieran cerrados por defecto, ya que se hicieron un poco redundantes. El shortcode para el índice es casi igual que el código del índice en la sidebar:

<div style = "margin-left: -16px;">
  <details {{.Get 2 | default "closed"}} id="PageTableOfContents">
    <summary>
      <h2 class="mv0 f5 fw7 ttu tracked dib" style = "margin-left: 6px; font-size: 120%;">Índice</h2>
      </summary>
    <div class="pl2 pr0 mh0" style = "font-size: 90%; margin-top: -8px; margin-left: 16px; margin-bottom: 32px;">
    {{ .Page.TableOfContents }}
    </div>
  </details>
</div>

El shortcode es demasiado sencillo:

<details>
  <summary>
    {{ (.Get 0 | default "**Ver código**") | markdownify }}
  </summary>
  <p>
    {{ .Inner | markdownify }}
  </p>
</details>

Solamente ese código guardado en layouts/shortcodes/detalles.html, y se usa poniendo el shortcode de apertura y después uno de cierre con un / antes de la palabra detalles.

Para esto, tuve que cambiar un poco la configuración de Hugo para que genere una versión del blog en JSON, agregándole que también incluya los textos de resumen o excerpt.

Siguiendo las instrucciones que di antes, en el archivo layouts/index.json hay que agregarle "excerpt" (default $page.Summary $page.Params.excerpt) para que registre ese atributo de cada post en el archivo JSON, que se regenera con cada compilación (build) del sitio.

Luego simplemente actualizar la app para que agregue ese texto, previamente interpretado como markdown con la función shiny::markdown().

El tema del código del blog Hugo se puede cambiar en config.toml, pero las opciones de colores son limitadas.

Para poder crear tu propio tema de syntax highlighting primero tienes que cambiar la opción para que cada elemento de tu código use una clase CSS específica:

[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.highlight]
    style = "rose-pine-moon"
    noClasses = false 

Al especificar noClasses = false, el texto de los bloques de código pasa a tener clases CSS distintas para cada elemento del código (comentarios, cadenas de texto, palabras reservadas, etc.).

Luego, tienes que crear un archivo CSS donde definas los colores que quieres para cada clase, a partir de uno de los temas existentes, ejecutando el siguiente código en la Terminal:

hugo gen chromastyles --style=rose-pine-moon > syntax.css

Con esto se crea el archivo syntax.css, que puedes editar para cambiar los colores. Para saber la clase de cada elemento del código, usas el inspector del navegador:

Finalmente tienes que poner el archivo CSS en la carpeta static/css/syntax.css, y cargarlo en todas las páginas del blog agregando <link rel="stylesheet" href="/css/syntax.css"> al archivo layouts/partials/head.html (si no lo tienes, lo copias desde la carpeta del tema).