Guide translate rank card (#203)

* 📝 feat(docs): add Cards Translation guide to topic data

* 📝✨ feat(docs): add cards translation guide example

* 🆕 feat(test): add translation test for cards

* 📦 feat: add translated card SVG for testing purposes

* 🧪 feat: add translation test script to package.json

apps/docs/src/pages/guide/[topic]/_data.tsx

@@ -45,6 +45,11 @@ export const pages = [
         displayName: "Rank Card",
         component: lazy(() => import("../_guides/Examples/rank-card.md")),
       },
+      {
+        name: "cards-translation.md",
+        displayName: "Cards Translation",
+        component: lazy(() => import("../_guides/Examples/cards-translation.md")),
+      },
     ],
   },
   {

apps/docs/src/pages/guide/_guides/Examples/cards-translation.md

@@ -0,0 +1,18 @@
+## Cards Translation
+
+The `setTextStyles` method is used to customize the text styles for different elements in a rank card or leaderboard. This method allows for the modification of default labels for level, experience points (XP), and rank display.
+
+## Usage
+
+For Rank Card or Leaderboard :
+```ts
+const rankCard = new RankCardBuilder()
+    .setTextStyles({
+        level: 'NIVEAU :', // Custom text for the level
+        xp: 'EXP :',       // Custom text for the experience points
+        rank: 'CLASSEMENT :' // Custom text for the rank
+    })
+```
+
+# Output
+![xp-card](https://raw.githubusercontent.com/neplextech/canvacord/main/packages/canvacord/test/normal/cardTranslated.svg)

packages/canvacord/package.json

@@ -14,6 +14,7 @@
         "test": "vitest",
         "coverage": "vitest --coverage",
         "test:main": "tsx ./test/index.ts",
+        "test:translation": "tsx ./test/cards-translation.ts",
         "test:lb": "tsx ./test/leaderboard.ts",
         "test:jsx": "tsx ./test/jsxTest.tsx",
         "test:demo": "tsx ./test/demo.tsx",

packages/canvacord/test/cards-translation.ts

@@ -0,0 +1,42 @@
+import { RankCardBuilder, Font, BuiltInGraphemeProvider } from "../src";
+import { writeFileSync } from "fs";
+import { RankCardUserStatus } from "../src/components/rank-card/NeoClassicalCard";
+
+Font.loadDefault();
+
+async function main() {
+  const card = new RankCardBuilder()
+    .setDisplayName("Wumpus 😍")
+    .setUsername("@wumpus")
+    .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png?size=256")
+    .setCurrentXP(300)
+    .setRequiredXP(600)
+    .setProgressCalculator(() => {
+      return Math.floor(Math.random() * 100);
+    })
+    .setLevel(2)
+    .setRank(5)
+    .setOverlay(90)
+    .setBackground("#23272a")
+    .setTextStyles({level: 'NIVEAU :', xp: 'EXP :', rank: 'CLASSEMENT :'})
+    .setStatus(RankCardUserStatus.Online)
+    .setGraphemeProvider(BuiltInGraphemeProvider.FluentEmojiFlat);
+
+  card
+    .build({
+      format: "png",
+    })
+    .then((data) => {
+      writeFileSync(`${__dirname}/normal/cardTranslated.png`, data);
+    });
+
+  card
+    .build({
+      format: "svg",
+    })
+    .then((data) => {
+      writeFileSync(`${__dirname}/normal/cardTranslated.svg`, data);
+    });
+}
+
+main();