BHDicaire

Chaîne d’assets Hugo

Règles de gouvernance

La chaîne d’assets Hugo transforme les fichiers sources locaux en CSS et en JavaScript livrés par les deux sites. Rien n’est chargé depuis un CDN tiers en production.

Le gabarit de base possède la chaîne dans layouts/_default/baseof.html.

Feuilles de style#

Le paquet CSS a deux entrées :

  1. assets/css/generated/tokens.css
  2. assets/css/site.css

Hugo charge d’abord le CSS généré des jetons, puis traite site.css avec PostCSS :

{{ $tokensCSS := resources.Get "css/generated/tokens.css" }}
{{ $siteCSS := resources.Get "css/site.css" | css.PostCSS }}
{{ with slice $tokensCSS $siteCSS | resources.Concat "css/site-bundle.css" | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}">
{{ end }}

Cet ordre compte. Les jetons définissent les valeurs réutilisables comme la couleur, le type et l’espacement. Le CSS de composant compose ces valeurs dans des sélecteurs concrets, des comportements de layout, des états de focus et des règles adaptatives.

Utilisez Fondations > Jetons > Chaîne pour les détails de Style Dictionary. Cette page documente comment Hugo livre la sortie générée.

JavaScript#

Le JavaScript du site vit dans assets/js/site.js. Hugo le minifie, calcule son empreinte et émet la balise de script :

{{ with resources.Get "js/site.js" | minify | fingerprint }}
  <script defer src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}"></script>
{{ end }}

Le JavaScript devrait rester une amélioration progressive. Les tableaux, la recherche, les onglets, la copie et les petits comportements de divulgation peuvent améliorer la page, mais le HTML rendu devrait garder sa structure et son sens sans JavaScript.

Polices#

Les polices sont des fichiers locaux sous static/fonts/ et sont préchargées depuis le gabarit de base :

<link rel="preload" href="/fonts/red-hat-display-variable.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/red-hat-text-variable.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/source-serif-4-variable.woff2" as="font" type="font/woff2" crossorigin />

Gardez les polices hébergées localement. Ajouter une police signifie ajouter le fichier localement, documenter son usage dans Fondations et mettre à jour le préchargement seulement lorsque la police est utilisée assez largement pour justifier un chargement anticipé.

Vérification#

Avant de valider des changements à la chaîne, exécutez :

npm run tokens:check
npm run lint
npm run build:brand

Utilisez npm run tokens:update lorsque les valeurs ou métadonnées des jetons changent. Utilisez npm run build:hugo lorsqu’un changement peut toucher à la fois le site principal et le site de marque.