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

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">

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>

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 -->

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'

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()

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));
+}

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");

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");

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',