PROMO-251: OpenGraph dynamic image plugin prototype. #368

Krakazybik · 2021-11-20T15:24:46Z

CHANGELOG

#251
Добавлено: Прототип плагина динамической генерации og картиночек.
Как это работает?
Для манипуляций с изображениями используется sharp работающий через libvips. На этапе postBuild, когда у нас всё собрано, получаем инфу из doc плагина и на её основе генерируем изображение с необходимыми нам дополнительными слоями. Сами изображения и слои описываем в наших шаблонах. Если нам нужно применить конкретный шаблон для конкретного документа - используем правила.

Если при работе с документацией потребовалось использовать github-дискуссии, то стоит их прикрепить как see-also источники
Если PR связан с задачей, то необходимо проверить, что все требования по задаче выполнены
Перед тем, как отправлять изменения на ревью, нужно ознакомиться с CONTIBUTING-гайдлайнами
Перед тем, как отправлять изменения на ревью, нужно провести self-review своих изменений
Перед тем, как отправлять изменения на ревью, нужно дождаться CI-проверок
Перед тем, как отправлять изменения на ревью, нужно дать краткое описание изменений

azinit

@Krakazybik

Верни пож ченджлог, который был в темплейте PR)
Добавь пож комменты к диффу своему, чтобы было проще ревьювить и предлагать изменения
(оч хочется втянуть, но многие вещи не оч интуитивно понятны - лучше бы дополнить их комментарием, например как тут)

Как все сделаешь - пингани еще раз как можно будет ревьювить))

Думаю втянем сразу же, только с небольшими правками, чтобы прод не развалить

website/plugins/docusaurus-plugin-open-graph-image/Readme.md

azinit

.

Krakazybik

Добавил комментарии по PR.

Krakazybik · 2021-11-27T22:37:30Z

website/plugins/docusaurus-plugin-open-graph-image/image.js

+            images.set(`${item.name}_${item.params.image}`, createImageFromTemplate(item));
+        }
+    });
+    return images;


Создание мапы уникальных sharp pipeline'ов для наших картинок. (проверка на уникальность пока бесполезна, т.к. в layout кроме текста ничего добавлять пока что нельзя, и у нас по сути нет других картинок в шаблоне).

Krakazybik · 2021-11-27T22:39:33Z

website/plugins/docusaurus-plugin-open-graph-image/index.js

+    // TODO: File not found exception?
+    const fonts = createFontsMapFromTemplates(templates);
+    const images = createImagesMapFromTemplates(templates);
+


Создаём коллекции шрифтов и картинок, которые в дальнейшем будем клонить и потом с ними работать.

website/open-graph-templates/basic/template.json

website/open-graph-templates/config.json

Krakazybik · 2021-11-27T22:55:26Z

website/plugins/docusaurus-plugin-open-graph-image/config.js

+        console.error("Config validation error");
+        return;
+    }
+    return config;


Чтение и валидация нашего основного конфига плагина.

website/plugins/docusaurus-plugin-open-graph-image/utils.js

website/src/shared/lib/open-graph-preview/index.js

website/src/theme/DocItem/index.js

…not default locales.

azinit

Таки посмотрел... Выглядит прям монструозно, крутецкую работу проделал!

Вопросы такие:

Можно ли как-то оставить в плагине только критичный функционал, чтоб без проблем затащить что есть?
(а то по многим модулям там есть вопросы, и кажется, что расширять функционал надо бы позднее, а не прям щас - сложно пока даже умом объять. И кажется именно из-за сильно огромного функционала влитие PR может затянуться. Если можно оставить только базис - я бы оставил действительно только его на данный момент .А остальное след. итерациями)
Можно ли локально при билде - получить OG изображения файлов?
(как я понимаю - изображения сгенерятся при билде, и потом по хешу, что будет в head.meta.og:image можно будет перейти по ссылке и получить статическое превью - верно?)

website/.eslintrc.js

website/docusaurus.config.js

website/open-graph-templates/config.json

website/plugins/docusaurus-plugin-open-graph-image/layout.js

azinit · 2021-12-04T12:28:56Z

website/plugins/docusaurus-plugin-open-graph-image/layout.js

+    const layers = layout.map((item) => {
+        if (!Object.prototype.hasOwnProperty.call(doc, item.name)) {
+            console.error(`Wrong template config? Doc property ${item.name} not found.`);
+            return undefined;


nitpick: Можно и проще, как ниже делал)

Suggested change

return undefined;

return;

Вернул, т.к. снова наткнулся на то что матюгальник проснулся =))

azinit · 2021-12-04T12:30:16Z

website/plugins/docusaurus-plugin-open-graph-image/layout.js

+    if (layers.includes(undefined)) return;
+
+    return layers;
+}


