-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add opengraph preview for audit post
Signed-off-by: Samuel Giddins <[email protected]>
- Loading branch information
Showing
7 changed files
with
185 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
|
|
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |