feat: replace github star badges with SVG images

.github/workflows/master.yml

@@ -48,6 +48,9 @@ jobs:
         if: github.event_name != 'pull_request'
         run: yarn crowdin:sync
 
+      - name: Generate footer stars
+        run: yarn generate:footer-stars
+
       - name: Build
         run: yarn build
 

.github/workflows/pr_ci.yml

@@ -22,5 +22,8 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
+      - name: Generate footer stars
+        run: yarn generate:footer-stars
+
       - name: Build website
         run: yarn build --locale en

docusaurus.config.js

@@ -234,72 +234,8 @@ module.exports = {
         },
         {
           title: "More",
-          items: [
-            {
-              html: `
-                <a href="https://github.com/casbin/casbin" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/casbin/casbin?label=Casbin&style=social">
-                </a>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                <a href="https://github.com/casbin/jcasbin" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/casbin/jcasbin?label=jCasbin&style=social">
-                </a>
-              `,
-            },
-            {
-              html: `
-                <a href="https://github.com/casbin/node-casbin" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/casbin/node-casbin?label=Node-Casbin&style=social">
-                </a>
-                &nbsp;&nbsp;
-                <a href="https://github.com/php-casbin/php-casbin" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/php-casbin/php-casbin?label=PHP-Casbin&style=social">
-                </a>
-              `,
-            },
-            {
-              html: `
-                <a href="https://github.com/casbin/pycasbin" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/casbin/pycasbin?label=PyCasbin&style=social">
-                </a>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                <a href="https://github.com/casbin/Casbin.NET" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/casbin/Casbin.NET?label=Casbin.NET&style=social">
-                </a>
-              `,
-            },
-            {
-              html: `
-                <a href="https://github.com/casbin/casbin-cpp" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/casbin/casbin-cpp?label=Casbin-CPP&style=social">
-                </a>
-                &nbsp;&nbsp;&nbsp;&nbsp;
-                <a href="https://github.com/casbin/casbin-rs" target="_blank">
-                  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/casbin/casbin-rs?label=Casbin-RS&style=social">
-                </a>
-              `,
-            },
-            {
-              html: `
-                <a href="https://twitter.com/casbinHQ" target="_blank">
-                  <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/casbinHQ?style=social">
-                </a>
-              `,
-            },
-            {
-              html: `
-<script>
-var _hmt = _hmt || [];
-(function() {
-  var hm = document.createElement("script");
-  hm.src = "https://hm.baidu.com/hm.js?2c0ffc6f8d49e98d964d59d7aa4cbf34";
-  var s = document.getElementsByTagName("script")[0]; 
-  s.parentNode.insertBefore(hm, s);
-})();
-</script>
-`,
-            },
-          ],
+          className: "footer-more-column",
+          items: [],
         },
       ],
       logo: {

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
+    "generate:footer-stars": "node scripts/generate-footer-stars.js",
     "start": "node scripts/start.js",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",

scripts/generate-footer-stars.js

@@ -0,0 +1,90 @@
+const fs = require("fs");
+const path = require("path");
+
+const badges = require("../src/components/FooterMoreBadges/badges.json");
+
+const outputPath = path.join(
+  __dirname,
+  "..",
+  "src",
+  "components",
+  "FooterMoreBadges",
+  "stars.json"
+);
+
+function getRepoKey(owner, repo) {
+  return `${owner}/${repo}`;
+}
+
+function readExistingStars() {
+  if (!fs.existsSync(outputPath)) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(fs.readFileSync(outputPath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+async function fetchStars() {
+  const headers = {
+    Accept: "application/vnd.github+json",
+    "User-Agent": "casbin-website-footer-stars",
+  };
+
+  if (process.env.GITHUB_TOKEN) {
+    headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;
+  }
+
+  const results = await Promise.all(
+    badges.map(async({owner, repo}) => {
+      const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`, {
+        headers,
+      });
+
+      if (!response.ok) {
+        const body = await response.text();
+        throw new Error(`Failed to fetch stars for ${owner}/${repo}: ${response.status} ${body}`);
+      }
+
+      const data = await response.json();
+
+      if (typeof data.stargazers_count !== "number") {
+        throw new Error(`Missing stargazers_count for ${owner}/${repo}`);
+      }
+
+      return [getRepoKey(owner, repo), data.stargazers_count];
+    })
+  );
+
+  return Object.fromEntries(results);
+}
+
+async function main() {
+  const existingStars = readExistingStars();
+
+  try {
+    const stars = await fetchStars();
+    const payload = {
+      generatedAt: new Date().toISOString(),
+      stars,
+    };
+
+    fs.writeFileSync(outputPath, `${JSON.stringify(payload, null, 2)}\n`);
+    process.stdout.write(`Updated footer stars at ${outputPath}\n`);
+  } catch (error) {
+    if (existingStars?.stars) {
+      process.stderr.write(`${error.message}\nUsing existing footer stars JSON.\n`);
+      return;
+    }
+
+    throw error;
+  }
+}
+
+main().catch((error) => {
+  process.stderr.write(`${error.stack || error}\n`);
+  process.exit(1);
+});

src/components/FooterMoreBadges/badges.json

@@ -0,0 +1,50 @@
+[
+  {
+    "label": "Casbin",
+    "owner": "casbin",
+    "repo": "casbin",
+    "href": "https://github.com/casbin/casbin"
+  },
+  {
+    "label": "jCasbin",
+    "owner": "casbin",
+    "repo": "jcasbin",
+    "href": "https://github.com/casbin/jcasbin"
+  },
+  {
+    "label": "Node-Casbin",
+    "owner": "casbin",
+    "repo": "node-casbin",
+    "href": "https://github.com/casbin/node-casbin"
+  },
+  {
+    "label": "PHP-Casbin",
+    "owner": "php-casbin",
+    "repo": "php-casbin",
+    "href": "https://github.com/php-casbin/php-casbin"
+  },
+  {
+    "label": "PyCasbin",
+    "owner": "casbin",
+    "repo": "pycasbin",
+    "href": "https://github.com/casbin/pycasbin"
+  },
+  {
+    "label": "Casbin.NET",
+    "owner": "casbin",
+    "repo": "Casbin.NET",
+    "href": "https://github.com/casbin/Casbin.NET"
+  },
+  {
+    "label": "Casbin-CPP",
+    "owner": "casbin",
+    "repo": "casbin-cpp",
+    "href": "https://github.com/casbin/casbin-cpp"
+  },
+  {
+    "label": "Casbin-RS",
+    "owner": "casbin",
+    "repo": "casbin-rs",
+    "href": "https://github.com/casbin/casbin-rs"
+  }
+]

src/components/FooterMoreBadges/index.js

@@ -0,0 +1,90 @@
+import React from "react";
+import styles from "./styles.module.css";
+import githubBadges from "./badges.json";
+import starsData from "./stars.json";
+
+const GITHUB_BADGES = githubBadges;
+const STAR_COUNTS = starsData.stars ?? {};
+const STAR_FORMATTER = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  compactDisplay: "short",
+  maximumFractionDigits: 1,
+});
+
+function getRepoKey(owner, repo) {
+  return `${owner}/${repo}`;
+}
+
+function formatStars(count) {
+  return STAR_FORMATTER.format(count).replace(/\.0(?=[A-Za-z])/u, "").toLowerCase();
+}
+
+function BadgeLink({href, ariaLabel, children}) {
+  return (
+    <a
+      className={`footer__link-item ${styles.badgeLink}`}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={ariaLabel}
+    >
+      {children}
+    </a>
+  );
+}
+
+function GitHubStarBadge({label, stars}) {
+  const safeStars = Number.isFinite(stars) ? stars : 0;
+  const formattedStars = formatStars(safeStars);
+
+  return (
+    <span className={styles.badgeSurface} aria-hidden="true">
+      <span className={styles.badgeLabelSection}>
+        <img className={styles.badgeIcon} src="/img/footer/github.svg" alt="" />
+        <span className={styles.badgeText}>{label}</span>
+      </span>
+      <span className={styles.badgeDivider} />
+      <span className={styles.badgeCountSection}>{formattedStars}</span>
+    </span>
+  );
+}
+
+function XFollowBadge() {
+  return (
+    <span className={`${styles.badgeSurface} ${styles.followBadge}`} aria-hidden="true">
+      <img className={styles.badgeIcon} src="/img/footer/x.svg" alt="" />
+      <span className={styles.badgeText}>Follow @casbinHQ</span>
+    </span>
+  );
+}
+
+function GitHubBadgeLink({badge, stars}) {
+  const {label, href} = badge;
+
+  return (
+    <BadgeLink href={href} ariaLabel={`${label} GitHub repository`}>
+      <GitHubStarBadge label={label} stars={stars} />
+    </BadgeLink>
+  );
+}
+
+function XBadgeLink() {
+  return (
+    <BadgeLink href="https://twitter.com/casbinHQ" ariaLabel="Follow @casbinHQ on X">
+      <XFollowBadge />
+    </BadgeLink>
+  );
+}
+
+export default function FooterMoreBadges() {
+  return (
+    <div className={styles.badgesGrid}>
+      {GITHUB_BADGES.map((badge) => {
+        const repoKey = getRepoKey(badge.owner, badge.repo);
+
+        return <GitHubBadgeLink key={repoKey} badge={badge} stars={STAR_COUNTS[repoKey]} />;
+      })}
+      <XBadgeLink />
+    </div>
+  );
+}

src/components/FooterMoreBadges/stars.json

@@ -0,0 +1,13 @@
+{
+  "generatedAt": "2026-04-13T13:15:04.436Z",
+  "stars": {
+    "casbin/casbin": 19992,
+    "casbin/jcasbin": 2631,
+    "casbin/node-casbin": 2882,
+    "php-casbin/php-casbin": 1326,
+    "casbin/pycasbin": 1724,
+    "casbin/Casbin.NET": 1309,
+    "casbin/casbin-cpp": 250,
+    "casbin/casbin-rs": 1090
+  }
+}