Fonctionnalités du site

Liste des outils utilisés, des mises en page, palettes et composants disponibles sur ce site.

Technologies utilisées

Astro

Astro est le générateur de site statique avec lequel j’ai réécrit le site au début de l’année 2023. (Auparavant, j’utilisais Hugo.) C’est un excellent outil, simple, bien documenté et flexible, qui rend la création fun et l’expérimentation plus rapide. Je le conseille vivement !

J’ai eu la chance d’être accompagné par mon amie Erika, qui travaille chez Astro, ainsi que par mon ami Goulven, qui utilise lui aussi Astro pour son blog. Ils m’ont fait découvrir des features en cours de développement que j’ai pu utiliser sur mon site : les content collections (voir Structure du contenu) et l’optimisation des assets.

Astro supporte la syntaxe MDX, activée en renommant un fichier en .mdx, et qui permet d’utiliser des composants au sein des articles. Cela m’aide à encrichir les pages de plein de composants rigolos. Voir Blocs et mentions.

Tailwind CSS

Tailwind CSS est un framework CSS que je n’ai sans doute pas besoin de présenter tant il est populaire. Je l’ai utilisé pour la première fois en réalisant ce site et il m’a rendu plus efficace et créatif, tout en produisant un code plus élégant et léger.

Tailwind propose par défaut un reset CSS appelé Preflight, injecté en incluant @tailwind base dans le CSS. Sur ce site, Preflight est désactivé dans les pages Markdown comme celle-ci et les articles de blog, mais il est activé dans toutes les autres pages, par exemple l’accueil du blog et le portfolio.

Dans les pages de présentation du portfolio, le contenu en Markdown est stylisé avec @tailwindcss/typography.

API de Notion

Le site peut récupérer le contenu d’une base de données sur Notion, mais aussi afficher le contenu d’une page. Ces fonctionnalités sont actuellement utilisées pour afficher la liste de la page /games et les « impressions » notées pour certains jeux.

Utilisé comme un CMS, Notion est parfois plus pratique que des pages Markdown, notamment pour organiser de grandes quantités de données. La page /games, qui contient plusieurs centaines d’entrées, en est un bon exemple.

Actuellement, le site supporte la plupart des blocs de Notion, mais pas tous les éléments « enfant ». Par exemple, les listes de deuxième niveau ne sont pas affichés. Pour un aperçu de toutes les fonctionnalités disponibles, voir /notion/test.

Structure du contenu

Le site contient une page d’accueil, un blog, un portfolio, ainsi que quelques pages volantes telles que /about ou la présente page.

Je considère le blog et le portfolio comme deux sous-sites très distincts, n’utilisant que très peu de logique en commun si ce n’est du code boilerplate pour alimenter le <head> et l’optimisation des images. L’idéal serait de pouvoir continuer à créer autant de ces environnements que possible au sein du même dépôt, afin de correspondre à ma vision d’un site qui peut accueillir toute ma vie, des contenus les plus anciens et brouillons aux plus récents et professionnels. Pour que ces sous-sites continuent de fonctionner sans que des mises à jour ne brisent discrètement leur mise en page, il est important de pouvoir les isoler autant que possible. Pour cela, j’utilise les content collections d’Astro, qui permettent de regrouper tous les documents Markdown d’un dossier sous une même logique.

Ainsi, le dossier content/blog est une collection regroupant tous mes articles en Markdown, avec un schéma de frontmatter permettant de renseigner la date de publication de l’article, une position géographique, les films et livres mentionnés, etc. Le dossier content/portfolio est une collection au schéma de frontmatter bien distinct. Voir les schémas dans content/config.ts.

Layouts

Attention à ne pas confondre les layouts de mes articles avec les layouts d’Astro ! Le nom est le même car initialement, j’utilisais ces derniers, mais j’ai finalement simplifié mon code. Aujourd’hui, ce que j’appelle layout est plus concrètement un nom de classe CSS.

Layouts principaux

  • classic est un design rétro et humble, présentant souvent des couleurs de fond vives et des polices par défaut comme Times New Roman. Ce layout reste fidèle aux valeurs par défaut du navigateur conçernant la taille du texte et des marges, n’intervenant que pour appliquer de petites corrections, notamment la largeur maximale de la page. Les galeries sont pensées pour apporter de la vie à ce layout en brisant la verticalité du texte.

    Exemples : Remnant: From the Ashes , Commited Language , L'introduction de Destiny : analyse du level design

  • typography, utilisé sur cette page, tente de proposer un design minimaliste mais plus travaillé et évoquant la matérialité d’un livre. Il utilise les fonctionnalités typographiques des polices OpenType pour afficher des petites capitales et les différents types de chiffre en fonction du contexte.

  • tufte est une adaptation de TufteCSS pour Astro. Il doit être utilisé avec des composants réalisés spécifiquement pour cette mise en page : <Sidenote>, <MarginNote>, <TufteFigure>, <MarginImage>, <Blockquote> et <Epigraph>. Pour créer un changement de section qui ajoute un espacement, écrire <section-switch/>.

