happo 2.3.0 → 2.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 88d89187e77ba6225483b0018803b72cb3226fc3
-  data.tar.gz: 0dad6cf7d66a3df8b2403c78ff881a065b15dacd
+  metadata.gz: 8151e36e534eae38fab096a18a81ae2cb6e61cf0
+  data.tar.gz: f28280aea360ccf7e2a413bb9e83889e404928df
 SHA512:
-  metadata.gz: e377214d9a7d2a1f01cd2b91f5d3b6f89f55c9755f13105b8ac9bf233ec27c690642faf3343e23bdc20b31c7e2e478a0a01660ce140c60dd8d8413c9cc9efd9b
-  data.tar.gz: 5b6ae122c2553cb4e30eee81af44410f76770d4fe7d4d460734e48b33cf95a503661e9ada714c04bcbc455b7284cd462a26605ab5bf45d4d72adc0827d18c48e
+  metadata.gz: 5583155f820c9c67ca92c94f2f88a659f00f7c54c53873c9b370fd85351bacaea54aa729f318ad6794e25e7f2387e39212eaa196611e3ffaee260169ec09ef78
+  data.tar.gz: 8d39502a92d286e08cd85f3013f8419e7601f73c662ba06b99e57dbd57c5c197ded39edfbe40c255ae46f985341e45c4874536ff5bcda35b3188614708bfd909

data/lib/happo.rb

@@ -1,3 +1,4 @@
+require 'json'
 require 'happo/utils'
 require 'happo/uploader'
 require 'happo/version'

data/lib/happo/public/HappoDiffs.jsx

@@ -0,0 +1,91 @@
+const PropTypes = React.PropTypes;
+
+const imageObjectStructure = {
+  description: PropTypes.string.isRequired,
+  viewport: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+function imageSlug(image) {
+  return btoa(image.description +  image.viewport);
+}
+
+function renderImage(image) {
+  return (
+    <div>
+      <h3 id={imageSlug(image)}>
+        <a className='anchored' href={`#${imageSlug(image)}`}>
+          {image.description}
+          {' @ '}
+          {image.viewport}
+        </a>
+      </h3>
+      <img src={image.url} />
+    </div>
+  );
+}
+
+function renderDiffImages(diffImages) {
+  if (!diffImages.length) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h2 id='diffs'>
+        <a className='anchored' href='#diffs'>
+          Diffs ({ diffImages.length })
+        </a>
+      </h2>
+
+      {diffImages.map(renderImage)}
+    </div>
+  );
+}
+
+function renderNewImages(newImages) {
+  if (!newImages.length) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h2 id='new'>
+        <a className='anchored' href='#new'>
+          New examples ({ newImages.length })
+        </a>
+      </h2>
+
+      {newImages.map(renderImage)}
+    </div>
+  );
+}
+
+window.HappoDiffs = React.createClass({
+  propTypes: {
+    pageTitle: PropTypes.string.isRequired,
+    diffImages: PropTypes.arrayOf(imageObjectStructure).isRequired,
+    newImages: PropTypes.arrayOf(imageObjectStructure).isRequired,
+    generatedAt: PropTypes.string.isRequired,
+  },
+
+  render() {
+    return (
+      <div>
+        <header className='header'>
+          <h1 className='header_title'>
+            {this.props.pageTitle}
+          </h1>
+          <div className='header__time'>
+            Generated: {this.props.generatedAt}
+          </div>
+        </header>
+
+        <main className='main'>
+          {renderDiffImages(this.props.diffImages)}
+          {renderNewImages(this.props.newImages)}
+        </main>
+      </div>
+    );
+  }
+});

data/lib/happo/public/happo-styles.css

