Skip to content

Добавляет кастомный виджет со звёздочками GitHub #1316

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.

Sign up for GitHub

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

Open
Inventoris wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Добавляет кастомный виджет со звёздочками GitHub #1316

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac3f8e2
Добавляет кастомный виджет
Inventoris Dec 19, 2024
fef0d18
Merge branch 'main' into feature/github-widget
Inventoris Oct 10, 2025
ad346bd
Добавляет проверку на 1000, вносит микро-правки
Inventoris Oct 10, 2025
c6e3917
Оживляет превью
Inventoris Oct 10, 2025
a378497
Убирает шалости
Inventoris Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/includes/blocks/footer.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<a class="footer-list__link link" href="/subscribe/">Рассылка</a>
</li>
<li class="footer-list__item">
<a class="github-button" href="https://github.com/doka-guide/content" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star doka-guide/content on GitHub">Star</a>
{% include "blocks/github-widget.njk" %}
</li>
</ul>
<ul class="footer__list footer-list font-theme font-theme--code base-list">
Expand Down
17 changes: 17 additions & 0 deletions src/includes/blocks/github-widget.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="github-widget">
<a class="github-widget__repository" href="https://github.com/doka-guide/content" aria-label="Открыть репозиторий контента Доки на GitHub">
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" class="github-widget__star">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.1507 2.3649C10.8306 0.713558 13.1694 0.713567 13.8494 2.3649L16.1856 8.0386L21.4255 8.34683C23.2632 8.45493
23.9912 10.7786 22.5437 11.916L18.1816 15.3433L19.9202 20.2694C20.5648 22.0955 18.497 23.6802 16.9012 22.5831L12
19.2135L7.09881 22.5831C5.50303 23.6802 3.43525 22.0955 4.07977 20.2694L5.81838 15.3433L1.45635 11.916C0.0087955 10.7787
0.736801 8.45493 2.57454 8.34683L7.81442 8.0386L10.1507 2.3649ZM12 3.1264L9.18559 9.9614L2.69199 10.3434L8.18164
14.6567L5.96575 20.935L12 16.7865L18.0343 20.935L15.8184 14.6567L21.308 10.3434L14.8144 9.9614L12 3.1264Z"
/>
</svg>
Звёзд
</a>
<a class="github-widget__stargazers" href="https://github.com/doka-guide/content/stargazers" aria-label="Посмотреть список людей, которые поставили звёздочку репозиторию контента">O_o</a>
</div>
2 changes: 0 additions & 2 deletions src/includes/meta.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@

<!-- 2. Preconnect -->
<!-- 3. Async inline script -->
<!-- 3.1 GitHub Stars Button script -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- 4. CSS with @import -->
<!-- 5. Synchronous JS -->
<!-- 6. CSS without @import -->
Expand Down
1 change: 1 addition & 0 deletions src/scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import './modules/cookie-notification.js'
import './modules/copy-code-snippet.js'
import './modules/people.js'
import './modules/filter-panel.js'
import './modules/github-widget.js'
import './modules/linked-article-navigation.js'
import './modules/practices.js'
import './modules/subscribe-popup.js'
Expand Down
16 changes: 16 additions & 0 deletions src/scripts/modules/github-widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
async function init() {
const stargazers = document.querySelector('.github-widget__stargazers')

if (!stargazers) return

try {
const response = await fetch('https://api.github.com/repos/doka-guide/content')
const { stargazers_count: stargazersCount } = await response.json()

stargazers.textContent = `${(stargazersCount / 1000).toFixed(1).replace(/\.0$/, '')}к`
} catch (error) {
console.error('Ошибка формирования количества звёзд репозитория контента', error)
}
}

