PROMO-251(OG): WIP: Add text-overflow for title #410

Krakazybik · 2022-01-11T20:23:39Z

CHANGELOG

Добавлено:

Генерация SVG текста.
Перенос строк для SVG текста.
Возможность трансформции текста из конфига.

Удалено:

Генерация SVG с помощью сторонней библиотеки.

REFERENCE

#401 #251

Чеклист

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

Krakazybik · 2022-01-11T20:28:24Z

website/plugins/docusaurus-plugin-og/svg.js

+}
+
+function getTextWidth(text, options) {
+    return ((options.fontSize * 400) / options.fontWeight) * 0.9 * text.length;


Тут надо наоборот делить =)

А поч щас не пофиксить тогда? 🤔

Krakazybik · 2022-01-11T20:44:00Z

P.S На breadcrumbs не смотри, они в следующих PRах

azinit

Работа колоссальная, но есть что улучшить)

website/config/og/basic/template.json

azinit · 2022-01-13T20:38:55Z

website/plugins/docusaurus-plugin-og/font.js

-                textToSVG.loadSync(resolve(template.path, template.name, template.params.font)),
-            );
+            // trunc file extension
+            const fontName = template.params.font.slice(0, -4);


nitpick: Кажется, можно попроще 🤔

Мб @Postamentovich еще что подскажет

Прикольно, посмотрю!

website/plugins/docusaurus-plugin-og/font.js

azinit · 2022-01-13T20:42:49Z

website/plugins/docusaurus-plugin-og/svg.js

+];
+
+// prevent errors while parsing XML svg object
+function isolateXMLSpecifiedSymbols(text) {


suggestion(non-blocking): Мб что-то типа function escapeText?

непонятно звучит конечно, но давай escapeText! =)

Ну тип "экранирование" ~ "чистка"

@GhostMayor Как бы такое назвал?)

azinit · 2022-01-13T20:56:48Z

website/plugins/docusaurus-plugin-og/svg.js

+    } else svg += SVGText(filteredText, { ...options, name: font.name });
+    svg += `</svg>`;


nitpick: Лучше сразу обработать негативный сценарий и выбросить значение из функции

А оставшееся тело функции куда будет проще и ацикломатически, и в плане читаемости

azinit · 2022-01-13T20:57:33Z

website/plugins/docusaurus-plugin-og/svg.js

+            });
+        }
+
+        console.error(filteredText, reformat.result, reformat.temp);


nitpick: Если консолим, то хотя бы уточни что именно)
Особенно если ошибка (хотя непонятно почему ошибка именно должна быть, если тут все валидно)

azinit · 2022-01-13T20:59:43Z

website/plugins/docusaurus-plugin-og/svg.js

+    svg += font.declaration;
+
+    if (getTextWidth(text, options) > widthLimit) {
+        const reformat = filteredText.split(" ").reduce(


nitpick: Некрит, но лучше при разбиении отдельно константу words завести. Почище будет, и можно к ней обращаться отдельно в цикле

azinit · 2022-01-13T21:03:34Z

website/plugins/docusaurus-plugin-og/svg.js

+                if (getTextWidth(`${acc.temp} ${cur}`, options) < widthLimit) {
+                    return { ...acc, temp: `${acc.temp} ${cur}` };
+                }
+
+                return {
+                    temp: cur,
+                    result: [...acc.result, acc.temp],
+                };
+            },
+            {
+                temp: "",
+                result: [],
+            },
+        );
+        svg += SVGText(reformat.temp, {
+            ...options,
+            name: font.name,
+        });
+        for (let i = reformat.result.length - 1; i >= 0; i--) {
+            svg += SVGText(reformat.result[i], {
+                ...options,
+                transform: `${options.transform} translate(0, ${
+                    (reformat.result.length - i) * textPaddingTop
+                })`,
+                name: font.name,
+            });
+        }


issue: А вот это дело прям упростить надо... Т.к. оч сложно считывается, и прям велика вероятность потом где-то тут ошибку сделать

suggestion: Как варианты, что в голову приходят:

Свести все к генерации массива строк lines (опять же по критерию < widthLimit)
2.A. (в идеале) Переписать логику стилей так, чтобы каждый объект можно было обернуть спокойно в SVGText(...) и не шаманить в циклах
2.B. Если же так нельзя (а учитывая наши замашки по шаблону - так рили может быть) - то хотя бы привести к простому циклу, мб тому же редьюсу - где в константу contentSvg редьюсится итоговое значение с учетом переноса строк

И как итог - просто вставляем в return template-string нужные значения contentSvg, font.declaration - и гораздо чище получится

