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

edx.org theme on by default for devstack #824

Open
1 task
dianakhuang opened this issue Oct 8, 2024 · 2 comments
Open
1 task

edx.org theme on by default for devstack #824

dianakhuang opened this issue Oct 8, 2024 · 2 comments
Assignees

Comments

@dianakhuang
Copy link
Member

dianakhuang commented Oct 8, 2024

This will be blocked by the migration of devstack configuration work. #588

We would like the edx.org theme to be on by default for edx-platform and for MFEs when starting/provisioning a new devstack.

Instructions for edx-platform

For MFEs, this probably requires the installation of the edx-branded header and footer.

Acceptance Criteria:

  • a newly provisioned devstack shows the edx theme when viewing pages.
@dianakhuang dianakhuang converted this from a draft issue Oct 8, 2024
@mfarhan943 mfarhan943 self-assigned this Oct 29, 2024
@mfarhan943 mfarhan943 moved this from Todo to In Progress in Arbi-BOM Oct 30, 2024
@mfarhan943
Copy link

mfarhan943 commented Oct 31, 2024

To automate edx.org theming for MFEs, we can use one of these approaches:

  1. Install the npm package alias @edx/brand@npm:@edx/brand-edx.org (and specific packages like footer/header if needed). This updates the local package.json and package-lock.json, allowing the theme to work with Docker or by running npm start.
  2. Install with the --no-save flag to prevent changes to package.json and package-lock.json. This approach allows the theme to work only when running npm start, not with Docker.
  3. Using module.config.js to utilize the cloned theme’s repository locally enables the theme to work with npm start, but it will not work when using Docker.

@adamstankiewicz
Copy link
Member

adamstankiewicz commented Nov 1, 2024

[inform] FYI, if it helps, another possible approach to add to the mix is also using the Paragon CLI command install-theme that performs the @edx/brand NPM aliasing with --no-save), e.g.: https://github.com/openedx/frontend-template-application/blob/e97ab533571b39159691bcf7ea6d7f435a46b2bf/package.json#L19 (largely does approach 2 behind the scenes)

{
  "scripts": {
    "start:with-theme": "paragon install-theme && npm start && npm install"
  }
}

README: https://github.com/openedx/paragon?tab=readme-ov-file#available-commands
Command source: https://github.com/openedx/paragon/blob/38a3e8383087cc15eeeac7a9e0deeaf39e5ded78/lib/install-theme.js

You may also supply the desired theme in the command itself (versus relying on the manual input prompt), e.g.:

paragon install-theme @edx/brand-edx.org@2

Perhaps the Paragon CLI install-theme command could be integrated with Docker for MFEs (e.g., perhaps devstack's microfrontend.yml file that MFEs extend via docker-compose.yml could execute paragon install-theme based on an optional environment variable like PARAGON_BRAND_PACKAGE set per MFE). Food for thought.

Note: this approach with the install-theme CLI command requires Paragon at least v21.2.0+ to be installed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: In Progress
Development

No branches or pull requests

3 participants