feat: rank badges

api/index.js

@@ -37,6 +37,7 @@ export default async (req, res) => {
     number_format,
     border_color,
     rank_icon,
+    badge_style,
     show,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
@@ -117,6 +118,7 @@ export default async (req, res) => {
         locale: locale ? locale.toLowerCase() : null,
         disable_animations: parseBoolean(disable_animations),
         rank_icon,
+        badge_style,
         show: showStats,
       }),
     );

src/cards/stats-card.js

@@ -237,6 +237,7 @@ const renderStatsCard = (stats, options = {}) => {
     locale,
     disable_animations = false,
     rank_icon = "default",
+    badge_style = "default",
     show = [],
   } = options;
 
@@ -507,7 +508,7 @@ const renderStatsCard = (stats, options = {}) => {
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <g class="rank-text">
-          ${rankIcon(rank_icon, rank?.level, rank?.percentile)}
+          ${rankIcon(rank_icon, rank?.level, rank?.percentile, badge_style)}
         </g>
       </g>`;
 

src/cards/types.d.ts

@@ -1,5 +1,6 @@
 type ThemeNames = keyof typeof import("../../themes/index.js");
 type RankIcon = "default" | "github" | "percentile";
+type BadgeStyle = "default" | null;
 
 export type CommonOptions = {
   title_color: string;
@@ -27,6 +28,7 @@ export type StatCardOptions = CommonOptions & {
   ring_color: string;
   text_bold: boolean;
   rank_icon: RankIcon;
+  badge_style: BadgeStyle;
   show: string[];
 };