init()
62 changes: 62 additions & 0 deletions src/styles/blocks/github-widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
.github-widget {
--widget-padding: .4em .4em .25em;
Copy link
Contributor

@vitya-ne vitya-ne Oct 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

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

Image

Copy link
Member Author

@Inventoris Inventoris Oct 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

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

Image

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

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

image

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

Copy link
Contributor

@vitya-ne vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

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

Вот как у меня:
image
Разве по вертикали ровно ?

Copy link
Contributor

@vitya-ne vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

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

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

Copy link
Member Author

@Inventoris Inventoris Oct 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

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

--bg-lightness: calc(var(--is-light-theme-on)* 87% + var(--is-dark-theme-on)* 20%);
--bg-hover-lightness: calc(var(--is-light-theme-on)* 95% + var(--is-dark-theme-on)* 12%);
display: flex;
}

.github-widget__repository,
.github-widget__stargazers {
font-size: calc(var(--font-size-s) * 0.98);
line-height: 1;
color: hsl(var(--color-base-text));
text-decoration: none;
padding: var(--widget-padding);
border: 1px solid hsl(var(--color-fade));
transition: background-color .2s;
}

@media (width >= 768px) {
.github-widget__repository,
.github-widget__stargazers {
font-size: var(--font-size-s);
}
}

.github-widget__repository {
display: flex;
gap: 5px;
border-radius: 2em 0 0 2em;
background-color: hsl(0 0% var(--bg-lightness));
}

.github-widget__star {
fill: hsl(var(--color-base-text));
}

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

@vitya-ne vitya-ne Oct 10, 2025

Choose a reason for hiding this comment

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

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

Image

Copy link
Member Author

@Inventoris Inventoris Oct 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

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

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

Copy link
Member Author

@Inventoris Inventoris Oct 14, 2025

Choose a reason for hiding this comment

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

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

Image

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

Copy link
Contributor

@vitya-ne vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

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

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

Copy link
Member Author

@Inventoris Inventoris Oct 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

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

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

Copy link
Contributor

@vitya-ne vitya-ne Oct 14, 2025

Choose a reason for hiding this comment

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

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

height: 15px;
margin-top: -.1em;
}
}

.github-widget__stargazers {
border-radius: 0 2em 2em 0;
border-left: none;
}

.github-widget__repository:focus-within,
.github-widget__stargazers:focus-within {
outline: auto 2px -webkit-focus-ring-color;
}

.github-widget:hover .github-widget__repository {
background-color: transparent;
}

.github-widget:hover .github-widget__repository:hover,
.github-widget__stargazers:hover {
background-color: hsl(0 0% var(--bg-hover-lightness));
}
1 change: 1 addition & 0 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
@import url("blocks/block-code.css");
@import url("blocks/details.css");
@import url("blocks/format-block.css");
@import url("blocks/github-widget.css");
@import url("blocks/vote.css");
@import url("blocks/feedback-control-list.css");
@import url("blocks/text-control.css");
Expand Down
1 change: 1 addition & 0 deletions src/styles/index.sc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
@import url("blocks/toc.css");
@import url("blocks/block-code.css");
@import url("blocks/format-block.css");
@import url("blocks/github-widget.css");
@import url("blocks/vote.css");
@import url("blocks/feedback-form.css");
@import url("blocks/callout.css");
Expand Down
2 changes: 2 additions & 0 deletions src/sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const debugStyles = [
'/styles/blocks/font-theme.css',
'/styles/blocks/footer.css',
'/styles/blocks/format-block.css',
'/styles/blocks/github-widget.css',
'/styles/blocks/header.css',
'/styles/blocks/hotkey.css',
'/styles/blocks/index-block.css',
Expand Down Expand Up @@ -127,6 +128,7 @@ const debugScripts = [
'/scripts/modules/feedback-form.js',
'/scripts/modules/filter-panel.js',
'/scripts/modules/form-cache.js',
'/scripts/modules/github-widget.js',
'/scripts/modules/header-quick-search-presenter.js',
'/scripts/modules/header.js',
'/scripts/modules/last-update.js',
Expand Down
Loading