An Interest In:
Web News this Week
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
How to generate OG links preview like Dev.to (for free) with Rails 7
Hey hey heyyyyyy
Quick article on how to have beauty link previews, just like Dev.to does
You're gonna get something like this:
Yup, was being literal with the "like dev.to"
I've build something similar for my new project workby.io, here's how i've build it...
Almost every guide that i found was using htmlcsstoimage.com, in fact, dev.to uses it. It's pretty popular, and efficient, BUT, i don't want to pay $14 bucks for each 1k images
So, i'm going to use Grover: A Ruby gem to transform HTML into PDFs, PNGs or JPEGs using Google Puppeteer and Chromium.
If you want to build this with, let's say, Node.js, you can also follow me. Puppeteer is popular and easy to use.
Long story short: We're going to build a HTML view and take an screenshot of it.
You can create a blank Rails project, or just add additional functionality to your current app.
Setup
Install Grover gem withbundle add grover
And the dependency of Grover, Puppeteer, with:yarn add puppeteer
Then create an empty controller where you can respond with different link preview templates:rails g controller og-imager dev_to
In the dev_to
action, let's call Grover and let him do the magicapp/controllers/og_imager_controller.rb
class OgImagerController < ApplicationController # GET /og_imager/dev_to # @param {string} title # @param {string} avatar # @param {string} username # @param {string} timestamp # @param {array} logos # @returns image/png def dev_to # Get params and set to variable # TODO: Retrieve your object instead :p @title = params[:title] @avatar = params[:avatar] @username = params[:username] @timestamp = params[:timestamp] @logos = params[:logos] # Grover.new accepts a URL or inline HTML and optional parameters for Puppeteer grover = Grover.new( render_to_string ) # Get a screenshot png = grover.to_png # Render image send_data(png, type: 'image/png', disposition: 'inline') endend
Here's our view, just simple HTML/CSSapp/views/og_imager/dev_to.html.erb
<div class="container"> <div class="card"> <h1 class="title"> <%= @title %> </h1> <div class="details"> <div class="user"> <img src="<%= @avatar %>" class="avatar"> <p class="username"> <%= @username %> - <%= @timestamp %> </p> </div> <div class="logos"> <% @logos.each do |logo| %> <img src="<%= logo %>" class="logo"> <% end %> </div> </div> </div></div><style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); *{ font-family: 'Roboto', sans-serif; color: #cd685f; } .container{ width: 1128px; height: 600px; display: flex; } .card{ display: flex; justify-content: space-between; flex-direction: column; margin: 2.8rem 4rem 4rem 2.8rem; border: 3px solid #c56b61; border-radius: 25px 25px 0px 0px; box-shadow: 7px 10px 0px 1px #c56b61; padding: 3.8rem 1.8rem 1.8rem 1.8rem; } .title{ margin: 0px; font-weight: 500; font-size: 5rem; line-height: 80px; } .details{ display: flex; justify-content: space-between; } .user{ display: flex; align-items: center; } .avatar{ border: 3px solid #c56b61; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } .username{ margin: 0; font-size: 2.5rem; } .logos{ display: flex; justify-content: space-between; } .logo{ width: 60px; height: 60px; margin-left: 20px; transform: rotate(5deg); }</style>
And finally, create an initializer to set our Browser viewport (final image size).
initializers/grover.rb
Grover.configure do |config| config.options = { viewport: { width: 1128, height: 600 }, }end
If you have created a blank project, and want to use this as a micro-service, here's a guide on how to deploy this thing to Heroku.
- Create the app on your Heroku account (T'm assuming you already have the cli installed):
heroku create your_app_name
- Warn Heroku of our JS library (Puppeteer):
heroku buildpacks:add heroku/nodejs --index=1
- And also help him to setup Puppeteer dependencies :
heroku buildpacks:add jontewks/puppeteer --index=2
- Tell Grover to run Puppeteer in the "no-sandbox":
heroku config:set GROVER_NO_SANDBOX=true
To make use of this image on the link preview, you will need The Open Graph protocol. Just simple meta tags that browsers will look for.
Meta tags are always on
so,app/views/layouts/application.html.erb
<%= yield(:head) %>
And then ask ERB to fill previous block with
<%= content_for :head do %> <meta property="og:title" content="<%= @article.title %>"> <meta property="og:image" content="<%= article_link_preview(@article) %>"> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="1128"> <meta property="og:image:height" content="600"> <meta name="twitter:card" content="summary_large_image" /><% end %>
at your details view. Like: /articles/:id
The twitter:card
thing it's because they are more fancy on link previews, you can read more about that here
The previous article_link_preview
method it's a simple helper that generates the URL that we are looking for.
app/helpers/articles_helper.rb
def article_link_preview article uri = URI.parse('https://your_app_name.herokuapp.com/ogimage') uri.query = URI.encode_www_form( title: article.title, 'images[]': article.tags.collect(&:image), timestamp: article.created_at.to_formatted_s(:short), ... ) uri.to_send
You will get something like this:https://your_app_name.herokuapp.com/og_imager/dev_to?title=Real%20Time%20Notification%20System%20with%20Hotwire,%20in%20Rails%207&avatar=https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/369241/a0111bcb-a046-4398-98cd-f4cf0e2f8d0d.png&username=Matias%20Carpintini×tamp=13%20April&logos[]=https://img.icons8.com/office/80/000000/ruby-gemstone.png&logos[]=https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png
Here's the repo of the whole thing.
Original Link: https://dev.to/matiascarpintini/how-to-generate-og-links-preview-like-devto-for-free-with-rails-7-57b2
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To