Merge pull request #1389 from sneakers-the-rat/badges

Reviewer Badges :)

app/assets/stylesheets/papers.scss

@@ -18,6 +18,53 @@
   }
 }
 
+.container.papers-hero {
+  display: flex;
+  flex-direction: row;
+
+  @media screen and (max-width: 500px){
+    flex-wrap: wrap;
+  }
+}
+
+.badge-container {
+  border: 1px solid #CDD7D6;
+  border-radius: 0.25em;
+  background: #fff;
+  height: fit-content;
+  padding: 1em 1em;
+  font-size: 0.8em;
+  margin-bottom: 0.5rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+
+  @media screen and (max-width: 500px){
+    flex-direction: row;
+    width: 100%;
+    padding: 0.5em 1em;
+
+    button {
+      padding: 0;
+    }
+  }
+
+  img {
+    object-fit: contain;
+  }
+  button {
+    width: 100%;
+    text-wrap: nowrap;
+  }
+}
+
+.popover-body pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
 .tabnav-tab {
   @media screen and (max-width: 500px) {
     text-align: center;

app/controllers/badges_controller.rb

@@ -0,0 +1,55 @@
+# Based on
+# - https://github.com/metabolize/anafanafo/tree/main
+# - https://github.com/badges/shields/blob/master/badge-maker/lib/badge-renderers.js
+class BadgesController < ApplicationController
+
+  PADDING = 5
+  SCALE_UP_FACTOR = 10
+  SCALE_DOWN_FACTOR = 0.1
+
+  COLORS = {
+    gray: "#555",
+    blue: "#007ec6"
+  }
+
+  def reviewed_by
+    n_reviews = Paper.where(":reviewer = ANY (reviewers)", reviewer: params[:reviewer]).count
+    @key = string_item("JOSS Reviews", COLORS[:gray])
+    @value = string_item(n_reviews.to_s, COLORS[:blue], @key[:outer_width])
+    @badge_width = @key[:outer_width] + @value[:outer_width]
+
+    render template: 'badges/badge', locals: {
+      scale_up_factor: SCALE_UP_FACTOR,
+      scale_down_factor: SCALE_DOWN_FACTOR
+    }
+  end
+
+  private
+
+  def string_item(str, color, offset=0)
+    # Object that contains templating information for rendering a string within a badge
+    width = string_width(str)
+    {
+      text_width: width,
+      outer_width: width + PADDING * 2,
+      x: text_x_position(width, offset),
+      text: str,
+      color: color
+    }
+  end
+
+  def string_width(data)
+    data.to_s.codepoints.reduce(0) do |total, point|
+      char_width = point < VERDANA_WIDTHS.length ? VERDANA_WIDTHS[point] : em_width
+      total + char_width * SCALE_DOWN_FACTOR
+    end
+  end
+
+  def text_x_position(width, offset=0)
+    SCALE_UP_FACTOR * (offset + PADDING + width * 0.5)
+  end
+
+  def em_width
+    VERDANA_WIDTHS["m".codepoints[0]]
+  end
+end

app/controllers/papers_controller.rb

@@ -102,6 +102,7 @@ def filter
                   page: params[:page],
                   per_page: 10)
       @term = "reviewed by #{params['reviewer']}"
+      @badge = {type: "reviewer", value: params['reviewer']}
     elsif params['tag']
       @papers = Paper.search(params['tag'], fields: [:tags, :title], order: { accepted_at: :desc },
                   page: params[:page],
@@ -226,7 +227,7 @@ def show
         flash[:notice] = "You need to log in before viewing this paper."
         redirect_to root_path and return
       end
-      
+
       # Redirect to root if not an admin or the submitting author
       # With notice that the paper is not visible
       unless can_see_hidden_paper?(@paper)

app/javascript/custom/papers.js

@@ -37,3 +37,12 @@ $(function() {
     e.preventDefault();
   });
 });
+
+const copyText = (text) => {
+  navigator.clipboard.writeText(text)
+}
+window.copyText = copyText;
+
+$('#badge-copy-button').popover({
+  placement: window.screen.width > 500 ? 'left' : 'bottom'
+})

