Contenu plus riche

Prenant le recensement de l’avancement, nous pouvons noter que a3l a maintenant quelques bases en place :

• un pipeline pour traduire les fichiers mdx source et les placer dans un site internationalisé configuré
• certaines pages d’accueil et d’article sont conçues et mises en œuvre.

Depuis la dernière session de codage, j’ai écrit les derniers articles Log précédant ce poste-ci et j’en ai ajoutivement temporairement sur le site. Cependant, ces articles contiennent plus d’images, utilisent des blocs de code et comportent nombreux liens. Avec l’étymologie d’Astro, ils ont l’air un peu basique. Il est temps de consolider la mise en page des articles.

En commençant par le style des blocs de code, nous pouvons observer que Astro transforme les blocs de code inline like this en éléments de code <code>like this</code> tandis que les triple backtick code blocks :

```ts

```

se transforment en :

<pre class="astro-code …" data-language="ts">
 <code>
 </code>
</pre>

Donc, pour styliser les blocs de code inline et le conteneur pré, nous pouvons utiliser :

/*
  `inline code` éléments
*/
:not(.astro-code) > code {
  color: red;
  background-color: lightgrey;
  …
}

/*
  le `pre` conteneur pour les blocs de code ```
*/
.astro-code {
  padding: 1rem;
  …
}

Au-delà de cela, la plupart des préoccupations liées au style des blocs de code sont résolues simplement en choix d’un thème de styling Shiki. Je souhaite une prise en charge de mode sombre, mais pour l’instant, je vais rester avec le github-dark theme.

En continuant, j’ai coché quelques autres éléments :

• Création d’un composant CaptionedImage pour centrer et afficher agréablement les images incluses entre les paragraphes des articles : juste un élément figure avec un élément figcaption optionnel avec du style associé.
• Améliorations de l’étymologie des polices & espacement des paragraphes.
• Conception & ajout d’un style css pour les liens : juste une ligne d’underline basique pour l’instant comme suit :

• Chargement du contenu récent des articles.

• Suppression de markdown à partir des résumés en utilisant remove-markdown. Cela est fait pour s’assurer qu’ils ne montrent pas de contenu riche sur la page d’accueil.

• Ajout de liens suivants et précédents au bas des pages d’article comme ci-dessous. Cela impliquait un boucle pour toutes les publications et trouver celles qui partageaient une étiquette avec l’article actuel :

• Ajout d’un pied de page très simple :

Après tous ces changements, tout le contenu des articles était bâclé mais présentable !