diff --git a/.prettierignore b/.prettierignore index 87b97fc0..12b26b95 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,20 +1,25 @@ +# Tout ce qui est traité par dprint +*.css +*.html +*.js +*.json +*.jsonc +*.md +*.scss +*.ts +*.twig +*.yml +*.yaml + # Tout sauf le thème +.ddev web/app/* !web/app/themes +web/app/themes/haiku-atelier-2024/assets web/app/languages web/app/plugins web/vendor -# Tout .ddev sauf la configuration -.ddev/* -!.ddev/config.yaml - -# Composer +# Dépendances composer.lock - -# pnpm pnpm-lock.yaml - -# Fichiers minifiés -*.min.js -*.min.css diff --git a/biome.jsonc b/biome.jsonc index 1b2ab0f1..bef3204e 100644 --- a/biome.jsonc +++ b/biome.jsonc @@ -1,7 +1,7 @@ { "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", "files": { - "ignore": ["*.min.js", "vendor", "web/wp"], + "ignore": ["*.min.js", "vendor", "web/app/plugins", "web/app/themes/haiku-atelier-2024/assets", "web/wp"], "ignoreUnknown": true, }, "formatter": { diff --git a/composer.lock b/composer.lock index 5af5fd61..466f7dea 100644 --- a/composer.lock +++ b/composer.lock @@ -1725,12 +1725,12 @@ "source": { "type": "git", "url": "https://github.com/Roave/SecurityAdvisories.git", - "reference": "fe2777b484817ebbbe50ad685af7525560198c59" + "reference": "a143e7459e3961149eb6a8eecc98dfa19799d02a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/fe2777b484817ebbbe50ad685af7525560198c59", - "reference": "fe2777b484817ebbbe50ad685af7525560198c59", + "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/a143e7459e3961149eb6a8eecc98dfa19799d02a", + "reference": "a143e7459e3961149eb6a8eecc98dfa19799d02a", "shasum": "" }, "conflict": { @@ -2219,6 +2219,7 @@ "pubnub/pubnub": "<6.1", "pusher/pusher-php-server": "<2.2.1", "pwweb/laravel-core": "<=0.3.6.0-beta", + "pxlrbt/filament-excel": "<2.3.3", "pyrocms/pyrocms": "<=3.9.1", "qcubed/qcubed": "<=3.1.1", "quickapps/cms": "<=2.0.0.0-beta2", @@ -2532,7 +2533,7 @@ "type": "tidelift" } ], - "time": "2024-08-08T21:04:55+00:00" + "time": "2024-08-12T19:04:53+00:00" }, { "name": "squizlabs/php_codesniffer", diff --git a/dprint.json b/dprint.json index 74593cd8..0193e589 100644 --- a/dprint.json +++ b/dprint.json @@ -1,5 +1,12 @@ { - "excludes": ["**/node_modules", "**/pnpm-lock.yaml", "web/app/languages", "web/app/plugins", "web/vendor"], + "excludes": [ + "**/node_modules", + "**/pnpm-lock.yaml", + "web/app/languages", + "web/app/plugins", + "web/app/themes/haiku-atelier-2024/assets", + "web/vendor" + ], "extends": "/home/gcch/.dprint.jsonc", "exec": { "cacheKey": 1, @@ -20,7 +27,7 @@ "https://plugins.dprint.dev/json-0.19.3.wasm", "https://plugins.dprint.dev/markdown-0.17.2.wasm", "https://plugins.dprint.dev/toml-0.6.2.wasm", - "https://plugins.dprint.dev/g-plane/malva-v0.8.0.wasm", + "https://plugins.dprint.dev/g-plane/malva-v0.9.0.wasm", "https://plugins.dprint.dev/g-plane/markup_fmt-v0.11.0.wasm", "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.4.0.wasm", "https://plugins.dprint.dev/exec-0.5.0.json@8d9972eee71fa1590e04873540421f3eda7674d0f1aae3d7c788615e7b7413d0" diff --git a/justfile b/justfile index 0d392723..38b4a521 100644 --- a/justfile +++ b/justfile @@ -25,9 +25,10 @@ update: # Formatte avec Prettier et dprint format: @echo "Formatage de l'ensemble du code avec Prettier et dprint." - pnpm prettier --cache \ + pnpm prettier \ + --cache \ --cache-location "{{ cacheFolder }}/{{ prettierCacheFile }}" \ - -u \ + --ignore-unknown \ --write \ . dprint fmt @@ -50,3 +51,12 @@ watch-css: --update \ --watch \ "web/app/themes/haiku-atelier-2024/src/sass":"web/app/themes/haiku-atelier-2024/assets/css" + +# Compile TypeScript en JavaScript +build-js: + swc web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts \ + -o web/app/themes/haiku-atelier-2024/assets/js/scripts-page-produit.js + +# Compile TypeScript à chaque changement de fichier +watch-js: + watchexec -w web/app/themes/haiku-atelier-2024/src/scripts just build-js diff --git a/package.json b/package.json index 73a505dc..c8ad7ae4 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,11 @@ "@prettier/plugin-php": "^0.22.2", "@prettier/plugin-xml": "^3.4.1", "@swc/cli": "^0.4.0", - "@swc/core": "^1.7.9", + "@swc/core": "^1.7.10", "@zackad/prettier-plugin-twig": "^0.8.0", "browserslist": "^4.23.3", + "fdir": "^6.2.0", + "picomatch": "^4.0.2", "prettier": "^3.3.3", "prettier-plugin-pkg": "^0.18.1", "prettier-plugin-sh": "^0.14.0", @@ -33,7 +35,8 @@ "vite": "^5.4.0" }, "browserslist": [ - "last 5 major version", + "defaults", + "last 3 years", "not dead" ] } diff --git a/prettier.config.js b/prettier.config.js index 5f1eb1a4..7afa2bc9 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -21,18 +21,6 @@ export default { trailingCommaPHP: true, }, }, - // Pour les modèles Twig - { - files: ["*.twig"], - options: { - plugins: ["@zackad/prettier-plugin-twig"], - twigAlwaysBreakObjects: false, - twigFollowOfficialCodingStandards: true, - twigOutputEndblockName: true, - twigPrintWidth: 120, - twigSingleQuote: false, - }, - }, // Pour les fichiers XML { files: ["*.xml"], diff --git a/stylelint.config.js b/stylelint.config.js index 19484837..c15d10e3 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -2,7 +2,7 @@ import { propertyGroups } from "stylelint-config-clean-order"; -// TODO: Typer tout ça +/** @type {Array} */ const propertiesOrder = propertyGroups.map(properties => ({ emptyLineBefore: "never", noEmptyLineBetween: true, diff --git a/stylelint.d.ts b/stylelint.d.ts new file mode 100644 index 00000000..36d554f9 --- /dev/null +++ b/stylelint.d.ts @@ -0,0 +1,9 @@ +/** + * Définition d'un groupe de Propriétés _CSS_ du plugin `stylelint-config-clean-order` pour + * _Stylelint_. + */ +type StylelintConfigCleanOrderPropertyGroup = { + emptyLineBefore: "never" | "threshold"; + noEmptyLineBetween: boolean; + properties: string | Array; +}; diff --git a/tsconfig.json b/tsconfig.json index ffce8ccf..bc57e75f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,26 @@ { "compilerOptions": { + "allowArbitraryExtensions": true, "allowJs": true, + "allowSyntheticDefaultImports": true, "checkJs": true, + "downlevelIteration": false, "isolatedModules": true, - "strict": true - } + "lib": ["DOM", "ES2022"], + "module": "NodeNext", + "moduleDetection": "force", + "moduleResolution": "NodeNext", + "noEmit": true, + "noImplicitAny": false, + "noImplicitReturns": false, + "noPropertyAccessFromIndexSignature": true, + "noUncheckedIndexedAccess": true, + "noUnusedParameters": true, + "strict": true, + "strictFunctionTypes": true, + "strictPropertyInitialization": true, + "target": "ES2022" + }, + "exclude": ["vendor", "web/app/plugins", "web/wp"], + "include": ["web/app/themes/haiku-atelier-2024/src"] } diff --git a/vite.config.js b/vite.config.js index 571e9f0e..24799a26 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,16 +1,36 @@ +import { fdir } from "fdir"; +import { resolve } from "node:path"; import { defineConfig } from "vite"; +const SRC_TYPESCRIPT_PATHS = new fdir() + .withBasePath() + .glob("**/*.ts") + .crawl("web/app/themes/haiku-atelier-2024/src/scripts") + .withPromise(); + export default defineConfig({ + base: "", build: { + assetsDir: ".", + emptyOutDir: true, /* Génère un fichier manifeste dans outDir */ manifest: true, - rollupOptions: { - input: import.meta.resolve("./web/app/themes/haiku-atelier-2024/src/main.js"), - }, - outDir: import.meta.resolve("./web/app/themes/haiku-atelier-2024/assets/js"), - emptyOutDir: true, - target: "es2023", minify: true, + outDir: resolve("./web/app/themes/haiku-atelier-2024/assets/js"), + rollupOptions: { + input: await SRC_TYPESCRIPT_PATHS, + output: { + assetFileNames: "[name][extname]", + chunkFileNames: "[name][extname]", + entryFileNames: "[name].js", + compact: true, + minifyInternalExports: true, + validate: true, + }, + treeshake: "recommended", + }, + sourcemap: true, + target: "es2023", write: true, }, }); diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.css b/web/app/themes/haiku-atelier-2024/assets/css/main.css index c07f8ab0..32136382 100644 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css @@ -4,90 +4,70 @@ font-weight: 100; font-style: normal; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 100; font-style: italic; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 300; font-style: normal; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 300; font-style: italic; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 400; font-style: normal; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 400; font-style: italic; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 700; font-style: normal; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 700; font-style: italic; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 900; font-style: normal; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 900; font-style: italic; font-display: swap; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype"); } @font-face { font-family: Myriad; @@ -95,9 +75,7 @@ font-style: normal; font-display: swap; font-stretch: 70% 110%; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf") format("truetype"); } @font-face { font-family: Myriad; @@ -105,9 +83,7 @@ font-style: italic; font-display: swap; font-stretch: 70% 110%; - src: - url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2") format("woff2"), - url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf") format("truetype"); + src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf") format("truetype"); } :root { /* Couleurs */ @@ -118,6 +94,14 @@ /* Polices */ --police-lato: "Lato", sans-serif; --police-myriad: "Myriad", sans-serif; + /* Dimensions */ + --en-tete-hauteur: 60px; + --menu-categories-produits-hauteur: 54.39px; + /* Espacements */ + --espace-xs: 0.25rem; + --espace-s: 0.5rem; + --espace-m: 1rem; + --espace-l: 2rem; } /** @@ -139,7 +123,9 @@ html { * 2. Pas de marges par défaut. * 3. Hérite par défaut des styles de texte et de couleur. */ -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ @@ -159,24 +145,59 @@ body { /** * Force l'héritage des styles pour ces éléments */ -button, input, select, textarea { +button, +input, +select, +textarea { font: inherit; } +/** + * Change la couleur d'arrière-plan à la sélection du texte. + */ +*::selection { + background: var(--couleur-jaune); +} + body { - font: 1rem/1.4 var(--police-myriad) 0.5px; + font: 1rem/1.4 Myriad; color: var(--couleur-noir); + letter-spacing: 0.5px; +} + +/** + * Réinitialisation des styles des +
+
+ #} + + + +

