Add template for a question

producthunt · Mar 20, 2017 · d20fad1 · d20fad1
1 parent af07d76
commit d20fad1
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 1 deletion.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -137,5 +137,8 @@ DEPENDENCIES
   sinatra-initializers
   wkhtmltoimage-binary
 
+RUBY VERSION
+   ruby 2.2.4p230
+
 BUNDLED WITH
-   1.13.6
+   1.14.6
diff --git a/app/css/question.css b/app/css/question.css
@@ -0,0 +1,113 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+
+body {
+  font-family: 'Roboto';
+  font-size: 18px;
+  font-weight: 300;
+  margin: 0px;
+  width: 510px;
+}
+
+a {
+  color: #da552f;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+b {
+  font-weight: 400;
+}
+
+h2 {
+  font-size: 20px;
+  font-family: 'Roboto';
+  font-weight: 300;
+  margin: 0px;
+}
+
+.question {
+  width: 500px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  background-color: #ffffff;
+}
+
+.question--footer {
+  height: 50px;
+  padding-top: 5px;
+  margin: 0px;
+  border-top: solid 1px #e7e7e7;
+}
+
+.question--footer--logo {
+  margin-top: 5px;
+  margin-right: 5px;
+  float: right;
+}
+
+.highlight {
+  background-color: #EF7F5F;
+}
+
+.question--content {
+  font-family: 'Roboto';
+  font-size: 36px;
+  font-weight: 700;
+  margin: 0px;
+  padding-bottom: 0px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 0px;
+}
+
+.question--footer--user-name {
+  font-size: 24px;
+  display: inline-block;
+  margin-top: 10px;
+  margin-left: 5px;
+}
+
+.question--footer--avatar {
+  float: left;
+  display: inline-block;
+  margin-top: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.question--footer--avatar img {
+  border-radius: 50%;
+  float: left;
+}
diff --git a/app/image_templates/question.rb b/app/image_templates/question.rb
@@ -0,0 +1,28 @@
+require 'app/emoji_helper'
+
+module ImageTemplates
+  class Question < Base
+    def render_options
+      @options[:name] = EmojiHelper.emojify(@options[:name])
+      @options[:content] = EmojiHelper.emojify(@options[:content])
+
+      super
+    end
+
+    def allowed_options
+      %w(content name user_id min_height)
+    end
+
+    def erb_template
+      'app/views/question.erb'
+    end
+
+    def css_stylesheet
+      'app/css/question.css'
+    end
+
+    def image_width
+      450
+    end
+  end
+end
diff --git a/app/views/question.erb b/app/views/question.erb
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <div class="question" style="min-height: <%= options[:min_height] || 75 %>px">
+      <div class="question--content">
+        <p>
+          <%= options[:content] %>
+        </p>
+      </div>
+      <div class="question--footer">
+        <div class="question--footer--avatar">
+          <img width=40 height=40 src="https://ph-avatars.imgix.net/<%= options[:user_id] %>/original?auto=format&fit=crop&crop=faces&w=80&h=80" />
+        </div>
+        <div class="question--footer--user-name">
+          <h2><%= options[:name] %></h2>
+        </div>
+        <div class="question--footer--logo">
+          <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20" fill="#DA552F"></path><path d="M22.667 20H17v-6h5.667c1.656 0 3 1.343 3 3s-1.344 3-3 3m0-10H13v20h4v-6h5.667c3.866 0 7-3.134 7-7s-3.134-7-7-7" fill="#FFF"></path></g></svg>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/spec/image_templates/question_spec.rb b/spec/image_templates/question_spec.rb
@@ -0,0 +1,42 @@
+require 'spec_helper'
+require 'image_templates/shared_examples'
+
+RSpec.describe ImageTemplates::Question do
+  default_options = { 'user_id' => '787',
+                      'name' => 'William Shakespurr',
+                      'content' => 'Meow' }
+
+  let(:image_template) { described_class.new(default_options) }
+
+  describe '#to_html' do
+    it 'renders the name' do
+      expect(image_template.to_html).to include default_options['name']
+    end
+
+    it 'renders the content' do
+      expect(image_template.to_html).to include default_options['content']
+    end
+
+    it 'sets a default minimum height' do
+      expect(image_template.to_html).to include 'min-height: 75px'
+    end
+
+    it 'sets min-height if included in options' do
+      default_options['min_height'] = '400'
+      expect(image_template.to_html).to include 'min-height: 400px'
+    end
+  end
+
+  describe '#render_options' do
+    it 'emojifies the name & content' do
+      allow(EmojiHelper).to receive(:emojify).and_call_original
+
+      image_template.render_options
+
+      expect(EmojiHelper).to have_received(:emojify).with(default_options['name'])
+      expect(EmojiHelper).to have_received(:emojify).with(default_options['content'])
+    end
+  end
+
+  it_behaves_like 'an ImageTemplate', default_options
+end