refactor: move template variables into the LODEX dynamic config

config.json

@@ -116,22 +116,5 @@
         "istex",
         "istex-legacy"
     ],
-    "theme" : {
-        "istex": {
-            "host": "/",
-            "title": "Services",
-            "summary": "Les technologies et les outils ISTEX pour les projets de recherche.",
-            "matomoID": "39"
-        },
-        "istex-legacy": {
-            "host": "/",
-            "title": "Services",
-            "summary": "Les technologies et les outils ISTEX pour les projets de recherche.",
-            "matomoID": "39"
-        },
-        "inist": {
-            "title": "Etudes"
-        }
-    },
     "timeout": 3600000
 }

configTenant.json

@@ -7,6 +7,7 @@
     },
     "enrichmentBatchSize": 10,
     "front": {
+        "theme": {},
         "breadcrumb": [],
         "menu": [
             {

src/api/controller/api/themes.js

@@ -16,17 +16,17 @@ export const getThemes = async (ctx) => {
     ctx.body = getAvailableThemes();
 };
 
-export const getCustomTheme = async (ctx) => {
+export const getMuiTheme = async (ctx) => {
     const config = await ctx.configTenantCollection.findLast();
     const theme = getTheme(config.theme);
-    ctx.body = theme.customTheme;
+    ctx.body = theme.muiTheme;
 };
 
 const app = new Koa();
 
 app.use(setup);
 app.use(route.get('/', getThemes));
-app.use(route.get('/current', getCustomTheme));
+app.use(route.get('/current', getMuiTheme));
 app.use(koaBodyParser());
 
 export default app;

src/api/controller/front.js

@@ -180,12 +180,18 @@ const handleRender = async (ctx, next) => {
         return ctx.redirect(redirect);
     }
 
+    let customTemplateVariables = {};
+    if (ctx.configTenant.front && ctx.configTenant.front.theme) {
+        customTemplateVariables = ctx.configTenant.front.theme;
+    }
+
     renderPublic(ctx.configTenant.theme, {
         preload: JSON.stringify(preloadedState),
         tenant: ctx.tenant,
         jsHost: jsHost,
         themesHost: themesHost,
         istexApi: istexApiUrl,
+        customTemplateVariables,
     }).then((html) => {
         ctx.body = html;
     });

src/api/models/front.js

@@ -2,8 +2,6 @@ import { createTheme } from '@mui/material/styles';
 import { assign } from 'lodash';
 import { getTheme } from './themes';
 import { version } from '../../../package.json';
-import get from 'lodash/get';
-import config from '../../../config.json';
 import ejs from 'ejs';
 import path from 'path';
 import rootTheme from '../../app/custom/themes/rootTheme';
@@ -81,6 +79,7 @@ const renderTemplate = (file, data) => {
  * @property {object?} preload
  * @property {string?} dbName
  * @property {string?} istexApi
+ * @property {object?} customTemplateVariables
  */
 
 /**
@@ -90,13 +89,14 @@ const renderTemplate = (file, data) => {
  */
 export const renderPublic = (themeId, data) => {
     const lodexTheme = getTheme(themeId);
-    const theme = createMuiTheme(lodexTheme.customTheme);
+    const theme = createMuiTheme(lodexTheme.muiTheme);
     const cssVariable = buildCssVariable(theme.palette);
 
-    const themeCustomTemplateConfig = get(config, `theme.${themeId}`, {});
-
     const extendedData = {
-        custom: themeCustomTemplateConfig,
+        custom: {
+            ...lodexTheme.customTemplateVariables,
+            ...data.customTemplateVariables,
+        },
         lodex: {
             version,
             base: { href: data.jsHost ?? '' },
@@ -130,7 +130,7 @@ export const renderPublic = (themeId, data) => {
  */
 export const renderAdmin = (data) => {
     const lodexTheme = getTheme('default');
-    const theme = createMuiTheme(lodexTheme.customTheme);
+    const theme = createMuiTheme(lodexTheme.muiTheme);
     const cssVariable = buildCssVariable(theme.palette);
 
     const extendedData = {

src/api/models/themes.js

@@ -1,19 +1,19 @@
 import config from '../../../config.json';
 import path from 'path';
 import getLogger from '../services/logger';
-import defaultCustomTheme from '../../app/custom/themes/default/defaultTheme';
+import defaultMuiTheme from '../../app/custom/themes/default/defaultTheme';
 import deepClone from 'lodash/cloneDeep';
 
 // --- Global variable for the Theme system
-export const THEMES_VERSION = '3';
+export const THEMES_VERSION = '4';
 export const THEMES_FOLDER = '../../app/custom/themes';
 
 // --- Global function for the Theme system
 const logger = getLogger('system');
 
 // --- TypeScript without TypeScript (Required an ide with TypeScript support)
 /**
- * @typedef {Partial<import('@mui/material/styles').Theme>} CustomTheme
+ * @typedef {Partial<import('@mui/material/styles').Theme>} MuiTheme
  */
 
 /**
@@ -28,11 +28,12 @@ const logger = getLogger('system');
  *     en: string
  * }} description - Short description about the theme
  * @property {{
- *     theme: {
- *         main: string;
+ *     files: {
  *         index: string;
+ *         palette: string;
  *     };
- * }} files - Optional option for the theme system
+ *     variables?: Record<string, string>
+ * }} configuration - Optional option for the theme system
  */
 
 /**
@@ -46,7 +47,8 @@ const logger = getLogger('system');
  *     en: string
  * }} description - Short description about the theme
  * @property {string} index - Html index file location
- * @property {CustomTheme} customTheme - Mui theme
+ * @property {MuiTheme} muiTheme - Mui theme
+ * @property {object} customTemplateVariables - Default value of custom variables use in the ejs template
  */
 
 /**
@@ -131,30 +133,39 @@ const init = async () => {
             }
 
             let indexLocation = getThemeFile('default', 'index.ejs');
-            if (themeConfig?.files?.theme?.index) {
+            if (themeConfig?.configuration?.files?.index) {
                 indexLocation = getThemeFile(
                     theme,
-                    themeConfig.files.theme.index,
+                    themeConfig.configuration.files.index,
                 );
             }
 
-            let customTheme = deepClone(defaultCustomTheme);
-            if (themeConfig?.files?.theme?.main) {
+            let muiTheme = deepClone(defaultMuiTheme);
+            if (themeConfig?.configuration?.files?.palette) {
                 Object.assign(
-                    customTheme,
+                    muiTheme,
                     (
                         await import(
-                            getThemeFile(theme, themeConfig.files.theme.main)
+                            getThemeFile(
+                                theme,
+                                themeConfig.configuration.files.palette,
+                            )
                         )
                     ).default,
                 );
             }
 
+            let customTemplateVariables = {};
+            if (themeConfig?.configuration?.variables) {
+                customTemplateVariables = themeConfig.configuration.variables;
+            }
+
             loadedThemes.set(theme, {
                 name: themeConfig.name,
                 description: themeConfig.description,
                 index: indexLocation,
-                customTheme,
+                muiTheme,
+                customTemplateVariables,
             });
         } catch (e) {
             logger.error(`unable to load ${theme} theme!`);

src/app/custom/themes/default/lodex-theme.json

@@ -1,5 +1,5 @@
 {
-  "version": "3",
+  "version": "4",
   "licence": "CeCILL",
   "name": {
     "fr": "Système",
@@ -9,10 +9,10 @@
       "fr": "Thème système",
       "en": "System theme"
   },
-  "files": {
-    "theme": {
-      "main": "defaultTheme.js",
-      "index": "index.ejs"
+  "configuration": {
+    "files": {
+      "index": "index.ejs",
+      "palette": "defaultTheme.js"
     }
   }
 }

src/app/custom/themes/inist/lodex-theme.json

@@ -1,5 +1,5 @@
 {
-  "version": "3",
+  "version": "4",
   "licence": "All Right Reserved",
   "name": {
     "fr": "INIST",
@@ -9,10 +9,13 @@
     "fr": "Thème INIST (restreint)",
     "en": "INIST theme (restricted)"
   },
-  "files": {
-    "theme": {
-      "main": "inistTheme.js",
-      "index": "index.ejs"
+  "configuration": {
+    "files": {
+      "index": "index.ejs",
+      "palette": "inistTheme.js"
+    },
+    "variables": {
+      "title": "Etudes"
     }
   }
 }

src/app/custom/themes/istex-legacy/lodex-theme.json

@@ -1,18 +1,24 @@
 {
-    "version": "3",
-    "restricted": true,
-    "name": {
-        "fr": "ISTEX",
-        "en": "ISTEX"
-    },
-    "description": {
-        "fr": "Thème ISTEX historique (restreint)",
-        "en": "ISTEX theme legacy(restricted)"
-    },
+  "version": "4",
+  "restricted": true,
+  "name": {
+    "fr": "ISTEX",
+    "en": "ISTEX"
+  },
+  "description": {
+    "fr": "Thème ISTEX historique (restreint)",
+    "en": "ISTEX theme legacy(restricted)"
+  },
+  "configuration": {
     "files": {
-        "theme": {
-            "main": "customTheme.js",
-            "index": "index.ejs"
-        }
+      "index": "index.ejs",
+      "palette": "customTheme.js"
+    },
+    "variables": {
+      "host": "/",
+      "title": "Services",
+      "summary": "Les technologies et les outils ISTEX pour les projets de recherche.",
+      "matomoID": "39"
     }
+  }
 }

src/app/custom/themes/istex/lodex-theme.json

@@ -1,18 +1,24 @@
 {
-    "version": "3",
-    "licence": "All Right Reserved",
-    "name": {
-        "fr": "ISTEX",
-        "en": "ISTEX"
-    },
-    "description": {
-        "fr": "Thème ISTEX (restreint)",
-        "en": "ISTEX theme (restricted)"
-    },
+  "version": "4",
+  "licence": "All Right Reserved",
+  "name": {
+    "fr": "ISTEX",
+    "en": "ISTEX"
+  },
+  "description": {
+    "fr": "Thème ISTEX (restreint)",
+    "en": "ISTEX theme (restricted)"
+  },
+  "configuration": {
     "files": {
-        "theme": {
-            "main": "istexTheme.js",
-            "index": "index.ejs"
-        }
+      "index": "index.ejs",
+      "palette": "istexTheme.js"
+    },
+    "variables": {
+      "host": "/",
+      "title": "Services",
+      "summary": "Les technologies et les outils ISTEX pour les projets de recherche.",
+      "matomoID": "39"
     }
+  }
 }

src/app/custom/themes/nougat/lodex-theme.json

@@ -1,5 +1,5 @@
 {
-  "version": "3",
+  "version": "4",
   "licence": "CeCILL",
   "name": {
     "fr": "Nougat",
@@ -9,9 +9,9 @@
     "fr": "Thème système qui ressemble au Nougat",
     "en": "System theme that looks like Nougat"
   },
-  "files": {
-    "theme": {
-      "main": "nougatTheme.js"
+  "configuration": {
+    "files": {
+      "palette": "nougatTheme.js"
     }
   }
 }

src/app/custom/themes/void/lodex-theme.json

@@ -1,5 +1,5 @@
 {
-  "version": "3",
+  "version": "4",
   "licence": "CeCILL",
   "name": {
     "fr": "Void",
@@ -9,9 +9,9 @@
     "fr": "Thème système en violet",
     "en": "System theme in purple"
   },
-  "files": {
-    "theme": {
-      "main": "voidTheme.js"
+  "configuration": {
+    "files": {
+      "palette": "voidTheme.js"
     }
   }
 }

src/app/js/embeddedIstexSummary/index.js

@@ -12,7 +12,7 @@ import {
 
 import phrasesFor from '../i18n/translations';
 import getLocale from '../../../common/getLocale';
-import customTheme from '../../custom/themes/default/defaultTheme';
+import defaultMuiTheme from '../../custom/themes/default/defaultTheme';
 import FieldProvider from './FieldProvider';
 import { IstexSummaryView } from '../formats/other/istexSummary/IstexSummaryView';
 
@@ -22,7 +22,7 @@ const polyglot = new Polyglot({
     phrases: phrasesFor(locale),
 });
 
-const theme = createTheme(customTheme, {
+const theme = createTheme(defaultMuiTheme, {
     userAgent: navigator.userAgent,
 });