На самом деле, оч смущает столько хелперов и этапов шаманств с текстом, но учитывая изначальные требования - мб по другому и никак... @feature-sliced/contributors @feature-sliced/core мб будут мнения как еще проще в svgшке текст перенести?

На самом деле я не представляю как ты тут это всё разбирал, магию редьюсов и тд, т.к. это всё в качестве черного варианта было накидано, чтоб вообще расмотреть идею с самописным svg. Кстати owerflow через foreignObject не предлагать, он его не понимает =((

website/plugins/docusaurus-plugin-og/template.js

azinit · 2022-01-13T21:13:33Z

website/plugins/docusaurus-plugin-og/svg.js

+    return ((options.fontSize * 400) / options.fontWeight) * 0.9 * text.length;
+}
+
+function textToSVG(font, text, options, widthLimit = 1300, textPaddingTop = -70) {


nitpick: Раз уж речь не про символьную длину, то мб переименовать в maxWidth? На манер с css

thoughts: Тож самое и с паддингом можно сделать кмк

хорошая идея.

website/plugins/docusaurus-plugin-og/layout.js

Krakazybik · 2022-01-13T21:21:20Z

спасибо что поревьюил =) PR немного WIP был, извиняюсь, что не пометил в заголовке, меня интересовали именно сомнительные на мой взгляд решения. Потому там всякие консоль логи не выпелены и ошибки не исправлены с делением и тд. )) и марафет не наведён

azinit · 2022-01-13T21:27:08Z

PR немного WIP был,

Кста если вдруг будут идеи сюда впихнуть остальные ишьюсы (например с breadcrumbs)- то лучше не надо)

И так PR пухленький вышел

Krakazybik · 2022-01-13T21:37:53Z

PR немного WIP был,

Кста если вдруг будут идеи сюда впихнуть остальные ишьюсы (например с breadcrumbs)- то лучше не надо)

И так PR пухленький вышел

Спасибо не надо, я уже научен горьким опытом вливания месяцами =))) он у меня давно в другой ветке))

Krakazybik added 3 commits January 5, 2022 23:12

feat(og-svg): generate SVG from text.

9bf4e65

feat(og-svg): config support for new textToSVG

886495a

feat(og-svg): using new textToSVG

d3f8bc6

Krakazybik self-assigned this Jan 11, 2022

Krakazybik added the TYPE | enhancement New feature or request label Jan 11, 2022

Krakazybik commented Jan 11, 2022

View reviewed changes

azinit linked an issue Jan 11, 2022 that may be closed by this pull request

PROMO(OG): Add text-overflow for title #401

Open

2 tasks

azinit requested changes Jan 13, 2022

View reviewed changes

azinit marked this pull request as ready for review January 13, 2022 21:05

azinit reviewed Jan 13, 2022

View reviewed changes

website/plugins/docusaurus-plugin-og/layout.js Show resolved Hide resolved

Krakazybik changed the title ~~PROMO-251(OG): Add text-overflow for title~~ PROMO-251(OG): WIP: Add text-overflow for title Jan 14, 2022

Krakazybik added the on-hold Paused label Feb 13, 2022

Krakazybik marked this pull request as draft February 13, 2022 19:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PROMO-251(OG): WIP: Add text-overflow for title #410

PROMO-251(OG): WIP: Add text-overflow for title #410

Krakazybik commented Jan 11, 2022

Krakazybik Jan 11, 2022

azinit Jan 13, 2022

Krakazybik commented Jan 11, 2022

azinit left a comment

azinit Jan 13, 2022

Krakazybik Jan 13, 2022

azinit Jan 13, 2022

Krakazybik Jan 13, 2022

azinit Jan 14, 2022

azinit Jan 13, 2022

Krakazybik Jan 13, 2022

azinit Jan 13, 2022

azinit Jan 13, 2022

azinit Jan 13, 2022

azinit Jan 13, 2022

Krakazybik Jan 13, 2022

azinit Jan 13, 2022

Krakazybik Jan 13, 2022

Krakazybik commented Jan 13, 2022

azinit commented Jan 13, 2022

Krakazybik commented Jan 13, 2022

		} else svg += SVGText(filteredText, { ...options, name: font.name });
		svg += `</svg>`;

PROMO-251(OG): WIP: Add text-overflow for title #410

Are you sure you want to change the base?

PROMO-251(OG): WIP: Add text-overflow for title #410

Conversation

Krakazybik commented Jan 11, 2022

CHANGELOG

REFERENCE

Чеклист

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Krakazybik commented Jan 11, 2022

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

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

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 commented Jan 13, 2022

azinit commented Jan 13, 2022

Krakazybik commented Jan 13, 2022