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 un blog, un portfolio, un journal, des lieux, ainsi que quelques pages volantes telles que /about ou la présente page.

Chaque type de contenu dispose d’un sous-site très distinct, 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.

Images

Optimisation

Ce site utilise l’optimisation des images d’Astro. Dans le dépôt, les images ne sont pas traitées et sont conservées dans leur format d’origine, mais lors du build, elles sont redimensionnées et converties au format WebP. Certains sites vont plus loin en proposant également le format AVIF, plus moderne, mais je n’ai pas trouvé de réglage offrant un compromis satisfaisant entre le poids et la qualité.

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 (ou placeholder) à 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é.

J’utilise la librairie Medium Zoom pour afficher une version en haute résolution de l’image lors du clic. La lightbox utilise la couleur de fond de la palette pour une expérience plus immersive.

Blocs et mentions

Galeries

Une galerie est une succession d’images sur la même ligne dans une flexbox. Pour optimiser le poids de la page, les images d’une galerie peuvent être deux ou trois fois plus petites qu’une image normale. Le défaut de cette galerie est que chaque élément de la flexbox fait la même taille, ce qui signifie que les images doivent toutes faire la même taille pour éviter les espaces vides. Une astuce pour redimensionner les éléments de la flexbox dynamiquement en fonction de la taille des images serait bienvenue !

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

Les onglets permettent de choisir parmi plusieurs alternatives de contenu. Ils sont particulièrement utile dans les tutoriels, pour séparer le contenu en fonction du système d’exploitation.

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.
  • ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ (175 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é ? .

TMDB

The Movie Database (TMDB) est une alternative gratuite à IMDB et son API payante. C’est un service utilisé par de nombreux sites dont Letterboxd. Il est presque toujours possible d’obtenir un trailer et le casting, mais les images ont tendance à manquer sur les films peu populaires.

OpenGraph

Ce bloc récupère les données OpenGraph de n’importe quelle URL. Par exemple, le site ogp.me s’affiche ainsi :

Open Graph protocol

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

Pop-ups

Les pop-ups affichent des informations sur un jeu, un film ou une personnalité (voir IGDB et TMDB). Dans le cas d’une œuvre, la pop_up contient le titre, l’affiche, les auteurs, l’année de parution et jusqu’à trois images. Une pop-up s’ouvre en cliquant sur un texte dont le lien est d’une apparence plus discrète que les liens externes. Selon la palette, le lien peut être coloré ou en pointillé.

Exemple : Le film First Cow , le jeu Sword & Sorcery .

Références bibliographiques

Le bloc de référence permet d’indiquer le titre, l’auteur et d’autres données d’une référence pour l’afficher dans un format standardisé à travers tout le site. Plusieurs règles sont prises en compte. Par exemple, le titre d’un article est entouré de guillemets, mais pas le titre d’un livre, qui sera plutôt en italique.

Il est important que le site reste entièrement utilisable au fil des années, ce qui veut dire que les références doivent rester consultables ! Ce bloc m’aide à m’en assurer, puisque lorsque j’oublie de fournir un lien d’archive, un rappel est affiché dans la console.

Vous trouverez plusieurs utilisations du bloc dans les notes de base de page de Utiliser les petites capitales sur le web .

Mentions d’article

Ces mentions utilisent les couleurs et la police de la palette de l’article. Les mentions peuvent être une référence complète ( Aurélien Dos Santos, « Sur les traces de RPG Maker : 1987–1997 », ) ou indiquer seulement le titre ( Sur les traces de RPG Maker : 1987–1997 ).

Autres fonctionnalités

  • La page de recherche (/search), dont la logique est tirée du site de Goulven, permet de retrouver les entrées des content collections ainsi que quelques autres pages ajoutées manuellement.
  • L’interface de navigation du blog (/categories, /tags, etc.) s’adapte au mode clair ou sombre de l’appareil du visiteur. En mode sombre, la liste des articles est enveloppée d’une lueur afin de préparer le visiteur qui pourrait être ébloui en cliquant sur un article dont la palette est claire.
  • Les pages de jeu, accessibles depuis /games, contiennent une porte dérobée. Un double-clic sur le titre renvoie vers la page Notion qui sert à en générer le contenu. Je m’inspire de Gwern qui rend la source accessible en ajoutant .page à une URL, mais ma variante est plus pratique sur mobile.
  • Le site utilise les View Transitions d’Astro, affichant un fondu entre les pages et parfois une transition plus travaillée. Cela nécessite d’être particulièrement vigilant quant à la logique d’exécution du code JavaScript au sein des pages.

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.
    • Pop-ups : Retirer les espaces avant et après les liens ; rendre la gestion des couleurs plus flexible.
  • Pop-ups : ajouter les données de /games au pop-ups de jeu.
  • 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, car Letterboxd a refusé ma demande d’accès à l’API.
  • Ajouter un bloc GitHub pour mentionner un dépôt ou un utilisateur.
  • Ajouter l’historique git sur la page /changelog.
  • Écrire un plugin Remark pour ajouter automatiquement les espaces insécables autour des guillemets, tirets, etc.

Voir aussi : À propos de ce site, Changelog