Добавляет кастомный виджет со звёздочками GitHub by Inventoris · Pull Request #1316 · doka-guide/platform

Inventoris · 2024-12-19T11:02:43Z

Навеяно ишью #1308

Предлагаю добавить кастомный виджет с поддержкой смены цветовой темы (а ещё в дизайн-коде Доки и на русском).

Если про сам дизайн, то использовал скругления и цвета с переключателя цветовой темы. По общей структуре ориентировался на такой вариант:

Разумеется всё обсуждаемо, особенно дизайн @skorobaeus 🙌

Было:

Стало:

В тёмной теме:

src/scripts/modules/github-widget.js

furtivite · 2024-12-19T14:41:16Z

Мне нравится начинание, но я немного потерял смысловое содержание. Это личное мнение, возможно, на что-то натолкнёт.

В оригинальном виджете есть значёк гитхаба, есть слово Stars. Понятно, что это какие-то звёзды на гитхабе. В PR я вижу значёк звезды, и слово звёзды.

Как старый житель Доки, который знает, что Дока лежит на гитхабе, я пойму. Как новый — увы, будет сложнее. Я бы призвал @skorobaeus пошаманить над визуалом.

igsekor · 2024-12-28T21:31:16Z

Интересное начинание, но, кажется, способ запроса совсем не подходит нам. Прямые запросы на GitHub уже в прошлом. Так что эту часть нужно будет переделать. Доберусь в январе и с удовольствием помогу :) Но это техническая сторона. А вот дизайнерская сторона вопроса — тут @skorobaeus.

И надо будет сделать проверку на тысячу. Мы должны проработать все сценарии, поддержу @vitya-ne

Inventoris · 2024-12-29T08:00:06Z

Интересное начинание, но, кажется, способ запроса совсем не подходит нам. Прямые запросы на GitHub уже в прошлом. Так что эту часть нужно будет переделать. Доберусь в январе и с удовольствием помогу :) Но это техническая сторона. А вот дизайнерская сторона вопроса — тут @skorobaeus.

И надо будет сделать проверку на тысячу. Мы должны проработать все сценарии, поддержу @vitya-ne

UPD: заберу всё в работу, как доберусь o(￣︶￣)o

Inventoris · 2025-10-10T11:43:49Z

Вернулся к этому пиару =)

@vitya-ne добавил проверку на 1000;
@furtivite поставил лого гитхаба вместо звёздочки, как будто стало выглядеть логичнее;
@igsekor по кешированию пока тебя жду с помощью. Видимо нужно поднять API на нашем бэкенде, там сделать кеширование, и уже виджет будет стучаться туда.

Пример статьи, смотреть футер: https://platform-1316.dev.doka.guide/css/box-model/

github-actions · 2025-10-10T14:00:47Z

Превью контента из a378497 опубликовано.

vitya-ne · 2025-10-10T20:16:17Z

src/styles/blocks/github-widget.css

@@ -0,0 +1,61 @@
+.github-widget {
+  --widget-padding: .4em .4em .25em;


Как по мне, лучше выранивать по-центру сейчас иконка и текст смещены вниз:

Как по мне, лучше выранивать по-центру сейчас иконка и текст смещены вниз:

Дак вот я выравнил специально так) Потому что если сделать по центру, то визуально надпись оказывается не по центру. Заглавная буква и иконка выше цифры получаются.

Сейчас как будто ровно, разве нет?

Попробуй в девтулзе сделать одинаковые паддинги.

Вот как у меня:

Разве по вертикали ровно ?

Смотрю на ноуте 1920*1080 с 125% размером текста. Это по-моему распространённая настройка

Ты знаешь, иконка действительно пляшет, если менять масштаб. У меня есть идея как это исправить. Но сперва я бы предложил узнать мнение Светы @skorobaeus, а вообще этот MVP-дизайн ей нравится? Стоит ли им заниматься дальше или лучше применить другой UI в целом.

vitya-ne · 2025-10-10T20:30:40Z

Я ещё немного позанудствую на тему запроса:
Если запрос закончится ошибкой (маловероятно) или кто-то пользуется докой в автономном режиме (более вероятно) текст кнопки не обновится и мы увидим:

Я бы предложил в этом случае не показывать слово "Звёзд" и "глазки", а превращать кнопку в круглую ссылку на репозиторий, что-то такое:

vitya-ne · 2025-10-10T20:37:02Z

src/styles/blocks/github-widget.css