question: А для понимания еще раз - что все таки собой эти слои представляют?)

website/src/theme/DocItem/index.js

Krakazybik · 2021-12-04T13:15:18Z

Таки посмотрел... Выглядит прям монструозно, крутецкую работу проделал!

Вопросы такие:

Можно ли как-то оставить в плагине только критичный функционал, чтоб без проблем затащить что есть?
(а то по многим модулям там есть вопросы, и кажется, что расширять функционал надо бы позднее, а не прям щас - сложно пока даже умом объять. И кажется именно из-за сильно огромного функционала влитие PR может затянуться. Если можно оставить только базис - я бы оставил действительно только его на данный момент .А остальное след. итерациями)

Можно ли локально при билде - получить OG изображения файлов?
(как я понимаю - изображения сгенерятся при билде, и потом по хешу, что будет в head.meta.og:image можно будет перейти по ссылке и получить статическое превью - верно?)

На самом деле старался максимально изолированно делать всё, потому и делал через плагин, даже если что-то в процессе билда пойдёт не так, сайт сбилдится(точнее оно уже будет собрано т.к. делаем на postBuild) и ни как на функционал сайта это влиять не должно. И по сути ни каких breaking changes тут не должно быть.
Да, на этапе postBuild, когда уже всё собрано (meta пути для OG уже прописаны, которые берутся из id документа и его локали), мы генерим наши превьюшки, получаем обычные jpg изображение сложенные в папку assert для базовой локали и ${locale}/assert для остальных.

Co-authored-by: Ilya Azin <[email protected]>

azinit · 2021-12-04T15:45:37Z

2. Да, на этапе postBuild, когда уже всё собрано (meta пути для OG уже прописаны, которые берутся из id документа и его локали), мы генерим наши превьюшки, получаем обычные jpg изображение сложенные в папку assert для базовой локали и ${locale}/assert для остальных.

Да, удалось отдежабиться - круто)

На самом деле старался максимально изолированно делать всё, потому и делал через плагин, даже если что-то в процессе билда пойдёт не так, сайт сбилдится(точнее оно уже будет собрано т.к. делаем на postBuild) и ни как на функционал сайта это влиять не должно. И по сути ни каких breaking changes тут не должно быть.

Да, если локально глянуть - то так и выглядит, спасибо)
Просто внешне это не особо заметно 🤔

azinit · 2021-12-04T15:48:15Z

@Krakazybik пока надо лично мне еще минимум час-два убить, чтобы доревьювить по мелочам + подправить темплейт и стили
Так что до след выходных постараюсь что-то подготовить

Но если оч хочешь влить, предлагаю разбить опять же этот PR на несколько частей

Как минимум:

PR1: docusaurus-плагин, неподключенный (да, это основа диффа, зато точно ничего не поломает, и можно влить до того, как превьюшку добьем)

PR2: подключение плагина + настройка конфига и превью

azinit

Выглядет рабочеспособно)
Как вольем - приступим к некст этапу 🚀

website/plugins/docusaurus-plugin-open-graph-image/utils.js

azinit · 2021-12-09T22:23:03Z

website/plugins/docusaurus-plugin-open-graph-image/index.js

+
+    const config = getConfig(templatesDir);
+    if (!config) return;
+


Дополню для других, что плагинах докузавра так и принято описывать инициализацию плагинов, так что тут все конвенционально +-)

azinit · 2021-12-09T22:23:53Z

website/plugins/docusaurus-plugin-open-graph-image/index.js

+        const { id, title } = doc;
+
+        const hashFileName = sha1(id + locale);
+


suggestion(to-improve, non-blocking): А мб можно вынести функцию вне основной инициализации, чтоб не разбухала?

Или она на контекст основной функции завязана?

website/plugins/docusaurus-plugin-open-graph-image/image.js

azinit · 2021-12-09T22:25:33Z

website/plugins/docusaurus-plugin-open-graph-image/image.js

@@ -0,0 +1,23 @@
+const sharp = require("sharp");
+
+function createImagePipeline(file) {


suggestion(to-improve, non-blocking): Не крит, но здесь и далее по возможности бы добавил комменты к функциям

Т.к. малясь абстрактно выглядят)

+ свои мысли по расширению функционала закинешь, чтобы точно не потерялось)

Комменты в коде, или здесь? =)

в коде

azinit · 2021-12-09T22:26:46Z

website/plugins/docusaurus-plugin-open-graph-image/font.js

+    }
+
+    return font.getSVG(text, options);
+}


В коде комментарием тоже бы описать, достаточно неочевидный момент)

azinit · 2021-12-09T22:28:03Z

website/package.json

