competency-framework

Production Version

This repository is published to https://progression.myunidays.com

Development

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)

Hosting

This project is designed to be hosted in production on Amazon S3. Below is the bucket configuration you need.

• Enable Static Website Hosting
• Set Index document to index.html
• Set Error document to index.html

Content

All the content lives under ./content.

Competencies live under ./content/competencies and Roles live under ./content/roles

TODO: These JSON document require a schema

Styling/CSS

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

Javascript

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)

Assets (images etc)

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`

HTML

The HTML is produced by combining the Roles and Cmpetencies JSON with Handlebars.js templates.

Context

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.

Handlebars.js Templates

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.

Handlebars.js Partials

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.

Handlebars.js Helpers

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.