Appearance

Frontend - SCSS, TypeScript, WebOptimizer, skin ​

Skin unique ​

Le projet n'a qu'un seul skin : default. Tous les assets vivent sous src/Nanoxi/Design/default/ (css/, fonts/, images/, favicons/). Le code conserve un mecanisme de skin (boucle skins dans build.cake, build-ci.cake et Program.cs), mais une seule valeur est reellement produite. Le skin actif est resolu a l'execution via DomainService.GetSkinName() (propriete skinName du document type domain).

Note : la liste skins dans Program.cs contient { "default", "red" }, mais le build ne compile que default (pas de dossier Design/red). Traiter red comme inactif sauf indication contraire.

Pas de Vite - WebOptimizer + Cake ​

Contrairement a d'autres variantes Nanoxi, il n'y a pas de Vite. Le pipeline est :

  • SCSS : compile par Dart Sass (sass) - en local via build.cake (Sass-Compile), en CI via npm (build-ci.cake, Sass-Compile-CI). Sortie : src/Umbraco/wwwroot/design/{skin}/.
  • TypeScript : compile par npx tsc dans src/Nanoxi/TypeScript/ (Compile-TypeScript / Compile-TypeScript-CI) -> dist/ -> copie vers src/Umbraco/wwwroot/scripts/.
  • Bundling / minification : gere a l'execution par WebOptimizer (LigerShark.WebOptimizer.Core), declare dans src/Umbraco/Program.cs (pipeline.AddCssBundle(...), pipeline.AddJavaScriptBundle(...)). C'est la source de verite des bundles, pas un fichier de config frontend.

SCSS ​

Arborescence sous src/Nanoxi/Design/default/css/ :

  • base/ : Bootstrap base, variables, mixins, utilities, covers, figcaption, filters, scroll-anim, starterkit, ...
  • bootstrap/ : Bootstrap 5.3.2 + overrides de tokens.
  • component/ : un dossier par composant/widget (mainnav/, language/, footer/, blockgrid/, feed/, post/, form/, debugbanner/, widget<nom>/, ...).

Chaque .css compile est reference par un bundle WebOptimizer dans Program.cs (ex. bundle-default-head, bundle-head-component, bundle-footer-component, bundle-blockgrid, bundle-widget<nom>).

TypeScript ​

Sources : src/Nanoxi/TypeScript/.

  • ts/component/ : un dossier par composant (widget<nom>/, menu/, announcement/, calendarEvents/, cookieconsentmanager/, form/, ...). Pattern container + item pour les widgets interactifs.
  • ts/base/ : classes reutilisees.
  • ts/globals.d.ts : declarations globales.
  • tsconfig.json : sortie dist/.

La compilation produit dist/, copie vers wwwroot/scripts/ par la cible postbuild ; les fichiers sont references par des AddJavaScriptBundle(...) dans Program.cs.

Important ​

  • Ne jamais editer src/Umbraco/wwwroot/design|scripts|lib (genere). Editer les sources Design/default/ et TypeScript/.
  • Pour ajouter/charger un nouveau bundle CSS ou JS, le declarer dans src/Umbraco/Program.cs (WebOptimizer).
  • Le watcher local (dotnet cake --target="Watch") recompile/recopie les SCSS/CSHTML/JS modifies vers l'hote.

Contributors

No contributors

Changelog

No recent changes