Appearance

Frontend - skins, Vite, SCSS, TypeScript ​

Skins ​

5 skins : default, cave, forets, piscines, commune. default sert de base/fallback. Le skin actif est lu sur le noeud Domain courant via DomainService.GetSkinName() (propriete skinName du document type domain), puis transmis aux vues et utilise pour choisir les bundles CSS/JS et les vues par skin (ex. Views/Components/Footer/{skin}/).

Chaque skin a son dossier d'assets : src/Nanoxi/Design/{skin}/ (css/, fonts/, images/).

Pipeline Vite ​

Configuration : vite.config.ts (racine).

  • Un objet skins declare les 5 skins, chacun avec d'eventuels extraCss/extraJs (ex. commune ajoute bundle-projects).
  • ~26 bundles CSS et ~19 bundles JS sont declares. Pour chaque skin, Vite genere :
    • CSS : src/Nanoxi/Design/{skin}/css/bundles/{bundle}.scss -> src/Umbraco/wwwroot/css/{skin}/{bundle}.css
    • JS : src/Nanoxi/TypeScript/bundles/{bundle}.ts -> src/Umbraco/wwwroot/js/{skin}/{bundle}.js
  • Plugins maison :
    • copyDesignAssetsPlugin : copie fonts/images de chaque skin vers wwwroot/fonts/{skin} et wwwroot/images/{skin}.
    • ensureSkinCssBundlesPlugin : pour un skin sans bundle propre, recopie celui de default (fallback).
  • emptyOutDir: false (ne vide pas wwwroot), Terser sans mangling (noms de classes/fonctions preserves).

Commandes : npm run dev (vite build --watch --mode development), npm run build (prod), npm run clean:assets.

SCSS ​

Arborescence par skin sous src/Nanoxi/Design/{skin}/css/ :

  • base/ : _bootstrap-base.scss (import Bootstrap 5), _variables.scss, _variables-customer.scss (overrides par skin), _mixins.scss, _paths.scss (chemins images/fonts par skin), foundation/, modules/.
  • bootstrap/_variables-customer.scss : overrides des tokens Bootstrap par skin.
  • bundles/ : un point d'entree par bundle (@use '../component/.../...').
  • component/ : un dossier par composant/widget, structure en trois fichiers :
    • _<nom>-roots.scss : definitions des CSS custom properties (tokens)
    • _<nom>-foundation.scss : layout, tailles, espacements, application des tokens
    • _<nom>-customer.scss : overrides specifiques au skin (souvent vide)

Bootstrap 5.3.2 est tire de node_modules ; les tokens sont surcharges par skin via _variables-customer.scss.

TypeScript ​

Sources : src/Nanoxi/TypeScript/.

  • bundles/ : ~19 points d'entree (bundle-widget<nom>.ts, bundle-default-head.ts, bundle-menu.ts, ...). Chaque bundle importe ses classes et les expose sur window.
  • ts/component/ : une classe par composant. Pattern container + item :
    • Widget<Nom>.ts : container, garde un tableau d'items, expose addNewInstance(contentKey).
    • Widget<Nom>Item.ts : logique par instance (souvent jQuery sur le DOM).
  • ts/component/base/ : Cms.ts, PageUtil.ts, WidgetFormSubmit.ts (reutilises).
  • tsconfig.json : rootDir ts, target ES6, module CommonJS, pas de source maps.

La compilation est faite par Vite (et la cible Cake Compile-TypeScript via npx tsc pour la sortie dist/ consommee par StaticFiles-Copy-Javascript).

Important ​

  • Ne jamais editer src/Umbraco/wwwroot/css|js (genere). Editer les sources Design/ et TypeScript/.
  • Le watcher (dotnet cake --target="Watch") recopie les SCSS/CSHTML/JS modifies vers l'hote.

Contributors

No contributors

Changelog

No recent changes