Merge branch 'task/GH-101-header-redesign' into task/GH-101-header-re…

…design--branding-bar

.env.sample

@@ -0,0 +1,9 @@
+#
+# Required
+#
+
+# From which directory to pull project-specific resources
+# Examples:
+CUSTOM_ASSET_DIR=core-cms
+CUSTOM_ASSET_DIR=frontera-cms
+CUSTOM_ASSET_DIR=protx-cms

.gitignore

@@ -26,6 +26,7 @@ docker_repo.var
 repo_name.var
 
 # Secrets and Customizations
+settings.json
 taccsite_cms/secrets.py
 *.custom.yml
 

README.md

@@ -14,7 +14,7 @@ The TACC CORE-CMS can be run using Docker and Docker Compose, both locally and i
  CUSTOM_ASSET_DIR=example-cms
  ```
 
- \* Where `example-cms` is the project to be run. _See [(Optional) Custom Resources per CMS Project](#optional-custom-resources-per-cms-project)._
+ \* Where `example-cms` is the project to be run. _See [(Optional) Custom Resources per CMS Project](#optional-custom-resources-per-cms-project). Refer to `.env.sample` for other settings._
 1. Initialize / Update submodules.
  1. `git submodule init`\
  _(Adds `cms-site-resources` repo as submodule at `taccsite_custom/`. Only necessary once per `CORE-cms` repo clone.)_

conf/css/.postcssrc.yml

@@ -3,10 +3,16 @@ plugins:
  path:
  - './taccsite_cms/static/site_cms/css/src'
  postcss-extend: {}
+ # Using `importFrom` via `postcss-preset-env` fails (but should work)
+ # FAQ: So it is used directly with plugin (not via `postcss-preset-env`)
+ # SEE: https://github.com/csstools/postcss-preset-env/issues/202
+ # NOTE: Using `postcss-preset-env`'s install of `postcss-env-function` works
+ postcss-env-function:
+ importFrom:
+ - './taccsite_cms/static/site_cms/css/src/_themes/export.js'
  postcss-preset-env:
  # SEE: https://github.com/csstools/postcss-preset-env#features
  stage: false
- # SEE: https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js#L35
  features:
  custom-media-queries: true
  media-query-ranges: true

package.json

@@ -4,11 +4,13 @@
  "license": "MIT",
  "description": "The core CMS codebase for all new and updated TACC CMS sites.",
  "scripts": {
+ "prebuild": "python3 taccsite_cms/settings_to_json.py",
  "build": "npm run build:css",
  "build:css": "node postcss.js",
  "watch": "npm-watch"
  },
  "// scripts": {
+ "prebuild": "Export Django settings to JSON (for Node to use)",
  "build": "Run all static file build commands",
  "build:css": "Build stylesheets from source files",
  "watch": "Build static files when source files change"

taccsite_cms/bin/suppress_stdout.py

@@ -0,0 +1,18 @@
+#!/usr/bin/env python
+
+# Allow a script to temporarily hide `print` output
+# SEE: https://gist.github.com/djsmith42/3956189#file-gistfile1-py
+# SEE: https://thesmithfam.org/blog/2012/10/25/temporarily-suppress-console-output-in-python/
+
+from contextlib import contextmanager
+import sys, os
+
+@contextmanager
+def suppress_stdout():
+ with open(os.devnull, "w") as devnull:
+ old_stdout = sys.stdout
+ sys.stdout = devnull
+ try:
+ yield
+ finally:
+ sys.stdout = old_stdout

taccsite_cms/default_secrets.py

@@ -160,6 +160,17 @@
 ########################
 # TODO: GH-59: Use Dict Not Array for Branding Settings
 
+# Visual theme for the CMS
+
+"""
+Optional theming of CMS (certain themes may only affect some elements)
+Usage:
+- None (standard theme)
+- 'has-dark-logo'
+"""
+
+_THEME = None
+
 # Branding settings for portal and navigation.
 
 """

taccsite_cms/settings.py

@@ -90,6 +90,7 @@ def getsecrets():
 ALLOWED_HOSTS = current_secrets._ALLOWED_HOSTS
 
 # Custom Branding.
+THEME = current_secrets._THEME if hasattr(current_secrets, '_THEME') else None
 BRANDING = current_secrets._BRANDING
 LOGO = current_secrets._LOGO
 FAVICON = current_secrets._FAVICON
@@ -486,6 +487,7 @@ def get_subdirs_as_module_names(path):
 # Exported settings.
 SETTINGS_EXPORT = [
  'DEBUG',
+ 'THEME',
  'BRANDING',
  'LOGO',
  'FAVICON',

taccsite_cms/settings_to_json.py

@@ -0,0 +1,25 @@
+#!/usr/bin/env python
+import os
+import sys
+import json
+
+from django.conf import settings
+
+from bin.suppress_stdout import suppress_stdout
+
+# Support isolated reading of settings
+sys.path.insert(0, os.getcwd())
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "taccsite_cms.settings")
+
+# Create JSON
+setting_names = ["THEME"]
+settings_export = {}
+# FAQ: The print() statements in settings.py would corrupt the JSON
+with suppress_stdout():
+ for setting_name in setting_names:
+ settings_export[setting_name] = getattr(settings, setting_name)
+
+# Write JSON
+with open('taccsite_cms/settings.json', 'w', encoding='utf-8') as outfile:
+ settings_json = json.dumps(settings_export, ensure_ascii=False, indent=2)
+ outfile.write(settings_json + '\n')

taccsite_cms/static/site_cms/css/src/_imports/components/bootstrap.form.css

@@ -15,6 +15,8 @@ Styleguide Components.Bootstrap.Form
 .form-control {
  border: var(--global-border--normal);
  border-radius: 0;
+
+ background-clip: border-box; /* to prevent background from showing through */
 }
 input.form-control,
 textarea.form-control {

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

@@ -31,7 +31,7 @@ Styleguide Components.Branding
 
  background-color: var(--global-color-primary--xx-dark);
  color: var(--global-color-primary--xx-light);
- border-bottom: 1px solid #aaa;
+ border-bottom: 1px solid var(--global-color-primary--normal);
 }
 
 /* A responsive column gap */
@@ -64,7 +64,7 @@ Styleguide Components.Branding
 .c-branding__separator {
  /* To add border */
  height: 25px;
- border-left: solid 1px #fff;
+ border-left: solid 1px var(--global-color-primary--xx-light);
 
  /* To hide text */
  width: 0;

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

@@ -12,5 +12,5 @@ Styleguide Scope.Footer
  margin: 0;
 }
 .s-footer a {
- color: #cccccc;
+ color: var(--global-color-primary--light);
 }

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

@@ -22,8 +22,6 @@ Styleguide Trumps.Scopes.Header
  - On any other CMS, `1rem` = `16px` (browser default). */
 
 .s-header {
- --text-color: var(--global-color-primary--xx-light);
-
  font-size: 16px; /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */
 
  /* FAQ: Asssigning this font is only necessary for the User Guide,
@@ -35,8 +33,10 @@ Styleguide Trumps.Scopes.Header
  /* Copied from Portal (via `body`) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-}
 
+ /* To have border not show, ensure value equals that of `--bkgd-color` */
+ border-bottom: 1px solid env(--header-major-border-color);
+}
 
 
 /* Affiliation */
@@ -54,7 +54,8 @@ Styleguide Trumps.Scopes.Header
  margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */
  padding: 0;
 
- color: var(--text-color);
+ color: env(--header-text-color);
+ /* text-decoration: none; *//* already provided by Bootstrap */
 }
 .s-header .c-logo__image {
  height: 40px;
@@ -80,7 +81,7 @@ Styleguide Trumps.Scopes.Header
  --nav-padding-horz: calc(16px + 20px);
  --nav-padding-vert: 5px;
 
- background-color: var(--global-color-primary--xx-dark);
+ background-color: env(--header-bkgd-color);
  padding: var(--nav-padding-vert) var(--nav-padding-horz);
 }
 
@@ -115,7 +116,7 @@ Styleguide Trumps.Scopes.Header
 #s-header .nav-link,
 /* HACK: Support `span.nav-link` having children `a` and `a.dropdown-toggle-split` */
 #s-header .nav-link > a {
- color: var(--text-color);
+ color: env(--header-text-color);
  /* text-decoration: none; *//* already provided by Bootstrap */
 }
 
@@ -136,13 +137,8 @@ Styleguide Trumps.Scopes.Header
 
 /* Create a line between search bar and login */
 /* FAQ: The line should only exist if both elements are present */
-.s-header .s-search-bar ~ .s-portal-nav::before {
- content: "";
- width: 1px;
- /* FAQ: Not `height`, cuz `.s-search-bar` (via `.form-inline`) is flexbox */
- align-self: stretch;
-
- background-color: rgb(255,255,255);
+.s-header .s-search-bar ~ .s-portal-nav {
+ border-left: 1px solid env(--header-minor-border-color);
 
  margin-left: 12px;
 }

taccsite_cms/static/site_cms/css/src/_themes/README.md

@@ -0,0 +1,14 @@
+# TACC CMS - Stylesheets - Themes
+
+AUTHOR THEME VALUES HERE!
+
+These values are only to be imported by PostCSS configuration.
+
+## Rules
+
+1. Theme data files __must__ be prefixed with `theme.`.
+2. Theme data files __must__ be `.json` format and extension.
+
+## Content Format
+
+See [PostCSS Preset Env's `importFrom` example content](https://github.com/csstools/postcss-preset-env#importfrom).

taccsite_cms/static/site_cms/css/src/_themes/TODO.md

@@ -0,0 +1,4 @@
+# TACC CMS - Stylesheets - Themes
+
+- Migrate `/taccsite_cms/site_shared/css/src/_imports/settings/*` to theme data.
+- Support one theme extending another theme (the default or another).

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

@@ -0,0 +1,33 @@
+/**
+ * Export appropriate theme file based on settings value
+ */
+const rootPath = __dirname + '/../../../../../../';
+const settings = require( rootPath + 'taccsite_cms/settings.json');
+const theme = settings.THEME || 'default';
+
+/**
+ * Perform `require` but on fail:
+ * - execute callback
+ * - exit program (as fatal exception)
+ * @param {string} modulePath - Path to the module to require
+ * @param {function} callback - Callback (returns exception from `require()`)
+ * @return {*} Content of the module (if successfully required)
+ * @see https://stackoverflow.com/a/34005010/11817077
+ */
+function requireOrElse(modulePath, callback) {
+ try {
+ return require(modulePath);
+ }
+ catch (e) {
+ if (typeof callback === 'function') {
+ callback(e);
+ }
+ process.exit(1);
+ }
+}
+
+const data = requireOrElse(`./theme.${theme}.json`, () => {
+ console.error(`Unable to find '${__dirname}/theme.${theme}.json'`);
+});
+
+module.exports = data;

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

