From 818ae1c842b111bbcf0551e02d96a2a80e451ad3 Mon Sep 17 00:00:00 2001 From: Diana Olarte Date: Tue, 3 Dec 2024 08:19:03 +1100 Subject: [PATCH] refactor: allow env PARAGON_THEME_URLS definition --- .env.development | 1 + .env.test | 1 + docs/how_tos/theming.md | 17 +++++++++++++---- src/config.js | 1 + 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/.env.development b/.env.development index 2d8b6b251..6f8e53c42 100644 --- a/.env.development +++ b/.env.development @@ -28,3 +28,4 @@ IGNORED_ERROR_REGEX= MFE_CONFIG_API_URL= APP_ID= SUPPORT_URL=https://support.edx.org +PARAGON_THEME_URLS={} diff --git a/.env.test b/.env.test index f25231a3b..ab3fd28bf 100644 --- a/.env.test +++ b/.env.test @@ -28,3 +28,4 @@ IGNORED_ERROR_REGEX= MFE_CONFIG_API_URL= APP_ID= SUPPORT_URL=https://support.edx.org +PARAGON_THEME_URLS={} diff --git a/docs/how_tos/theming.md b/docs/how_tos/theming.md index a5de73b20..4f36e0002 100644 --- a/docs/how_tos/theming.md +++ b/docs/how_tos/theming.md @@ -1,5 +1,13 @@ # Theming support with `@openedx/paragon` and `@openedx/brand-openedx` +> [!IMPORTANT] +> This document describes theming with design tokens. +> Information on theming MFEs that do not yet have design tokens support: +> * https://github.com/openedx/brand-openedx +> Information on the design tokens project: +> * https://github.com/openedx/paragon/blob/master/docs/decisions/0019-scaling-styles-with-design-tokens.rst +> * https://github.com/openedx/paragon/tree/alpha?tab=readme-ov-file#design-tokens + ## Overview This document is a guide for using `@edx/frontend-platform` to support MFE theming with Paragon loading the theme CSS externally (e.g., from a CDN). @@ -40,11 +48,12 @@ If any of the configured external `PARAGON_THEME_URLS` fail to load for whatever ### Basic theme URL configuration -Paragon supports 2 mechanisms for configuring the Paragon theme urls: -* JavaScript-based configuration via `env.config.js` -* MFE runtime configuration API via `edx-platform` +Paragon theme loader supports 3 mechanisms for configuring the Paragon theme urls: +* Environment Variables stringified JSON useful to preload the theme during the build time. +* JavaScript-based configuration via `env.config.js` (only runtime config). +* MFE runtime configuration API via `edx-platform` (only runtime config). -Using either configuration mechanism, a `PARAGON_THEME_URLS` configuration setting must be created to point to the externally hosted Paragon theme CSS files, e.g.: +Using any configuration mechanism, a `PARAGON_THEME_URLS` configuration setting must be created to point to the externally hosted Paragon theme CSS files, e.g.: ```json { diff --git a/src/config.js b/src/config.js index 2e345c8eb..9e2bee3c9 100644 --- a/src/config.js +++ b/src/config.js @@ -171,6 +171,7 @@ let config = { MFE_CONFIG_API_URL: process.env.MFE_CONFIG_API_URL, APP_ID: process.env.APP_ID, SUPPORT_URL: process.env.SUPPORT_URL, + PARAGON_THEME_URLS: JSON.parse(process.env.PARAGON_THEME_URLS) || {}, }; /**