Update JavaScript

website/_includes/_scripts.jade

@@ -1,27 +1,46 @@
 //- 💫 INCLUDES > SCRIPTS
 
-script(src="/assets/js/main.js?v#{V_JS}")
-script(src="/assets/js/prism.js")
-
-if SECTION == "docs"
 if quickstart
-        script(src="/assets/js/quickstart.js")
-        script var qs = new Quickstart("#qs")
+        script(src="/assets/js/quickstart.min.js")
 
-    script.
-        ((window.gitter = {}).chat = {}).options = {
-            useStyles: false,
-            activationElement: '.js-gitter-button',
-            targetElement: '.js-gitter',
-            room: '!{SOCIAL.gitter}'
-        };
+if IS_PAGE
+    script(src="/assets/js/in-view.min.js")
 
-    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+if HAS_MODELS
+    script(src="/assets/js/chart.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
+    | new ProgressBar('.js-progress');
+
+    if changelog
+        | new Changelog('!{SOCIAL.github}', 'spacy');
+
+    if quickstart
+        | new Quickstart("#qs");
+
+    if IS_PAGE
+        | new SectionHighlighter('data-section', 'data-nav');
+        | new GitHubEmbed('!{SOCIAL.github}', 'data-gh-embed');
+        | ((window.gitter = {}).chat = {}).options = {
+        |     useStyles: false,
+        |     activationElement: '.js-gitter-button',
+        |     targetElement: '.js-gitter',
+        |     room: '!{SOCIAL.gitter}'
+        | };
+
+    if HAS_MODELS
+        | new ModelLoader('!{MODELS_REPO}', !{JSON.stringify(CURRENT_MODELS)}, !{JSON.stringify(MODEL_LICENSES)}, !{JSON.stringify(MODEL_ACCURACY)});
+
+    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');
 
-    script(async src="https://www.google-analytics.com/analytics.js")
+if IS_PAGE
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

website/assets/js/main.js

@@ -1,23 +1,324 @@
 //- 💫 MAIN JAVASCRIPT
+//- Note: Will be compiled using Babel before deployment.
 
 'use strict'
 
-{
-    const nav = document.querySelector('.js-nav')
-    const fixedClass = 'is-fixed'
-    let vh, scrollY = 0, scrollUp = false
+const $ = document.querySelector.bind(document);
+const $$ = document.querySelectorAll.bind(document);
 
-    const updateVh = () => Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
 
-    const updateNav = () => {
-        const vh = updateVh()
-        const newScrollY = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0)
-        if (newScrollY != scrollY) scrollUp = newScrollY <= scrollY
-        scrollY = newScrollY
-
-        if(scrollUp && !(isNaN(scrollY) || scrollY <= vh)) nav.classList.add(fixedClass)
-        else if (!scrollUp || (isNaN(scrollY) || scrollY <= vh/2)) nav.classList.remove(fixedClass)
+class ProgressBar {
+    /**
+     * Animated reading progress bar.
+     * @param {String} selector – CSS selector of progress bar element.
+     */
+    constructor(selector) {
+        this.el = $(selector);
+        this.scrollY = 0;
+        this.sizes = this.updateSizes();
+        this.el.setAttribute('max', 100);
+        this.init();
     }
 
-    window.addEventListener('scroll', () => requestAnimationFrame(updateNav))
+    init() {
+        window.addEventListener('scroll', () => {
+            this.scrollY = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
+            requestAnimationFrame(this.update.bind(this));
+        }, false);
+        window.addEventListener('resize', () => {
+            this.sizes = this.updateSizes();
+            requestAnimationFrame(this.update.bind(this));
+        })
+    }
+
+    update() {
+        const offset = 100 - ((this.sizes.height - this.scrollY - this.sizes.vh) / this.sizes.height * 100);
+        this.el.setAttribute('value', (this.scrollY == 0) ? 0 : offset || 0);
+    }
+
+    updateSizes() {
+        const body = document.body;
+        const html = document.documentElement;
+        return {
+            height: Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
+            vh: Math.max(html.clientHeight, window.innerHeight || 0)
+        }
+    }
+}
+
+
+class SectionHighlighter {
+    /**
+     * Hightlight section in viewport in sidebar, using in-view library.
+     * @param {String} sectionAttr - Data attribute of sections.
+     * @param {String} navAttr - Data attribute of navigation items.
+     * @param {String} activeClass – Class name of active element.
+     */
+    constructor(sectionAttr, navAttr, activeClass = 'is-active') {
+        this.sections = [...$$(`[${navAttr}]`)];
+        this.navAttr = navAttr;
+        this.sectionAttr = sectionAttr;
+        this.activeClass = activeClass;
+        inView(`[${sectionAttr}]`).on('enter', this.highlightSection.bind(this));
+    }
+
+    highlightSection(section) {
+        const id = section.getAttribute(this.sectionAttr);
+        const el = $(`[${this.navAttr}="${id}"]`);
+        if (el) {
+            this.sections.forEach(el => el.classList.remove(this.activeClass));
+            el.classList.add(this.activeClass);
+        }
+    }
+}
+
+
+class Templater {
+    /**
+     * Mini templating engine based on data attributes. Selects elements based
+     * on a data-tpl and data-tpl-key attribute and can set textContent
+     * and innterHtml.
+     *
+     * @param {String} templateId - Template section, e.g. value of data-tpl.
+     */
+    constructor(templateId) {
+        this.templateId = templateId;
+    }
+
+    get(key) {
+        return $(`[data-tpl="${this.templateId}"][data-tpl-key="${key}"]`);
+    }
+
+    fill(key, value, html = false) {
+        const el = this.get(key);
+        if (html) el.innerHTML = value || '';
+        else el.textContent = value || '';
+        return el;
+    }
+}
+
+
+class ModelLoader {
+    /**
+     * Load model meta from GitHub and update model details on site. Uses the
+     * Templater mini template engine to update DOM.
+     *
+     * @param {String} repo - Path tp GitHub repository containing releases.
+     * @param {Array} models - List of model IDs, e.g. "en_core_web_sm".
+     * @param {Object} licenses - License IDs mapped to URLs.
+     * @param {Object} accKeys - Available accuracy keys mapped to display labels.
+     */
+    constructor(repo, models = [], licenses = {}, accKeys = {}) {
+        this.url = `https://raw.githubusercontent.com/${repo}/master`;
+        this.repo = `https://github.com/${repo}`;
+        this.modelIds = models;
+        this.licenses = licenses;
+        this.accKeys = accKeys;
+        this.chartColor = '#09a3d5';
+        this.chartOptions = {
+            type: 'bar',
+            options: { responsive: true, scales: {
+                yAxes: [{ label: 'Accuracy', ticks: { suggestedMin: 70 }}],
+                xAxes: [{ barPercentage: 0.425 }]
+            }}
+        }
+        Chart.defaults.global.legend.position = 'bottom';
+        Chart.defaults.global.defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+        this.init();
+    }
+
+    init() {
+        this.modelIds.forEach(modelId =>
+            new Templater(modelId).get('table').setAttribute('data-loading', ''));
+        fetch(`${this.url}/compatibility.json`)
+            .then(res => this.handleResponse(res))
+            .then(json => json.ok ? this.getModels(json['spacy']) : this.modelIds.forEach(modelId => this.showError(modelId)))
+    }
+
+    handleResponse(res) {
+        if (res.ok) return res.json().then(json => Object.assign({}, json, { ok: res.ok }))
+        else return ({ ok: res.ok })
+    }
+
+    getModels(compat) {
+        this.compat = compat;
+        for (let modelId of this.modelIds) {
+            const version = this.getLatestVersion(modelId, compat);
+            if (!version) {
+                this.showError(modelId); return;
+            }
+            fetch(`${this.url}/meta/${modelId}-${version}.json`)
+                .then(res => this.handleResponse(res))
+                .then(json => json.ok ? this.render(json) : this.showError(modelId))
+        }
+        // make sure scroll positions for progress bar etc. are recalculated
+        window.dispatchEvent(new Event('resize'));
+    }
+
+    showError(modelId) {
+        const template = new Templater(modelId);
+        template.get('table').removeAttribute('data-loading');
+        template.get('error').style.display = 'block';
+        for (let key of ['sources', 'pipeline', 'author', 'license']) {
+            template.get(key).parentElement.parentElement.style.display = 'none';
+        }
+    }
+
+    /**
+     * Update model details in tables. Currently quite hacky :(
+     */
+    render({ lang, name, version, sources, pipeline, url, author, license, accuracy, size, description, notes }) {
+        const modelId = `${lang}_${name}`;
+        const model = `${modelId}-${version}`;
+        const template = new Templater(modelId);
+
+        const getSources = s => (s instanceof Array) ? s.join(', ') : s;
+        const getPipeline = p => p.map(comp => `<code>${comp}</code>`).join(', ');
+        const getLink = (t, l) => `<a href="${l}" target="_blank">${t}</a>`;
+
+        const keys = { version, size, description, notes }
+        Object.keys(keys).forEach(key => template.fill(key, keys[key]));
+
+        if (sources) template.fill('sources', getSources(sources));
+        if (pipeline && pipeline.length) template.fill('pipeline', getPipeline(pipeline), true);
+        else template.get('pipeline').parentElement.parentElement.style.display = 'none';
+
+        if (author) template.fill('author', url ? getLink(author, url) : author, true);
+        if (license) template.fill('license', this.licenses[license] ? getLink(license, this.licenses[license]) : license, true);
+
+        template.get('download').setAttribute('href', `${this.repo}/releases/tag/${model}`);
+        if (accuracy) this.renderAccuracy(template, accuracy, modelId);
+        this.renderCompat(template, modelId);
+        template.get('table').removeAttribute('data-loading');
+    }
+
+    renderCompat(template, modelId) {
+        template.get('compat-wrapper').style.display = 'table-row';
+        const options = Object.keys(this.compat).map(v => `<option value="${v}">v${v}</option>`).join('');
+        template
+            .fill('compat', '<option selected disabled>spaCy version</option>' + options, true)
+            .addEventListener('change', ev => {
+                const result = this.compat[ev.target.value][modelId];
+                if (result) template.fill('compat-versions', `<code>${modelId}-${result[0]}</code>`, true);
+                else template.fill('compat-versions', '');
+            });
+    }
+
+    renderAccuracy(template, accuracy, modelId, compare=false) {
+        template.get('accuracy-wrapper').style.display = 'block';
+        const metaKeys = Object.keys(this.accKeys).map(k => accuracy[k] ? k : false).filter(k => k);
+        for (let key of metaKeys) {
+            template.fill(key, accuracy[key].toFixed(2)).parentElement.style.display = 'table-row';
+        }
+
+        this.chartOptions.options.legend = { display: compare }
+        new Chart(`chart_${modelId}`, Object.assign({}, this.chartOptions, { data: {
+            datasets: [{
+                label: modelId,
+                data: metaKeys.map(key => accuracy[key].toFixed(2)),
+                backgroundColor: this.chartColor
+            }],
+            labels: metaKeys.map(key => this.accKeys[key])
+        }}))
+    }
+
+    getLatestVersion(model, compat = {}) {
+        for (let spacy_v of Object.keys(compat)) {
+            const models = compat[spacy_v];
+            if (models[model]) return models[model][0];
+        }
+    }
+}
+
+
+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');
+        fetch(this.url)
+            .then(res => this.handleResponse(res))
+            .then(json => json.ok ? this.render(json) : false)
+    }
+
+    /**
+     * Get template section from template row. Slightly hacky, but does make sense.
+     */
+    $(item, id) {
+        return item.querySelector(`[data-changelog="${id}"]`);
+    }
+
+    handleResponse(res) {
+        if (res.ok) return res.json().then(json => Object.assign({}, json, { ok: res.ok }))
+        else return ({ ok: res.ok })
+    }
+
+    render(json) {
+        this.template.get('error').style.display = 'none';
+        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();
+        // make sure scroll positions for progress bar etc. are recalculated
+        window.dispatchEvent(new Event('resize'));
+    }
+
+    /**
+     * 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} pre (prerelease) - Whether the release is a prerelease.
+     */
+    renderRelease({ name, tag_name: tag, html_url: url, published_at: date, prerelease: pre }) {
+        const container = pre ? this.prereleases : this.releases;
+        const row = this.row.cloneNode(true);
+        this.$(row, 'date').textContent = date.split('T')[0];
+        this.$(row, 'tag').innerHTML = `<a href="${url}" target="_blank"><code>${tag}</code></a>`;
+        this.$(row, 'title').textContent = (name.split(': ').length == 2) ? name.split(': ')[1] : name;
+        container.appendChild(row);
+    }
+}
+
+
+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.error = `\nCan't fetch code example from GitHub :(\n\nPlease use the link below to view the example. If you've come across\na broken link, we always appreciate a pull request to the repository,\nor a report on the issue tracker. Thanks!`;
+        [...$$(`[${this.attr}]`)].forEach(el => this.embed(el));
+    }
+
+    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 }) => {
+                el.textContent = ok ? text : this.error;
+                if (ok && window.Prism) Prism.highlightElement(el);
+            })
+        el.parentElement.removeAttribute('data-loading');
+    }
 }