Layouts secondaires

Les layouts secondaires proposent des variantes concernant certains éléments d’une page. Ils doivent être combinés avec un layout principal.

  • cute applique des coins arrondis aux images et des paramètres différents pour les légendes.

    Exemple : Grottes des Eaux-Chaudes, Laruns

  • future apporte de la couleur et de la fantaisie sans concession sur la lisibilité du texte. Les titres, les <em>, les puces et les numéros de liste sont colorés différemment du texte. Les liens ont un soulignage et un fond coloré qui réagissent au survol.

    Exemple : Programmer des mini-jeux rétro avec PICO-8

Palettes

Les palettes sont des combinaisons de couleurs, de polices d’écriture et d’autres paramètres servant à personnaliser les pages. Si le layout détermine la structure générale d’une page, la palette est une variante de style pour en modifier l’ambiance. Certaines palettes présentent une couleur de fond vive à la manière du web des années 90, tandis que d’autres proposent une variante plus subtile, comme la palette nature avec ses nuances de gris discrètes, à l’exception d’un vert clair pour colorer les liens.

Les palettes sont composées des éléments suivants, certains étant optionnels :

  • Couleurs : texte principal, secondaire et spécial ; fond de la page, des liens et des mentions.
  • Polices : titres ; texte principal et spécial ; taille et hauteur de ligne.

Voici une liste non exhaustive des palettes existantes :

  • Palettes rétro : default, black, white, darkgrey, blue, brown, green
  • Palettes modernes : guidebook, whiteboard, notebook, desolate, nature

En explorant l’accueil du blog (/blog), vous aurez un bon aperçu de la variété des palettes et de leurs effets.

Blocs et mentions

Galeries

Exemple : L'introduction de Destiny : analyse du level design

Sommaire

Le sommaire, dont vous pouvez voir un exemple en haut de cette page, peut avoir une profondeur variable.

Onglets

Exemple : Créer un portfolio ou un blog sans programmer avec Hugo

Google Maps

Cette idée provient de mon ami Goulven qui, pour son article « Discovering coffee in Toulouse », a réalisé des blocs adorables pour représenter ses cafés préférés sur Google Maps. Dans son élan, il a aussi réalisé des blocs pour référencer des livres (idée que j’ai également reprise, voir Open Library) et des produits Amazon.

Les infos de l’établissement sont récupérées à la compilation. Le bloc n’est donc pas dynamique côté visiteur et peut afficher des informations légèrement datées. Voici un exemple présentant, en hommage à Goulven, le café que je fréquente près de chez moi.

Kopi Coffee Shop

  • 20 Place du Salin, Toulouse
  • Fermé le lundi et le dimanche.
  • ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ (128 avis)

J’ai également réalisé un composant inline permettant de mentionner un établissement comme Kopi Coffee Shop au sein d’un paragraphe. L’icône est distribuée par Google Maps en fonction du type d’établissement, tandis que le texte peut être récupéré automatiquement ou personnalisé. Vous trouverez plusieurs exemples d’utilisation des mentions dans l’article Grottes des Eaux-Chaudes, Laruns .

Open Library

Comme Goulven, j’utilise Open Library pour afficher la couverture et les informations d’un livre, à partir d’un ISBN ou de l’identifiant Open Library (OLID) si le premier n’est pas renseigné.

Open Library a l’avantage d’avoir des données relativement complètes, mais surtout qui sont éditables instantanément, ce qui m’a été utile plusieurs fois pour préciser les données d’un livre que je souhaitais présenter. Vous trouverez des exemples d’utilisation du bloc dans l’article Utiliser les petites capitales sur le web .

Discogs

Le bloc Discogs peut afficher une version précise d’un album ou une master release, c’est-à-dire une représentation de l’ensemble des versions d’un même album. Vous trouverez deux exemples d’utilisation dans l’article Commited Language .

IGDB

L’Internet Game Database (IGDB) est une sorte d’IMDB du jeu vidéo. Lancé en 2014 et possédé depuis 2019 par Twitch qui l’utilise pour alimenter son site, les données d’IGDB sont très complètes. L’API permet d’obtenir un jeu à partir de son slug, par exemple remnant-from-the-ashes, ce qui est très pratique et lisible dans un document Markdown.

Le bloc est utilisé dans Remnant: From the Ashes et Pourquoi est-ce arrivé ? .

OpenGraph

Exemple :

