FEATURE: Native theme support

This feature introduces the concept of themes. Themes are an evolution
of site customizations.

Themes introduce two very big conceptual changes:

- A theme may include other "child themes", children can include grand
children and so on.

- A theme may specify a color scheme

The change does away with the idea of "enabled" color schemes.

It also adds a bunch of big niceties like

- You can source a theme from a git repo

- History for themes is much improved

- You can only have a single enabled theme. Themes can be selected by
    users, if you opt for it.

On a technical level this change comes with a whole bunch of goodies

- All CSS is now compiled using a custom pipeline that uses libsass
    see /lib/stylesheet

- There is a single pipeline for css compilation (in the past we used
    one for customizations and another one for the rest of the app

- The stylesheet pipeline is now divorced of sprockets, there is no
   reliance on sprockets for CSS bundling

- CSS is generated with source maps everywhere (including themes) this
    makes debugging much easier

- Our "live reloader" is smarter and avoid a flash of unstyled content
   we run a file watcher in "puma" in dev so you no longer need to run
   rake autospec to watch for CSS changes
This commit is contained in:
Sam
2017-04-12 10:52:52 -04:00
parent 1a9afa976d
commit a3e8c3cd7b
163 changed files with 4415 additions and 2424 deletions

View File

@ -24,6 +24,10 @@ function loadWithTag(path, cb) {
};
}
export function loadCSS(url) {
return loadScript(url, { css: true });
}
export default function loadScript(url, opts) {
// TODO: Remove this once plugins have been updated not to use it:
@ -47,8 +51,11 @@ export default function loadScript(url, opts) {
delete _loading[url];
});
const cb = function() {
const cb = function(data) {
_loaded[url] = true;
if (opts && opts.css) {
$("head").append("<style>" + data + "</style>");
}
done();
resolve();
};
@ -66,7 +73,7 @@ export default function loadScript(url, opts) {
if (opts.scriptTag) {
loadWithTag(cdnUrl, cb);
} else {
ajax({url: cdnUrl, dataType: "script", cache: true}).then(cb);
ajax({url: cdnUrl, dataType: opts.css ? "text": "script", cache: true}).then(cb);
}
});
}