Генерация модных превью ссылок с помощью Rails 7

Эй, эй, эй! Вот краткая статья о том, как сделать предварительный просмотр ссылок красоты, как это делает Dev.to.

Вы получите что-то вроде этого:

Да, это было буквально с "like dev.to" 😛 Я создал что-то подобное для своего нового проекта workby.io, и вот как я это сделал...

Почти каждое руководство, которое я нашел, использовало htmlcsstoimage.com, на самом деле его использует dev.to. Это довольно популярно и эффективно, НО я не хочу платить 14 баксов за каждую 1k изображения 😂🐁

Итак, я собираюсь использовать Grover: ruby ​​gem для преобразования HTML в PDF, PNG или JPEG с помощью Google Puppeteer и Chromium.

Если вы хотите создать это, скажем, на Node.js, вы также можете подписаться на меня. Puppeteer популярен и прост в использовании.

Короче говоря: мы создадим HTML-представление и сделаем его снимок экрана.

Вы можете создать пустой проект Rails или просто добавить дополнительные функции в ваше текущее приложение.

Настраивать

Установите гем Гровера с помощью

связать добавить гровер

И зависимость Гровера, Кукольника, с:

пряжа добавить кукольника

Затем создайте пустой контроллер, в котором вы можете отвечать различными шаблонами предварительного просмотра ссылок:

контроллер rails g og-imager dev_to

В действии dev_to позвоним Гроуверу и позволим ему творить чудеса.

приложение/контроллеры/og_imager_controller.rb

``рубин

класс OgImagerController < ApplicationController

ПОЛУЧИТЬ /og_imager/dev_to

@param {строка} заголовок

@param {string} аватар

@param {строка} имя пользователя

@param {string} метка времени

@param {массив} логотипы

@возвращает изображение/png

защита dev_to

Получить параметры и установить переменную

TODO: Вместо этого извлеките свой объект :p

@название = параметры[:название]

@аватар = параметры[:аватар]

@имя_пользователя = параметры[:имя_пользователя]

@timestamp = параметры[:timestamp]

@логотипы = параметры[:логотипы]

Grover.new принимает URL-адрес или встроенный HTML-код и дополнительные параметры для Puppeteer.

Гровер = Гровер.новый(

render_to_string

Получить скриншот

png = гровер.to_png

Рендеринг изображения

send_data(png, тип: 'image/png', расположение: 'встроенный')

конец

конец

Вот наше представление, просто HTML/CSS

app/views/og_imager/dev_to.html.erb

```html

<стиль>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

семейство шрифтов: «Roboto», без засечек;

цвет: #cd685f;

.контейнер{

ширина: 1128 пикселей;

высота: 600 пикселей;

дисплей: гибкий;

.карта{

дисплей: гибкий;

выравнивание содержимого: пробел между;

flex-направление: столбец;

поле: 2,8 бэр 4 бэр 4 бэр 2,8 бэр;

граница: 3 пикселя сплошная #c56b61;

радиус границы: 25px 25px 0px 0px;

box-shadow: 7px 10px 0px 1px #c56b61;

набивка: 3,8 бэр 1,8 бэр 1,8 бэр 1,8 бэр;

.заглавие{

поле: 0px;

вес шрифта: 500;

размер шрифта: 5rem;

высота строки: 80 пикселей;

.Детали{

дисплей: гибкий;

выравнивание содержимого: пробел между;

.пользователь{

дисплей: гибкий;

выравнивание элементов: по центру;

.аватар{

граница: 3 пикселя сплошная #c56b61;

ширина: 50 пикселей;

высота: 50 пикселей;

радиус границы: 50%;

поле справа: 10px;

.имя пользователя{

маржа: 0;

размер шрифта: 2.5rem;

.лого{

дисплей: гибкий;

выравнивание содержимого: пробел между;

.лого{

ширина: 60 ​​пикселей;

высота: 60 ​​пикселей;

поле слева: 20px;

преобразование: поворот (5 градусов);

И, наконец, создайте инициализатор, чтобы установить область просмотра нашего браузера (окончательный размер изображения).

инициализаторы/grover.rb

``рубин

Grover.configure сделать |config|

config.options = {

область просмотра: {

ширина: 1128,

высота: 600

конец

Если вы создали пустой проект и хотите использовать его в качестве микросервиса, вот руководство о том, как развернуть эту штуку на Heroku.

1. Создайте приложение в своей учетной записи Heroku (я предполагаю, что у вас уже установлен cli): heroku create your_app_name

1. Предупредите Heroku о нашей библиотеке JS (Puppeteer): heroku buildpacks:add heroku/nodejs --index=1

1. А также помогите ему настроить зависимости Puppeteer 😛: heroku buildpacks:add jontewks/puppeteer --index=2

1. Скажите Гроверу запустить Puppeteer в «без-песочнице»: heroku config:set GROVER_NO_SANDBOX=true

Чтобы использовать это изображение в предварительном просмотре ссылки, вам понадобится [Протокол Open Graph] (https://ogp.me/). Просто простые метатеги, которые будут искать браузеры.

Метатеги всегда находятся в , поэтому

приложение/представления/макеты/application.html.erb

```html

<%= выход(:головка)%>

А затем попросите ERB заполнить предыдущий блок

```html

<%= content_for :head do %>

<meta property="og:title" content="<%= @article.title %>">

<meta property="og:image" content="<%= article_link_preview(@article) %>">

<% конец%>

при просмотре подробностей. Например: /статьи/:id

Что такое twitter:card, так это то, что они лучше подходят для предварительного просмотра ссылок, вы можете узнать больше об этом здесь

Предыдущий метод article_link_preview — это простой помощник, который генерирует URL, который мы ищем.

приложение/помощники/articles_helper.rb

``рубин

def article_link_preview статья

uri = URI.parse('https://имя_вашего_приложения.herokuapp.com/ogimage')

uri.query = URI.encode_www_form(

название: статья.название,

'изображения []': article.tags.collect(&:изображение),

отметка времени: article.created_at.to_formatted_s(:short),

uri.to_s

конец

Вы получите что-то вроде этого:

https://your_app_name.herokuapp.com/og_image/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&timestamp=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

Вот [репозиторий] (https://github.com/matias-carpintini/og-imager) всего этого.

Эта статья была впервые опубликована [здесь].