fix: import Fork Awesome CSS in multiple files; update Vite config for asset handling

Yukaii · Yukaii · commit 5aba200151e4 · 2025-04-06T17:19:50.000+08:00
diff --git a/lib/vite-helpers.js b/lib/vite-helpers.js
@@ -28,53 +28,59 @@ function readManifest () {
 }
 
 // Helper function to get asset paths for an entry point
-function getViteAssets (entryName) {
-  const manifestData = readManifest()
-  const assets = { js: [], css: [] }
-  const isProduction = process.env.NODE_ENV === 'production'
+function getViteAssets(entryName) {
+  const manifestData = readManifest();
+  const assets = { js: [], css: [] };
+  const isProduction = process.env.NODE_ENV === 'production';
 
   if (isProduction) {
-    const entryKey = `public/js/${entryName}.js` // Assuming entry points are in public/js
-    const entryChunk = manifestData[entryKey]
+    const entryKey = `public/js/${entryName}.js`;
+    const entryChunk = manifestData[entryKey];
 
     if (entryChunk) {
-      // Add the main entry JS file
-      if (entryChunk.file) {
-        assets.js.push(`/build/${entryChunk.file}`)
-      }
-      // Add CSS files associated with the entry
-      if (entryChunk.css) {
-        entryChunk.css.forEach(cssFile => assets.css.push(`/build/${cssFile}`))
-      }
-      // Add JS imports (dynamic imports, vendor chunks) - might need refinement based on actual manifest structure
-      if (entryChunk.imports) {
-        entryChunk.imports.forEach(importKey => {
-          const importChunk = manifestData[importKey]
-          if (importChunk && importChunk.file && importChunk.file.endsWith('.js')) {
-            assets.js.push(`/build/${importChunk.file}`)
-          }
-          // Also check for CSS associated with imported chunks
-          if (importChunk && importChunk.css) {
-            importChunk.css.forEach(cssFile => {
-              // Avoid duplicates
-              if (!assets.css.includes(`/build/${cssFile}`)) {
-                assets.css.push(`/build/${cssFile}`)
-              }
-            })
-          }
-        })
-      }
+      processChunk(entryChunk, manifestData, assets);
     } else {
-      console.warn(`Vite manifest entry not found for: ${entryKey}`)
+      console.warn(`Vite manifest entry not found for: ${entryKey}`);
     }
   } else {
-    // In development, Vite now uses a custom base path
-    assets.js.push(`/.vite/@vite/client`) // Vite HMR client with custom base
-    // Request the actual file path relative to the project root with the custom base
-    assets.js.push(`/.vite/public/js/${entryName}.js`)
+    assets.js.push(`/.vite/@vite/client`);
+    assets.js.push(`/.vite/public/js/${entryName}.js`);
   }
 
-  return assets
+  return assets;
+}
+
+function processChunk(chunk, manifestData, assets) {
+  if (chunk.file && !assets.js.includes(`/build/${chunk.file}`)) {
+    assets.js.push(`/build/${chunk.file}`);
+  }
+  if (chunk.css) {
+    chunk.css.forEach(cssFile => {
+      if (!assets.css.includes(`/build/${cssFile}`)) {
+        assets.css.push(`/build/${cssFile}`);
+      }
+    });
+  }
+  if (chunk.imports) {
+    chunk.imports.forEach(importKey => {
+      const importChunk = manifestData[importKey];
+      if (importChunk) {
+        if (importChunk.file && importChunk.file.endsWith('.js')) {
+          if (!assets.js.includes(`/build/${importChunk.file}`)) {
+            assets.js.push(`/build/${importChunk.file}`);
+          }
+        }
+        if (importChunk.css) {
+          importChunk.css.forEach(cssFile => {
+            if (!assets.css.includes(`/build/${cssFile}`)) {
+              assets.css.push(`/build/${cssFile}`);
+            }
+          });
+        }
+        processChunk(importChunk, manifestData, assets);
+      }
+    });
+  }
 }
 
 // Helper to generate HTML tags
diff --git a/public/js/cover.js b/public/js/cover.js
@@ -30,6 +30,7 @@ import List from 'list.js'
 import { unescape as unescapeHTML } from 'lodash'
 import 'select2/select2.js'
 
+import 'fork-awesome/css/fork-awesome.min.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'select2/select2.css'
 import 'select2/select2-bootstrap.css'
diff --git a/public/js/index.js b/public/js/index.js
@@ -189,6 +189,7 @@ import appState from './lib/appState'
 
 // Import CSS using aliases
 // Font
+import 'fork-awesome/css/fork-awesome.min.css'
 import '@css/google-font.css'
 // Index Styles Pack
 import 'bootstrap/dist/css/bootstrap.min.css'
diff --git a/public/js/pretty.js b/public/js/pretty.js
@@ -22,6 +22,7 @@ import { preventXSS } from './render'
 
 // Import CSS previously handled by Webpack entry points
 // Pretty Styles Pack (assuming non-CDN usage)
+import 'fork-awesome/css/fork-awesome.min.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'ionicons/css/ionicons.min.css'
 import 'leaflet/dist/leaflet.css'
diff --git a/public/js/slide.js b/public/js/slide.js
@@ -14,6 +14,7 @@ import 'ionicons/css/ionicons.min.css'
 import 'leaflet/dist/leaflet.css'
 // Slide Styles
 
+import 'fork-awesome/css/fork-awesome.min.css'
 import '@vendor/bootstrap/tooltip.min.css'
 import '@css/github-extract.css'
 import '@css/mermaid.css'
diff --git a/public/views/codimd/head.ejs b/public/views/codimd/head.ejs
@@ -20,7 +20,6 @@
 <% } else { %>
 <link rel="stylesheet" href='<%- serverURL %>/build/emojify.js/dist/css/basic/emojify.min.css'>
 <link rel="stylesheet" href='<%- serverURL %>/css/font.css'>
-<link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
 <!-- <%- include('../build/index-pack-header') %> -->
 <% } %>
 <link rel="stylesheet" href='<%- serverURL %>/markdown-lint/css/lint.css'>
