13.08.2024 в 01:00

Haskell Diagrams: Мощный инструмент для создания OpenGraph изображений

В этой статье мы будем изучать библиотеки диаграмм Haskell, создавая программу для генерации изображений OpenGraph.

OpenGraph изображения — это важный элемент для улучшения внешнего вида ваших веб-страниц в социальных сетях. Давайте вместе разработаем инструмент, который позволит вам легко создавать привлекательные изображения OpenGraph.

Программа

В нашей работе над программой мы будем использовать пакеты Haskell: diagrams, diagrams-cairo и markdown-unlit.

Сначала нам понадобится импортировать несколько модулей:

import Diagrams.Backend.Cairo
import Diagrams.Prelude
import System.Environment (getArgs)

Теперь укажем точку входа, которая будет отображать изображение OpenGraph размером 1200x630 и расширением .png:

main :: IO ()
main = do
  dir <- head <$> getArgs
  logo <- loadLogo
  render dir "og.png" (og "thenegation.com" "by Vehbi Sinan Tunalioglu" logo)
  where
    render dpath fname = renderCairo (dpath <> "/" <> fname) (mkSizeSpec2D (Just 1200) (Just 630))

Вот как мы будем вести наш пост в блоге:

runhaskell \
  -pgmLmarkdown-unlit \
  content/posts/2024-08-12_haskell-diagrams-og.lhs \
  static/assets/media/posts/haskell-diagrams-og

Давайте загрузим изображение логотипа сайта в значение Diagram B. Масштаб диаграммы установим до 24.

loadLogo :: IO (Diagram B)
loadLogo = do
  (Right img) <- loadImageEmb "./static/android-chrome-512x512.png"
  pure $ scaleUToX 24 $ image img

Давайте создадим функцию для обрезки заданного изображения по кругу. Для этого мы будем использовать функцию clipBy. Поскольку наше квадратное изображение масштабируется до 24, мы используем круг с радиусом 12:

mkAvatar :: Diagram B -> Diagram B
mkAvatar =
  clipBy (circle 12)

Чтобы сделать наше OpenGraph изображение более информативным, добавим под аватаром два текстовых блока: один крупный, другой – мелкий.

Для этого мы будем использовать холст размером 120x63, который пропорционален стандартному размеру OpenGraph изображения (1200x630). И, конечно же, добавим немного красок, используя произвольные цвета, чтобы сделать наше изображение ярким и запоминающимся.

og :: String -> String -> Diagram B -> Diagram B
og txtB txtS img =
  logotype `atop` (rect 120 63 # fc (sRGB24read "#e4e4e7")  # lw none)
  where
    logotype =
      center $ vsep 9
        [ mkAvatar img
        , text txtB # bold # fontSizeL 6 # fc (sRGB24read "#09090b")
        , text txtS # fontSizeL 4.27 # fc (sRGB24read "#18181b")
        ]

Вот так будет выглядеть наш окончательный результат:

Мы успешно создали изображение OpenGraph для веб-сайта!

Источник:

Exit fullscreen mode

Войти на сайт

Haskell Diagrams: Мощный инструмент для создания OpenGraph изображений

Программа

Источник: