Commit 2ee47bf8 authored by Colin Shea's avatar Colin Shea

Reviews! Ratings!

- Use Onebox to embed a URL at the beginning of the blog post.
- If there is a rating included in a post, append it.

Got to explore using CSS Grid. It's a bit hard, but I don't understand
everything just yet.
parent 53365793
......@@ -18,3 +18,4 @@ gem 'middleman-pry'
gem 'geo_pattern'
gem 'wkhtmltopdf-heroku', require: false
gem 'onebox'
......@@ -11,6 +11,7 @@ $color_palette = [ "#00c853", "#00e676", "#1b5e20", "#2e7d32", "#33691e",
require_relative 'lib/helpers/resume.rb'
require_relative 'lib/helpers/blog.rb'
require_relative 'lib/helpers/reviews.rb'
# Dumb hacks are dumb. Since the blog posts don't include '.html.' in the file
# name (nor do I want them to), Middleman defaults to showing them as plain
......@@ -21,6 +22,7 @@ require_relative 'lib/helpers/blog.rb'
helpers do
include EvaryontsHelpers::Blog
include EvaryontsHelpers::Resume
include EvaryontsHelpers::Reviews
activate :blog do |blog|
require 'onebox'
module EvaryontsHelpers
module Reviews
def onebox(article)
"<!-- No 'onebox:' specified in frontmatter -->"
def review_rating(article)
return "<!-- no rating given -->" unless
max_rating = 5
rating =
unless (0..5).include? rating
raise "invalid review score, stick to 0 through 5 in post #{article.title}"
# Don't show a trailing '.0' for whole-number ratings
if rating - rating.floor == 0
rating = rating.to_i
star_count = rating.floor
half_star_count = rating == star_count ? 0 : 1
empty_star_count = max_rating - star_count - half_star_count
# ☆ ★
# eventually fonts will support the recently approved character '2BDA;STAR WITH LEFT HALF BLACK'.
# Until then, I'm using Font Awesome.
<p class="star-ratings" data-rating="#{rating}" data-rating-max="#{max_rating}" aria-label="Rated #{rating} stars out of #{max_rating}">
#{'<i class="fa fa-star" aria-hidden="true"></i>'*star_count}
#{'<i class="fa fa-star-half-o" aria-hidden="true"></i>'*half_star_count}
#{'<i class="fa fa-star-o" aria-hidden="true"></i>'*empty_star_count}
<span class="value">#{rating}/5</span>
......@@ -159,3 +159,38 @@ ul.more-me-online {
.hidden {
display: none;
.onebox {
border: 2px solid $green;
margin: 1rem;
padding: 0.2rem;
border-radius: 5px;
.onebox-body {
display: grid;
grid-template-columns: 6em 1fr;
grid-template-rows: 2em 1fr;
"img title"
"img content";
grid-gap: 0 0;
grid-column-gap: 20px;
.onebox-body > img { grid-area: img; margin-bottom: 0; justify-self: center; }
.onebox-body > h3 { grid-area: title; margin: 0; }
.onebox-body > p { grid-area: content; }
aside.onebox:last-child, aside.onebox header.source {
display: none;
.star-ratings {
.value {
font-weight: bold;
i {
color: #f4d214;
......@@ -12,7 +12,9 @@
<%= onebox(article) %>
<%= article.body %>
<%= review_rating(article) %>
<!-- navigation links to chronologically related posts -->
......@@ -19,7 +19,8 @@ moments between Reynold's and Jackson's characters. They have a wonderful
chemistry that isn't forced. The love story between Elodie Yung and Reynold's
character is less great. The sub-plot is a smart diversion from the tropes, and
I appreciate that the male character is the one that ultimately admits
culpability, but man she seems to forgive a bit too easily.
culpability, but man she seems to forgive a bit too easily. Thankfully it isn't
all bad, the movie does pass the Bechdel test.
That being said, it's not the focus of the movie. It's a driving force, no
doubt, but the movie is centered on Reynolds and Jackson. They play well off
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment