Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Krakazybik
Copy link
Member

CHANGELOG

Добавлено:

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

Удалено:

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

REFERENCE

#401 #251

Чеклист

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

@Krakazybik Krakazybik self-assigned this Jan 11, 2022
@Krakazybik Krakazybik added the TYPE | enhancement New feature or request label Jan 11, 2022
}

function getTextWidth(text, options) {
return ((options.fontSize * 400) / options.fontWeight) * 0.9 * text.length;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@azinit azinit linked an issue Jan 11, 2022 that may be closed by this pull request
2 tasks
@Krakazybik
Copy link
Member Author

53f7a3addf392dad2abd40f5de9a8acfa227e487

b8bd8c7a68631560a764bd1659f15719b20b9e57

3643e43d3814553f584cf5f6734f992032719410

326287c6b5196c6e6f1cd9e59b2cfe1b78778c8f

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

Copy link
Member

@azinit azinit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

website/config/og/basic/template.json Show resolved Hide resolved
website/config/og/basic/template.json Show resolved Hide resolved
textToSVG.loadSync(resolve(template.path, template.name, template.params.font)),
);
// trunc file extension
const fontName = template.params.font.slice(0, -4);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

website/plugins/docusaurus-plugin-og/font.js Show resolved Hide resolved
];

// prevent errors while parsing XML svg object
function isolateXMLSpecifiedSymbols(text) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Comment on lines +87 to +88
} else svg += SVGText(filteredText, { ...options, name: font.name });
svg += `</svg>`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

угу

});
}

console.error(filteredText, reformat.result, reformat.temp);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

svg += font.declaration;

if (getTextWidth(text, options) > widthLimit) {
const reformat = filteredText.split(" ").reduce(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +58 to +84
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,
});
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@azinit azinit marked this pull request as ready for review January 13, 2022 21:05
return ((options.fontSize * 400) / options.fontWeight) * 0.9 * text.length;
}

function textToSVG(font, text, options, widthLimit = 1300, textPaddingTop = -70) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Krakazybik
Copy link
Member Author

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

@azinit
Copy link
Member

azinit commented Jan 13, 2022

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

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

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

@Krakazybik
Copy link
Member Author

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

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

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

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

@Krakazybik 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 Krakazybik added the on-hold Paused label Feb 13, 2022
@Krakazybik Krakazybik marked this pull request as draft February 13, 2022 19:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
on-hold Paused TYPE | enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

PROMO(OG): Add text-overflow for title
2 participants