improving our pagespeed score

BUG=
R=mcampione@google.com

Review URL: https://chromiumcodereview.appspot.com//210253006

.gitignore

@@ -11,6 +11,7 @@ scripts/packages
 pubspec.lock
 packages/
 *.js.deps
+_asset_bundler_cache
 
 !src/site/samples/searchable_list/example/packages/
 !src/site/samples/tracker/example/packages/

Gemfile

@@ -1,3 +1,4 @@
 source "http://rubygems.org"
 gem "jekyll", '1.2.1'
 gem "kramdown", '1.0.2'
+gem "yui-compressor", "0.12.0"

Gemfile.lock

@@ -29,10 +29,12 @@ GEM
     redcarpet (2.3.0)
     safe_yaml (0.7.1)
     yajl-ruby (1.1.0)
+    yui-compressor (0.12.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   jekyll (= 1.2.1)
   kramdown (= 1.0.2)
+  yui-compressor (= 0.12.0)

src/appengine/app.yaml

@@ -180,6 +180,10 @@ handlers:
   script: scripts.is_dartisans_live.application
   login: admin
 
+- url: /bundles
+  expiration: 7d
+  static_dir: static/bundles
+
 - url: /(.*\.png)
   static_files: static/\1
   expiration: 1d

src/site/_config.yml

@@ -25,3 +25,7 @@ custom:
         editor-ext: zip
 kramdown:
   toc_levels: "2,3,4"
+asset_bundler:
+  compress:
+    js: yui
+    css: yui

src/site/_includes/downloads/_dart-editor.html

@@ -2,7 +2,7 @@
 
   {% for editor in site.custom.downloads.binaries %}
 
-  <div class="{{ editor.os }} downloads">
+  <div class="{{ editor.os }} downloads"  style="display:none">
     {% if editor.os == 'macos' %}
     <a data-bits="64" data-os="{{ editor.os }}" data-build="integration" data-tool="editor" class="btn download-link" href="{{ site.custom.downloads.dartarchive-stable-url-prefix }}/latest/editor/darteditor-{{ editor.os }}-x64.{{ editor.editor-ext }}">
       <button class="{{ include.buttonclass }}">

src/site/_includes/footer.html

@@ -40,15 +40,30 @@ <h4>Community</h4>
     </div>
   </footer> <!-- End footer -->
 
+{% comment %}Put all JS here.{% endcomment %}
+
 {% bundle %}
 - /js/jquery.js
 - /js/bootstrap.min.js
 - /js/prettify.js
 - /js/lang-dart.js
 - /js/lang-yaml.js
 - /js/scripts.js
+- /js/os-switcher.js
+- /js/downloads-analytics.js
+- /js/homepage.js
+- /js/editor-version.js
+{% endbundle %}
+
+{% comment %}Non-critical CSS. Put critical CSS in head, all other here.{% endcomment %}
+
+{% bundle %}
+- /css/prettify.css
+- /css/font-awesome.min.css
 {% endbundle %}
 
+{% if page.header and page.header.css %}{% for css in page.header.css %}<link href="{{ css }}" rel="stylesheet" type="text/css">{% endfor %}{% endif %}
+
 {% for js in page.js %}
 <script {% if js.defer %}defer{% endif %} src="{{ js.url }}"></script>
 {% endfor %}

src/site/_includes/header.html

@@ -16,17 +16,41 @@
   {% endif %}
   <meta itemprop="description" content="{% if page.description %}{{ page.description }}{% else %}Dart is a new platform for building structured web apps for modern browsers. It includes a language, a VM, libraries, tools, and a compiler to JavaScript. Try Dart today!{% endif %}">
 
+{% comment %}Critical CSS for page. Put non-critical in footer.{% endcomment %}
+
+<!-- making pagespeed insights happy -->
+<style>
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
+}
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/IQHow_FEYlDC4Gzy_m8fcnbFhgvWbfSbdVg11QabG8w.woff) format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://themes.googleusercontent.com/static/fonts/roboto/v10/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
+}
+</style>
+
 {% bundle %}
 - /css/bootstrap.min.css
 - /css/dart-style.css
-- /css/prettify.css
-- /css/font-awesome.min.css
 {% endbundle %}
 
-  <link href="//fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:300,400" rel="stylesheet">
-
-  {% if page.header and page.header.css %}{% for css in page.header.css %}<link href="{{ css }}" rel="stylesheet" type="text/css">{% endfor %}{% endif %}
-
   {% for author in page.rel.author %}<link rel="author" href="/authors/{{ author }}.html">{% endfor %}
   {% if page.rel.me %}<link rel="me" href="{{ page.rel.me }}">{% endif %}
 

src/site/_plugins/asset_bundler.rb

@@ -3,7 +3,7 @@
 #
 # Author : Colin Kennedy
 # Repo   : http://github.com/moshen/jekyll-asset_bundler
-# Version: 0.09
+# Version: 0.12
 # License: MIT, see LICENSE file
 #
 
@@ -27,7 +27,8 @@ def render(context)
       begin
         # Some ugliness to work around the Block returning an array
         #   in liquid <2.4.0
-        @assets = YAML::load(raw_markup.class == Array ? raw_markup[0] : raw_markup)
+        # Note: Jekyll 1.0.x only require liquid 2.3
+        @assets = YAML::load(raw_markup.kind_of?(Array) ? raw_markup.first : raw_markup)
       rescue
         puts <<-END
 Asset Bundler - Error: Problem parsing a YAML bundle
@@ -37,7 +38,7 @@ def render(context)
 END
       end
 
-      if @assets.class != Array
+      if !@assets.kind_of?(Array)
         puts "Asset Bundler - Error: YAML bundle is not an Array\n#{raw_markup}"
         @assets = []
       end
@@ -122,9 +123,9 @@ class Bundle
         'coffee' =>
           Liquid::Template.parse("<script type='text/coffeescript' src='{{url}}'></script>\n"),
         'css'    =>
-          Liquid::Template.parse("<link rel='stylesheet' type='text/css' href='{{url}}'>\n"),
+          Liquid::Template.parse("<link rel='stylesheet' type='text/css' href='{{url}}' />\n"),
         'less'   =>
-          Liquid::Template.parse("<link rel='stylesheet/less' type='text/css' href='{{url}}'>\n")
+          Liquid::Template.parse("<link rel='stylesheet/less' type='text/css' href='{{url}}' />\n")
       }
     }
     @@current_config = nil
@@ -158,8 +159,8 @@ def self.config(context)
           ret_config = @@default_config.deep_merge(context.registers[:site].config["asset_bundler"])
 
           ret_config['markup_templates'].keys.each {|k|
-            if ret_config['markup_templates'][k].class != Liquid::Template
-              if ret_config['markup_templates'][k].class == String
+            if !ret_config['markup_templates'][k].instance_of?(Liquid::Template)
+              if ret_config['markup_templates'][k].instance_of?(String)
                 ret_config['markup_templates'][k] =
                   Liquid::Template.parse(ret_config['markup_templates'][k]);
               else
@@ -194,7 +195,8 @@ def self.config(context)
           ret_config['dev'] = context.registers[:site].config["dev"] ? true : false
         end
 
-        if context.registers[:site].config['serving']
+        # Let's assume that when flag 'watch' or 'serving' is enabled, we want dev mode
+        if context.registers[:site].config['serving'] || context.registers[:site].config['watch']
           ret_config['dev'] = true
         end
 
@@ -223,7 +225,17 @@ def load_content()
           f.sub!( /^https/i, "http" ) if $1 =~ /^https/i
           @content.concat(remote_asset_cache(URI(f)))
         else
-          @content.concat(File.read(File.join(src, f)))
+          # Load file from path and render it if it contains tags
+
+          # Extract the path parts
+          f = File.split(f)
+
+          # Render the page                               path  file
+          page = Page.new(@context.registers[:site], src, f[0], f[1])
+          page.render(@context.registers[:site].layouts,
+                      @context.registers[:site].site_payload())
+
+          @content.concat(page.output)
         end
       }
 
@@ -248,14 +260,8 @@ def load_content()
     end
 
     def cache_dir()
-      plugin_conf = @context.registers[:site].plugins
-      # Hack for jekyll versions before 0.12.0
-      if plugin_conf.kind_of?(Array)
-        plugin_dir = plugin_conf.first
-      else
-        plugin_dir = plugin_conf
-      end
-      cache_dir = File.expand_path( "../_asset_bundler_cache", plugin_dir)
+      cache_dir = File.expand_path( "../_asset_bundler_cache",
+                                    @context.registers[:site].plugins.first )
       if( !File.directory?(cache_dir) )
         FileUtils.mkdir_p(cache_dir)
       end