+        "sha1": "^1.1.1",
+        "sharp": "^0.29.3",
+        "superstruct": "^0.15.3",
+        "text-to-svg": "^3.1.5",


thoughts: Эх, вынести бы как-нибудь, чтобы зависимости только во время постбилда пригождались, и не лезли в основной билд 🤔

Но out-of-scope, мб другие что подскажут

@Krakazybik мб ты что тут подскажешь, ты ведь достаточно много плагинов докузавра наизучал за это время)

думаю =)

либо монорепу (лул), либо "sharp" "superstruct" "text-to-svg": можно в dev кинуть =) и отучить линтер матюгаться по import/no-extraneous-dependencies для папки плагина =)

Ну пока так оставим, мб @Postamentovich @GhostMayor что-то подскажут

(для контекста опять же - это docusaurus-plugin, который чисто во время сборки нужен; потом отдельно в npm опубликуем наверное)

replace template validation error to templates initialization.

Krakazybik · 2021-12-10T20:37:57Z

website/plugins/docusaurus-plugin-open-graph-image/template.js

+            fs.readFileSync(`${templatesDir}\\${templateName}\\template.json`, encode),
+        ),
+    }));
+


Читаем наши шаблоны, согласно полученным папкам. И возвращаем массив объектов с прочитанными данными, названием шаблона и путем до него.

Тогда мб лучше в сам код занести)

Krakazybik · 2021-12-10T21:07:18Z

Кот починиль!
Это => тут.
Зарезолвил. вот это (я про getTemplateImageId если что )

Ну и так немного навёл марафета =)

Это чтобы не потерялось, а то комментарии пропали =)

website/plugins/docusaurus-plugin-open-graph-image/layout.js

azinit · 2021-12-11T10:48:43Z

@feature-sliced/core @feature-sliced/contributors Гляньте пож)

Уже 3-ю неделю влить не можем

azinit · 2021-12-11T13:57:53Z

@all-contributors please add @Krakazybik for code, plugin, tool

allcontributors · 2021-12-11T13:58:01Z

@azinit

I've put up a pull request to add @Krakazybik! 🎉

Postamentovich

Все ок, я только обратил бы внимание на работу с файловой системой.
Путь до конфига и ассетов лучше собирать через path
И лучше не использовать синхронные методы чтения.
Но так как это выполняется в постбилде, возможно это не очень актуально.

azinit marked this pull request as draft November 20, 2021 16:26

Krakazybik added 3 commits November 21, 2021 15:35

feat: OpenGraph dynamic image plugin prototype.

8225f9c

feat: config file validation.

ef2eb88

feat: template config and template rules.

d287b7b

Krakazybik force-pushed the feature-docusarus-og-plugin branch from 132de27 to d287b7b Compare November 21, 2021 12:40

azinit marked this pull request as ready for review November 27, 2021 19:55

azinit requested changes Nov 27, 2021

View reviewed changes

Krakazybik commented Nov 27, 2021

View reviewed changes

website/plugins/docusaurus-plugin-open-graph-image/Readme.md Show resolved Hide resolved

azinit reviewed Nov 27, 2021

View reviewed changes

Krakazybik added 2 commits November 28, 2021 13:23

fix: modules export naming and ESLint ignore alias error for themes.

3f2700a

doc(readme): Plugin usage and configs information.

420114c

Krakazybik commented Nov 28, 2021

View reviewed changes

Krakazybik requested a review from azinit November 28, 2021 11:02

fix: preview OG meta endpoint. Removed test templates.

669a72f

azinit linked an issue Dec 4, 2021 that may be closed by this pull request

PROMO: Add dynamic generation of social preview by article (for specific content) #251

Open

7 tasks

azinit changed the title ~~OpenGraph dynamic image plugin prototype.~~ PROMO-251: OpenGraph dynamic image plugin prototype. Dec 4, 2021

fix: meta url and locale info from DocusaurusContext. wrong path for …

b2b1980

…not default locales.

azinit reviewed Dec 4, 2021

View reviewed changes

Krakazybik and others added 2 commits December 4, 2021 16:18

fix(typo): checking existence of a property in a doс.

bf6acae

Co-authored-by: Ilya Azin <[email protected]>

fix(typo): redundant undefined

34be04e

Co-authored-by: Ilya Azin <[email protected]>

refactor: split to 2 PR.

c1af82f

Krakazybik mentioned this pull request Dec 8, 2021

PROMO-251: Connect OpenGraph plugin to Docusaurus [part2; split of PR-368] #375

Merged

6 tasks

Krakazybik requested a review from azinit December 8, 2021 18:45

azinit approved these changes Dec 9, 2021

View reviewed changes

azinit requested review from AlexandrHoroshih, Postamentovich and spotsccc December 9, 2021 22:30

