Rewrite custom CSS for builded static pages

GeotrekCE · Feb 4, 2025 · 005d316 · 005d316
1 parent fee9165
commit 005d316
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/frontend/src/pages/_document.tsx b/frontend/src/pages/_document.tsx
@@ -56,7 +56,9 @@ const MyDocument: React.FC = () => {
   --color-events: ${events};
 }
 `}</style>
-        {style !== undefined && <style dangerouslySetInnerHTML={{ __html: style }} />}
+        {style !== undefined && (
+          <style id="customCSS" dangerouslySetInnerHTML={{ __html: style }} />
+        )}
       </Head>
       <body>
         <Main />

diff --git a/frontend/src/services/rewriteBuildedPages.mjs b/frontend/src/services/rewriteBuildedPages.mjs
@@ -6,23 +6,20 @@ import { runtimeConfig } from './getConfig.mjs';
 /** @type {ColorsConfig} */
 const colors = runtimeConfig.colors;
 
-const colorsAsString = Object.entries(colors).reduce(
-  (list, [key, value]) => {
-    if (!value) {
-      return list;
-    }
-    if (typeof value === 'string') {
-      list.push(`--color-${key}: ${value}`.toLowerCase());
-    } else if(typeof value === 'object' && !Array.isArray(value)) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      Object.entries(value).forEach(item => {
-        list.push(`--color-${key}-${item[0]}: ${item[1]}`.toLowerCase());
-      });
-    }
+const colorsAsString = Object.entries(colors).reduce((list, [key, value]) => {
+  if (!value) {
     return list;
-  },
-  [],
-);
+  }
+  if (typeof value === 'string') {
+    list.push(`--color-${key}: ${value}`.toLowerCase());
+  } else if (typeof value === 'object' && !Array.isArray(value)) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    Object.entries(value).forEach(item => {
+      list.push(`--color-${key}-${item[0]}: ${item[1]}`.toLowerCase());
+    });
+  }
+  return list;
+}, []);
 
 const rewriteBuildedPages = () => {
   const pages = ['404', '_offline', 'offline'];
@@ -33,7 +30,7 @@ const rewriteBuildedPages = () => {
     // All HTML configuration will not be displayed. Scripts are removed to avoid breaking the page
     .replace(new RegExp('<script(.*?)</script>', 'g'), '');
 
-    runtimeConfig.header.menu.supportedLanguages.forEach(lang => {
+  runtimeConfig.header.menu.supportedLanguages.forEach(lang => {
     pages.forEach(page => {
       if (!fs.existsSync(`./src/.next/server/pages/${lang}/${page}.html`)) {
         return;
@@ -49,6 +46,33 @@ const rewriteBuildedPages = () => {
         );
       }
 
+      // Inject custom Style
+      if (runtimeConfig.style) {
+        if (file.includes('<style id="customCSS">')) {
+          // Replace content
+          file = `${file}`.replace(
+            // eslint-disable-next-line no-control-regex
+            new RegExp('<style id="customCSS">(.|\n)*?</style>'),
+            `<style id="customCSS">${runtimeConfig.style}</style>`,
+          );
+        } else {
+          // Or add it
+          file = `${file}`.replace(
+            '</head>',
+            `<style id="customCSS">${runtimeConfig.style}</style></head>`,
+          );
+        }
+      } else {
+        if (file.includes('<style id="customCSS">')) {
+          // Remove it
+          file = `${file}`.replace(
+            // eslint-disable-next-line no-control-regex
+            new RegExp('<style id="customCSS">(.|\n)*?</style>'),
+            '',
+          );
+        }
+      }
+
       // Replace colors
       colorsAsString.forEach(item => {
         const [key, value] = item.split(': ');