Ensure fallbacks / progressive enhancement if JS disabled

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

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/js/github-embed.js

@@ -14,7 +14,6 @@ export default class GitHubEmbed {
     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));
     }
 
@@ -27,10 +26,17 @@ export default class GitHubEmbed {
         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 }) => {
+            .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');
     }
+
+    /**
+     * 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);
+    }
 }

website/assets/js/models.js

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

website/assets/js/nav-highlighter.js

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

website/models/comparison.jade

@@ -23,17 +23,17 @@ p
                         for model in models
                             option(value=model)=model
 
-div(data-tpl=TPL data-tpl-key="error" style="display: none")
+div(data-tpl=TPL data-tpl-key="error")
     +infobox
         |  Unable to load model details and accuracy figures from GitHub to
         |  compare the models. For details of the individual models, see the
         |  overview of the
         |  #[+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)
 
-    +aside-code("Download", "text")(style="display: none")
+    +aside-code("Download", "text")
         for i in [1, 2]
             span(data-tpl=TPL data-tpl-key="download#{i}")