From 41746ff7131c92ae92bd3a3f575233cccada09a3 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Tue, 11 Jun 2024 15:57:54 +0200 Subject: [PATCH] refactor: move template variables into the LODEX dynamic config --- config.json | 17 -------- configTenant.json | 1 + src/api/controller/api/themes.js | 6 +-- src/api/controller/front.js | 6 +++ src/api/models/front.js | 14 +++---- src/api/models/themes.js | 39 ++++++++++++------- .../custom/themes/default/lodex-theme.json | 10 ++--- src/app/custom/themes/inist/lodex-theme.json | 13 ++++--- .../themes/istex-legacy/lodex-theme.json | 34 +++++++++------- src/app/custom/themes/istex/lodex-theme.json | 34 +++++++++------- src/app/custom/themes/nougat/lodex-theme.json | 8 ++-- src/app/custom/themes/void/lodex-theme.json | 8 ++-- src/app/js/embeddedIstexSummary/index.js | 4 +- src/app/js/public/hook/useTheme.js | 4 +- 14 files changed, 107 insertions(+), 91 deletions(-) diff --git a/config.json b/config.json index 1025289e8..68035dc9c 100644 --- a/config.json +++ b/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 } diff --git a/configTenant.json b/configTenant.json index 42f03d998..ff62c04d0 100644 --- a/configTenant.json +++ b/configTenant.json @@ -7,6 +7,7 @@ }, "enrichmentBatchSize": 10, "front": { + "theme": {}, "breadcrumb": [], "menu": [ { diff --git a/src/api/controller/api/themes.js b/src/api/controller/api/themes.js index 65d2d326e..8ed651707 100644 --- a/src/api/controller/api/themes.js +++ b/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; diff --git a/src/api/controller/front.js b/src/api/controller/front.js index a1bc3deac..601769657 100644 --- a/src/api/controller/front.js +++ b/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; }); diff --git a/src/api/models/front.js b/src/api/models/front.js index 62275e2de..9cb32f5fe 100644 --- a/src/api/models/front.js +++ b/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 = { diff --git a/src/api/models/themes.js b/src/api/models/themes.js index 85d3aac41..23b7fe6a1 100644 --- a/src/api/models/themes.js +++ b/src/api/models/themes.js @@ -1,11 +1,11 @@ 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 @@ -13,7 +13,7 @@ const logger = getLogger('system'); // --- TypeScript without TypeScript (Required an ide with TypeScript support) /** - * @typedef {Partial} CustomTheme + * @typedef {Partial} 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 + * }} 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!`); diff --git a/src/app/custom/themes/default/lodex-theme.json b/src/app/custom/themes/default/lodex-theme.json index a6c279088..2fe49d299 100644 --- a/src/app/custom/themes/default/lodex-theme.json +++ b/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" } } } diff --git a/src/app/custom/themes/inist/lodex-theme.json b/src/app/custom/themes/inist/lodex-theme.json index fefaa7f12..8a93a446c 100644 --- a/src/app/custom/themes/inist/lodex-theme.json +++ b/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" } } } \ No newline at end of file diff --git a/src/app/custom/themes/istex-legacy/lodex-theme.json b/src/app/custom/themes/istex-legacy/lodex-theme.json index 939f5157c..18e9775b0 100644 --- a/src/app/custom/themes/istex-legacy/lodex-theme.json +++ b/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" } + } } diff --git a/src/app/custom/themes/istex/lodex-theme.json b/src/app/custom/themes/istex/lodex-theme.json index 2333e300a..9311146e5 100644 --- a/src/app/custom/themes/istex/lodex-theme.json +++ b/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" } + } } diff --git a/src/app/custom/themes/nougat/lodex-theme.json b/src/app/custom/themes/nougat/lodex-theme.json index 82d8230b7..9b6d2a87b 100644 --- a/src/app/custom/themes/nougat/lodex-theme.json +++ b/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" } } } \ No newline at end of file diff --git a/src/app/custom/themes/void/lodex-theme.json b/src/app/custom/themes/void/lodex-theme.json index 87654ace0..7455a1329 100644 --- a/src/app/custom/themes/void/lodex-theme.json +++ b/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" } } } \ No newline at end of file diff --git a/src/app/js/embeddedIstexSummary/index.js b/src/app/js/embeddedIstexSummary/index.js index f76156a01..010cd868a 100644 --- a/src/app/js/embeddedIstexSummary/index.js +++ b/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, }); diff --git a/src/app/js/public/hook/useTheme.js b/src/app/js/public/hook/useTheme.js index ef11c7372..689fa997b 100644 --- a/src/app/js/public/hook/useTheme.js +++ b/src/app/js/public/hook/useTheme.js @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import customTheme from '../../../custom/themes/default/defaultTheme'; +import defaultMuiTheme from '../../../custom/themes/default/defaultTheme'; import { themeLoader } from '../api/themeLoader'; /** @@ -7,7 +7,7 @@ import { themeLoader } from '../api/themeLoader'; * @return {{palette: import('@mui/material/styles').Theme['palette']}} */ const useTheme = () => { - const [theme, setTheme] = useState(customTheme); + const [theme, setTheme] = useState(defaultMuiTheme); useEffect(() => { themeLoader().then(setTheme).catch(); // Catch error and do nothing with it