@@ -0,0 +1,16 @@
+{
+ "//": "Metadata for humans",
+ "format": "https://github.com/csstools/postcss-preset-env#importfrom",
+ "name": "default",
+
+ "environment-variables": {
+
+ "// HEADER": "",
+ "--header-text-color": "var(--global-color-primary--xx-light)",
+ "--header-bkgd-color": "var(--global-color-primary--xx-dark)",
+ "--header-minor-border-color": "var(--global-color-primary--normal)",
+ "// To 'hide' border by setting its color to match background color": "",
+ "--header-major-border-color": "var(--global-color-primary--xx-dark)"
+
+ }
+}

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

@@ -0,0 +1,15 @@
+{
+ "//": "Metadata for humans",
+ "format": "https://github.com/csstools/postcss-preset-env#importfrom",
+ "name": "has-dark-logo",
+
+ "environment-variables": {
+
+ "// HEADER": "",
+ "--header-text-color": "var(--global-color-primary--x-dark)",
+ "--header-bkgd-color": "var(--global-color-primary--x-light)",
+ "--header-minor-border-color": "var(--global-color-primary--normal)",
+ "// To show border between only the light header and content below it": "",
+ "--header-major-border-color": "var(--global-color-primary--normal)"
+ }
+}

taccsite_cms/static/site_cms/css/src/site.header.css

