Skip to content

Commit 3ad1b02

Browse files
committed
refactor: allow env PARAGON_THEME_URLS definition
1 parent a21a61d commit 3ad1b02

File tree

4 files changed

+16
-4
lines changed

4 files changed

+16
-4
lines changed

.env.development

+1
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@ IGNORED_ERROR_REGEX=
2828
MFE_CONFIG_API_URL=
2929
APP_ID=
3030
SUPPORT_URL=https://support.edx.org
31+
PARAGON_THEME_URLS={}

.env.test

+1
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@ IGNORED_ERROR_REGEX=
2828
MFE_CONFIG_API_URL=
2929
APP_ID=
3030
SUPPORT_URL=https://support.edx.org
31+
PARAGON_THEME_URLS={}

docs/how_tos/theming.md

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Theming support with `@openedx/paragon` and `@openedx/brand-openedx`
22

3+
> [!IMPORTANT]
4+
> This document describes theming with design tokens.
5+
> Information on theming MFEs that do not yet have design tokens support:
6+
> * https://github.com/openedx/brand-openedx
7+
> Information on the design tokens project:
8+
> * https://github.com/openedx/paragon/blob/master/docs/decisions/0019-scaling-styles-with-design-tokens.rst
9+
> * https://github.com/openedx/paragon/tree/alpha?tab=readme-ov-file#design-tokens
10+
311
## Overview
412

513
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
4048

4149
### Basic theme URL configuration
4250

43-
Paragon supports 2 mechanisms for configuring the Paragon theme urls:
44-
* JavaScript-based configuration via `env.config.js`
45-
* MFE runtime configuration API via `edx-platform`
51+
Paragon theme loader supports 3 mechanisms for configuring the Paragon theme urls:
52+
* Environment Variables stringified JSON useful to preload the theme during the build time.
53+
* JavaScript-based configuration via `env.config.js` (only runtime config).
54+
* MFE runtime configuration API via `edx-platform` (only runtime config).
4655

47-
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.:
56+
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.:
4857

4958
```json
5059
{

src/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ let config = {
171171
MFE_CONFIG_API_URL: process.env.MFE_CONFIG_API_URL,
172172
APP_ID: process.env.APP_ID,
173173
SUPPORT_URL: process.env.SUPPORT_URL,
174+
PARAGON_THEME_URLS: JSON.parse(process.env.PARAGON_THEME_URLS) || {},
174175
};
175176

176177
/**

0 commit comments

Comments
 (0)