GH-101: Navigation Bar (Use Constants for Header)

- Install `merge-lite` for deep merge constants and theme data.
- Use env() vars for header height.
- Remove unnecessary code and improve comments.
- Create constants for theme JSON.
- Merge constants on top of theme data.
- Update theme data comment syntax.

package.json

@@ -20,6 +20,7 @@
         "async": "^3.2.0",
         "cssnano": "^4.1.10",
         "dotenv": "^8.2.0",
+        "merge-lite": "^1.0.2",
         "npm-watch": "^0.7.0",
         "postcss-cli": "^7.1.2",
         "postcss-css-variables": "^0.17.0",

taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css

@@ -30,7 +30,7 @@ Styleguide Components.Branding
 :--for-docs .branding-header,
 :--for-portal .branding-header {
   /* To prevent zero-height element as it is loaded */
-  height: 40px;
+  height: env(--header-brandbar-height);
 
   color: var(--global-color-primary--xx-light);
   background-color: env(--header-bkgd-color);

taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css

@@ -7,34 +7,38 @@ Styleguide Trumps.ForOtherSites.Docs
 */
 @import url("_imports/tools/selectors.css");
 
-/* Sidebar Nav Dependency on Header Height */
-/* FAQ: These stylesare intentionally overriden by Docs layout resize script */
-/* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */
+
+
+/* Initialize Sidebar Position (for Dependency on Header Height) */
 
 /* To position Docs' sidebar nav at expected initial vertical location ASAP */
 :--for-docs nav.stickynav {
-  /* Override `top: 0` (in `theme.css`) */
-  top: 95px;
+  /* To override `top: 0` (in `theme.css`) */
+  /* FAQ: This is an initial value that is re-calculated by a Docs script */
+  /* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */
+  top: calc(env(--header-brandbar-height) + env(--header-navbar-height));
 }
-:--for-docs #frontera-top-nav {
-  /* To ensure header has expected height before Docs AJAX content load */
-  min-height: 95px;
 
-  /* WARNING: Unknown purpose! */
-  background-color: rgb(51, 51, 51);
-}
 
 
+/* Overwrite Bootstrap (for Search Form in Header) */
 
 /* To compensate for Docs not having `.form-inline` in _its_ Bootstrap 4.3.1 */
 :--for-docs .form-inline {
-  /* SEE: CMS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/… */
-  /* SEE: Portal https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/… */
+  /* The search bar expects these styles to be available */
+  /* SEE: CMS //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap… */
+  /* SEE: Portal //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap… */
+  /* SEE: Docs /src/5b223a5/docs/css/cms.bootstrap.4.3.1.css */
   display: flex;
+  /* NOTE: These are perceptibly ineffectual but consistent with Portal & CMS */
   flex-flow: row wrap;
   align-items: center;
 }
 
+
+
+/* Overwrite ReadTheDocs (for Images in Header) */
+
 /* To overwrite `img { max-width: 100% }` */
 :--for-docs .s-header img,
 :--for-docs .c-branding img {

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css

@@ -72,7 +72,7 @@ Styleguide Trumps.Scopes.Header
 .s-header .c-logo,
 .s-header .navbar-toggler,
 .s-header tacc-search-bar {
-  height: 55px;
+  height: env(--header-navbar-height);
 }
 
 

taccsite_cms/static/site_cms/css/src/_themes/constants.json

@@ -0,0 +1,15 @@
+{
+  "// METADATA FOR HUMANS": "",
+  "format": "https://github.com/csstools/postcss-preset-env#importfrom",
+  "name": "constants",
+
+  "environment-variables": {
+
+    "// HEADER": "",
+    "--header-font-family": "Roboto, sans-serif",
+    "--header-accent-color": "#877453",
+    "--header-brandbar-height": "40px",
+    "--header-navbar-height": "55px"
+
+  }
+}

taccsite_cms/static/site_cms/css/src/_themes/export.js

@@ -1,6 +1,7 @@
 /**
  * Export appropriate theme file based on settings value
  */
+const merge = require('merge-lite');
 const rootPath = __dirname + '/../../../../../../';
 const settings = require( rootPath + 'taccsite_cms/settings.json');
 const theme = settings.THEME || 'default';
@@ -26,8 +27,12 @@ function requireOrElse(modulePath, callback) {
   }
 }
 
-const data = requireOrElse(`./theme.${theme}.json`, () => {
+const constants = require(`./constants.json`);
+const themeData = requireOrElse(`./theme.${theme}.json`, () => {
   console.error(`Unable to find '${__dirname}/theme.${theme}.json'`);
 });
 
+/* To prevent a theme from overwriting a constant, merge constants onto theme */
+let data = merge( themeData, constants );
+
 module.exports = data;

taccsite_cms/static/site_cms/css/src/_themes/theme.default.json

@@ -1,13 +1,11 @@
 {
-  "//": "Metadata for humans",
+  "// METADATA FOR HUMANS": "",
   "format": "https://github.com/csstools/postcss-preset-env#importfrom",
   "name": "default",
 
   "environment-variables": {
 
     "// HEADER": "",
-    "--header-font-family": "Roboto, sans-serif",
-    "--header-accent-color": "#877453",
     "--header-text-color": "var(--global-color-primary--xx-light)",
     "--header-bkgd-color": "var(--global-color-primary--xx-dark)",
     "--header-link-bkgd-color": "#313131",

taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json

@@ -1,13 +1,11 @@
 {
-  "//": "Metadata for humans",
+  "// METADATA FOR HUMANS": "",
   "format": "https://github.com/csstools/postcss-preset-env#importfrom",
   "name": "has-dark-logo",
 
   "environment-variables": {
 
     "// HEADER": "",
-    "--header-font-family": "Roboto, sans-serif",
-    "--header-accent-color": "#877453",
     "--header-text-color": "var(--global-color-primary--xx-dark)",
     "--header-bkgd-color": "var(--global-color-primary--x-light)",
     "--header-link-bkgd-color": "#D8D8D8",

yarn.lock

@@ -1277,6 +1277,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+merge-lite@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/merge-lite/-/merge-lite-1.0.2.tgz"
+  integrity sha512-28Q9aFRLzLCSp/2MLV49sbilBcCw7pIxq9YfOuX8+g/cMbPgYcAZgI0BLHnsb7ZRgvYOuaEGQPYJk8OWcGHk4A==
+
 merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"