Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add opengraph preview for audit post #211

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add opengraph preview for audit post #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ ruby file: ".ruby-version"
gem "base64", "~> 0.2.0"
gem "bigdecimal", "~> 3.1"
gem "csv", "~> 3.3"
gem "grover", "~> 1.2"
gem "jekyll", "~> 4.0"
gem "puma", "~> 6.4"
gem "rack-jekyll", "~> 0.5.0", github: "adaoraul/rack-jekyll"
Expand Down
12 changes: 12 additions & 0 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,12 @@ GEM
google-protobuf (4.27.5)
bigdecimal
rake (>= 13)
grover (1.2.1)
nokogiri (~> 1)
http_parser.rb (0.8.0)
i18n (1.14.4)
concurrent-ruby (~> 1.0)
imgkit (1.6.3)
jekyll (4.3.3)
addressable (~> 2.4)
colorator (~> 1.0)
Expand Down Expand Up @@ -58,12 +61,17 @@ GEM
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
mini_portile2 (2.8.8)
nio4r (2.7.3)
nokogiri (1.17.1)
mini_portile2 (~> 2.8.2)
racc (~> 1.4)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (5.0.5)
puma (6.4.3)
nio4r (~> 2.0)
racc (1.8.1)
rack (3.0.10)
rake (13.2.0)
rb-fsevent (0.11.2)
Expand All @@ -84,6 +92,7 @@ GEM
unicode-display_width (>= 1.1.1, < 3)
unicode-display_width (2.5.0)
webrick (1.8.2)
wkhtmltoimage-binary (0.12.5)

PLATFORMS
ruby
Expand All @@ -92,11 +101,14 @@ DEPENDENCIES
base64 (~> 0.2.0)
bigdecimal (~> 3.1)
csv (~> 3.3)
grover (~> 1.2)
imgkit (~> 1.6)
jekyll (~> 4.0)
puma (~> 6.4)
rack-jekyll (~> 0.5.0)!
rake (~> 13.0)
sass (~> 3.7)
wkhtmltoimage-binary (~> 0.12.5)

RUBY VERSION
ruby 3.3.0p0
Expand Down
10 changes: 10 additions & 0 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,18 @@
<script type="text/javascript" src="/javascripts/mobile-nav.js"></script>
<script type="text/javascript" src="/javascripts/application.js"></script>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
<meta property="og:site_name" content="RubyGems Blog">
<meta property="twitter:domain" content="blog.rubygems.org">
{% if page.og_image %}
<meta property="og:image" content="{{ page.og_image }}">
{% elsif page.auto_preview %}
<meta property="og:image" content="{{ site.url | absolute_url }}/images/previews/{{ page.slug }}.png">
{% endif %}
{% if page.layout == "post" %}
<meta property="og:title" content="{{ page.title }}">
<meta property="og:type" content="article">
<meta property="og:url" content="{{ page.url | absolute_url }}">
<meta property="og:description" content="{{ page.excerpt | strip_html }}">
{% endif %}
<!--[if IE 8]>
<script src="/assets/html5shiv.js"></script>
Expand Down
95 changes: 95 additions & 0 deletions _plugins/preview_image.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# frozen_string_literal: true
require 'fileutils'
require 'grover'

Grover.configure do |config|
config.options = {
viewport: {
width: 1200,
height: 630,
deviceScaleFactor: 2
},
prefer_css_page_size: true,
emulate_media: 'screen',
bypass_csp: true,
wait_until: 'domcontentloaded',
full_page: true,
margin: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
captureBeyondViewport: false,
}
end

module Previews
class Generator < Jekyll::Generator
safe true

def generate(site)
# Loop through all the posts
site.posts.docs.each do |post|
next unless post.data['auto_preview']
slug = post.data['slug']
tmp_img = "/tmp/#{slug}.png"
src_img = "./images/previews/#{slug}.png"

# Skip if there is already an existing image.
# To regenerate a preview image, simply delete the image in the destination folder
next if File.file?(src_img)
puts "\n Creating preview: #{slug}.png"

# HTML for generating a @2x image of 1200x630 image at 100 quality
# Setting the charset is helpful when you have accents in your posts title
html = <<~HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8' />
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap" rel="stylesheet">
<style>
#{File.read('./stylesheets/preview.css')}
</style>
</head>
<body>
<div class='top'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" class="logo">
<g fill="#e9573f">
<path d="M68.8 69.9l-.1-.1L46.5 92l53.9 53.8 22.2-22.1L154.3 92l-22.2-22.2v-.1H68.7"/>
<path d="M100.2 10.6l-78.5 45v90l78.5 45 78.5-45v-90l-78.5-45zM163.7 137l-63.5 36.6L36.7 137V64l63.5-36.6L163.7 64v73z"/>
</g>
</svg>
<h2>#{post.data['title']}</h2>
</div>
<div class='excerpt'>
#{post.data['excerpt']}
</div>
</body>
</html>
HTML

Grover.new(html,
format: 'png',
width: 1200,
height: 630,
zoom: 2,
margin: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
full_page: false,
capture_beyond_viewport: false
).to_png.then do |png|
File.write(src_img, png)
end

# Optimize to reduce the size to about a third
system("pngquant", src_img, "-o", src_img, "-f", exception: true)
end
end
end
end
1 change: 1 addition & 0 deletions _posts/2024-12-11-security-audit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: RubyGems.org Completes First Security Audit With Trail of Bits
layout: post
author: Rhiannon Payne
author_email: [email protected]
auto_preview: true
---

At Ruby Central, ensuring the security of RubyGems.org—the central hub for Ruby packages—is one of our top priorities. With over 184 billion downloads, RubyGems.org is crucial to the Ruby ecosystem, supporting developers, businesses, and open source projects worldwide.
Expand Down
Binary file added images/previews/security-audit.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 66 additions & 0 deletions stylesheets/preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
html {
width: 1200px;
height: 630px;
}

p {
margin: 0;
}

body {
background-color: rgb(251, 251, 251);
font-family: "Titillium Web", sans-serif;
font-weight: 100;
font-size: 46px;
color: #141c22;
text-align: center;
padding: 64px;
margin: 0;

display: flex;
flex-direction: column;
justify-content: space-around;
box-sizing: border-box;
width: 100%;
height: 100%;
}

h2 {
font-weight: 700;
font-size: 4rem;
align-self: center;
flex-shrink: 1;
text-align: end;
line-height: 1.25;
}

.excerpt {
line-height: 1.25;
flex: 1;
text-align: initial;
font-size: 2rem;
vertical-align: middle;

display: flex;
flex-direction: column;
justify-content: center;
}

.logo {
display: inline-block;
color: #e9573f;
flex: 1 0 300px;
aspect-ratio: 1/1;
height: auto;
}

.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-shrink: 1;
text-wrap: balance;
width: 100%;
gap: 1rem;
}
Loading