OpenGraph bad magic


Намагаюся зробити одну дуже збочену фігню́. Так, поди́вимось…

Я рік тому зробив мінімальну підтримку OpenGraph. Відто́ді всі пости мають якусь заставку «за замо́вчанням». Це добре, але мало.

В деяких постах я руками вказую окрему картинку, і це зазвичай непогано. Це буває в постах, де вже і так є якісь зображення. Наприклад, ось тут є знімок екрану, і я в тому пості́ використовую для заставки OpenGraph зображення, згенеро́ване зі знімку екрану (відмасштабо́ване і обрі́зане до стандартного розміру 1200×630). Це все трохи незручно, але воно того варте.

Але що робити для пості́в без картинок? Іноді хочеться щось утну́ти.

Хочеться написати у front matter поста якусь фігню́, типу такого:

opengraph_generator:
  template: clickbait01.svg
  label_row1: Погана магія
  label_row2: OpenGraph
  key_color: ff0

…і щоб далі Jekyll та Makefile та мої скрипти магічним чином з шаблона і цих змінних створили файл, скажімо, opengraph/_svg/2023-11-28-opengraph-bad-magic.svg (далі вже просто). Ви ж в курсі, шаблони ж не тільки для HTML? Ними можна генерувати будь-що текстове — RSS, JSON, можна і SVG.

Але я поки не придумав, як би це зробити. Зокрема, велике западло́ у тому, що все що робе Jekyll потрапляє у вихідний підката́лог _site, а це зовсім не те що треба.

Оновлення від 30 листопада: наче щось придумав!

Три різних Jekyll’а

Це серйозне збочення, але я щось придумав.

Так от. У мене є нормальний _config.yml. З ним все добре, нічого не міняється, він використовується для збірки сайту командою jekyll build і саме з ним працюватиме GitHub Pages.

А додатково є два інших конфігураційних файли Jekyll’а, _og_prepare.yml та _og_generate.yml для двоета́пної генерації SVG. Це тепер робиться командою make badmagic.

Етап 1 з 2: підготовка

Перетво́рюємо Markdown в Markdown!

На цьому етапі з усіх пості́в сайту створюються відповідні їм вихідні файли у opengraph/_tmp.

При цьому відтворюється іменування джерельних файлів Jekyll’а. Зокрема, з поточної сторінки генерується файл з іменем /opengraph/_tmp/2023-11-28-opengraph-bad-magic.md з отаким front matter:

permalink: '2023-11-28-opengraph-bad-magic.svg'
layout: og_clickbait01.svg
label_row1: Погана магія
label_row2: OpenGraph
key_color: ff0

Секції з контентом немає, тільки front matter. Нам цього цілком і повністю має вистачити, щоб згенерувати SVG на наступному етапі.

Для інших сторінок (тобто тих, у яких немає opengraph_generator) генерується якась тупа заглушка.

Етап 2 з 2: генерація

Хоч дуже збочено, але ми зібрали все що треба на попередньому етапі. Далі все просто: перетво́рюємо Markdown в SVG.

Етап 3 з 2: конвертація SVG в PNG

Це у мене і так робиться при кожному запуску make. Я тільки додав спеціальні правила для обробки підкаталога opengraph/_svg.

Така особливість мого сайту, що результу́ючі сконвертовані картинки я додаю́ в свій репозиторій. Так, їх можна згенерувати знову, якщо зміниться першоджерело. Так, я в репозито́рії поруч з джерелом зберіга́ю згенерований біна́рнік. Це не дуже красиво, але зручно. Я колись давно став так робити для іко́нки сайту і, в принципі, мене не сильно бісить.

Так. Ладно. Все похуй.

Воно працює!