app/views/badges/badge.svg.erb

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="<%= @badge_width %>" height="20" role="img" aria-label="<%= @key[:text] %>: <%= @value[:text] %>">
+  <title><%= @key[:text] %>: <%= @value[:text] %></title>
+  <linearGradient id="s" x2="0" y2="100%">
+    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <clipPath id="r">
+    <rect width="<%= @badge_width %>" height="20" rx="3" fill="#fff"/>
+  </clipPath>
+  <g clip-path="url(#r)">
+    <rect width="<%= @key[:outer_width] %>" height="20" fill="<%= @key[:color] %>"/>
+    <rect x="<%= @key[:outer_width] %>" width="<%= @value[:outer_width] %>" height="20" fill="<%= @value[:color] %>"/>
+    <rect width="<%= @badge_width %>" height="20" fill="url(#s)"/>
+  </g>
+  <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
+    <text aria-hidden="true" x="<%= @key[:x] %>" y="150" fill="#010101" fill-opacity=".3" transform="scale(<%= scale_down_factor %>)" textLength="<%= @key[:text_width] * scale_up_factor %>"><%= @key[:text] %></text>
+    <text x="<%= @key[:x] %>" y="140" transform="scale(<%= scale_down_factor %>)" fill="#fff" textLength="<%= @key[:text_width] * scale_up_factor %>"><%= @key[:text] %></text>
+    <text aria-hidden="true" x="<%= @value[:x] %>" y="150" fill="#010101" fill-opacity=".3" transform="scale(<%= scale_down_factor %>)" textLength="<%= @value[:text_width] * scale_up_factor %>"><%= @value[:text] %></text>
+    <text x="<%= @value[:x] %>" y="140" transform="scale(.1)" fill="#fff" textLength="<%= @value[:text_width] * scale_up_factor %>"><%= @value[:text] %></text>
+  </g>
+</svg>

app/views/papers/_badge.html.erb

@@ -0,0 +1,22 @@
+<% if badge[:type] == 'reviewer' %>
+  <% badge_url = badges_by_reviewer_url(reviewer: badge[:value]) %>
+  <% badge_markdown = "[![JOSS Reviews](#{badge_url})](#{papers_by_reviewer_url(reviewer: badge[:value])})" %>
+<% else %>
+  <% badge_url = "" %>
+  <% badge_markdown = "" %>
+<% end %>
+<div class="badge-container" id="markdown-badge">
+  <img id="reviewer-badge" src="<%= badge_url %>">
+    <button
+      id="badge-copy-button"
+      class="btn btn-outline-secondary btn-sm"
+      data-toggle="popover"
+      title="Copied!"
+      data-content="<pre><%= badge_markdown %></pre>"
+      data-sanitize="false"
+      data-html="true"
+      onclick="window.copyText('<%= badge_markdown %>')"
+    >
+      Copy Markdown
+    </button>
+</div>

app/views/papers/index.html.erb

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container papers-hero">
   <div class="hero-small">
     <div class="hero-title">
     <% if @filtering %>
@@ -8,6 +8,9 @@
     <% end %>
     </div>
   </div>
+  <% if @badge %>
+    <%= render partial: "badge", locals: { badge: @badge } %>
+  <% end %>
 </div>
 
 <div class="container">

config/routes.rb

@@ -92,6 +92,8 @@
 
   get '/blog' => redirect("http://blog.joss.theoj.org"), as: :blog
 
+  get '/badges/reviewed_by/:reviewer', to: "badges#reviewed_by", format: "svg", as: "badges_by_reviewer"
+
   # API methods
   post '/papers/api_editor_invite', to: 'dispatch#api_editor_invite'
   post '/papers/api_start_review', to: 'dispatch#api_start_review'

db/seeds.rb

@@ -411,7 +411,7 @@
     track: track,
     kind: "paper",
     submission_kind: "new",
-
+    reviewers: ["@fakereviewer1", "@fakereviewer2"],
   )
 
 else