From 445593c4b803d5639edfed4278703945ea596faf Mon Sep 17 00:00:00 2001 From: gcch Date: Thu, 3 Jul 2025 20:23:26 +0200 Subject: [PATCH] 2025-07-04 --- bun.lock | 10 +-- composer.lock | 19 ++--- docs/JOURNAL.md | 23 ++++++ dprint.json | 2 +- justfile | 77 +++++++++++++------ package.json | 6 +- .../assets/css/pages/page-accueil.css | 10 +-- .../assets/css/pages/page-accueil.css.map | 2 +- .../assets/css/pages/page-accueil.min.css | 2 +- .../src/sass/pages/page-accueil.scss | 16 ++-- .../src/scripts/journalisation.ts | 5 +- .../src/scripts/scripts-page-accueil.ts | 7 +- .../haiku-atelier-2024/views/accueil.twig | 25 ++++-- .../themes/haiku-atelier-2024/views/base.twig | 10 ++- .../views/parts/en-tete.twig | 9 ++- .../views/parts/pied-de-page.twig | 8 +- 16 files changed, 153 insertions(+), 78 deletions(-) diff --git a/bun.lock b/bun.lock index c4677edb..a5d11d13 100644 --- a/bun.lock +++ b/bun.lock @@ -13,7 +13,7 @@ "loglevel": "^1.9.2", "loglevel-plugin-prefix": "^0.8.4", "optics-ts": "^2.4.1", - "purify-ts": "^2.1.2", + "purify-ts": "2.1.2", "ts-pattern": "^5.7.1", "valibot": "1.1.0", }, @@ -53,7 +53,7 @@ "stylelint-plugin-logical-css": "^1.2.3", "typescript": "5.8.3", "typescript-eslint": "^8.35.1", - "vite": "^7.0.0", + "vite": "^7.0.1", "vite-plugin-compression2": "^2.2.0", "vite-plugin-manifest-sri": "^0.2.0", "vite-plugin-node-polyfills": "^0.23.0", @@ -375,7 +375,7 @@ "@keyv/serialize": ["@keyv/serialize@1.0.3", "", { "dependencies": { "buffer": "^6.0.3" } }, "sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g=="], - "@logtape/logtape": ["@logtape/logtape@1.0.1", "", {}, "sha512-5z/2Z4ZcZe4ZKKD2RUMv2GUk0JiyNhx+LNLZ5vh19QxobjkHY9VlEX9d03FbGf5U3SYyh6FOiaSPOV4gYq4QyQ=="], + "@logtape/logtape": ["@logtape/logtape@1.0.2", "", {}, "sha512-6EWfs4KyTAVsiAnXXSFpzEmUYI2k7qLJogqPv3JqwFd8S8Zr2iUBPv3pbIC+70cW4P6Zpq1l1hnX/jDVZwvc+Q=="], "@mobily/ts-belt": ["@mobily/ts-belt@4.0.0-rc.5", "", {}, "sha512-HLWJ8yKrfwdMzCvckRunrAL8Z+K5q31FdY6JzhkBp8o6uQsVuzf26KFyno1s6n6GB78OJEsjs57SaDk9plsJhA=="], @@ -1537,7 +1537,7 @@ "varint": ["varint@6.0.0", "", {}, "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg=="], - "vite": ["vite@7.0.0", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", "picomatch": "^4.0.2", "postcss": "^8.5.6", "rollup": "^4.40.0", "tinyglobby": "^0.2.14" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g=="], + "vite": ["vite@7.0.2", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", "picomatch": "^4.0.2", "postcss": "^8.5.6", "rollup": "^4.40.0", "tinyglobby": "^0.2.14" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw=="], "vite-plugin-compression2": ["vite-plugin-compression2@2.2.0", "", { "dependencies": { "@rollup/pluginutils": "^5.1.0", "tar-mini": "^0.2.0" } }, "sha512-7BZlU2mBHbqoBGy0ARkn3tv/7LC/2h8ewVDpG/cyH8iSzLw6E/yH6P4oBOEvchkQxNpl+B5W6rFR5fdSwfDhMA=="], @@ -1559,7 +1559,7 @@ "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="], - "wp-types": ["wp-types@4.68.0", "", { "dependencies": { "typescript": ">=4" } }, "sha512-b4E861y0BzNUJSWH2i1/ArTISI87qdadEO0qBJRocJ0L95P8gaa7r4RXQHMIfBpFnQy0NToMrnN8Qb3rWP2Vjg=="], + "wp-types": ["wp-types@4.68.1", "", { "dependencies": { "typescript": ">=4" } }, "sha512-PpyF5va7pxdBSV8cE3oao/Wfsrbx1gZKmBaijOd6/Q6RmuzCfUSPHtj8RzAtwDYD8dv7cga5lX63TvYTHdOIZA=="], "write-file-atomic": ["write-file-atomic@5.0.1", "", { "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" } }, "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw=="], diff --git a/composer.lock b/composer.lock index 4a0d5442..814a3644 100644 --- a/composer.lock +++ b/composer.lock @@ -3673,12 +3673,12 @@ "source": { "type": "git", "url": "https://github.com/Roave/SecurityAdvisories.git", - "reference": "d4ca0cc4c49ba3437778e201d35844715d9b1bd9" + "reference": "e798e1676cbc3fa2f63b439b844fe30645b1e052" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/d4ca0cc4c49ba3437778e201d35844715d9b1bd9", - "reference": "d4ca0cc4c49ba3437778e201d35844715d9b1bd9", + "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/e798e1676cbc3fa2f63b439b844fe30645b1e052", + "reference": "e798e1676cbc3fa2f63b439b844fe30645b1e052", "shasum": "" }, "conflict": { @@ -4356,7 +4356,8 @@ "spoonity/tcpdf": "<6.2.22", "squizlabs/php_codesniffer": ">=1,<2.8.1|>=3,<3.0.1", "ssddanbrown/bookstack": "<24.05.1", - "starcitizentools/citizen-skin": ">=2.4.2,<3.3.1", + "starcitizentools/citizen-skin": ">=1.9.4,<3.4", + "starcitizentools/short-description": ">=4,<4.0.1", "starcitizentools/tabber-neue": ">=1.9.1,<2.7.2|>=3,<3.1.1", "statamic/cms": "<=5.16", "stormpath/sdk": "<9.9.99", @@ -4619,7 +4620,7 @@ "type": "tidelift" } ], - "time": "2025-06-27T21:05:09+00:00" + "time": "2025-07-03T22:05:19+00:00" }, { "name": "squizlabs/php_codesniffer", @@ -4711,12 +4712,12 @@ "source": { "type": "git", "url": "https://github.com/szepeviktor/phpstan-wordpress.git", - "reference": "4edada80613f627fd320b56b762706a7d4a53b90" + "reference": "f9c2366c2e661f7323d882f7784ee64847d7d019" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/szepeviktor/phpstan-wordpress/zipball/4edada80613f627fd320b56b762706a7d4a53b90", - "reference": "4edada80613f627fd320b56b762706a7d4a53b90", + "url": "https://api.github.com/repos/szepeviktor/phpstan-wordpress/zipball/f9c2366c2e661f7323d882f7784ee64847d7d019", + "reference": "f9c2366c2e661f7323d882f7784ee64847d7d019", "shasum": "" }, "require": { @@ -4766,7 +4767,7 @@ "issues": "https://github.com/szepeviktor/phpstan-wordpress/issues", "source": "https://github.com/szepeviktor/phpstan-wordpress/tree/2.x" }, - "time": "2025-06-21T06:23:15+00:00" + "time": "2025-07-03T13:31:50+00:00" } ], "aliases": [], diff --git a/docs/JOURNAL.md b/docs/JOURNAL.md index f294dbb4..cdc4329f 100644 --- a/docs/JOURNAL.md +++ b/docs/JOURNAL.md @@ -34,3 +34,26 @@ - Développement d'un script `fish` qui lance un onglet Cromite en mode sans-tête avec profile Invité sur le site Haiku Atelier. - Il est possible, en utilisant le débogueur à distance Chromium, de rafraîchir un onglet via le terminal en passant par `fx` et `websocat` pour l'interface _WebSocket_. - Cela offre une forme primitive de « hot reload » (rechargement à chaud) pour éviter d'avoir manuellement taper F5 à chaque changement. + +## 2025-07-04 + +- Problème de l'animation SVG s'affichant mal sur iOS. + - Ce serait du à un bogue de rendu du moteur _WebKit_. + - Pour le contourner, appliquer un `transform: translate3d` ou `transform: matrix` sur les éléments SVG. + - Installation d'un [débogueur distant pour iOS](https://git.gay/besties/ios-safari-remote-debug). + - Compilation de [ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy). + - Ensuite, avec un câble reliant l'iPhone à l'ordinateur : + - S'assurer que le démon `usbmuxd` tourne ; + - Ouvrir un onglet sur Safari et activer le _Web Inspector_ dans les préférences avancées ; + - Lancer `ios_webkit_debug_proxy` dans le terminal ; + - Compiler `ios-safari-remote-debug` (`./ios-safari-remote-debug build -t releases/Apple/Safari-17.5-macOS-14.5`) ; + - Lancer le serveur `ios-safari-remote-debug` (`./ios-safari-remote-debug serve`) ; + - Naviguer à son adresse, ouvrir les outils de développements normalement proposés. + - Cela devrait pouvoir faciliter la résolution du soucis de l'animation sur l'accueil pour Safari iOS. + - **Le fin de mot de l'histoire ?** + - Pour _iOS_, on ne peut pas (encore) spécifier de valeurs relatives en pourcentages pour les dimensions des _SVG_. Il faut utiliser des `vw`/`vi`. + - Pour les `` au sein de SVG, le rendu de `font-size` peut différer de celui de Chromium/FF. Question de _PPI_ ? + - `IntersectionObserver` émettait un événement où `intersectionRatio` n'était pas 1, mais ~0.99874784. Vu que le script utilisait une valeur de 1 pour décider qu'un élément soit caché ou non, l'animation était cachée au chargement de la page. + - Utiliser un ratio supérieur à 0.9 corrige le soucisS. +- Journalisation avec _LogTape_. + - Différenciation primaire du niveau minimum de journal en utilisant la variable d'environnement `VITE_ENV`. diff --git a/dprint.json b/dprint.json index 0c4959fd..31790acd 100755 --- a/dprint.json +++ b/dprint.json @@ -12,7 +12,7 @@ "cacheKey": "1", "commands": [ { "command": "prettier --ignore-unknown --write --stdin-filepath {{file_path}}", "exts": ["php", "xml"] }, - { "command": "just --dump", "fileNames": ["justfile"], "stdin": false } + { "command": "just --dump", "fileNames": ["justfile"], "stdin": true } ], "cwd": "${originConfigDir}", "indentWidth": 2, diff --git a/justfile b/justfile index 8236ad6b..b54fed44 100755 --- a/justfile +++ b/justfile @@ -1,20 +1,27 @@ set shell := ["fish", "-c"] +set unstable := true cacheFolder := ".cache" eslintCacheFile := "eslintcache" prettierCacheFile := "prettiercache" stylelintCacheFile := "stylelintcache" +# Recette par défaut. +default: dev + # Liste toutes les recettes list: @just --list --list-heading 'Recettes disponibles :'\n'' --unsorted -# Met à jour les dépendances composer et npm +# Met à jour les dépendances composer et npm. +[group('js')] +[group('php')] update: composer update bun update -# Formatte avec Prettier et dprint +# Formatte avec Prettier et dprint. +[group('qualité')] format: @echo "Formatage de l'ensemble du code avec Prettier et dprint." bunx prettier \ @@ -25,92 +32,112 @@ format: . dprint fmt -# Compile, minifie et optimise Sass vers CSS +# Compile, minifie et optimise Sass vers CSS. +[group('css')] build-css: - bunx sass \ + @bunx sass \ --update \ "web/app/themes/haiku-atelier-2024/src/sass":"web/app/themes/haiku-atelier-2024/assets/css" - bunx lightningcss \ + @bunx lightningcss \ --bundle \ --minify \ --output-file "web/app/themes/haiku-atelier-2024/assets/css/main.min.css" \ -- "web/app/themes/haiku-atelier-2024/assets/css/main.css" - bunx lightningcss \ + @bunx lightningcss \ --bundle \ --minify \ --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css" \ -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css" - bunx lightningcss \ + @bunx lightningcss \ --bundle \ --minify \ --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css" \ -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css" - bunx lightningcss \ + @bunx lightningcss \ --bundle \ --minify \ --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.min.css" \ -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.css" - bunx lightningcss \ + @bunx lightningcss \ --bundle \ --minify \ --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css" \ -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css" - bunx lightningcss \ + @bunx lightningcss \ --bundle \ --minify \ --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-modele-simple.min.css" \ -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-modele-simple.css" - bunx lightningcss \ - --bundle \ - --minify \ - --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.min.css" \ - -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.css" + @bunx lightningcss \ + --bundle \ + --minify \ + --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.min.css" \ + -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.css" -# Compile le CSS à chaque changement de fichier +# Compile le CSS à chaque changement de fichier. +[group('css')] watch-css: @just dev @watchexec -w "web/app/themes/haiku-atelier-2024/src/sass" -- just build-css reload-tab -# Compile TypeScript en JavaScript +# Compile TypeScript en JavaScript. +[group('js')] build-js: - bunx vite build + @bunx vite build -# Compile tout +# Compile tout. +[group('css')] +[group('js')] build-all: - just build-css - just build-js + @just build-css + @just build-js + @just format -# Compile TypeScript à chaque changement de fichier +# Compile TypeScript à chaque changement de fichier. +[group('js')] watch-js: bunx vite build --watch -# Vérifie le code TypeScript avec des analyseurs statiques +# Vérifie le code TypeScript avec des analyseurs statiques. +[group('js')] +[group('qualité')] lint-js: -bunx eslint "web/app/themes/haiku-atelier-2024/src/scripts" -bunx biome check --reporter=summary "web/app/themes/haiku-atelier-2024/src/scripts" -bunx oxlint "web/app/themes/haiku-atelier-2024/src/scripts" -# Vérifie le code Sass avec Stylelint +# Vérifie le code Sass avec Stylelint. +[group('css')] +[group('qualité')] lint-css: -bunx stylelint "web/app/themes/haiku-atelier-2024/src/sass/" --fix # Vérifie le code TypeScript mort avec knip +[group('js')] +[group('qualité')] lint-code-mort: -bunx knip -# Avec Jujetsu, fusionne tous les changements actuels dans le commit précédent et pousse sur le répertoire distant +# Fusionne tous les changements actuels dans le commit précédent et pousse sur le répertoire distant avec Jujetsu. +[group('vcs')] squash-and-push: -jj squash --ignore-immutable && jj bookmark set principale -r @- --allow-backwards && jj git push # Analyse statiquement, compile et formate le CSS +[group('css')] +[group('qualité')] lint-build-format-css: -just lint-css -just build-css -just format +# Lance un navigateur de développement. +[group('développement')] dev: @/opt/cromite/chrome --remote-debugging-address=127.0.0.1 --remote-debugging-port=9222 --profile-directory=Guest "https://haikuatelier.gcch.local" & +# Recharge le premier onglet du navigateur de développement. +[group('développement')] reload-tab: #!/usr/bin/fish set -f WSURL (curl -s http://127.1:9222/json | fx '.[0].webSocketDebuggerUrl') diff --git a/package.json b/package.json index f2be7c94..f19c8a03 100755 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "keywords": [], "scripts": { "knip": "knip" }, "dependencies": { - "@logtape/logtape": "^1.0.1", + "@logtape/logtape": "^1.0.2", "@mobily/ts-belt": "v4.0.0-rc.5", "@sentry/browser": "^9.34.0", "a11y-dialog": "^8.1.4", @@ -58,13 +58,13 @@ "stylelint-plugin-logical-css": "^1.2.3", "typescript": "5.8.3", "typescript-eslint": "^8.35.1", - "vite": "^7.0.0", + "vite": "^7.0.2", "vite-plugin-compression2": "^2.2.0", "vite-plugin-manifest-sri": "^0.2.0", "vite-plugin-node-polyfills": "^0.23.0", "vite-plugin-valibot-env": "^1.0.1", "vite-tsconfig-paths": "^5.1.4", - "wp-types": "^4.68.0" + "wp-types": "^4.68.1" }, "browserslist": [ "chrome >0 and last 3 years", diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css index 08cb1440..5b3746e0 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css @@ -46,18 +46,18 @@ } #page-accueil .storytelling__animation[hidden] { display: grid !important; - /* visibility: hidden; - opacity: 0; */ + visibility: hidden; + opacity: 0; transition: 1s opacity ease-in-out, 1s visibility ease-in-out; } #page-accueil .storytelling__animation.no-js { - /* visibility: hidden; - opacity: 0; */ + visibility: hidden; + opacity: 0; transition: 1s opacity ease-in-out, 1s visibility ease-in-out; } #page-accueil .storytelling__animation .animation-conteneur { overflow: visible; - inline-size: 120%; + width: 120vw; block-size: var(--hauteur-animation); } #page-accueil .storytelling__animation .animation-texte { diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map index a2278b74..92e2b24f 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAQA;EACE;AAEA;AAAA;EAEA;;AAIF;AACE;AAAA;EAEA;;AAGF;EACE;EAGA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAQA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css index 1d5afbb7..1641aec0 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css @@ -1 +1 @@ -#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur)*13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl)*2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right),#0000,#000 20%,#000 80%,#0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{inline-size:120%;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl)*2.2)}} \ No newline at end of file +#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur)*13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl)*2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right),#0000,#000 20%,#000 80%,#0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl)*2.2)}} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss index 792d3261..3b12dcd8 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss @@ -60,16 +60,15 @@ &[hidden] { display: grid !important; - - /* visibility: hidden; - opacity: 0; */ + visibility: hidden; + opacity: 0; transition: 1s opacity ease-in-out, 1s visibility ease-in-out; } // N'affiche rien si JavaScript n'est pas activé. &.no-js { - /* visibility: hidden; - opacity: 0; */ + visibility: hidden; + opacity: 0; transition: 1s opacity ease-in-out, 1s visibility ease-in-out; } @@ -77,18 +76,19 @@ overflow: visible; // Nécessaire pour que les lettres apparaissent « en douceur » dans la vue. - inline-size: 120%; + // Safari requiert des `vw` plutôt que des `%`. + width: 120vw; block-size: var(--hauteur-animation); } .animation-texte { overflow: visible; - // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium et FF ? + // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ? font-size: var(--taille-police); font-weight: 600; - // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium et FF ? + // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ? text-shadow: 4px 4px 0 var(--couleur-blanc); text-transform: uppercase; letter-spacing: var(--espacement-inter-lettres-rapproche-s); diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts b/web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts index c875d291..7c44c77a 100644 --- a/web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts @@ -3,6 +3,9 @@ import chalk from "chalk"; import log, { type Logger } from "loglevel"; import prefix from "loglevel-plugin-prefix"; +// Récupère les variables d'environnement au sein d'un objet. +const environment = import.meta.env; + const colors = { DEBUG: chalk.cyan, ERROR: chalk.red, @@ -26,7 +29,7 @@ configureSync({ loggers: [ { category: HAIKU_ATELIER_LOGGER, - lowestLevel: "debug", + lowestLevel: environment.VITE_MODE === "production" ? "warning" : "debug", sinks: ["console"], }, ], diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts index d92ad51f..8235f3a8 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts @@ -67,7 +67,7 @@ const initDefilementStorytelling = (): void => { nuLogger.debug`majDimensions | dimensionsImage ${dimensionsImage}`; // Adapte la longueur du conteneur d'animation à la nouvelle longueur d'une image. - E.CONTENEUR_ANIMATION.style.inlineSize = `${String(dimensionsImage.width)}px`; + E.CONTENEUR_ANIMATION.style.width = `${String(dimensionsImage.width)}px`; // Adapte la hauteur du conteneur des images pour un défilement « seamless ». const nouvelleHauteurMax = `${String(dimensionsImage.height * E.IMAGES_STORYTELLING.length + 61)}px`; @@ -113,11 +113,12 @@ const initGestionAnimation = (): void => { }; const callback = (entries: Array) => { A.forEach(entries, e => { - e.intersectionRatio === 1 + e.intersectionRatio >= 0.9 ? E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN) : E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, ""); - nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio === 1} | ${e}`; + nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio >= 0.9} | ${e}`; + console.debug(e); }); }; diff --git a/web/app/themes/haiku-atelier-2024/views/accueil.twig b/web/app/themes/haiku-atelier-2024/views/accueil.twig index 68e19c9e..391ab7f2 100755 --- a/web/app/themes/haiku-atelier-2024/views/accueil.twig +++ b/web/app/themes/haiku-atelier-2024/views/accueil.twig @@ -23,17 +23,23 @@ xmlns="http://www.w3.org/2000/svg" > {# TODO: Créer une fonction pour générer les images #} - + - + - + - + - Back to top + Back to top {# Pied de page #} diff --git a/web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig b/web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig index 51180035..709d6b8b 100755 --- a/web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig +++ b/web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig @@ -1,7 +1,8 @@
{# Bouton (dés)activant le menu mobile #} - + {# TODO: Utiliser un Menu WordPress ? #}