From ac3f8e2dd3b853b769e31ae7831b1594058dc714 Mon Sep 17 00:00:00 2001
From: Alexey Nikitchenko <nikitchenkoad@gmail.com>
Date: Thu, 19 Dec 2024 13:51:38 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=BA=D0=B0=D1=81=D1=82=D0=BE=D0=BC=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B9=20=D0=B2=D0=B8=D0=B4=D0=B6=D0=B5=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/includes/blocks/footer.njk        |  2 +-
 src/includes/blocks/github-widget.njk | 17 ++++++++
 src/includes/meta.njk                 |  2 -
 src/scripts/index.js                  |  1 +
 src/scripts/modules/github-widget.js  | 16 +++++++
 src/styles/blocks/github-widget.css   | 62 +++++++++++++++++++++++++++
 src/styles/index.css                  |  1 +
 src/styles/index.sc.css               |  1 +
 src/sw.js                             |  2 +
 9 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 src/includes/blocks/github-widget.njk
 create mode 100644 src/scripts/modules/github-widget.js
 create mode 100644 src/styles/blocks/github-widget.css

diff --git a/src/includes/blocks/footer.njk b/src/includes/blocks/footer.njk
index bae91d59f..d3389a9fe 100644
--- a/src/includes/blocks/footer.njk
+++ b/src/includes/blocks/footer.njk
@@ -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">
diff --git a/src/includes/blocks/github-widget.njk b/src/includes/blocks/github-widget.njk
new file mode 100644
index 000000000..29653eefa
--- /dev/null
+++ b/src/includes/blocks/github-widget.njk
@@ -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>
diff --git a/src/includes/meta.njk b/src/includes/meta.njk
index 3d449ccf3..707924ca9 100644
--- a/src/includes/meta.njk
+++ b/src/includes/meta.njk
@@ -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 -->
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 8cae93e2d..6a09a47d5 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -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'
diff --git a/src/scripts/modules/github-widget.js b/src/scripts/modules/github-widget.js
new file mode 100644
index 000000000..6124c1336
--- /dev/null
+++ b/src/scripts/modules/github-widget.js
@@ -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()
diff --git a/src/styles/blocks/github-widget.css b/src/styles/blocks/github-widget.css
new file mode 100644
index 000000000..9f8c2b2c7
--- /dev/null
+++ b/src/styles/blocks/github-widget.css
@@ -0,0 +1,62 @@
+.github-widget {
+  --widget-padding: .4em .4em .25em;
+  --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;
+    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));
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 8c95ca1e4..dff9eb9e5 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -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");
diff --git a/src/styles/index.sc.css b/src/styles/index.sc.css
index debe33703..968b3f8fb 100644
--- a/src/styles/index.sc.css
+++ b/src/styles/index.sc.css
@@ -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");
diff --git a/src/sw.js b/src/sw.js
index 6b715c21d..ebdbb399c 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -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',
@@ -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',