Open Graph protocol

  • The Open Graph protocol enables any web page to become a rich object in a social graph.

Références bibliographiques

Exemples dans les notes de bas de page de Utiliser les petites capitales sur le web

Mentions d’article

Ceci est une mention d’article : Sur les traces de RPG Maker : 1987–1997

Optimisations

Optimisation des images

https://docs.astro.build/fr/guides/assets/

Images de substitution

J’ai repris la technique développée par mon amie Erika pour son site personnel et consistant à créer, pour chaque image, une image de substition à la résolution très faible afin de l’encoder dans la page HTML, plus précisément dans le background de <img>. Ainsi, avant que la véritable image ne soit chargée, le navigateur affiche un dégradé abstrait, bien plus esthétique qu’un simple fond blanc.

Erika a ajusté les paramètres de l’image de substition (flou ; luminosité ; contraste) pour qu’elle évoque au mieux la véritable image et que la transition entre les deux soit plus douce. J’ai légèrement modifié ces valeurs pour correspondre à mes besoins, mais le reste du code est inchangé.

Ce que ce site ne contient pas

Commentaires

Je ne crois pas que les espaces commentaires aient beaucoup de sens la plupart du temps, car tous les contenus sur Internet n’ont pas vocation à être transformés en espaces de discussion publics. Mes articles sont souvent un espace d’expression personnelle, avec la vulnérabilité que cela implique. J’ose à peine les publier, alors s’ils devaient être directement confrontés à l’expression publique, ce serait encore plus dur ! Je préfère encourager les lecteurs à m’envoyer un mail ou à me contacter sur les réseaux sociaux.

Je suis attaché au phénomène qui s’opère lorsqu’on ouvre un livre, on va au cinéma ou au musée. Ce sont des espaces dédiés à l’immersion, à l’échange intime et invisible entre l’auteur et le lecteur, le réalisateur et le spectateur. Les commentaires et critiques peuvent exister, mais dans leur propre espace, ailleurs. Si je ne vois pas mes articles comme des œuvres d’art (pour la plupart), j’espère que certains recoins de mon site pourront créer ce même rapport intime avec le lecteur.

Pagination

La pagination sur le web est souvent dûe à la peur de surcharger le lecteur ou la page avec trop de contenu et d’options. C’est une méthode encore présente sur de nombreux blogs et journaux ; cependant, c’est un design restrictif, difficile à utiliser et qui masque trop de contenu. La pagination la plus iconique d’Internet est probablement celle de Google, et elle a disparu un beau jour sans que personne ne s’en rende compte.

Pour remplacer la page suivante, il serait plus intuitif d’avoir un chargement automatique ou un grand bouton « voir plus ». Cela permet de garder visible le contenu de la « première page », qui est probablement important.

Lorsque j’aurai suffisamment de contenu pour le justifier, je réfléchirai à un menu de navigation, qui fonctionnerait comme la barre de défilement de Google Photos couplée à des options de filtrage. Sur ordinateur, il serait parfait sur un côté de l’écran. Sur mobile, l’idéal serait de le placer en bas de l’écran pour une accessibilité optimale.

Todo

  • Améliorer le design :
    • Blocs de code : Coloration différente pour chaque palette.
    • Layouts : Les transformer en un enum, comme les palettes, pour un code plus sûr et clair.
  • Emplacement du sommaire : Ajouter la possibilité de l’inclure à un endroit précis du document Markdown.
  • Date de modification des articles et des pages. Elle pourrait être récupéré de l’API de GitHub afin d’éviter de la mettre à jour manuellement. Le but n’est pas que cette date soit exacte, mais de représenter l’idée que les pages peuvent toujours être affinées au fil du temps, malgré qu’elles soient inscrites dans une époque dans le cas du blog.
  • Ajouter une galerie des films que j’ai mentionnés sur ce site ou aimés. C’est un problème épineux ! Letterboxd a refusé ma demande d’accès à l’API ; IMDB semble payant ou difficile à utiliser ; TMDB semble être l’option de choix, utilisé par de nombreux services dont Letterboxd.
  • Ajouter un bloc pour les films.
  • Ajouter un bloc GitHub pour mentionner un dépôt ou un utilisateur.
  • Accès rapide à la page source : J’aimerais parfois modifier rapidement une page sur mon téléphone, et le meilleur moyen pour cela serait d’avoir un accès direct au fichier Markdown sur GitHub depuis la page en question. Gwern utilise une méthode discrète et ingénieuse : en ajoutant .page à une URL, on peut consulter le fichier source d’une page écrite en Markdown. Cela ne me convient pas car ce n’est pas très pratique sur mobile. Je pense plutôt ajouter des double-clics sur certains éléments.

Voir aussi : À propos de ce site, Changelog