feat: WP-197 use @layer's / help migrate Frontera

Frontera migration — TACC/Core-CMS-Custom#293 — uses @layers, but then Frontera styles yield to Core-CMS styles. They yield to Core-CMS because Core-CMS — with `TACC_CORE_STYLES_VERSION=0` — has all its styles in an anonymous layer. (CSS in an anonymous layer beats CSS in a named layer.)
TACC · Jul 25, 2024 · ebe86e4 · ebe86e4
1 parent e883b43
commit ebe86e4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/taccsite_cms/templates/assets_core.html b/taccsite_cms/templates/assets_core.html
@@ -2,7 +2,7 @@
 {% load static %}
 
 <style>
-  {# https://confluence.tacc.utexas.edu/x/b53tDg #}
+  {# https://tacc-main.atlassian.net/wiki/x/hRlv #}
   @layer foundation, base, project;
 
   @import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css") layer(foundation);

diff --git a/taccsite_cms/templates/assets_site.html b/taccsite_cms/templates/assets_site.html
@@ -13,12 +13,18 @@
 
 <!-- Site Assets: Styles. -->
 
-<link id="css-bootstrap" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<style>
+  {# https://tacc-main.atlassian.net/wiki/x/hRlv #}
+  @layer foundation, /* @base, */ project;
 
-<link id="css-site" rel="stylesheet" href="{% static 'site_cms/css/build/site.css' %}">
-<link id="css-site-header" rel="stylesheet" href="{% static 'site_cms/css/build/site.header.css' %}">
-{# CAVEAT: Requires `npm run build:css` step #}
-<link id="css-site-v3-11+" rel="stylesheet" href="{% static 'site_cms/css/build/site.v3-11-plus.css' %}">
+  @import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css") layer(foundation);
+
+  @import url("{% static 'site_cms/css/build/site.css' %}") layer(project);
+  @import url("{% static 'site_cms/css/build/site.header.css' %}") layer(project);
+
+  {# CAVEAT: Requires `npm run build:css` step #}
+  @import url("{% static 'site_cms/css/build/site.v3-11-plus.css' %}") layer(project);
+</style>
 
 
 {# Impacts the clients "CEPv2" Portal & Frontera Docs #}

diff --git a/taccsite_cms/templates/assets_site_delayed.html b/taccsite_cms/templates/assets_site_delayed.html
@@ -1,22 +1,13 @@
-{# For assets that should be loaded after all others. #}
-{% comment %}
-Consider asset load via `assets_site`, not `assets_site_delayed`:
-  - Styles should not need a delayed load time.
-  - Scripts can use `defer` or `async` attr's to manage load time.
-{% endcomment %}
+{# SEE: ./assets_site.md #}
+{% load static %}
 
-{# NOTE: Fonts may be loaded early via `assets_font` #}
-
-
-
-<!-- Site Assets (Delayed): Scripts. -->
 {# FAQ: Bootstrap can use jQuery, Popper, then its own script #}
 {# SEE: https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template #}
 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script type="module">
-  import updateEmailLinkHrefs from '/static/site_cms/js/modules/updateEmailLinkHrefs.js';
+  import updateEmailLinkHrefs from '{% static "site_cms/js/modules/updateEmailLinkHrefs.js" %}';
 
   const scopeElement = document.getElementById('cms-content');
   const fakeText = '__REMOVE_THIS__';
@@ -28,8 +19,3 @@
     body: 'data-body'
   });
 </script>
-
-<!-- Site Assets (Delayed): Font Icons -->
-{# FAQ: Not loaded in `assets_font.html` because these is NOT font for content which should avoid FOUT, FOIT, FOFT; but decorative, thus superfluous, icons #}
-<!-- FP-526: Stop using Font Awesome icons; start using Cortal icons -->
-<link id="css-portal-font" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" />
diff --git a/taccsite_cms/templates/djangocms_blog/base.html b/taccsite_cms/templates/djangocms_blog/base.html
@@ -16,7 +16,9 @@
 {% block content %}
 
 {% if settings.TACC_CORE_STYLES_VERSION == 0 %}
-<link rel="stylesheet" href="{% static 'site_cms/css/build/site.app.blog.css' %}">
+<style>
+  @import url("{% static 'site_cms/css/build/site.app.blog.css' %}") layer(project);
+</style>
 {% elif settings.TACC_CORE_STYLES_VERSION >= 1 %}
 <style>
   @import url("{% static 'site_cms/css/build/app.blog.css' %}") layer(project);