UNiDAYS internal personal-development content used for career and personal development
This repository is published to https://progression.myunidays.com
This project is built using node.js and Grunt. After cloning the repository ensure you have node.js and grunt-cli installed.
Get node.js from here -> https://nodejs.org/en/
After installing node, install grunt-cli by running npm install -g grunt-cli
in the terminal.
npm install
will install all the necessary build dependencies
grunt build:dev
will produce a development build, where the JS and CSS contain source maps to aid debugging.
grunt build:prod
will produce a production build.
grunt dev
will run the component parts of build:dev
whenever it notices any changes to any content or source files in a grunt-watch
style.
It also starts an express
web server on localhost:1324
(default, consult console when running for port collisions)
This project is designed to be hosted in production on Amazon S3. Below is the bucket configuration you need.
index.html
index.html
All the content lives under ./content
.
Competencies live under ./content/competencies
and Roles live under ./content/roles
TODO: These JSON document require a schema
The CSS is produced by SASS compilation from sources described below.
The source for styles live under ./src/scss
.
styles.scss
is the entry point, notice the @imports
at the top.
If you want to add more/separate .scss
files you need to import them from (probably) stlyes.scss
The JS is produced by Uglify-es compilation of the sources described below.
The source for Javascript lives under ./src/js
All files in this path will be combined together, in file-system order (i.e. the order ls
shows)
All assets live under ‘./src/assets’
On build, everything in this folder gets copied to the ./build
output folder.
A dev
build also copies a web.config
which enables easy serving of the project under Windows IIS`
The HTML is produced by combining the Roles and Cmpetencies JSON with Handlebars.js templates.
When the templates are compiled into HTML, a context object is passed (i.e. normal Handbelars.js operation). The context object looks like this:
{
competencies: [], // all competency objects from `./content/competencies
roles: [] // all role objects from `./content/roles`
}
When defining a Role, Competencies are referenced by path. Before being passed to Handlebars, these paths are replaced with in-memory references to the referenced competencies.
That means, you can traverse the object graph from a Role to the Competencies which make it up.
Currently, there is only one template called index.hbs
.
This gets built into index.html
, the only page which exists for this app.
This lives at ./src/tempaltes/index.hbs
All the template files under ./src/tempaltes
will be automatically detected and registered as templates.
All Partials which can be called from Templates or other Partials live under ./src/partials
.
The name of the file (sans .js
) is the name of the partial.
All the partial files under ./src/partials
will be automatically detected and registered as partials.
Where in Handlebars.js you create a helper like this:
Handlebars.registerHelper('log', function(data) {
console.log(data);
});
In this project, simply make a file called log.js
under the ./src/helpers
folder, and return the function using module.exports
module.exports = function(data) {
console.log(data);
}
All the helper files under ./src/helpers
will be automatically detected and registered as helpers.