Page web <www.goetter.fr>

Stack

pnpm : gestionnaire de paquets
Vite : gestion du build, compilation
Handlebars : templates HTML
UnoCSS : gestion des styles CSS

Annexes :

Prettier : formatage du code
prettier-plugin-css-order : pour réordonner les propriétés CSS

Tâches

Développement local : pnpm dev
Compilation et mise en prod git push (Github Actions déploie et publie le site sur Google Pages)

Installation / configuration

Suivre pas à pas les étapes de la Routine d'initialisation de projet d'Alsacréations.
Installer vite-plugin-handlebars

Github Pages

Site hébergé, compilé et déployé sous Github Pages.

Configuration générale dans Settings > Pages
"Build and deployment" via Github Actions
Fichier de tâches de déploiement : static.yml
Domaine personnalisé dans Settings > Pages

Styles CSS

UnoCSS est notre générateur principal de classes utilitaires et de custom properties CSS.

CSS Vanilla : Nous écrivons les règles CSS dans les feuilles de styles et nous n'utilisons pas de classes utilitaires, sauf exceptions.
Base et Reset : Le fichier uno-bretzel.ts contient le Reset CSS Alsacréations ainsi que diverses classes "layouts" spécifiques à nos projets (visually-hidden, liquid/splash, l-autogrid, l-repel, l-media, etc.)
Variables CSS : Le plugin unocss-custom-properties transforme toutes les valeurs de thème du fichier uno.config.ts en custom properties (ex. font-weight: var(--font-weight-400)) et génère un fichier vars.css qui les contient.
Qualité du code : Prettier formatte le CSS, prettier-plugin-css-order réordonner les propriétés CSS.