+
+@media (width >= 768px) {
+  .github-widget__star {
+    width: 15px;


А почему ширина 15px ?
Видно, что иконка не влезает (если запрос завершился неудачей)

Про иконку если запрос упал интересная идея. Правда я видел у нас ещё сервайс воркер, мб через него можно придумать решение. То есть будет брать из кеша, если есть, а если и там нет, то тогда иконку с какой-нибудь надписью, вроде "Наш репозиторий".

Только какой тогда смысл давать ссылку на репозиторий для автономщиков, если они ее не смогут открыть?

А почему ширина 15px ? Видно, что иконка не влезает (если запрос завершился неудачей)

Не понял если честно о чем ты, можешь раскрыть пж? На скрине кажется всё ок

Обрати внимание на правый край круга: он скошен

Возможно это можно поймать только на ноуте с 125% текстом

Обрати внимание на правый край круга: он скошен Возможно это можно поймать только на ноуте с 125% текстом

Думаю это баг рендера браузера, или какая-то история с пиксельным отображением именно на стороне экрана. Потому что по идее там нету того, чем обрезаться, т.к. пустое пространство между иконкой и текстом. Такое бывает.

Я ж начинал с того что в стилях ширина svg - 15px.
Ставлю 16px и всё ок:

vitya-ne · 2025-10-14T09:10:00Z

Только какой тогда смысл давать ссылку на репозиторий для автономщиков, если они ее не смогут открыть?

Ну мы же отображаем другие ссылки. Может я выключил WiFi, а потом включил его не обновляя страницы.
Мне кажется отображать иконку и ссылку в любом случае логично

Inventoris · 2025-10-14T10:13:52Z

Только какой тогда смысл давать ссылку на репозиторий для автономщиков, если они ее не смогут открыть?

Ну мы же отображаем другие ссылки. Может я выключил WiFi, а потом включил его не обновляя страницы. Мне кажется отображать иконку и ссылку в любом случае логично

Может быть, давай узнаем мнение других.

P.S. Если не сложно, можешь пж накидывать ревью не отдельными сообщениями, а в тредах. Я немножко начинаю путаться, где на что отвечать)

vitya-ne · 2025-10-14T10:23:40Z

Только какой тогда смысл давать ссылку на репозиторий для автономщиков, если они ее не смогут открыть?

Ну мы же отображаем другие ссылки. Может я выключил WiFi, а потом включил его не обновляя страницы. Мне кажется отображать иконку и ссылку в любом случае логично

Может быть, давай узнаем мнение других.

P.S. Если не сложно, можешь пж накидывать ревью не отдельными сообщениями, а в тредах. Я немножко начинаю путаться, где на что отвечать)

Сорри, но вообще-то там тред про стили иконки. А это отдельная тема

Добавляет кастомный виджет

ac3f8e2

Inventoris requested review from HellSquirrel, furtivite, igsekor and solarrust as code owners December 19, 2024 11:02

vitya-ne reviewed Dec 19, 2024

View reviewed changes

src/scripts/modules/github-widget.js Show resolved Hide resolved

solarrust added вёрстка Задачи по вёрстке дизайн Задачи по дизайну labels Dec 19, 2024

skorobaeus self-requested a review December 19, 2024 14:55

igsekor assigned Inventoris and igsekor Dec 28, 2024

Inventoris marked this pull request as draft December 29, 2024 08:02

Inventoris added 2 commits October 10, 2025 12:13

Merge branch 'main' into feature/github-widget

fef0d18

Добавляет проверку на 1000, вносит микро-правки

ad346bd

Inventoris marked this pull request as ready for review October 10, 2025 11:43

Inventoris added 2 commits October 10, 2025 16:44

Оживляет превью

c6e3917

Убирает шалости

a378497

vitya-ne reviewed Oct 10, 2025

View reviewed changes

		@@ -0,0 +1,61 @@
		.github-widget {
		--widget-padding: .4em .4em .25em;

Comments

Conversation

Inventoris commented Dec 19, 2024

Uh oh!

Uh oh!

furtivite commented Dec 19, 2024

Uh oh!

igsekor commented Dec 28, 2024

Uh oh!

Inventoris commented Dec 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Inventoris commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 10, 2025

Uh oh!

vitya-ne Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Inventoris Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Inventoris Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vitya-ne commented Oct 10, 2025

Uh oh!

vitya-ne Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

Inventoris Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Inventoris Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Inventoris Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne commented Oct 14, 2025

Uh oh!

Inventoris commented Oct 14, 2025

Uh oh!

vitya-ne commented Oct 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Inventoris commented Dec 29, 2024 •

edited

Loading

Inventoris commented Oct 10, 2025 •

edited

Loading

vitya-ne Oct 10, 2025 •

edited

Loading

Inventoris Oct 14, 2025 •

edited

Loading

Inventoris Oct 14, 2025 •

edited

Loading

Inventoris Oct 14, 2025 •

edited

Loading

Inventoris Oct 14, 2025 •

edited

Loading