website: fixup some js and css issues

Noticed that the side was blocked waiting for assets to load on my ipad. Make a pass through and force the webfonts and highlighting stuff to load async. Ensure that our react stuff only tries to render after we've loaded the react js library. Break out of the nav for loop as soon as we've found a match (cuts build time in half!)
LeoWang · Aug 16, 2015 · 22f16ad · 22f16ad
1 parent b303e13
commit 22f16ad
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 21 deletions.
diff --git a/website/_includes/anchor_links.html b/website/_includes/anchor_links.html
@@ -19,15 +19,18 @@
     }
   };
 
-  document.onreadystatechange = function () {
+  var scanForPosts = function() {
+    var contentBlock = document.getElementsByClassName("post")[0] || document.getElementsByClassName("news")[0];
+    if (!contentBlock) {
+      return;
+    }
+    for (var level = 1; level <= 6; level++) {
+      linkifyAnchors(level, contentBlock);
+    }
+  }
+  document.addEventListener('onreadystatechange', function () {
     if (this.readyState === "complete") {
-      var contentBlock = document.getElementsByClassName("post")[0] || document.getElementsByClassName("news")[0];
-      if (!contentBlock) {
-        return;
-      }
-      for (var level = 1; level <= 6; level++) {
-        linkifyAnchors(level, contentBlock);
-      }
+      scanForPosts();
     }
-  };
+  });
 </script>
diff --git a/website/_includes/footer.html b/website/_includes/footer.html
@@ -3,7 +3,6 @@
     <section id="fb_oss" class="fbOpenSourceFooter">
       <a href="https://code.facebook.com/projects/" target="_blank"><img src="{{ site.baseurl }}/static/oss_logo.png" alt="Facebook Open Source" title="Facebook Open Source" /></a>
     </section>
-    <script>hljs.initHighlightingOnLoad();</script>
   </div>
 </div>
 {% include anchor_links.html %}
@@ -16,4 +15,20 @@
   ga('create', '{{ site.gacode }}', 'auto');
   ga('send', 'pageview');
 </script>
+<script>
+  window.addEventListener('load', function() {
+    hljs.initHighlightingOnLoad();
 
+    // Async load some styles
+    function loadStyle(href) {
+      var s = document.createElement('link');
+      s.setAttribute('rel', 'stylesheet');
+      s.setAttribute('href', href);
+      s.setAttribute('type', 'text/css');
+      document.getElementsByTagName('head')[0].appendChild(s);
+    }
+    loadStyle("//nuclide.io/static/fonts/332720/BC699FA675F9356E3.css");
+    loadStyle("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css");
+    loadStyle("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
+  });
+</script>
diff --git a/website/_includes/head.html b/website/_includes/head.html
@@ -10,16 +10,13 @@
 	<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
 
   <link rel="stylesheet" type="text/css" media="screen" href="{{ site.baseurl }}/css/main.css">
-  <link rel="stylesheet" type="text/css" href="//nuclide.io/static/fonts/332720/BC699FA675F9356E3.css">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">
-  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
   <link rel="icon" href="static/favicon.png" type="image/x-icon">
 
   <base href="{{ site.url }}{{ site.baseurl }}/" />
 
-  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
+  <script async defer src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.min.js"></script>
+  <script async defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">

diff --git a/website/_includes/nav.html b/website/_includes/nav.html
@@ -30,6 +30,7 @@
     ];
   </script>
   <script type="text/javascript">  
+  window.addEventListener('load', function() {
     var Nav = React.createClass({displayName: "Nav",
       getInitialState: function() {
         return {
@@ -96,5 +97,6 @@
       );
     }
     render(navData);
+  });
   </script>
 </div>
diff --git a/website/_includes/nav_docs.html b/website/_includes/nav_docs.html
@@ -8,11 +8,7 @@
       group     : "{{ group.title }}",
       items     : [
         {% for item in group.items %}
-        {% for docitem in site.docs %}
-          {% if docitem.id == item.id %}
-            {% assign doc = docitem %}
-          {% endif %}
-        {% endfor %}
+        {% for docitem in site.docs %}{% if docitem.id == item.id %}{% assign doc = docitem %}{% break %}{% endif %}{% endfor %}
         {
           key : "{{ site.baseurl }}{{ doc.url }}",
           title : "{{ doc.title }}",
@@ -25,6 +21,7 @@
   ];
 </script>
 <script type="text/javascript">  
+window.addEventListener('load', function() {
   var DocNav = React.createClass({displayName: "DocNav",
     getInitialState: function() {
       return {
@@ -97,4 +94,5 @@
     );
   }
   docNavRender(docnavData);
-</script>
+});
+</script>