azinit requested review from unordinarity and GhostMayor December 9, 2021 22:30

Krakazybik added 3 commits December 10, 2021 21:44

refactor: added getTemplateImageId instead inline id generation.

f34a49c

chore(comment): add comment to font scaling implementation.

bce6c12

refactor: replace validation from utils to config and template.

e26094c

replace template validation error to templates initialization.

Krakazybik commented Dec 10, 2021

View reviewed changes

refactor: some naming changes.

13428ae

Krakazybik added 2 commits December 11, 2021 00:54

refactor: added bootstrap function and replace generateImageFromDoc.

3fbbd6c

refactor: early return on invalid template config.

f0412fc

azinit reviewed Dec 11, 2021

View reviewed changes

website/plugins/docusaurus-plugin-open-graph-image/layout.js Outdated Show resolved Hide resolved

allcontributors bot mentioned this pull request Dec 11, 2021

docs: add Krakazybik as a contributor for code, plugin, tool #376

Merged

feature-sliced deleted a comment from allcontributors bot Dec 11, 2021

refactor: array.every => array.some.

cacd82a

Postamentovich approved these changes Dec 12, 2021

View reviewed changes

azinit merged commit c1c020e into feature-sliced:master Dec 12, 2021

Krakazybik mentioned this pull request Dec 23, 2021

PROMO-251(OG Plugin): Minor refinements (fs, logs) #387

Merged

6 tasks

azinit mentioned this pull request Dec 30, 2021

PROMO: Add dynamic generation of social preview by article (for specific content) #251

Open

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PROMO-251: OpenGraph dynamic image plugin prototype. #368

PROMO-251: OpenGraph dynamic image plugin prototype. #368

Krakazybik commented Nov 20, 2021 •

edited

Loading

azinit left a comment

azinit left a comment •

edited

Loading

Krakazybik left a comment

Krakazybik Nov 27, 2021

Krakazybik Nov 27, 2021

Krakazybik Nov 27, 2021

azinit left a comment

azinit Dec 4, 2021

Krakazybik Dec 10, 2021

azinit Dec 4, 2021

Krakazybik commented Dec 4, 2021 •

edited

Loading

azinit commented Dec 4, 2021

azinit commented Dec 4, 2021 •

edited

Loading

azinit left a comment

azinit Dec 9, 2021

azinit Dec 9, 2021

azinit Dec 9, 2021

azinit Dec 9, 2021 •

edited

Loading

Krakazybik Dec 10, 2021

azinit Dec 10, 2021

azinit Dec 9, 2021

azinit Dec 9, 2021

azinit Dec 9, 2021

Krakazybik Dec 10, 2021 •

edited

Loading

Krakazybik Dec 10, 2021

azinit Dec 10, 2021 •

edited

Loading

Krakazybik Dec 10, 2021

azinit Dec 10, 2021

Krakazybik commented Dec 10, 2021 •

edited

Loading

azinit commented Dec 11, 2021 •

edited

Loading

azinit commented Dec 11, 2021

allcontributors bot commented Dec 11, 2021

Postamentovich left a comment

		const { id, title } = doc;

		const hashFileName = sha1(id + locale);

		@@ -0,0 +1,23 @@
		const sharp = require("sharp");

		function createImagePipeline(file) {

PROMO-251: OpenGraph dynamic image plugin prototype. #368

PROMO-251: OpenGraph dynamic image plugin prototype. #368

Conversation

Krakazybik commented Nov 20, 2021 • edited Loading

CHANGELOG

azinit left a comment

Choose a reason for hiding this comment

azinit left a comment • edited Loading

Choose a reason for hiding this comment

Krakazybik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azinit left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Krakazybik commented Dec 4, 2021 • edited Loading

azinit commented Dec 4, 2021

azinit commented Dec 4, 2021 • edited Loading

azinit left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azinit Dec 9, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Krakazybik Dec 10, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azinit Dec 10, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Krakazybik commented Dec 10, 2021 • edited Loading

azinit commented Dec 11, 2021 • edited Loading

azinit commented Dec 11, 2021

allcontributors bot commented Dec 11, 2021

Postamentovich left a comment

Choose a reason for hiding this comment

Krakazybik commented Nov 20, 2021 •

edited

Loading

azinit left a comment •

edited

Loading

Krakazybik commented Dec 4, 2021 •

edited

Loading

azinit commented Dec 4, 2021 •

edited

Loading

azinit Dec 9, 2021 •

edited

Loading

Krakazybik Dec 10, 2021 •

edited

Loading

azinit Dec 10, 2021 •

edited

Loading

Krakazybik commented Dec 10, 2021 •

edited

Loading

azinit commented Dec 11, 2021 •

edited

Loading