Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: runtime theming #9

Merged
merged 1 commit into from
Dec 20, 2023
Merged

Conversation

xitij2000
Copy link
Member

@xitij2000 xitij2000 commented Nov 9, 2023

This PR adds support for runtime theming so that the theme CSS is dynamically loaded based on URLs provided by MFE config API.

Testing instructions

  1. Checkout the version of frontend-platform referenced in package.json
  2. Add module.config.js with the following content:
module.exports = {
  localModules: [
    { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'src' },
  ],
};

This will ensure that we are using the version of frontend-platform that supports design tokens.
3. Add .env.private with the following contents:

LMS_BASE_URL='http://local.overhang.io:8000'
LOGIN_URL='http://local.overhang.io:8000/login'
LOGOUT_URL='http://local.overhang.io:8000/logout'
APP_ID='communications'
MFE_CONFIG_API_URL='http://local.overhang.io:8000/api/mfe_config/v1'

This will ensure that the MFE has the correct URLs when using tutor. If not using tutor just add the corect MFE_CONFIG_API_URL and leave the rest.
4. Add the following line to webpack.dev.config.js

config.devServer.allowedHosts = [
  'apps.local.overhang.io',
];
  1. Create a custom theme based on feat: Add support for design tokens edx-simple-theme#34 and run a webserver in the dist directory to serve your custom theme.
  2. Add the following to site configuration:
"MFE_CONFIG": {
    "PARAGON_THEME_URLS": {
        "core": {
            "urls": {
                "default": "https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css",
                "brandOverride": "https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@$brandVersion/dist/core.min.css"
            }
        },
        "variants": {
            "light": {
                "urls": {
                    "default": "https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css",
                    "brandOverride": "http://localhost:9100/light.min.css"
                },
                "default": true,
                "dark": false
            }
        }
    }
}

Update based on the theme name and URL etc.

@xitij2000 xitij2000 force-pushed the asu-moe/palm-css branch 2 times, most recently from 7d516ba to 9c129e3 Compare November 22, 2023 16:41
Updates the MFE to use alpha version of frontend build, platform and paragon to
support runtime theming.
@xitij2000 xitij2000 marked this pull request as ready for review December 20, 2023 06:34
@xitij2000 xitij2000 changed the title feat: design tokens feat: runtime theming Dec 20, 2023
@xitij2000 xitij2000 merged commit dfe61d9 into opencraft-release/palm.moe Dec 20, 2023
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant