History

Add caniuse.com support tables

Thibaut Courouble committed 10 years ago

Commit f7a381c1 parent eadda8f12 files · +264 −-3Browse files

Unified · Split

12 files
  1. assets/images/icons.png +0 −0
  2. assets/images/icons@2x.png +0 −0
  3. assets/javascripts/news.json +3 −0
  4. assets/javascripts/views/pages/support_tables.coffee +14 −0
  5. assets/stylesheets/application-dark.css.scss +1 −0
  6. assets/stylesheets/application.css.scss +1 −0
  7. assets/stylesheets/global/_icons.scss +2 −1
  8. assets/stylesheets/pages/_support_tables.scss +64 −0
  9. lib/docs/scrapers/support_tables.rb +182 −0
  10. public/icons/docs/support_tables/16.png +0 −0
  11. public/icons/docs/support_tables/16@2x.png +0 −0
  12. public/icons/docs/support_tables/SOURCE +1 −0
assets/images/icons.png+0−0

Binary file not shown.

assets/images/icons@2x.png+0−0

Binary file not shown.

assets/javascripts/news.json+3−0
@@ -1,5 +1,8 @@
11 [
22 [
3+ "2016-04-10",
4+ "New documentation: <a href=\"/browser_support_tables/\">Support tables (caniuse.com)</a>"
5+ ], [
36 "2016-03-27",
47 "New documentation: <a href=\"/typescript/\">TypeScript</a>"
58 ], [
assets/javascripts/views/pages/support_tables.coffee+14−0
@@ -0,0 +1,14 @@
1+#= require views/pages/base
2+
3+class app.views.SupportTablesPage extends app.views.BasePage
4+ @events:
5+ click: 'onClick'
6+
7+ onClick: (event) ->
8+ return unless event.target.classList.contains 'show-all'
9+ $.stopEvent(event)
10+
11+ el = event.target
12+ el = el.parentNode until el.tagName is 'TABLE'
13+ el.classList.add 'show-all'
14+ return
assets/stylesheets/application-dark.css.scss+1−0
@@ -76,6 +76,7 @@ · 75 unmodified lines
7676 'pages/sphinx',
7777 'pages/sphinx_simple',
7878 'pages/tcl_tk',
79+ 'pages/support_tables',
7980 'pages/tensorflow',
8081 'pages/underscore',
8182 'pages/vagrant',
assets/stylesheets/application.css.scss+1−0
@@ -75,6 +75,7 @@ · 74 unmodified lines
7575 'pages/socketio',
7676 'pages/sphinx',
7777 'pages/sphinx_simple',
78+ 'pages/support_tables',
7879 'pages/tcl_tk',
7980 'pages/tensorflow',
8081 'pages/underscore',
assets/stylesheets/global/_icons.scss+2−1
@@ -4,7 +4,7 @@ · 3 unmodified lines
44 width: 1rem;
55 height: 1rem;
66 background-image: image-url('icons.png');
7− background-size: 10rem 11rem;
7+ background-size: 10rem 12rem;
88 }
99
1010 @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
@@ -133,3 +133,4 @@ · 122 unmodified lines
133133 ._icon-haxe:before { background-position: -7rem -10rem; }
134134 ._icon-ansible:before { background-position: -8rem -10rem; @extend %darkIconFix !optional; }
135135 ._icon-typescript:before { background-position: -9rem -10rem; }
136+._icon-browser_support_tables:before { background-position: 0rem -11rem; }
assets/stylesheets/pages/_support_tables.scss+64−0
@@ -0,0 +1,64 @@
1+._support_tables {
2+ h2 { @extend %block-heading; }
3+ code { @extend %label; }
4+
5+ > .stats {
6+ tr.show-all ~ tr { display: none; }
7+
8+ &.show-all {
9+ tr.show-all { display: none; }
10+ tr.show-all ~ tr { display: table-row; }
11+ }
12+
13+ td, th {
14+ position: relative;
15+ text-align: center;
16+ min-width: 5rem;
17+ }
18+
19+ sup {
20+ position: absolute;
21+ top: 0;
22+ right: 2px;
23+ font-size: .625rem;
24+ }
25+
26+ tr.current {
27+ font-weight: bold;
28+ font-size: 1rem;
29+ }
30+
31+ td {
32+ padding: .125rem .25rem;
33+ white-space: nowrap;
34+ cursor: default;
35+ }
36+
37+ td.y {
38+ color: white;
39+ background: #39b54a;
40+ }
41+
42+ td.n, td.p {
43+ color: white;
44+ background: #c44230;
45+ }
46+
47+ td.a {
48+ color: white;
49+ background: #a8bd04;
50+ }
51+
52+ td.u {
53+ color: white;
54+ background: #838383;
55+ }
56+
57+ th.show-all {
58+ background: none;
59+ border-bottom: 0;
60+ }
61+
62+ a.show-all { display: block; }
63+ }
64+}
lib/docs/scrapers/support_tables.rb+182−0
@@ -0,0 +1,182 @@
1+require 'yajl/json_gem'
2+
3+module Docs
4+ class SupportTables < Doc
5+ include Instrumentable
6+
7+ self.name = 'Support Tables'
8+ self.slug = 'browser_support_tables'
9+ self.type = 'support_tables'
10+
11+ def build_pages
12+ url = 'https://github.com/Fyrd/caniuse/raw/master/data.json'
13+ instrument 'running.scraper', urls: [url]
14+
15+ response = Request.run(url)
16+ instrument 'process_response.scraper', response: response
17+
18+ data = JSON.parse(response.body)
19+ instrument 'queued.scraper', urls: data['data'].keys
20+
21+ data['agents']['and_chr']['browser'] = 'Android Chrome'
22+ data['agents']['and_ff']['browser'] = 'Android Firefox'
23+ data['agents']['and_uc']['browser'] = 'Android UC Browser'
24+ data['desktop_agents'] = data['agents'].select { |_, agent| agent['type'] == 'desktop' }
25+ data['mobile_agents'] = data['agents'].select { |–, agent| agent['type'] == 'mobile' }
26+ data['total_versions'] = data['agents']['firefox']['versions'].length
27+
28+ index_page = {
29+ path: 'index',
30+ store_path: 'index.html',
31+ output: ERB.new(INDEX_PAGE_ERB).result(binding),
32+ entries: [Entry.new(nil, 'index', nil)]
33+ }
34+
35+ yield index_page
36+
37+ data['data'].each do |feature_id, feature|
38+ url = "https://github.com/Fyrd/caniuse/raw/master/features-json/#{feature_id}.json"
39+
40+ response = Request.run(url)
41+ instrument 'process_response.scraper', response: response
42+
43+ feature = JSON.parse(response.body)
44+
45+ name = feature['title']
46+ type = feature['categories'].find { |category| name.include?(category) } || feature['categories'].first
47+
48+ page = {
49+ path: feature_id,
50+ store_path: "#{feature_id}.html",
51+ output: ERB.new(PAGE_ERB).result(binding),
52+ entries: [Entry.new(name, feature_id, type)]
53+ }
54+
55+ yield page
56+ end
57+ end
58+
59+ def md_to_html(str)
60+ str = str.strip
61+ str.gsub! %r{`(.*?)`}, '<code>\1</code>'
62+ str.gsub! %r{\n\s*\n}, '</p><p>'
63+ str.gsub! "\n", '<br>'
64+ str.gsub! %r{\[(.+?)\]\((.+?)\)}, '<a href="\2">\1</a>'
65+ str
66+ end
67+
68+ def support_to_css_class(support)
69+ support.select { |s| s.length == 1 }.join(' ')
70+ end
71+
72+ def support_to_note_indicators(support)
73+ notes = support.select { |s| s.start_with?('#') }.map { |s| s[1..-1] }
74+ notes << '*' if support.include?('x')
75+ "<sup>(#{notes.join(',')})</sup>" if notes.present?
76+ end
77+
78+ INDEX_PAGE_ERB = <<-HTML.strip_heredoc
79+ <h1>Browser support tables</h1>
80+ HTML
81+
82+ PAGE_ERB = <<-HTML.strip_heredoc
83+ <h1><%= feature['title'] %></h1>
84+
85+ <p><%= md_to_html feature['description'] %></p>
86+
87+ <table>
88+ <% if feature['spec'].present? %>
89+ <tr>
90+ <th>Spec</th>
91+ <td><a href="<%= feature['spec'] %>"><%= feature['spec'] %></a></td>
92+ </tr>
93+ <% end %>
94+
95+ <% if feature['status'].present? %>
96+ <tr>
97+ <th>Status</th>
98+ <td><%= data['statuses'][feature['status']] %></td>
99+ </tr>
100+ <% end %>
101+ </table>
102+
103+ <% ['desktop', 'mobile'].each do |type| %>
104+ <table class="stats">
105+ <tr>
106+ <% data["\#{type}_agents"].each do |agent_id, agent| %>
107+ <th><%= agent['browser'] %></th>
108+ <% end %>
109+ </tr>
110+ <% (0...(data['total_versions'])).reverse_each do |i| %>
111+ <% next if data["\#{type}_agents"].none? { |_, agent| agent['versions'][i] } %>
112+ <% if i == (data['total_versions'] - 8) %>
113+ <tr class="show-all">
114+ <th class="show-all" colspan="<%= data["\#{type}_agents"].length %>">
115+ <a href="#" class="show-all">Show all</a>
116+ </th>
117+ </tr>
118+ <% end %>
119+ <tr<%= ' class="current"' if i == (data['total_versions'] - 4) %>>
120+ <% data["\#{type}_agents"].each do |agent_id, agent| %>
121+ <% version = agent['versions'][i] %>
122+ <% if version %>
123+ <% support = feature['stats'][agent_id][version].split(' ') %>
124+ <% feature['prefix'] = true if support.include?('x') %>
125+ <td class="<%= support_to_css_class(support) %>"><%= version %> <%= support_to_note_indicators(support) %></td>
126+ <% else %>
127+ <td>&nbsp;</td>
128+ <% end %>
129+ <% end %>
130+ </tr>
131+ <% end %>
132+ </table>
133+ <% end %>
134+
135+ <h2>Notes</h2>
136+
137+ <% if feature['notes'].present? %>
138+ <p><%= md_to_html feature['notes'] %></p>
139+ <% end %>
140+
141+ <% if feature['notes_by_num'].present? %>
142+ <ol>
143+ <% feature['notes_by_num'].each do |num, note| %>
144+ <li><p><%= md_to_html note %></p></li>
145+ <% end %>
146+ </ol>
147+ <% end %>
148+
149+ <% if feature['prefix'] %>
150+ <dl>
151+ <dd><sup>*</sup> Partial support with prefix.</dd>
152+ </dl>
153+ <% end %>
154+
155+ <% if feature['bugs'].present? %>
156+ <h2>Bugs</h2>
157+ <ul>
158+ <% feature['bugs'].each do |bug| %>
159+ <li><p><%= md_to_html bug['description'] %></p></li>
160+ <% end %>
161+ </ul>
162+ <% end %>
163+
164+ <% if feature['links'].present? %>
165+ <h2>Resources</h2>
166+ <ul>
167+ <% feature['links'].each do |link| %>
168+ <li><a href="<%= link['url'] %>"><%= link['title'] %></a></li>
169+ <% end %>
170+ </ul>
171+ <% end %>
172+
173+ <div class="_attribution">
174+ <p class="_attribution-p">
175+ Data by caniuse.com<br>
176+ Licensed under the Creative Commons Attribution License v4.0.<br>
177+ <a href="http://caniuse.com/#feat=<%= feature_id %>" class="_attribution-link">http://caniuse.com/#feat=<%= feature_id %></a>
178+ </p>
179+ </div>
180+ HTML
181+ end
182+end
public/icons/docs/support_tables/16.png+0−0

Binary file not shown.

public/icons/docs/support_tables/16@2x.png+0−0

Binary file not shown.

public/icons/docs/support_tables/SOURCE+1−0
@@ -0,0 +1 @@
1+http://www.entypo.com/