feat: WP-197 conditional PORTAL_STYLES

[wesleyboar]

Overview

Update PORTAL_STYLES setting to:

• Make entry with page_id only load on Django CMS page with matching "Id".
• Make entry with template_name only load on Django CMS page with matching "Template".

Why?

Allows a custom CMS on taccwma/core-cms Docker image to have page-specific stylesheets (without using a CMS Snippet to load the stylesheet).

What's wrong with a Snippet?

1. Snippet developers recommend using them only during development. I agree, and always try to find ways to not use a snippet long-term (and if I must do so, then version control it).
2. The Snippet is rendered after the header, so any styles to change the header — e.g. color swap, hide element — have a delayed effect.
3. Using a snippet is not explicit, like a "hidden" trick.

Don't complicate the CMS. Just load the Snippet earlier.

Good idea. Less CMS code. All snippets now use "Content" or "Footer" placeholder. I would just add a custom placeholder e.g. "Head". My concerns:

1. A "Head" placeholder would rarely be used.
   • So, only show it for admins…
     • I can do this, but then how stylesheet is loaded would be more "hidden".
2. A "Head" would appear above "Content", quite in the way.
   • So, make it show below "Content" (and "Footer")…
     • If I can do this, then how stylesheet is loaded would be more "hidden".

Status

• Is this worth the complexity? How many sites benefit?
  • Maybe not. Three: Frontera (some), Texascale (much), UTRC (minor).
  • If worth the complexity, should it use a new templatetag?
    • Probably.
• How about adding data-page-template on html!?
  ^{Use [data-page-template] and [data-page-id] to scope styles.}

Related

• required by feat: WP-197 migrate frontera portal Core-CMS-Custom#293
• required by https://github.com/TACC/Core-Portal-Deployments/pull/46

Changes

• added logic for rendering PORTAL_STYLES

Testing

1. Edit settings_local.py or settings_custom.py:

   PORTAL_STYLES = [{
       "is_remote": True,
       "path": "https://test-1.css",
   }, {
       "is_remote": True,
       "page_id": "home",
       "path": "https://test-2.css",
   }, {
       "is_remote": True,
       "template_name": "standard.html",
       "path": "https://test-3.css",
   }, {
       "is_remote": True,
       "page_id": "fruit",
       "template_name": "standard.html",
       "path": "https://test-4.css",
   }]

2. Create/Edit pages to test these stylesheets.

   • Edit page's "Advanced settings".
   • To set page_id, set "Id".
   • To set template_name, set "Template".
   • (bonus) Test on a Blog page.

3. Verify <!-- Custom Site Assets: Styles. --> of every page.

UI

1
2
3
3
4