diff --git a/assets/images/icons.png b/assets/images/icons.png index b0458a27..7a40ea86 100644 Binary files a/assets/images/icons.png and b/assets/images/icons.png differ diff --git a/assets/images/icons@2x.png b/assets/images/icons@2x.png index 1fd38ec6..36d0fbc8 100644 Binary files a/assets/images/icons@2x.png and b/assets/images/icons@2x.png differ diff --git a/assets/javascripts/news.json b/assets/javascripts/news.json index 8b87ccef..19c6de6c 100644 --- a/assets/javascripts/news.json +++ b/assets/javascripts/news.json @@ -1,5 +1,8 @@ [ [ + "2016-04-10", + "New documentation: Support tables (caniuse.com)" + ], [ "2016-03-27", "New documentation: TypeScript" ], [ diff --git a/assets/javascripts/views/pages/support_tables.coffee b/assets/javascripts/views/pages/support_tables.coffee new file mode 100644 index 00000000..217e2df3 --- /dev/null +++ b/assets/javascripts/views/pages/support_tables.coffee @@ -0,0 +1,14 @@ +#= require views/pages/base + +class app.views.SupportTablesPage extends app.views.BasePage + @events: + click: 'onClick' + + onClick: (event) -> + return unless event.target.classList.contains 'show-all' + $.stopEvent(event) + + el = event.target + el = el.parentNode until el.tagName is 'TABLE' + el.classList.add 'show-all' + return diff --git a/assets/stylesheets/application-dark.css.scss b/assets/stylesheets/application-dark.css.scss index 48314be5..3ebd1d94 100644 --- a/assets/stylesheets/application-dark.css.scss +++ b/assets/stylesheets/application-dark.css.scss @@ -76,6 +76,7 @@ 'pages/sphinx', 'pages/sphinx_simple', 'pages/tcl_tk', + 'pages/support_tables', 'pages/tensorflow', 'pages/underscore', 'pages/vagrant', diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss index 8ed497ce..550ec013 100644 --- a/assets/stylesheets/application.css.scss +++ b/assets/stylesheets/application.css.scss @@ -75,6 +75,7 @@ 'pages/socketio', 'pages/sphinx', 'pages/sphinx_simple', + 'pages/support_tables', 'pages/tcl_tk', 'pages/tensorflow', 'pages/underscore', diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss index 26f44b8c..584c260a 100644 --- a/assets/stylesheets/global/_icons.scss +++ b/assets/stylesheets/global/_icons.scss @@ -4,7 +4,7 @@ width: 1rem; height: 1rem; background-image: image-url('icons.png'); - background-size: 10rem 11rem; + background-size: 10rem 12rem; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { @@ -133,3 +133,4 @@ ._icon-haxe:before { background-position: -7rem -10rem; } ._icon-ansible:before { background-position: -8rem -10rem; @extend %darkIconFix !optional; } ._icon-typescript:before { background-position: -9rem -10rem; } +._icon-browser_support_tables:before { background-position: 0rem -11rem; } diff --git a/assets/stylesheets/pages/_support_tables.scss b/assets/stylesheets/pages/_support_tables.scss new file mode 100644 index 00000000..076683c1 --- /dev/null +++ b/assets/stylesheets/pages/_support_tables.scss @@ -0,0 +1,64 @@ +._support_tables { + h2 { @extend %block-heading; } + code { @extend %label; } + + > .stats { + tr.show-all ~ tr { display: none; } + + &.show-all { + tr.show-all { display: none; } + tr.show-all ~ tr { display: table-row; } + } + + td, th { + position: relative; + text-align: center; + min-width: 5rem; + } + + sup { + position: absolute; + top: 0; + right: 2px; + font-size: .625rem; + } + + tr.current { + font-weight: bold; + font-size: 1rem; + } + + td { + padding: .125rem .25rem; + white-space: nowrap; + cursor: default; + } + + td.y { + color: white; + background: #39b54a; + } + + td.n, td.p { + color: white; + background: #c44230; + } + + td.a { + color: white; + background: #a8bd04; + } + + td.u { + color: white; + background: #838383; + } + + th.show-all { + background: none; + border-bottom: 0; + } + + a.show-all { display: block; } + } +} diff --git a/lib/docs/scrapers/support_tables.rb b/lib/docs/scrapers/support_tables.rb new file mode 100644 index 00000000..1751dd01 --- /dev/null +++ b/lib/docs/scrapers/support_tables.rb @@ -0,0 +1,182 @@ +require 'yajl/json_gem' + +module Docs + class SupportTables < Doc + include Instrumentable + + self.name = 'Support Tables' + self.slug = 'browser_support_tables' + self.type = 'support_tables' + + def build_pages + url = 'https://github.com/Fyrd/caniuse/raw/master/data.json' + instrument 'running.scraper', urls: [url] + + response = Request.run(url) + instrument 'process_response.scraper', response: response + + data = JSON.parse(response.body) + instrument 'queued.scraper', urls: data['data'].keys + + data['agents']['and_chr']['browser'] = 'Android Chrome' + data['agents']['and_ff']['browser'] = 'Android Firefox' + data['agents']['and_uc']['browser'] = 'Android UC Browser' + data['desktop_agents'] = data['agents'].select { |_, agent| agent['type'] == 'desktop' } + data['mobile_agents'] = data['agents'].select { |–, agent| agent['type'] == 'mobile' } + data['total_versions'] = data['agents']['firefox']['versions'].length + + index_page = { + path: 'index', + store_path: 'index.html', + output: ERB.new(INDEX_PAGE_ERB).result(binding), + entries: [Entry.new(nil, 'index', nil)] + } + + yield index_page + + data['data'].each do |feature_id, feature| + url = "https://github.com/Fyrd/caniuse/raw/master/features-json/#{feature_id}.json" + + response = Request.run(url) + instrument 'process_response.scraper', response: response + + feature = JSON.parse(response.body) + + name = feature['title'] + type = feature['categories'].find { |category| name.include?(category) } || feature['categories'].first + + page = { + path: feature_id, + store_path: "#{feature_id}.html", + output: ERB.new(PAGE_ERB).result(binding), + entries: [Entry.new(name, feature_id, type)] + } + + yield page + end + end + + def md_to_html(str) + str = str.strip + str.gsub! %r{`(.*?)`}, '\1' + str.gsub! %r{\n\s*\n}, '

' + str.gsub! "\n", '
' + str.gsub! %r{\[(.+?)\]\((.+?)\)}, '\1' + str + end + + def support_to_css_class(support) + support.select { |s| s.length == 1 }.join(' ') + end + + def support_to_note_indicators(support) + notes = support.select { |s| s.start_with?('#') }.map { |s| s[1..-1] } + notes << '*' if support.include?('x') + "(#{notes.join(',')})" if notes.present? + end + + INDEX_PAGE_ERB = <<-HTML.strip_heredoc +

Browser support tables

+ HTML + + PAGE_ERB = <<-HTML.strip_heredoc +

<%= feature['title'] %>

+ +

<%= md_to_html feature['description'] %>

+ + + <% if feature['spec'].present? %> + + + + + <% end %> + + <% if feature['status'].present? %> + + + + + <% end %> +
Spec<%= feature['spec'] %>
Status<%= data['statuses'][feature['status']] %>
+ + <% ['desktop', 'mobile'].each do |type| %> + + + <% data["\#{type}_agents"].each do |agent_id, agent| %> + + <% end %> + + <% (0...(data['total_versions'])).reverse_each do |i| %> + <% next if data["\#{type}_agents"].none? { |_, agent| agent['versions'][i] } %> + <% if i == (data['total_versions'] - 8) %> + + + + <% end %> + > + <% data["\#{type}_agents"].each do |agent_id, agent| %> + <% version = agent['versions'][i] %> + <% if version %> + <% support = feature['stats'][agent_id][version].split(' ') %> + <% feature['prefix'] = true if support.include?('x') %> + + <% else %> + + <% end %> + <% end %> + + <% end %> +
<%= agent['browser'] %>
"> + Show all +
<%= version %> <%= support_to_note_indicators(support) %> 
+ <% end %> + +

Notes

+ + <% if feature['notes'].present? %> +

<%= md_to_html feature['notes'] %>

+ <% end %> + + <% if feature['notes_by_num'].present? %> +
    + <% feature['notes_by_num'].each do |num, note| %> +

  1. <%= md_to_html note %>

    2. + <% end %> +
+ <% end %> + + <% if feature['prefix'] %> +
+
* Partial support with prefix.
+
+ <% end %> + + <% if feature['bugs'].present? %> +

Bugs

+ + <% end %> + + <% if feature['links'].present? %> +

Resources

+ + <% end %> + +
+

+ Data by caniuse.com
+ Licensed under the Creative Commons Attribution License v4.0.
+ http://caniuse.com/#feat=<%= feature_id %> +

+
+ HTML + end +end diff --git a/public/icons/docs/support_tables/16.png b/public/icons/docs/support_tables/16.png new file mode 100644 index 00000000..dd6cf1d3 Binary files /dev/null and b/public/icons/docs/support_tables/16.png differ diff --git a/public/icons/docs/support_tables/16@2x.png b/public/icons/docs/support_tables/16@2x.png new file mode 100644 index 00000000..e848caf6 Binary files /dev/null and b/public/icons/docs/support_tables/16@2x.png differ diff --git a/public/icons/docs/support_tables/SOURCE b/public/icons/docs/support_tables/SOURCE new file mode 100644 index 00000000..ffa79609 --- /dev/null +++ b/public/icons/docs/support_tables/SOURCE @@ -0,0 +1 @@ +http://www.entypo.com/