Refactor website JS and add model comparison tool

website/_harp.json

@@ -84,8 +84,8 @@
         ],
 
         "ALPHA": true,
-        "V_CSS": "2.0a1",
-        "V_JS": "2.0a0",
+        "V_CSS": "2.0a2",
+        "V_JS": "2.0a1",
         "DEFAULT_SYNTAX": "python",
         "ANALYTICS": "UA-58931649-1",
         "MAILCHIMP": {

website/_includes/_mixins.jade

@@ -281,7 +281,12 @@ mixin github(repo, file, height, alt_file, language)
 
     figure.o-block
         pre.c-code-block.o-block-small(class="lang-#{(language || DEFAULT_SYNTAX)}" style="height: #{height}px; min-height: #{height}px")
-            code.c-code-block__content(data-gh-embed="#{repo}/#{branch}/#{file}")
+            code.c-code-block__content(data-gh-embed="#{repo}/#{branch}/#{file}").
+                Can't fetch code example from GitHub :(
+
+                Please use the link below to view the example. If you've come across
+                a broken link, we always appreciate a pull request to the repository,
+                or a report on the issue tracker. Thanks!
 
         footer.o-grid.u-text
             .o-block-small.u-flex-full.u-padding-small #[+icon("github")] #[code.u-break.u-break--all=repo + '/' + (alt_file || file)]

website/_includes/_page_models.jade

@@ -20,7 +20,7 @@ for id in CURRENT_MODELS
 
         p(data-tpl=id data-tpl-key="description")
 
-        div(data-tpl=id data-tpl-key="error" style="display: none")
+        div(data-tpl=id data-tpl-key="error")
             +infobox
                 |  Unable to load model details from GitHub. To find out more
                 |  about this model, see the overview of the
@@ -54,7 +54,7 @@ for id in CURRENT_MODELS
                 +cell
                     .o-field.u-float-left
                         select.o-field__select.u-text-small(data-tpl=id data-tpl-key="compat")
-                    .o-empty(data-tpl=id data-tpl-key="compat-versions")  
+                    div(data-tpl=id data-tpl-key="compat-versions")  
 
         section(data-tpl=id data-tpl-key="benchmarks" style="display: none")
             +grid.o-block-small

website/_includes/_scripts.jade

@@ -1,43 +1,86 @@
 //- 💫 INCLUDES > SCRIPTS
 
 if quickstart
-        script(src="/assets/js/quickstart.min.js")
+    script(src="/assets/js/vendor/quickstart.min.js")
 
 if IS_PAGE
-    script(src="/assets/js/in-view.min.js")
+    script(src="/assets/js/vendor/in-view.min.js")
 
 if environment == "deploy"
     script(async src="https://www.google-analytics.com/analytics.js")
 
-script(src="/assets/js/prism.min.js")
-script(src="/assets/js/main.js?v#{V_JS}")
+script(src="/assets/js/vendor/prism.min.js")
 
-script
-    | new ProgressBar('.js-progress');
-
-    if changelog
-        | new Changelog('!{SOCIAL.github}', 'spacy');
+if SECTION == "models"
+    script(src="/assets/js/vendor/chart.min.js")
+    script(src="/assets/js/models.js?v#{V_JS}" type="module")
 
+script
     if quickstart
         | new Quickstart("#qs");
 
-    if IS_PAGE
-        | new SectionHighlighter('data-section', 'data-nav');
-        | new GitHubEmbed('!{SOCIAL.github}', 'data-gh-embed');
+    if environment == "deploy"
+        | window.ga=window.ga||function(){
+        | (ga.q=ga.q||[]).push(arguments)}; ga.l=+new Date;
+        | ga('create', '#{ANALYTICS}', 'auto'); ga('send', 'pageview');
+
+
+if IS_PAGE
+    script
         | ((window.gitter = {}).chat = {}).options = {
         |     useStyles: false,
         |     activationElement: '.js-gitter-button',
         |     targetElement: '.js-gitter',
         |     room: '!{SOCIAL.gitter}'
         | };
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+
 
+//- JS modules – slightly hacky, but necessary to dynamically instantiate the
+    classes with data from the Harp JSON files, while still being able to
+    support older browsers that can't handle JS modules. More details:
+    https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
+
+- ProgressBar = "new ProgressBar('.js-progress');"
+- Changelog = "new Changelog('" + SOCIAL.github + "', 'spacy');"
+- NavHighlighter = "new NavHighlighter('data-section', 'data-nav');"
+- GitHubEmbed = "new GitHubEmbed('" + SOCIAL.github + "', 'data-gh-embed');"
+- ModelLoader = "new ModelLoader('" + MODELS_REPO + "'," + JSON.stringify(CURRENT_MODELS) + "," + JSON.stringify(MODEL_LICENSES) + "," + JSON.stringify(MODEL_BENCHMARKS) + ");"
+- ModelComparer = "new ModelComparer('" + MODELS_REPO + "'," + JSON.stringify(MODEL_LICENSES) + "," + JSON.stringify(MODEL_BENCHMARKS) + "," + JSON.stringify(LANGUAGES) + "," + JSON.stringify(MODEL_META) + "," + JSON.stringify(default_models || false) + ");"
+
+//- Browsers with JS module support.
+    Will be ignored otherwise.
+
+script(type="module")
+    | import ProgressBar from '/assets/js/progress.js';
+    !=ProgressBar
+    if changelog
+        | import Changelog from '/assets/js/changelog.js';
+        !=Changelog
+    if IS_PAGE
+        | import NavHighlighter from '/assets/js/nav-highlighter.js';
+        !=NavHighlighter
+        | import GitHubEmbed from '/assets/js/github-embed.js';
+        !=GitHubEmbed
     if HAS_MODELS
-        | new ModelLoader('!{MODELS_REPO}', !{JSON.stringify(CURRENT_MODELS)}, !{JSON.stringify(MODEL_LICENSES)}, !{JSON.stringify(MODEL_BENCHMARKS)});
+        | import { ModelLoader } from '/assets/js/models.js';
+        !=ModelLoader
+    if compare_models
+        | import { ModelComparer } from '/assets/js/models.js';
+        !=ModelComparer
 
-    if environment == "deploy"
-        | window.ga=window.ga||function(){
-        | (ga.q=ga.q||[]).push(arguments)}; ga.l=+new Date;
-        | ga('create', '#{ANALYTICS}', 'auto'); ga('send', 'pageview');
+//- Browsers with no JS module support.
+    Won't be fetched or interpreted otherwise.
 
-if IS_PAGE
-    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+script(nomodule src="/assets/js/rollup.js")
+script(nomodule)
+    !=ProgressBar
+    if changelog
+        !=Changelog
+    if IS_PAGE
+        !=NavHighlighter
+        !=GitHubEmbed
+    if HAS_MODELS
+        !=ModeLoader
+    if compare_models
+        !=ModelComparer

website/_includes/_sidebar.jade

@@ -19,5 +19,5 @@ menu.c-sidebar.js-sidebar.u-text
                                     - var counter = 0
                                     for id, title in menu
                                         - counter++
-                                        li.c-sidebar__crumb__item(data-nav=id class=(counter == 1) ? "is-active" : null)
+                                        li.c-sidebar__crumb__item(data-nav=id)
                                             +a("#section-" + id)=title

website/assets/css/_base/_objects.sass

@@ -163,11 +163,4 @@
      height: 1.4em
      border: none
      text-align-last: center
-
-.o-empty:empty:before
-    @include size(1em)
-    border-radius: 50%
-    content: ""
-    display: inline-block
-    background: $color-red
-    vertical-align: middle
+     width: 100%

website/assets/js/changelog.js

@@ -0,0 +1,72 @@
+'use strict';
+
+import { Templater, handleResponse } from './util.js';
+
+export default class Changelog {
+    /**
+     * Fetch and render changelog from GitHub. Clones a template node (table row)
+     * to avoid doubling templating markup in JavaScript.
+     * @param {string} user - GitHub username.
+     * @param {string} repo - Repository to fetch releases from.
+     */
+    constructor(user, repo) {
+        this.url = `https://api.github.com/repos/${user}/${repo}/releases`;
+        this.template = new Templater('changelog');
+        this.fetchChangelog()
+            .then(json => this.render(json))
+            .catch(this.showError.bind(this));
+        // make sure scroll positions for progress bar etc. are recalculated
+        window.dispatchEvent(new Event('resize'));
+    }
+
+    fetchChangelog() {
+        return new Promise((resolve, reject) =>
+            fetch(this.url)
+                .then(res => handleResponse(res))
+                .then(json => json.ok ? resolve(json) : reject()))
+    }
+
+    showError() {
+        this.template.get('error').style.display = 'block';
+    }
+
+    /**
+     * Get template section from template row. Hacky, but does make sense.
+     * @param {node} item - Parent element.
+     * @param {string} id - ID of child element, set via data-changelog.
+     */
+    getField(item, id) {
+        return item.querySelector(`[data-changelog="${id}"]`);
+    }
+
+    render(json) {
+        this.template.get('table').style.display = 'block';
+        this.row = this.template.get('item');
+        this.releases = this.template.get('releases');
+        this.prereleases = this.template.get('prereleases');
+        Object.values(json)
+            .filter(release => release.name)
+            .forEach(release => this.renderRelease(release));
+        this.row.remove();
+    }
+
+    /**
+     * Clone the template row and populate with content from API response.
+     * https://developer.github.com/v3/repos/releases/#list-releases-for-a-repository
+     * @param {string} name - Release title.
+     * @param {string} tag (tag_name) - Release tag.
+     * @param {string} url (html_url) - URL to the release page on GitHub.
+     * @param {string} date (published_at) - Timestamp of release publication.
+     * @param {boolean} prerelease - Whether the release is a prerelease.
+     */
+    renderRelease({ name, tag_name: tag, html_url: url, published_at: date, prerelease }) {
+        const container = prerelease ? this.prereleases : this.releases;
+        const tagLink = `<a href="${url}" target="_blank"><code>${tag}</code></a>`;
+        const title = (name.split(': ').length == 2) ? name.split(': ')[1] : name;
+        const row = this.row.cloneNode(true);
+        this.getField(row, 'date').textContent = date.split('T')[0];
+        this.getField(row, 'tag').innerHTML = tagLink;
+        this.getField(row, 'title').textContent = title;
+        container.appendChild(row);
+    }
+}

website/assets/js/github-embed.js

@@ -0,0 +1,42 @@
+'use strict';
+
+import { $$ } from './util.js';
+
+export default class GitHubEmbed {
+    /**
+     * Embed code from GitHub repositories, similar to Gist embeds. Fetches the
+     * raw text and places it inside element.
+     * Usage: <pre><code data-gh-embed="spacy/master/examples/x.py"></code><pre>
+     * @param {string} user - GitHub user or organization.
+     * @param {string} attr - Data attribute used to select containers. Attribute
+     *                        value should be path to file relative to user.
+     */
+    constructor(user, attr) {
+        this.url = `https://raw.githubusercontent.com/${user}`;
+        this.attr = attr;
+        [...$$(`[${this.attr}]`)].forEach(el => this.embed(el));
+    }
+
+    /**
+     * Fetch code from GitHub and insert it as element content. File path is
+     * read off the container's data attribute.
+     * @param {node} el - The element.
+     */
+    embed(el) {
+        el.parentElement.setAttribute('data-loading', '');
+        fetch(`${this.url}/${el.getAttribute(this.attr)}`)
+            .then(res => res.text().then(text => ({ text, ok: res.ok })))
+            .then(({ text, ok }) => ok ? this.render(el, text) : false)
+        el.parentElement.removeAttribute('data-loading');
+    }
+
+    /**
+     * Add text to container and apply syntax highlighting via Prism, if available.
+     * @param {node} el - The element.
+     * @param {string} text - The raw code, fetched from GitHub.
+     */
+    render(el, text) {
+        el.textContent = text;
+        if (window.Prism) Prism.highlightElement(el);
+    }
+}