@@ -38,6 +38,7 @@ body {
   opacity: .2;
   vertical-align: middle;
   width: 24px;
+  margin-left: 5px;
 }
 
 .anchored:hover::after {

data/lib/happo/uploader.rb

@@ -52,6 +52,7 @@ module Happo
       path = File.expand_path(
         File.join(File.dirname(__FILE__), 'views', 'diffs.erb'))
       html.content = ERB.new(File.read(path)).result(binding)
+      html.content_encoding = 'utf-8'
       html.content_type = 'text/html'
       html.save
       html.url

data/lib/happo/utils.rb

@@ -90,22 +90,13 @@ module Happo
       File.read(File.expand_path('../public/happo-styles.css', __FILE__))
     end
 
+    def self.jsx_code
+      File.read(File.expand_path('../public/HappoDiffs.jsx', __FILE__))
+    end
+
     def self.last_result_summary
       YAML.load(File.read(File.join(
         self.config['snapshots_folder'], 'result_summary.yaml')))
     end
-
-    def self.to_inline_slug(string)
-      value = string.gsub(/[^\x00-\x7F]/n, '').to_s
-      value.gsub!(/[']+/, '')
-      value.gsub!(/\W+/, ' ')
-      value.strip!
-      value.tr!(' ', '-')
-      URI.escape(value)
-    end
-
-    def self.image_slug(diff_image)
-      to_inline_slug("#{diff_image[:description]} #{diff_image[:viewport]}")
-    end
   end
 end

data/lib/happo/version.rb

@@ -1,4 +1,4 @@
 # Defines the gem version.
 module Happo
-  VERSION = '2.3.0'
+  VERSION = '2.4.0'
 end

data/lib/happo/views/debug.erb

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8" />
     <title>Happo Debug Tool</title>
 
     <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />

data/lib/happo/views/diffs.erb

@@ -3,6 +3,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8" />
     <title><%= Happo::Utils.page_title(diff_images, new_images) %></title>
 
     <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />
@@ -10,52 +11,29 @@
     <style>
       <%= Happo::Utils.css_styles %>
     </style>
-  </head>
-
-  <body>
-    <header class="header">
-      <h1 class="header_title">
-        <%= Happo::Utils.page_title(diff_images, new_images) %>
-      </h1>
-      <div class="header__time">Generated: <%= Time.now %></div>
-    </header>
-
-    <main class="main">
-      <% if diff_images.count > 0%>
-        <h2 id="diffs">
-          <a class="anchored" href="#diffs">
-            Diffs (<%= diff_images.count %>)
-          </a>
-        </h2>
 
-        <% diff_images.each do |image| %>
-          <h3 id="<%= Happo::Utils.image_slug(image) %>">
-            <a class="anchored" href="#<%= Happo::Utils.image_slug(image) %>">
-              <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
-            </a>
-          </h3>
+    <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
+    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
+    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
 
-          <img src="<%= image[:url] %>">
-        <% end %>
-      <% end %>
-
-      <% if new_images.count > 0%>
-        <h2 id="new">
-          <a class="anchored" href="#new">
-            New examples (<%= new_images.count %>)
-          </a>
-        </h2>
-
-        <% new_images.each do |image| %>
-          <h3 id="<%= Happo::Utils.image_slug(image) %>">
-            <a class="anchored" href="#<%= Happo::Utils.image_slug(image) %>">
-              <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
-            </a>
-          </h3>
+    <script type="text/babel">
+      <%= Happo::Utils.jsx_code %>
+    </script>
+  </head>
 
-          <img src="<%= image[:url] %>">
-        <% end %>
-      <% end %>
-    </main>
+  <body>
+    <div id="react-root"></div>
+
+    <script type="text/babel">
+      ReactDOM.render(
+        <HappoDiffs
+          newImages={<%= new_images.to_json %>}
+          diffImages={<%= diff_images.to_json %>}
+          pageTitle={<%= Happo::Utils.page_title(diff_images, new_images).to_json %>}
+          generatedAt={<%= Time.now.to_s.to_json %>}
+        />,
+        document.getElementById('react-root')
+      );
+    </script>
   </body>
 </html>

data/lib/happo/views/index.erb

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8" />
     <title>Happo</title>
 
     <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: happo
 version: !ruby/object:Gem::Version
-  version: 2.3.0
+  version: 2.4.0
 platform: ruby
 authors:
 - Henric Trotzig
@@ -145,6 +145,7 @@ files:
 - bin/happo
 - lib/happo.rb
 - lib/happo/logger.rb
+- lib/happo/public/HappoDiffs.jsx
 - lib/happo/public/favicon.ico
 - lib/happo/public/happo-runner.js
 - lib/happo/public/happo-styles.css