-
-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1473 from explosion/refactor-javascript
Refactor website JS and add model comparison tool
- Loading branch information
Showing
22 changed files
with
779 additions
and
373 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } |
Oops, something went wrong.