feat: added main language section & project settings

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.vercel
+.vercel
+package-lock.json

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "vercel dev"
   },
   "repository": {
     "type": "git",

src/fetcher.js

@@ -17,19 +17,21 @@ const fetcher = ({ username }) => {
         getDataFormLabel(html, "Honor Percentile") || "unknow";
       const totalCompletedKata =
         getDataFormLabel(html, "Total Completed Kata") || "0";
+      const mainLanguages = getDataFormLabel(html, "Highest Trained") || "unknown";
       return {
         // name,
         rank,
         honor,
         leaderboardPosition,
         honorPercentile,
         totalCompletedKata,
+        mainLanguages,
       };
     });
 };
 
 const getDataFormLabel = (html, label) => {
-  const regex = new RegExp(`<b>${label}:<\/b>([a-zA-Z0-9 ,.%#])+<\/div>`, "g");
+  const regex = new RegExp(`<b>${label}:<\/b>(.*?)<\/div>`, "g");
   const matches = html.match(regex);
   if (!Array.isArray(matches) || matches.length === 0) return undefined;
   return matches[0].replace(/(<b>.*<\/b>)|(<\/div>)/g, "");

src/templates/codewarsTemplate.js

@@ -12,6 +12,7 @@ export default function codewarsTemplate({ data, style }) {
     leaderboardPosition,
     honorPercentile,
     totalCompletedKata,
+    mainLanguages,
   } = data;
   const { backgroundColor, borderColor, textColor, primaryColor } =
     applyStyle(style);
@@ -21,11 +22,17 @@ export default function codewarsTemplate({ data, style }) {
   const rankCategory = rankArray.length > 0 ? rankArray[1] : "kyu";
   leaderboardPosition = leaderboardPosition.replace("#", "");
 
-  const width = 500;
+  const width = 1000;
   const height = 200;
   const padding = 30;
   const hexagonSize = 100;
 
+  const step = width / 4;
+  const col1 = step / 2;
+  const col2 = step + step / 2;
+  const col3 = step * 2 + step / 2;
+  const col4 = step * 3 + step / 2;
+
   return baseTemplate({
     title: `Codewars Stats ${username}`,
     description: `Stats of ${username} rank: ${rank}, honor: ${honor}, leaderboard position: ${leaderboardPosition}, honor percentile:, ${honorPercentile}, total completed kata: ${totalCompletedKata}`,
@@ -47,20 +54,12 @@ export default function codewarsTemplate({ data, style }) {
       }
     `,
     children: `
-        <line x1 = "${
-          (width - 2 * padding) / 3 + padding - padding
-        }" y1 = "${padding}" x2 = "${
-      (width - 2 * padding) / 3 + padding - padding
-    }" y2="${height - padding}" stroke="${borderColor}" stroke-width="2"/>
-
-      <line x1 = "${
-        ((width - 2 * padding) / 3) * 2 + padding + padding
-      }" y1 = "${padding}" x2 = "${
-      ((width - 2 * padding) / 3) * 2 + padding + padding
-    }" y2="${height - padding}" stroke="${borderColor}" stroke-width="2"/>
+      <line x1="${step}" y1="${padding}" x2="${step}" y2="${height - padding}" stroke="${borderColor}" stroke-width="2"/>
+      <line x1="${step * 2}" y1="${padding}" x2="${step * 2}" y2="${height - padding}" stroke="${borderColor}" stroke-width="2"/>
+      <line x1="${step * 3}" y1="${padding}" x2="${step * 3}" y2="${height - padding}" stroke="${borderColor}" stroke-width="2"/>
 
       ${hexagon({
-        x: width / 2 - hexagonSize / 2,
+        x: col1 - hexagonSize / 2,
         y: padding,
         width: hexagonSize,
         height: hexagonSize,
@@ -71,15 +70,15 @@ export default function codewarsTemplate({ data, style }) {
       })}
 
       ${katanas({
-        x: width / 2 - 15,
+        x: col1 - 15,
         y: padding,
         width: 30,
         height: 30,
         color: primaryColor,
       })}
 
       ${label({
-        x: width / 2,
+        x: col1,
         y: hexagonSize / 2 + padding,
         fontSize: "2em",
         fontWeight: "bold",
@@ -89,7 +88,7 @@ export default function codewarsTemplate({ data, style }) {
       })}
 
       ${label({
-        x: width / 2,
+        x: col1,
         y: hexagonSize / 2 + padding + 20,
         fontSize: "1em",
         fill: textColor,
@@ -98,7 +97,7 @@ export default function codewarsTemplate({ data, style }) {
       })}
 
       ${label({
-        x: width / 2,
+        x: col1,
         y: hexagonSize + padding + 20,
         fontSize: "1em",
         fontWeight: "bold",
@@ -107,51 +106,67 @@ export default function codewarsTemplate({ data, style }) {
       })}
 
       ${label({
-        x: width / 2,
+        x: col1,
         y: hexagonSize + padding + 20 + 20,
         fontSize: ".8em",
         fill: textColor,
         text: honor,
         style: "animation: fadein 0.6s linear forwards",
       })}
 
+      <!-- SECTION 2: COMPLETED KATAS -->
+      ${label({
+        x: col2,
+        y: height / 2 - 10,
+        fontSize: "2em",
+        fontWeight: "bold",
+        fill: textColor,
+        text: totalCompletedKata,
+        style: "animation: fadein 0.6s linear forwards",
+      })}
 
+      ${label({
+        x: col2,
+        y: height / 2 - 10 + 30,
+        fontSize: ".8em",
+        fill: textColor,
+        text: "Total Completed\nkatas",
+      })}
 
       ${label({
-        x: width / 6 - padding / 2,
+        x: col3,
         y: height / 2 - 10,
         fontSize: "2em",
         fontWeight: "bold",
         fill: textColor,
-        text: leaderboardPosition,
+        text: mainLanguages.split(" ")[0] || 'Unknown',
         style: "animation: fadein 0.6s linear forwards",
       })}
 
       ${label({
-        x: width / 6 - padding / 2,
+        x: col3,
         y: height / 2 - 10 + 30,
         fontSize: ".8em",
         fill: textColor,
-        text: "Leaderboard\nposition",
+        text: "Highest Trained",
       })}
 
-
       ${label({
-        x: (width / 6) * 5 + padding / 2,
+        x: col4,
         y: height / 2 - 10,
         fontSize: "2em",
         fontWeight: "bold",
         fill: textColor,
-        text: totalCompletedKata,
+        text: leaderboardPosition,
         style: "animation: fadein 0.6s linear forwards",
       })}
 
       ${label({
-        x: (width / 6) * 5 + padding / 2,
+        x: col4,
         y: height / 2 - 10 + 30,
         fontSize: ".8em",
         fill: textColor,
-        text: "Total Completed\nkatas",
+        text: "Leaderboard\nposition",
       })}
       `,
   });