Ajout de spritesmith et build partiel avec vite

Convolutio · Convolutio · commit ba4a3df82662 · 2025-03-26T11:29:50.000+01:00
Import des css, mais mauvais placement pour le style
des pages d'erreur.
Script dynamique pour conserver la hiérarchie des fichiers
d'assets
Import (incomplet) des images d'assets
Manque les imports des assets en js
diff --git a/.gitignore b/.gitignore
@@ -34,6 +34,10 @@ zdsenv/
 # Front files
 node_modules
 /dist
+#  Spritesheet files
+/assets/scss/_sprite.scss
+/assets/images/sprite.png
+/assets/images/sprite@2x.png
 /npm-debug.log
 /geckodriver.log
 
diff --git a/assets/js/main.js b/assets/js/main.js
diff --git a/assets/js/main_zmd.js b/assets/js/main_zmd.js
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -6,7 +6,7 @@
 
 @use "variables" as *;
 @use "mixins";
-@use "sprite";
+@use 'sprite';
 
 /*------------------------
 1. External dependencies
diff --git a/assets/scss/zmd.scss b/assets/scss/zmd.scss
@@ -4,7 +4,7 @@
 
 // FIXME: high-dpi support for icons?
 @use "variables";
-@use "sprite";
+@use 'sprite';
 @use "highlight/zest-hljs";
 @use "components/alert-box";
 @use "base/icons";
diff --git a/package.json b/package.json
@@ -13,7 +13,10 @@
     "build": "node ./node_modules/gulp/bin/gulp.js build",
     "watch": "node ./node_modules/gulp/bin/gulp.js watch",
     "lint": "node ./node_modules/gulp/bin/gulp.js lint",
-    "clean": "node ./node_modules/gulp/bin/gulp.js clean"
+    "clean": "node ./node_modules/gulp/bin/gulp.js clean",
+    "vite-dev": "vite",
+    "vite-build": "vite build",
+    "vite-preview": "vite preview"
   },
   "repository": {
     "type": "git",
@@ -61,7 +64,8 @@
     "eslint-plugin-promise": "6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.85.1",
-    "vite": "6.2.0"
+    "vite": "6.2.0",
+    "vite-plugin-spritesmith": "^0.1.1"
   },
   "browserslist": [
     "last 2 versions",
diff --git a/vite-src/errors__css.js b/vite-src/errors__css.js
@@ -0,0 +1 @@
+import '../errors/scss/main.scss';
diff --git a/vite-src/fontawesome__css.js b/vite-src/fontawesome__css.js
@@ -0,0 +1 @@
+import "@fortawesome/fontawesome-free/css/all.min.css";
diff --git a/vite-src/main__css.js b/vite-src/main__css.js
@@ -0,0 +1,2 @@
+// 1. Build style
+import '../assets/scss/main.scss';
diff --git a/vite-src/main_zmd__css.js b/vite-src/main_zmd__css.js
@@ -0,0 +1,2 @@
+// 1. Build style
+import '../assets/scss/zmd.scss';
diff --git a/vite-src/pictures.js b/vite-src/pictures.js
@@ -0,0 +1,12 @@
+// Dynamically import all images inside the 'assets/images' directory
+const images = import.meta.glob(['../assets/images/**/*', '!../assets/images/sprite/*.png'], {
+  eager: true, // This ensures that all images are imported eagerly (without waiting)
+});
+
+const smileys = import.meta.glob('../assets/smileys/**/*', {
+  eager: true, // This ensures that all images are imported eagerly (without waiting)
+});
+
+const licenses = import.meta.glob('../assets/licenses/**/*', {
+  eager: true, // This ensures that all images are imported eagerly (without waiting)
+});
diff --git a/vite-src/zmarkdown__css.js b/vite-src/zmarkdown__css.js
@@ -0,0 +1,4 @@
+import '../zmd/node_modules/katex/dist/katex.min.css';
+const fonts = import.meta.glob('../zmd/node_modules/katex/dist/fonts/*', {
+  eager: true, // This ensures that all images are imported eagerly (without waiting)
+});
diff --git a/vite.config.js b/vite.config.js
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -0,0 +1,137 @@
+import { defineConfig } from "vite";
+import Spritesmith from 'vite-plugin-spritesmith';
+import autoprefixer from "autoprefixer";
+import cssnanoPlugin from "cssnano";
+
+const NAME_MAP = {
+  // Load all the images in the assets
+  picture: "vite-src/pictures.js",
+  // Generates CSS for the website and the ebooks
+  main: "vite-src/main__css.js",
+  zmd: "vite-src/main_zmd__css.js",
+  /* Get CSS minified files from packages
+  * Get also sourcemaps for all CSS files, required by Django's ManifestStaticFilesStorage since 4.1 (see
+  * https://docs.djangoproject.com/fr/4.2/ref/contrib/staticfiles/#manifeststaticfilesstorage) */
+  "all.min": "vite-src/fontawesome__css.js",
+  // Prepares files for zmarkdown
+  "katex.min": "vite-src/zmarkdown__css.js",
+  // Generates CSS for the static error pages in the folder `errors/`
+  "errors.main": "vite-src/errors__css.js"
+}
+const reversed_map = Object.entries(NAME_MAP).reduce((acc, pair) => ({...acc, [pair[1]]: pair[0]}), {});
+
+const outputHandling = {
+  process_lib_assets : (originalFileName, assetName) => {
+    // Get text fonts files from packages
+    if (originalFileName.startsWith('node_modules/@fontsource')) {
+      return `css/files/[name][extname]`;
+    }
+    // Get icon fonts files from packages
+    if (originalFileName.startsWith('node_modules/@fortawesome/fontawesome-free/webfonts')) {
+      return `webfonts/[name][extname]`;
+    }
+    // Prepares files for zmarkdown
+    if (originalFileName.startsWith('zmd/node_modules/katex/dist/fonts')) {
+      return 'css/fonts/[name][extname]'
+    }
+    return false;
+  },
+
+  process_source_assets : (originalFileName, assetName) => {
+    // Keep the same directory structure as in the assets directory
+    const parts = originalFileName.split('/');
+    if (parts[0] === "assets") {
+      const subDir = parts.slice(1, parts.length-1).join("/");
+      return `${subDir}/[name][extname]`;
+    }
+    return false;
+  },
+
+  process_css : (originalFileName, assetName) => {
+    // Custom css output must be defined as in the NAME_MAP
+    if (assetName.endsWith("css")) {
+      if (originalFileName.endsWith("errors__css.js"))
+        // TODO: put this file in the correct erros directory
+        return `css/errors[extname]`;
+      const name = reversed_map[originalFileName];
+      return `css/${name}[extname]`;
+    }
+    return false;
+  }
+}
+
+export default defineConfig({
+    root: '.',
+    build: {
+      outDir: './dist',
+      assetsDir: '.',
+      sourcemap: true,
+      emptyOutDir: true, // TODO: remove when Gulp is needed
+      rollupOptions: {
+        input: NAME_MAP,
+        output: {
+            sourcemap: true,
+            assetFileNames: (assetInfo) => {
+              // Extract the subdirectory structure from the source path
+              const assetPath = assetInfo.originalFileNames[0] || '';
+              const assetName = assetInfo.names[0] || '';
+
+              for (const k of Object.keys(outputHandling)) {
+                 const fn = outputHandling[k];
+                 const result = fn(assetPath, assetName);
+                 if (result !== false) return result;
+              }
+
+              // Default fallback if no subdirectory found
+              return 'assets/[name][extname]';
+            }
+        }
+      },
+      cssCodeSplit: true
+    },
+    plugins: [
+      Spritesmith({
+      watch: true,
+      src: {
+        cwd: ".",
+        glob: "./assets/images/sprite/*.png",
+      },
+      target: {
+        image: './assets/images/sprite.png',
+        css : [
+          [
+            "./assets/scss/_sprite.scss",
+            {
+              format: 'handlebars_based_template',
+            },
+          ]
+        ]
+      },
+      retina: "@2x",
+      apiOptions: {
+        cssImageRef: '/images/sprite.png',
+        spritesheet_info: {
+          name: 'vite1',
+          format: 'handlebars_based_template_retina',
+        },
+      },
+      customTemplates: {
+        handlebars_based_template_retina: './assets/scss/_sprite.scss.hbs',
+      }
+    })
+    ],
+    css: {
+        devSourcemap: true,
+        preprocessorOptions: {
+          scss: {
+            sourceMap: true,
+          }
+        },
+        postcss: {
+            plugins: [
+                autoprefixer,
+                cssnanoPlugin
+            ]
+        }
+    }
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+import "@fortawesome/fontawesome-free/css/all.min.css";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// 1. Build style`
	`2`	`+import '../assets/scss/main.scss';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// 1. Build style`
	`2`	`+import '../assets/scss/zmd.scss';`