{{ produit.prix }}€

- + {# TODO: Ajouter au Panier sans rafraîchir la Page #} +
diff --git a/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/photos-produit.twig b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/photos-produit.twig new file mode 100644 index 00000000..044aed86 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/photos-produit.twig @@ -0,0 +1,21 @@ +
+
+ {% for photo in produit.photos_colonne_gauche %} +
+ + {{ photo }} + +
+ {% endfor %} +
+ +
+ {% for photo in produit.photos_colonne_droite %} +
+ + {{ photo }} + +
+ {% endfor %} +
+
diff --git a/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig index 492d55fa..27dfbfdc 100644 --- a/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig +++ b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig @@ -1,20 +1,5 @@
-
From the same Collection
+

From the same Collection

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, - perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! -

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, - perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! -

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, - perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! -

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, - perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! -

+ {% include "parts/pages/produit/grille-produits-similaires.twig" %}
diff --git a/web/app/themes/haiku-atelier-2024/views/produit.twig b/web/app/themes/haiku-atelier-2024/views/produit.twig index 22e5ca8a..c126be2f 100644 --- a/web/app/themes/haiku-atelier-2024/views/produit.twig +++ b/web/app/themes/haiku-atelier-2024/views/produit.twig @@ -1,35 +1,13 @@ {% extends "base.twig" %} {% block contenu %} - {# Menu avec les catégories de produits #} + {# Menu des catégories de Produits #} {% include "parts/menu-categories-produits.twig" %} - {# Illustrations du Produit #} -
-
-
- {% for photo in produit.photos_colonne_gauche %} -
- - {{ photo }} - -
- {% endfor %} -
+ {# Photos du Produit #} + {% include "parts/pages/produit/photos-produit.twig" %} -
- {% for photo in produit.photos_colonne_droite %} -
- - {{ photo }} - -
- {% endfor %} -
-
-
- - {# Boîte des Informations du Produit #} + {# Boîte des information du Produit #} {% include "parts/pages/produit/informations-produit.twig" %} {# Produits similaires, généralement ceux de la même Collection #}