feat: WP-197 migrate frontera portal

[wesleyboar]

Overview

Migrate Frontera project from Core-CMS-Resources.

Status

• Try loading custom styles not via snippet.
  feat: WP-197 conditional PORTAL_STYLES Core-CMS#880
• Fix blue links in CMS nav dropdown links.
  ^{Not seen on Frontera (cuz it has no such links), but TACC/Core-CMS#856 (for this migration) introduced this bug.}

Related

• WP-197
• requires feat: CMD-164 custom styles via setting Core-CMS#840
• requires feat: WP-197 use @layer's / help migrate Frontera Core-CMS#856
• requires feat: WP-197 conditional PORTAL_STYLES Core-CMS#880
• requires https://github.com/TACC/Core-Portal-Deployments/pull/46

Changes

• added frontera_assets
• added first use of TACC/Core-Styles API to this repo

Testing

1. npm ci
2. npm run build
3. Verify no errors.
4. Deploy to a Frontera staging server.
5. Add snippet to Home page:

   <style>
   @import url("https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@feat/WP-197-migrate-frontera/frontera_assets/css/build/template.home.css");
   </style>

6. Change Home page template to "(Core-CMS) Full Width".
7. Add snippet to System page:

   <style>
   @import url("https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@feat/WP-197-migrate-frontera/frontera_assets/css/build/template.standard.css");
   </style>

8. Change System page template to "(Core-CMS) Standard".
9. Verify no undocumented style differences¹²³ from production site:
   • Home ("Full Width" w/ snippet)
     ^{https://pprd.frontera-portal.tacc.utexas.edu/}
   • System ("Standard" w/ snippet)
     ^{https://pprd.frontera-portal.tacc.utexas.edu/system/}
   • Training ("Full Width")
     ^{https://pprd.frontera-portal.tacc.utexas.edu/training/}
   • … ("Full Width")
     ^{https://pprd.frontera-portal.tacc.utexas.edu/…/}

UI

	Before (Prod)	After (Test)
home
system
training

Notes

Warning

Loads Core-CMS stylesheet at a version that will not auto-sync with version of Core-CMS being run.

Important

• On Home and System pages, some font weight is thinner.¹ See Core-Styles v2.26.1.
• On Home page, background behind articles in banner is less gray. This is a fix to a production bug.³

Completed Tasks

• fix problems
  • fix different fonts on "Full Width" pages (before 5e1fb7c)
  • fix error loading v1_v2.css (since 5e1fb7c)
  • fix homepage explosion of failed styles
  • fix s-article-list "See all …" / "Learn …" link arrow icon wrong
  • fix s-article-list "Learn …" link arrow color swap
  • fix System Monitor "Operational" pill icon, remove or fix
  • System page with "(Core CMS) …" template, typography is wrong
  • un-migrated page with "(Core CMS) …" template, CMS nav links are blue
  • migrated page with "… Full Width" template, CMS nav links are blue
  • System page <h3> is much thinner (like a Core-Styles v0 site)
• reduce necessity of CSS build process
  • use @mixin not @extend
  • set banner without config script (pass buildId to in options)
  • move archived BentonSans fonts to frontera_assets
  • fix layout (padding-left) of elements in header nav
• update/add README's

Footnotes

1. Expected style differences: some slightly thinner font weight, icon on system monitor status pill. ↩ ↩²

2. Content is expected to be different, but within the same layout. Some home page news images on staging do not load (because they hotlink to old TACC site). ↩

3. Homepage background behind articles in banner should be less gray than production. (This fixes a production bug.) ↩ ↩²