$ npm install
$ npm run build

.
├── assets
│   ├── fonts
│   ├── images
│   │   ├── clouds
│   │   │   ├── 1.png
│   │   │   ├── 2.png
│   │   │   ├── 3.png
│   │   │   ├── 4.png
│   │   │   ├── 5.png
│   │   │   └── 6.png
│   │   ├── favicon.png
│   │   ├── me.png
│   │   ├── random-chars
│   │   │   ├── 1.png
│   │   │   ├── 2.png
│   │   │   ├── 3.png
│   │   │   └── 4.png
│   │   └── terrain.png
│   └── texts
│       ├── css.txt
│       ├── javascript.txt
│       └── text.txt
├── environment.json
├── index.html
├── package.json
├── plugins
│   └── html-plugin.js
├── README.md
├── screenshot.png
├── scripts
│   ├── animate.js
│   └── index.js
├── styles
│   ├── index.less
│   └── prefixed.less
└── webpack.config.js

// 'page' global variable will store anything we might need to make the
// presentation during the 'eval' calls.
window.page = {
  checkTags: function() {
    Object.keys(this.tags).forEach(function(tag) {
      this.control[tag] || ((this.tags[tag] > 0) && this.continues[tag]());
    }, this);
  },
  checkFinished: function() {
    // Hide skip button once all tags have finished
    var allFinished = Object.keys(this.tags).every(tag => this.finished[tag]);
    allFinished && $('#skip').hide();
  },
  control: {},
  continues: {},
  finished: {},
  tags: {
    'text': 1,
    'javascript': 0,
    'css': 0,
  },
};

window.$ = $;
window.hljs = hljs;

  // Tell animate which text it should input, which element id this text should
  // be output, and which function to call on the callback signal
  animate(require('../assets/texts/javascript.txt'), 'javascript', function(finished, chunk) {
    // This callback function will execute the output chunk
    eval(chunk);
    // Highlight its text if a global highlight function was created
    window.highlight && window.highlight('#javascript');
    // Mark this box as finished if it has finished
    window.page.finished.javascript = finished;
    window.page.checkFinished();
  });