@@ -7,12 +7,11 @@
 
 /* SETTINGS */
 
-/* NOTE: These are already imported in `site.css` */
-/* TODO: Find a way to be modular, but not redundant */
+/* CAVEAT: This is already imported in `site.css`, but necessary here to
+ override Portal (which also loads `site.header.css`), so font
+ variables are unfortunately overwritten 1x in CMS, 2x in Portal */
+/* TODO: Find a way to be modular, but not redundant; perhaps `env()` vars */
 @import url("_imports/settings/font.css");
-/* NOTE: Portal does not need this, because it has independent copy of these,
- but the User Guides do not. This can be removed in Core-CMS PR #192 */
-@import url("_imports/settings/color.css");
 
 
 

taccsite_cms/templates/assets_site.html

@@ -24,3 +24,17 @@
 
 <!-- Site Assets: Scripts. -->
 <script src="{% static 'site_cms/js/site.js' %}"></script>
+
+
+
+{# Portal & Docs #}
+{# FAQ: Websites that load CMS header should load these assets in this order #}
+{% comment %}
+ {# To load externally-hosted font which is in the font stack of CMS styles #}
+ {# FAQ: CMS does ALSO load but does so in `assets_font.html` instead #}
+ <link id="css-site-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+
+ {# To load CSS that styles the header #}
+ {# FAQ: CMS does ALSO load so it styles header using identical complex code #}
+ <link id="css-site-header" rel="stylesheet" href="{% 'site_cms/css/build/site.header.css' %}" />
+{% endcomment %}