Finalisation de la page d'accueil

Supprimer les permaliens des titres

Quand j'ai implémenté mes table des matières, j'ai aussi implémenté des permaliens à la fin de chaque titre, ce que je trouve toujours pratique pour partager une section spécifique d'un article.

Mais deux problèmes ont fini par émerger :

1. Ces permaliens s'ajoutent dès que je créé une page en markdown, que je le veuille ou non
2. Leur accessibilité est perfectible

Le premier point fait qu'ils s'ajoutent même dans des pages où ça ne m'intéresse pas, comme la page d'accueil. J'ai un peu cherché des moyens de désactiver cet ajout, mais sans succès.

Pour l'accessibilité, j'ai fait le minimum pour éviter les freins les plus gênants :

// In eleventy.config.js
eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownItAnchor, {
    level: 2,
    permalink: markdownItAnchor.permalink.linkInsideHeader({
      symbol: `
      <span class="visually-hidden">Aller au titre</span>
      <span aria-hidden="true">#</span>
      `,
      placement: 'after'
    })
}));

Mais il y a deux défauts à cette intégration :

• Quand le focus est mis sur le titre, le libellé accessible du lien est lu (ce qui n'est pas bloquant mais génère du "bruit")
• Le libellé accessible des permaliens est toujours le même, donc si on parcours la page liens par liens, il n'est pas possible de différencier les différents permaliens…

Plutôt que d'essayer de corriger tous les défauts cités plus hauts, je décide donc de simplement les supprimer. Il sera toujours possible de copier des liens vers les sections de mon site, en copiant les liens de la table des matières, et au moins je n'ai plus de permaliens superflus dans ma page d’accueil.

Ajustements sur la page d'accueil

Outre l'écriture du contenu de cette page en vue d'une première publication du site en mode Work in Progress, je retire toutes mes entrées "dernières publications". À ce stade elle ne sont pas très utiles et la page d'accueil est déjà bien pleine avec l'espèce de manifesto que nous avons écrit (elle devrait se réduire une fois que nous aurons d'autres pages dédiés à ces différents contenus).

Je me note ici le code de mes entrées "dernières publications", pour plus tard :

## Les derniers articles
<div class="latest-entries grid-auto-fit">
  {% for entry in collections.articles offset: -3 limit: 3 reversed %}
    {% render 'rich-link-article', entry: entry, forloop: forloop %}
  {% endfor %}
</div>

## Les dernières entrées du journal de bord
<div class="latest-entries">
  {% for entry in collections.log-entries offset: -3 limit: 3 reversed %}
    {% render 'rich-link-log-entry', entry: entry, forloop: forloop %}
  {% endfor %}
</div>

Ajuster la grille

La grille de contenu que j'ai créé en structurant mes pages avec layout breakout a un défaut important sur desktop : lorsque la page affichée ne contient pas de sidebar (comme la table des matières d'un article), le contenu apparaît décentré.

Pour régler ce problème, j'ai remis une valeur "1fr" comme largeur par défaut de la partie droite de la grille.

Ensuite, je change à nouveau cette valeur sur les différents breakpoints desktop, mais uniquement pour les articles :

// In _layout-article.scss
.log-entry,
.article {
  article,
  #article-content {
    grid-column: fullwidth;
    @extend %content-grid;
    // Make place for the table of content on the left, with some breakpoints to progressively re-center the article when screen width is enough.
    --right-screen-col-size: 0;

    @include desktop-xl {
    --right-screen-col-size: .5fr;
    }

    @include desktop-xxl {
      --right-screen-col-size: 1fr;
    }
  }
}

J'en profite aussi pour régler un bug qui fait que le header et le footer deviennent très haut sur les pages très courtes (comme la page 404, par exemple). Ce bug est dû au fait que je n'ai pas défini de template pour les rangées de ma grille :

• Quand les pages sont longues, pas de souci, chaque élément se dimensionne automatiquement en fonction de son contenu
• Mais quand les pages sont plus courtes que la hauteur d'écran, tous les éléments (y compris les header et footer) se redimensionnent pour occuper la place disponible.

Le correctif est simple :

// In _foundation.scss
body {
  grid-template-rows: auto 1fr auto;
}