@@ -292,7 +298,7 @@ def remove_bundled()
       src = @context.registers[:site].source
       @files.each {|f|
         @context.registers[:site].static_files.select! {|s|
-          if s.class == StaticFile
+          if s.instance_of?(StaticFile)
             s.path != File.join(src, f)
           else
             true

src/site/codelabs/darrrt/index.markdown

@@ -6,13 +6,6 @@ snippet_img: images/piratemap.jpg
 has-permalinks: true
 tutorial:
   id: trydart
-js:
-- url: /js/os-switcher.js
-  defer: true
-- url: /js/downloads-analytics.js
-  defer: true
-- url: /js/editor-version.js
-  defer: true
 header:
   css: ["/codelabs/darrrt/darrrt.css"]
 ---

src/site/codelabs/deploy/index.markdown

@@ -5,13 +5,6 @@ description: "Deploy a Dart server and serve a Dart app."
 has-permalinks: true
 tutorial:
   id: buildanddeploy
-js:
-- url: /js/os-switcher.js
-  defer: true
-- url: /js/editor-downloads-analytics.js
-  defer: true
-- url: /js/editor-version.js
-  defer: true
 header:
   css: ["/codelabs/darrrt/darrrt.css"]
 ---

src/site/docs/tutorials/get-started/index.markdown

@@ -5,13 +5,6 @@ description: "Get Dart and run two Dart applications"
 has-permalinks: true
 tutorial:
   id: get-started
-js:
-- url: /js/os-switcher.js
-  defer: true
-- url: /js/downloads-analytics.js
-  defer: true
-- url: /js/editor-version.js
-  defer: true
 next: connect-dart-html/
 next-title: "Connect Dart & HTML"
 prev: 

src/site/index.html

@@ -1,15 +1,5 @@
 ---
 layout: homepage
-js:
-- url: /js/display-news.js
-- url: /js/os-switcher.js
-  defer: true
-- url: /js/downloads-analytics.js
-  defer: true
-- url: /js/front-page-analytics.js
-  defer: true
-- url: /js/editor-version.js
-  defer: true
 ---
 
   <div class="container-page">

src/site/js/display-news.js → src/site/js/homepage.js

@@ -1,7 +1,10 @@
 function loadAndDisplayPosts() {
   var container = document.getElementById("feed-posts");
+  if (!container) return;
+
   var feed = new google.feeds.Feed("http://news.dartlang.org/feeds/posts/default");
-	var MAX_POSTS = 1;
+  var MAX_POSTS = 1;
+
   feed.load(function(result) {
     if (!result.error) {
       for (var i = 0; i < result.feed.entries.length && i < MAX_POSTS; i++) {
@@ -25,8 +28,17 @@ function loadGoogleApis() {
 }
 
 document.addEventListener('DOMContentLoaded', function () {
+  if (location.pathname !== '/') return;
+
   var script = document.createElement("script");
   script.src = "https://www.google.com/jsapi?callback=loadGoogleApis";
   script.type = "text/javascript";
   document.getElementsByTagName("head")[0].appendChild(script);
+
+  var link = document.querySelector('#see-code');
+  if (link) {
+	link.addEventListener('click', function(e) {
+	  _gaq.push(['_trackEvent', 'In-Page Clicks', 'See code']);
+	});
+  }
 });

src/site/js/os-switcher.js

@@ -16,7 +16,7 @@ $(document).ready(function() {
     // Get all the platform-specific elements.
     for (var i = 0; i < osList.length; i++) {
       var os = osList[i];
-      var shouldShow = (os == showId);
+      var shouldShow = (os === showId);
       $('.' + os).each(function(i, el) {      
         if (shouldShow) {
           $(el).show();
@@ -29,15 +29,21 @@ $(document).ready(function() {
 
   function registerHandlers() {
     for (var i = 0; i < osList.length; i++) {
-      $('#' + osList[i])[0].addEventListener('click', function(e) {
-        filterPlatformText(e.target.id);
-      });
+      var os = document.getElementById(osList[i]);
+      if (os) {
+        os.addEventListener('click', function(e) {
+          filterPlatformText(e.target.id);
+        });
+      }
     }
   }
 
   var defaultOs = detectPlatform();
-  $('#' + defaultOs).attr('checked', 'checked');
-  filterPlatformText(defaultOs);
-  registerHandlers();
+  var defaultOsElem = document.getElementById(defaultOs);
+  if (defaultOsElem) {
+    defaultOsElem.setAttribute('checked', 'checked');
+    filterPlatformText(defaultOs);
+    registerHandlers();
+  }
 
 });

src/site/tools/download.markdown

@@ -3,13 +3,6 @@ layout: default
 title: "Download Dart"
 description: "The download bundles that support the Dart language."
 has-permalinks: false
-js:
-- url: /js/os-switcher.js
-  defer: true
-- url: /js/downloads-analytics.js
-  defer: true
-- url: /js/editor-version.js
-  defer: true
 ---
 
 # Getting and Installing Dart Is Easy!