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

1. Suivre pas à pas les étapes de la Routine d'initialisation de projet d'Alsacréations.
2. 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.