diff --git a/public/views/index/head.ejs b/public/views/index/head.ejs
@@ -19,7 +19,6 @@
 <%- include('../shared/polyfill') %>
 <% } else { %>
 <%# Removed direct font link - Vite will handle CSS %>
-  <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
 <%# Old webpack includes removed %>
 <% } %>
 
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
@@ -31,7 +31,6 @@
   <% } else { %>
     <link rel="stylesheet" href='<%- serverURL %>/build/emojify.js/dist/css/basic/emojify.min.css'>
     <%# Removed direct font link - Vite will handle CSS %>
-    <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
     <%# Old webpack includes removed %>
   <% } %>
   
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
@@ -27,7 +27,6 @@
         <link rel="stylesheet" href="<%- serverURL %>/build/reveal.js/css/reveal.css">
         <link rel="stylesheet" href='<%- serverURL %>/build/emojify.js/dist/css/basic/emojify.min.css'>
         <%# Removed direct font link - Vite will handle CSS %>
-        <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
         <%# Old webpack includes removed %>
         <% } %>
         
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -74,14 +74,14 @@ export default defineConfig({
           src: path.join(__dirname, 'node_modules/leaflet/dist'),
           dest: path.join(__dirname, 'public/build/leaflet')
         },
-        {
-          src: path.join(__dirname, 'node_modules/fork-awesome/fonts'),
-          dest: path.join(__dirname, 'public/build/fork-awesome/fonts')
-        },
-        {
-          src: path.join(__dirname, 'node_modules/fork-awesome/css'),
-          dest: path.join(__dirname, 'public/build/fork-awesome/css')
-        }
+        // {
+        //   src: path.join(__dirname, 'node_modules/fork-awesome/fonts/*'),
+        //   dest: path.join(__dirname, 'public/build/fork-awesome/fonts')
+        // },
+        // {
+        //   src: path.join(__dirname, 'node_modules/fork-awesome/css/*'),
+        //   dest: path.join(__dirname, 'public/build/fork-awesome/css')
+        // }
       ],
       hook: 'writeBundle' // Run copy after bundle is written
     }),
@@ -151,7 +151,7 @@ export default defineConfig({
     // ot: {} // Define ot as empty object for browser compatibility
   },
   root: __dirname,
-  base: '/.vite/', // Updated to match our custom base path in app.js
+  base: process.env.NODE_ENV === 'production' ? '/build' : '/.vite/',
   publicDir: false, // Let Vite handle all assets through middleware
   appType: 'custom',
   optimizeDeps: {
