mirror of
https://github.com/freeCodeCamp/devdocs
synced 2024-09-29 05:36:48 +02:00
Add caniuse.com support tables
This commit is contained in:
Thibaut Courouble
parent
eadda8fc42
commit
f7a381c534
12 changed files with 268 additions and 1 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 109 KiB |
|
|
@ -1,5 +1,8 @@
|
|||
[
|
||||
[
|
||||
"2016-04-10",
|
||||
"New documentation: <a href=\"/browser_support_tables/\">Support tables (caniuse.com)</a>"
|
||||
], [
|
||||
"2016-03-27",
|
||||
"New documentation: <a href=\"/typescript/\">TypeScript</a>"
|
||||
], [
|
||||
|
|
|
|||
14
assets/javascripts/views/pages/support_tables.coffee
Normal file
14
assets/javascripts/views/pages/support_tables.coffee
Normal file
|
|
@ -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
|
||||
|
|
@ -76,6 +76,7 @@
|
|||
'pages/sphinx',
|
||||
'pages/sphinx_simple',
|
||||
'pages/tcl_tk',
|
||||
'pages/support_tables',
|
||||
'pages/tensorflow',
|
||||
'pages/underscore',
|
||||
'pages/vagrant',
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
'pages/socketio',
|
||||
'pages/sphinx',
|
||||
'pages/sphinx_simple',
|
||||
'pages/support_tables',
|
||||
'pages/tcl_tk',
|
||||
'pages/tensorflow',
|
||||
'pages/underscore',
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
64
assets/stylesheets/pages/_support_tables.scss
Normal file
64
assets/stylesheets/pages/_support_tables.scss
Normal file
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
182
lib/docs/scrapers/support_tables.rb
Normal file
182
lib/docs/scrapers/support_tables.rb
Normal file
|
|
@ -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{`(.*?)`}, '<code>\1</code>'
|
||||
str.gsub! %r{\n\s*\n}, '</p><p>'
|
||||
str.gsub! "\n", '<br>'
|
||||
str.gsub! %r{\[(.+?)\]\((.+?)\)}, '<a href="\2">\1</a>'
|
||||
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')
|
||||
"<sup>(#{notes.join(',')})</sup>" if notes.present?
|
||||
end
|
||||
|
||||
INDEX_PAGE_ERB = <<-HTML.strip_heredoc
|
||||
<h1>Browser support tables</h1>
|
||||
HTML
|
||||
|
||||
PAGE_ERB = <<-HTML.strip_heredoc
|
||||
<h1><%= feature['title'] %></h1>
|
||||
|
||||
<p><%= md_to_html feature['description'] %></p>
|
||||
|
||||
<table>
|
||||
<% if feature['spec'].present? %>
|
||||
<tr>
|
||||
<th>Spec</th>
|
||||
<td><a href="<%= feature['spec'] %>"><%= feature['spec'] %></a></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
<% if feature['status'].present? %>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td><%= data['statuses'][feature['status']] %></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</table>
|
||||
|
||||
<% ['desktop', 'mobile'].each do |type| %>
|
||||
<table class="stats">
|
||||
<tr>
|
||||
<% data["\#{type}_agents"].each do |agent_id, agent| %>
|
||||
<th><%= agent['browser'] %></th>
|
||||
<% end %>
|
||||
</tr>
|
||||
<% (0...(data['total_versions'])).reverse_each do |i| %>
|
||||
<% next if data["\#{type}_agents"].none? { |_, agent| agent['versions'][i] } %>
|
||||
<% if i == (data['total_versions'] - 8) %>
|
||||
<tr class="show-all">
|
||||
<th class="show-all" colspan="<%= data["\#{type}_agents"].length %>">
|
||||
<a href="#" class="show-all">Show all</a>
|
||||
</th>
|
||||
</tr>
|
||||
<% end %>
|
||||
<tr<%= ' class="current"' if i == (data['total_versions'] - 4) %>>
|
||||
<% 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') %>
|
||||
<td class="<%= support_to_css_class(support) %>"><%= version %> <%= support_to_note_indicators(support) %></td>
|
||||
<% else %>
|
||||
<td> </td>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</tr>
|
||||
<% end %>
|
||||
</table>
|
||||
<% end %>
|
||||
|
||||
<h2>Notes</h2>
|
||||
|
||||
<% if feature['notes'].present? %>
|
||||
<p><%= md_to_html feature['notes'] %></p>
|
||||
<% end %>
|
||||
|
||||
<% if feature['notes_by_num'].present? %>
|
||||
<ol>
|
||||
<% feature['notes_by_num'].each do |num, note| %>
|
||||
<li><p><%= md_to_html note %></p></li>
|
||||
<% end %>
|
||||
</ol>
|
||||
<% end %>
|
||||
|
||||
<% if feature['prefix'] %>
|
||||
<dl>
|
||||
<dd><sup>*</sup> Partial support with prefix.</dd>
|
||||
</dl>
|
||||
<% end %>
|
||||
|
||||
<% if feature['bugs'].present? %>
|
||||
<h2>Bugs</h2>
|
||||
<ul>
|
||||
<% feature['bugs'].each do |bug| %>
|
||||
<li><p><%= md_to_html bug['description'] %></p></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
|
||||
<% if feature['links'].present? %>
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<% feature['links'].each do |link| %>
|
||||
<li><a href="<%= link['url'] %>"><%= link['title'] %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
|
||||
<div class="_attribution">
|
||||
<p class="_attribution-p">
|
||||
Data by caniuse.com<br>
|
||||
Licensed under the Creative Commons Attribution License v4.0.<br>
|
||||
<a href="http://caniuse.com/#feat=<%= feature_id %>" class="_attribution-link">http://caniuse.com/#feat=<%= feature_id %></a>
|
||||
</p>
|
||||
</div>
|
||||
HTML
|
||||
end
|
||||
end
|
||||
BIN
public/icons/docs/support_tables/16.png
Normal file
BIN
public/icons/docs/support_tables/16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 747 B |
BIN
public/icons/docs/support_tables/16@2x.png
Normal file
BIN
public/icons/docs/support_tables/16@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
1
public/icons/docs/support_tables/SOURCE
Normal file
1
public/icons/docs/support_tables/SOURCE
Normal file
|
|
@ -0,0 +1 @@
|
|||
http://www.entypo.com/
|
||||
Loading…
Reference in a new issue