gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2025-07-04

Browse source
This commit is contained in:
gcch 2025-07-03 20:23:26 +02:00
commit 445593c4b8
16 changed files with 153 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

10
bun.lock
View file

@ -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=="],

19
composer.lock generated
View file

@ -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": [],

23
docs/JOURNAL.md
View file

@ -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 `<text>` 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`.

2
dprint.json
View file

@ -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,

77
justfile
View file

@ -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')

6
package.json
View file

@ -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",

10
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
View file

@ -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 {

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
View file

@ -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"}
{"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"}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css vendored
View file

@ -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)}}
#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)}}

16
web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
View file

@ -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);

5
web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts
View file

@ -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"],
},
],

7
web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts
View file

@ -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<IntersectionObserverEntry>) => {
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);
});
};

25
web/app/themes/haiku-atelier-2024/views/accueil.twig
View file

@ -23,17 +23,23 @@
xmlns="http://www.w3.org/2000/svg"
>
<svg
y="50%"
class="animation-texte"
height="100%"
width="100%"
y="50%"
>
<path
d="m0 0c600-90 600 90 1200 0"
fill="transparent"
id="curve-1"
transform="translate3d(0,0,0)"
/>
{# TODO: Créer une fonction pour générer les images #}
<text dominant-baseline="middle">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-1"
xlink:href="#curve-1"
@ -51,7 +57,10 @@
/>
</text>
<text dominant-baseline="middle">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-2"
xlink:href="#curve-1"
@ -69,7 +78,10 @@
/>
</text>
<text dominant-baseline="middle">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-3"
xlink:href="#curve-1"
@ -87,7 +99,10 @@
/>
</text>
<text dominant-baseline="middle">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-4"
xlink:href="#curve-1"

10
web/app/themes/haiku-atelier-2024/views/base.twig
View file

@ -21,17 +21,21 @@
{# Bouton Revenir en haut #}
<button
aria-hidden
aria-hidden="true"
aria-labelled-by="bouton-retour-haut-label"
class="bouton-retour-haut"
id="bouton-retour-haut"
type="button"
>
<img
alt="An arrow pointing to the top"
aria-hidden="true"
src="{{ site.theme.link }}/assets/img/icons/arrow.svg"
aria-hidden
>
<span class="visuellement-cache">Back to top</span>
<span
class="visuellement-cache"
id="bouton-retour-haut-label"
>Back to top</span>
</button>
{# Pied de page #}

9
web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig
View file

@ -1,7 +1,8 @@
<header id="en-tete">
{# Bouton (dés)activant le menu mobile #}
<section class="logo">
<div class="logo">
<button
aria-label="Button to toggle the mobile navigation menu for small screen sizes"
id="bouton-menu-mobile"
type="button"
>
@ -14,7 +15,7 @@
width="307"
>
</button>
</section>
</div>
{# TODO: Utiliser un Menu WordPress ? #}
<nav
@ -79,7 +80,7 @@
</nav>
{# Bouton « Panier » avec l'indicateur de quantité de Produits #}
<section class="compte-panier">
<div class="compte-panier">
<a
class="lien-bouton"
data-contient-articles="{{ articles_presents }}"
@ -88,7 +89,7 @@
>
cart ({{ quantite_articles }})
</a>
</section>
</div>
{# Menu mobile #}
<div

8
web/app/themes/haiku-atelier-2024/views/parts/pied-de-page.twig
View file

@ -2,7 +2,7 @@
aria-label="Footer offering navigations links"
id="pied-de-page"
>
<section class="zone-menu-navigation-secondaire">
<div class="zone-menu-navigation-secondaire">
<nav
aria-label="Navigation for special pages"
class="menu-navigation"
@ -14,9 +14,9 @@
{# <li><a href="">Shipping & Returns</a></li> #}
</ul>
</nav>
</section>
</div>
<section class="zone-liens-reseaux-sociaux">
<div class="zone-liens-reseaux-sociaux">
<nav
aria-label="Navigation for Haiku Atelier's social links"
class="menu-navigation"
@ -37,5 +37,5 @@
{% endfor %}
</ul>
</nav>
</section>
</div>
</footer>