add gh stars button

Author: Marcin

docusaurus.config.ts

@@ -29,6 +29,14 @@ const config: Config = {
     locales: ["en"],
   },
 
+  scripts: [
+    {
+      src: "/js/load-buttons.js",
+      async: true,
+      defer: true
+    }
+  ],
+
   presets: [
     [
       "classic",
@@ -63,7 +71,6 @@ const config: Config = {
       } satisfies Preset.Options,
     ],
   ],
-
   themeConfig: {
     // Replace with your project's social card
     image: "img/docusaurus-social-card.jpg",
@@ -86,6 +93,16 @@ const config: Config = {
           label: "GitHub",
           position: "right",
         },
+        {
+          position: 'right',
+          href: "https://github.com/MapGrab/map-grab-packages",
+          label: "Stars",
+          className: "github-button",
+          "data-color-scheme": "no-preference: light; light: light; dark: dark;", 
+          "data-size": "large",
+          "data-show-count": true,
+          'aria-label': "Star buttons/github-buttons on GitHub"
+        }
       ],
     },
     footer: {

src/css/custom.css

@@ -74,4 +74,8 @@ pre code:has(.code-block-diff-add-line) {
 
 pre code:has(.code-block-diff-remove-line) {
   padding-left: 40px!important;
+}
+
+.navbar__items--right > span {
+  margin: 6px 6px 0;
 }

static/js/load-buttons.js

@@ -0,0 +1,16 @@
+(() => {
+  const init = () => {
+    const src = "https://buttons.github.io/buttons.js";
+    const s = document.createElement("script");
+    s.setAttribute("src", src);
+    document.body.appendChild(s);
+  };
+
+  [500, 1000, 2000].forEach((time) => {
+    setTimeout(() => {
+      init();
+    }, time);
+  });
+
+  init();
+})();