Ensure fallbacks / progressive enhancement if JS disabled

This commit is contained in:
ines 2017-10-30 16:16:19 +01:00
parent 1eb1ed0c7c
commit 14ad92d337
7 changed files with 26 additions and 11 deletions

View File

@ -281,7 +281,12 @@ mixin github(repo, file, height, alt_file, language)
figure.o-block figure.o-block
pre.c-code-block.o-block-small(class="lang-#{(language || DEFAULT_SYNTAX)}" style="height: #{height}px; min-height: #{height}px") 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 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)] .o-block-small.u-flex-full.u-padding-small #[+icon("github")] #[code.u-break.u-break--all=repo + '/' + (alt_file || file)]

View File

@ -20,7 +20,7 @@ for id in CURRENT_MODELS
p(data-tpl=id data-tpl-key="description") 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 +infobox
| Unable to load model details from GitHub. To find out more | Unable to load model details from GitHub. To find out more
| about this model, see the overview of the | about this model, see the overview of the

View File

@ -19,5 +19,5 @@ menu.c-sidebar.js-sidebar.u-text
- var counter = 0 - var counter = 0
for id, title in menu for id, title in menu
- counter++ - 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 +a("#section-" + id)=title

View File

@ -14,7 +14,6 @@ export default class GitHubEmbed {
constructor(user, attr) { constructor(user, attr) {
this.url = `https://raw.githubusercontent.com/${user}`; this.url = `https://raw.githubusercontent.com/${user}`;
this.attr = attr; 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)); [...$$(`[${this.attr}]`)].forEach(el => this.embed(el));
} }
@ -27,10 +26,17 @@ export default class GitHubEmbed {
el.parentElement.setAttribute('data-loading', ''); el.parentElement.setAttribute('data-loading', '');
fetch(`${this.url}/${el.getAttribute(this.attr)}`) fetch(`${this.url}/${el.getAttribute(this.attr)}`)
.then(res => res.text().then(text => ({ text, ok: res.ok }))) .then(res => res.text().then(text => ({ text, ok: res.ok })))
.then(({ text, ok }) => { .then(({ text, ok }) => ok ? this.render(el, text) : false)
el.textContent = ok ? text : this.error;
if (ok && window.Prism) Prism.highlightElement(el);
})
el.parentElement.removeAttribute('data-loading'); 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);
}
} }

View File

@ -100,6 +100,7 @@ export class ModelLoader {
const modelId = `${data.lang}_${data.name}`; const modelId = `${data.lang}_${data.name}`;
const model = `${modelId}-${data.version}`; const model = `${modelId}-${data.version}`;
const tpl = new Templater(modelId); const tpl = new Templater(modelId);
tpl.get('error').style.display = 'none';
this.renderDetails(tpl, data) this.renderDetails(tpl, data)
this.renderBenchmarks(tpl, data.accuracy, data.speed); this.renderBenchmarks(tpl, data.accuracy, data.speed);
this.renderCompat(tpl, modelId); this.renderCompat(tpl, modelId);
@ -180,6 +181,7 @@ export class ModelComparer {
this.models = {}; this.models = {};
this.colors = CHART_COLORS; this.colors = CHART_COLORS;
this.defaultModels = defaultModels; this.defaultModels = defaultModels;
this.tpl.get('result').style.display = 'block';
this.fetchCompat() this.fetchCompat()
.then(compat => this.init(compat)) .then(compat => this.init(compat))
.catch(this.showError.bind(this)) .catch(this.showError.bind(this))

View File

@ -11,6 +11,8 @@ export default class NavHighlighter {
*/ */
constructor(sectionAttr, navAttr, activeClass = 'is-active') { constructor(sectionAttr, navAttr, activeClass = 'is-active') {
this.sections = [...$$(`[${navAttr}]`)]; this.sections = [...$$(`[${navAttr}]`)];
// highlight first item regardless
if (this.sections.length) this.sections[0].classList.add(activeClass);
this.navAttr = navAttr; this.navAttr = navAttr;
this.sectionAttr = sectionAttr; this.sectionAttr = sectionAttr;
this.activeClass = activeClass; this.activeClass = activeClass;

View File

@ -23,17 +23,17 @@ p
for model in models for model in models
option(value=model)=model option(value=model)=model
div(data-tpl=TPL data-tpl-key="error" style="display: none") div(data-tpl=TPL data-tpl-key="error")
+infobox +infobox
| Unable to load model details and accuracy figures from GitHub to | Unable to load model details and accuracy figures from GitHub to
| compare the models. For details of the individual models, see the | compare the models. For details of the individual models, see the
| overview of the | overview of the
| #[+a(gh("spacy-models") + "/releases") latest model releases]. | #[+a(gh("spacy-models") + "/releases") latest model releases].
div(data-tpl=TPL data-tpl-key="result") div(data-tpl=TPL data-tpl-key="result" style="display: none")
+chart("compare_accuracy", 350) +chart("compare_accuracy", 350)
+aside-code("Download", "text")(style="display: none") +aside-code("Download", "text")
for i in [1, 2] for i in [1, 2]
span(data-tpl=TPL data-tpl-key="download#{i}") span(data-tpl=TPL data-tpl-key="download#{i}")