Tutor Indigo (tutor-indigo) – Multiple Themes Configuration

Working with the following configuration:

  • Tutor Maple Release (13.3.1)
  • Tutor Indigo (commits right before v14.0.0 tag)

We’re trying to serve multiple site themes from one installation of Open edX platform and we’re wondering if we should have separate tutor plugins (based on tutor-indigo) for the different site themes or should we just put all themes in separate directory located within the tutor-indigo plugin located at tutor-indigo/tutorindigo/templates at v14.0.0 · overhangio/tutor-indigo · GitHub directory?

To make this happen we’ve done both ways below:

  1. Put all site themes in tutor-indigo/tutorindigo/templates at v14.0.0 · overhangio/tutor-indigo · GitHub directory separated directories (e.g. indigo, theme1, theme2)
  2. Make separate tutor plugins for tutor-theme1 and tutor-theme2 based on tutor-indigo theme.

Copying Theme Files to Tutor Environment
To make sure that we copy files to the Tutor environment we update this code tutor-indigo/plugin.py at v14.0.0 · overhangio/tutor-indigo · GitHub

To push out the theme files to the tutor environment at /Users/<username>/Library/Application Support/tutor/env/build/openedx/themes we issue the following command.

(venv)<username>@000-127-116-182 tutor % tutor config save
Configuration saved to /Users/<username>/Library/Application Support/tutor/config.yml
Environment generated in /Users/<username>/Library/Application Support/tutor/env
# /Users/<username>/Library/Application Support/tutor-plugins/tutor-indigo/tutorindigo/plugins.py
# Outputs to tutor environment at env/build/openedx/themes/indigo/ directory
hooks.Filters.ENV_TEMPLATE_TARGETS.add_items(
    [
        ("indigo", "build/openedx/themes"),
    ],
)

# /Users/<username>/Library/Application Support/tutor-plugins/tutor-theme1/tutortheme1/plugins.py
# Outputs to tutor environment at env/build/openedx/themes/theme1/ directory
hooks.Filters.ENV_TEMPLATE_TARGETS.add_items(
    [
        ("theme1", "build/openedx/themes"),
    ],
)

# /Users/<username>/Library/Application Support/tutor-plugins/tutor-theme2/tutortheme2/plugins.py
# Outputs to tutor environment at env/build/openedx/themes/theme2/ directory
hooks.Filters.ENV_TEMPLATE_TARGETS.add_items(
    [
        ("theme2", "build/openedx/themes"),
    ],
)

This configuration copies the theme files out to the tutor environment at /Users//Library/Application Support/tutor/env/build/openedx/themes.

image

SASS Compiling
To make this push out SASS files we add this additional Tutor configuration under ./tutor-theme/tutortheme/plugin.py.

# Copy the SCSS partial files over to the tutor env. It appears this partials directory is 
# ignored by default by tutor/env.py `ENV_PATTERNS_IGNORE`.
hooks.Filters.ENV_PATTERNS_INCLUDE.add_items(
    [
        # Include files from "partials" folders
        r"(.*/)?partials(/.*)?$",
    ]
)

Show in the image below we have the SCSS files coming across into the tutor environment at /Users/<username>/Library/Application Support/tutor/env/build/openedx/themes, however, the watchtheme only finds SCSS files in the indigo theme to recompile.

We’re noticing that the watchthemes container is only compiling SASS for the indigo theme.
Here is the log file for the watchthemes container.

        Recompiling indigo theme for lms
rtlcss /openedx/themes/indigo/lms/static/css/discussion/lms-discussion-bootstrap.css /openedx/themes/indigo/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/indigo/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss /openedx/themes/indigo/lms/static/css/bootstrap/lms-main.css /openedx/themes/indigo/lms/static/css/bootstrap/lms-main-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/indigo/lms/static/css/bootstrap/lms-main-rtl.css
 Sass dir '/openedx/themes/indigo/lms/static/certificates/sass' does not exists, skipping sass compilation for '/openedx/themes/indigo' 
        Done recompiling indigo theme for lms

cc: @regis, @becdavid, @traek728

Whenever I save any *.scss file in the theme’s tutor environment directory (e.g. tutor environment at env/build/openedx/themes/theme2/) the watchthemes recompiles it. I’m just curious why it only picks up the tutor-indigo theme only.

Also curious how we handle multiple tutor themes on single install of tutor local. Is it through multiple plugins for each theme or can we put all themes inside of tutor-indigo?

To get around the watchthemes not compiling all themes I attached to the watchthemes container and ran the following.

app@5668b9b3c895:~/edx-platform$ openedx-assets themes

Compiling lms sass assets from theme /openedx/themes/theme1...
rtlcss /openedx/themes/theme1/lms/static/css/discussion/lms-discussion-bootstrap.css /openedx/themes/theme1/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/theme1/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss /openedx/themes/theme1/lms/static/css/bootstrap/lms-main.css /openedx/themes/theme1/lms/static/css/bootstrap/lms-main-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/theme1/lms/static/css/bootstrap/lms-main-rtl.css
Compiling cms sass assets from theme /openedx/themes/theme1...

Compiling lms sass assets from theme /openedx/themes/theme2...
rtlcss /openedx/themes/theme2/lms/static/css/discussion/lms-discussion-bootstrap.css /openedx/themes/theme2/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/theme2/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss /openedx/themes/theme2/lms/static/css/bootstrap/lms-main.css /openedx/themes/theme2/lms/static/css/bootstrap/lms-main-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/theme2/lms/static/css/bootstrap/lms-main-rtl.css
Compiling cms sass assets from theme /openedx/themes/theme2...

Compiling lms sass assets from theme /openedx/themes/indigo...
rtlcss /openedx/themes/indigo/lms/static/css/discussion/lms-discussion-bootstrap.css /openedx/themes/indigo/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/indigo/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css
rtlcss /openedx/themes/indigo/lms/static/css/bootstrap/lms-main.css /openedx/themes/indigo/lms/static/css/bootstrap/lms-main-rtl.css
rtlcss: Warning! No config present, using defaults.
Saving: /openedx/themes/indigo/lms/static/css/bootstrap/lms-main-rtl.css
Compiling cms sass assets from theme /openedx/themes/indigo...